前端日记

面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？ 一、为什么要划分使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高 在划分项目结构的时候，需要遵循一些基本的原则： 文件夹和文件夹内部文件的语义一致性 单一入口/出口 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用 公共的文件应该以绝对路径的方式从根目录引用 /src 外的文件不应该被引入 文件夹和文件夹内部文件的语义一致性我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹 这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些 单一入口/出口举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口 12345// 错误用法import seller ...

面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路 一、什么是虚拟DOM虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex） 实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上 在Javascript对象中，虚拟DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应 在vue中同样使用到了虚拟DOM技术 定义真实DOM 1234<div id="app"> <p class="p">节点内容</p> < ...

面试官：有使用过vue吗？说说你对vue的理解 一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解 石器时代 文明时代 工业革命时代 百花齐放时代 石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网 最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年） 文明时代ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似于下面这样，其实就是Java + HTML `<%@ page language=”java” contentType=”text/html; charset=utf-8”    pageEncoding=”utf-8”% ...

面试官：vue3有了解过吗？能说说跟vue2的区别吗？ 一、Vue3介绍关于vue3的重构背景，尤大是这样说的： 「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了 在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」 简要就是： 利用新的语言特性(es6) 解决架构问题 哪些变化 从上图中，我们可以概览Vue3的新特性，如下： 速度更快 体积减少 更易维护 更接近原生 更易使用 速度更快vue3相比vue2 重写了虚拟Dom实现 编译模板的优化 更高效的组件初始化 undate性能提高1.3~2倍 SSR速度提高了2~3倍 体积更小通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的 能够tree-shaking，有两大好处： 对开发人员，能够对vue实现更多其他的 ...

面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？ 开始之前Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？ 通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解 正文一、Options ApiOptions API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑 如下图： 可以看到Options代码编写方式，如果是组件状态，则写在data属性上，如果是方法，则写在methods属性上… 用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效 然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解 二、Composi ...

面试官：Vue3.0的设计目标是什么？做了哪些优化 一、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题 随着功能的增长，复杂组件的代码变得越来越难以维护 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制 类型推断不够友好 bundle的时间太久了 而 Vue3 经过长达两三年时间的筹备，做了哪些事情？ 我们从结果反推 更小 更快 TypeScript支持 API设计一致性 提高自身可维护性 开放更多底层功能 一句话概述，就是更小更快更友好了 更小Vue3移除一些不常用的 API 引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了 更快主要体现在编译方面： diff算法优化 静态提升 事件监听缓存 SSR优化 下篇文章我们会进一步介绍 更友好vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力 这里代码简单演示下： 存在一个获取鼠标位置的函数 12345678910111213141516imp ...

面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？ 一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可 这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的 Bug 和更少的程序体积 二、需求分析实现一个Modal组件，首先确定需要完成的内容： 遮罩层 标题内容 主体内容 确定和取消按钮 主体内容需要灵活，所以可以是字符串，也可以是一段 html 代码 特点是它们在当前vue实例之外独立存在，通常挂载于body之上 除了通过引入import的形式，我们还可通过API的形式进行组件的调用 还可以包括配置全局样式、国际化、与typeScript结合 三、实现流程首先看看大致流程： 目录结构 组件内容 实现 API 形式 事件处理 其他完善 目录结构Modal组件相关的目录结构 1234567 ...

面试官：Vue3.0性能提升主要是通过哪几方面体现的？ 一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染 试想一下，一个组件结构如下图 12345678910<template> <div id="content"> <p class="text">静态文本</p> <p class="text">静态文本</p> <p class="text">{{ message }}</p> <p class="text">静态文本</p> ... <p class= ...

面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？ 一、Object.defineProperty定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 为什么能实现响应式通过defineProperty 两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的 setter 函数，当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined 下面通过代码展示： 定义一个响应式函数defineReactive 123456789101112131415161718function update() { app.innerText = obj.foo}function ...

面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？ 一、是什么Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination 简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码 如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去 而treeshaking则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接作出蛋糕 也就是说 ，tree shaking 其实是找出使用的代码 在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到 123import Vue from 'vue' Vue.nextTick(() => {}) 而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中 123im ...