--- theme: smartblue highlight: atom-one-dark --- * [2024前端年末备战面试题——HTML篇](https://juejin.cn/post/7312330825206071347) * [2024前端年末备战面试题——CSS篇](https://juejin.cn/post/7312476561679335450) * [2024前端年末备战面试题——浏览器篇](https://juejin.cn/spost/7312724606606901289) * [2024前端年末备战面试题——网络篇](https://juejin.cn/post/7313758022486310951) * [2024前端年末备战面试题——JavaScript篇](https://juejin.cn/post/7316202725330436123) * [2024前端年末备战面试题——构建工具与git](https://juejin.cn/post/7321971977861513243) # 框架篇（Vue）本文是本人根据**Vue官网**上的内容或者**网上一些其他朋友的文章**以及**自己的理解**，整理归纳出来的一篇**Vue**方面的面试题及知识点，其中不免有许多漏掉的问题或是答案，发现错误的或者是有什么问题需要补充的朋友们，可以在评论区留言，大家虚心交流，一起进步。 ## 1. Vue是什么 `Vue`是一款基于`MVVM`架构的`渐进式框架`，它主要用于构建`单页面应用（spa）`，它的特点有`声明式渲染`、`响应式`两大点。 ### （1）什么是MVVM `MVVM`就是`Model-View-ViewModel`的缩写，它是一种`架构模式`，是`MVC（Model-View-Controller）`的改进版。 * `Model`：指的就是负责`应用的数据处理以及整体业务逻辑`（相当于后端）； * `View`：指的就是`展示给用户的界面`（相当于HTML页面）； * `MVVM中的ViewModel`：指的就是`视图模型`，它是`View`和`Module`沟通的桥梁，用于展示数据、处理用户交互、并且更新模型，并且`视图`会与`视图模型`进行关联，将`视图`中的一些方法和属性封装在`视图模型中`，然后通过`视图模型`和`模型`之间获取、更新数据，然后将真实的数据反映到`视图`中。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae88d3e15297494fa7c5dab6e28f9443~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1230&h=567&s=50379&e=png&b=fdfdfd) `MVVM`的架构的优点有： * `低耦合`：视图（View）可以`独立于Model变化和修改`，`一个ViewModel`可以绑定到`不同的View上`，当`View变化`的时候`Model可以不变`，当`Model变化`的时候`View也可以不变`； * `可复用`：可以将`一个ViewModule`的逻辑给`多个View`使用； * `独立开发`：开发人员可以专注于`业务逻辑和数据的开发（ViewModel）`，设计人员可以专注于页面设计； * `可测试`：因为`ViewModel`是独立于界面的，因此测试人员可以专注于`业务逻辑`，而无需依赖具体的页面实现； ### （2）什么是渐进式框架 `渐进式框架`指的就是一种`框架概念`，一般来说，使用渐进式框架时，无需引入其所有功能，而是`需要什么就用什么`，就拿`Vue`来说，我们可以引入一个`vue.js的文件`，然后在`其它框架中`去使用`Vue`，也可以使用它的`脚手架`，来进行构建一个Vue项目，这完全取决于用户想怎么使用，而框架为我们提供了`多种使用方式`以及`各个模块的功能`。 `渐进式框架`的`优点`有： * `灵活`：开发者可以`按需引入`框架的各个功能； * `可维护性`：开发者可以先`少量引入框架部分功能`，然后在需要的时候引入其它功能，防止项目从一开始就变得`结构复杂`、`难以维护`。 ### （3）什么是SPA页面 `SPA`就是`单页面应用`，这是一种`网站的设计模式`，它的意思就是一个网站中，只有一个`HTML文件`，用户在进行页面交互时，或者刷新页面时，只是利用`JavaScript动态变换HTML的内容`，而`并非真正意义上的变换页面`。 `SPA应用`的优点： * `良好的交互体验`：因为用户在交互时，只是动态刷新局部内容，并不用请求新的`HTML文件`，因此也就不会造成`长时间的页面白屏`； * `良好的工作模式`：更好的实现`前后端分离`，让不同岗位的工程师专注于自己的领域，提升代码的性能以及复用性； * `路由`：使用`前端路由`，通过`浏览器的API`来模拟`前进后退`操作，让用户在使用感知上并无变化。 `SPA应用`的缺点： * `首页开销大`：因为所有的资源都需要在首页进行加载，因此资源过多时会产生`白屏问题`； * `内存占用较大`：在SPA中，一旦页面加载完成，所有的页面内容和状态都保存在内存中，如果页面过于复杂或用户长时间停留在页面上，可能导致内存占用较大，影响设备性能； * `不利于SEO`：SPA页面在初始化时只有HTML的基本骨架，其它内容需要依赖于JavaScript的异步加载，浏览器不能完整的捕获到页面内容，不利于SEO。 ### （4）什么是声明式渲染 `声明式渲染`，就是你只需要告诉框架你的`目的`，至于它内部如何达成你的目的，你无需关心。与之对应的是`命令式渲染`，你需要一步步操作，让框架执行你的操作，最终达成你的目的。比如原生js的编程，我们想改变标签的内容： ```html

原内容

``` 而在Vue中，我们只需要： ```html ``` 看似Vue更麻烦，是因为我们使用了Vue的组件模板，看起来繁杂了。但是这只是一个标签的情况下，如果想给`多个标签修改内容`，在我们原生开发的过程中，每次都要`先获取标签`，然后修改标签内容，但是在Vue中，我们只需要将`标签和内容建立联系`，然后只修改内容，就可以自动让标签中的内容也更改。这得益于Vue强大的`模板编译`以及`响应式`。 ## 2. Vue的生命周期 ### （1）Vue2 在`Vue2`中，共有以下几个生命周期： * `beforeCreate`：在组件`实例化之后`，但是在`数据监听和事件配置之前`调用，此时`data、methods`中的属性未初始化，访问不到正确内容，`this`也无法访问； * `created`：数据已经`监听完毕`，但是还未进行挂载，此时可以访问到`data、methods中的内容`，但是`无法访问到dom内容`； * `beforeMount`：在`组件挂载之前`调用，此时`模板编译完成`，但是还未将模板渲染成dom； * `mounted`：组件已经完成`挂载`，可以获取到一些`dom信息`； * `beforeUpdate`：`数据更新，dom未重新渲染之前`调用； * `update`：`数据更新，dome重新渲染之后`调用； * `beforeDestroy`：`组件实例卸载之前`调用，这时可以将组件中的一些`定时器`等进行清理； * `destroyed`：`组件实例销毁之后`调用，这时组件实例已经完全销毁，无法访问到组件内的内容； * `activated`：`特殊`的生命周期函数，只在`当前组件`设置了`keep-alive`时调用，因为设置`keep-alive`时，组件`不会销毁`，监听不到组件的`销毁以及创建`，该生命周期函数代表`当前组件处于活跃状态`（当前组件没有展示）； * `deactivated`：和`activated`类似，只是它代表`当前组件处于非活跃状态`。 ### （2）Vue3 * 在`Vue3`中，去掉了`beforeCreate`、`created`两个生命周期函数，用`setup`来替代（也就是说在setup中写的代码，相当于之前在这两个函数中写的代码）； * 在`Vue3中`，将`beforeDestroy`、`destroyed`两个生命周期函数更名为`onBeforeUnmount`、`onUnmounted`； * 在`Vue3`中，其它生命周期函数并没有改变，只是在每个生命周期函数前面加上了一个`on`。 ## 3. keep-alive的作用 `keep-alive`是一个`内置组件`，它不会被渲染到dom树中，普通的组件在被替换之后，会`销毁组件`，组件中的一些状态都会被销毁，当这个组件再被创建时，组件内的所有属性和方法都是`初始状态的`。而`keep-alive`的作用就是，用`keep-alive包裹某个组件`，在这个组件被替换时，`保存当前组件的状态`，并触发`deactivated`函数，当该组件再次被激活时，组件内的属性和方法都是`上次被替换时的状态`，也就是说它的作用就是`缓存组件`。 ### （1）使用方法 `keep-alive`组件会默认缓存`所有组件实例`，但是它有三个属性，分别为`include（包含）`、`exclude（排除）`、`max（最大缓存数）`。 * `include`用于表明`哪些组件可以被缓存`，`exclude`用于表明`哪些组件不可以被缓存`； * 给这两个属性传参可以通过传入`字符串（include="a,b"）`、`数组（:include="['a','b']"）`、`正则（:include="/a|b/"）`的方式； * `正则`、`数组`格式的参数，需要使用`v-bind:incluce(exclude)`进行传参； * `max`表示最大缓存数，比如规定了`max=10`，当缓存的组件达到10个时，如果又添加进来一个`新的需要缓存的组件`，就会在`已缓存的10个组件中`找出`最久没有被访问的`，然后将新的组件替换（LRU算法）。 ### （2）传入的a、b分别是什么在给`keep-alive`的`include、exclude`传参时，我们需要传入的是`组件的name值`，也就是说，`keep-alive`组件会将我们传入的值视为`组件实例的name`，然后就会去找到相应的组件实例，对它们进行`include或者exclude`。 * 在`Vue2`中，每次创建一个组件实例时，可以给当前实例添加`name属性`； * 在`Vue3`中，如果我们使用`composition api`时，也可以给当前组件实例添加`name属性`； * 在`Vue3`中，还有一个`setup语法糖`，在使用`setup语法糖时`，无法给组件实例添加`name属性`了，但是在`Vue3.3+中`，Vue为我们提供了一个`defineOptions宏`，可以在它里面声明一些组件选项（比如name）；如果组件`没有设置name值`，找不到对应的组件怎么办呢？如果没有找到对应name的组件实例，就会查看组件在被`导入时定义在components中的名称`，比如： ```js import a from './a.vue' export default { name: B, components: { A: a } } ``` 此时就会视作，`A`就是组件`a`的name，如果`include/exclude`中有`A`这个字符，就会把`组件a`进行`include/exclude`。 ## 4. keep-alive的原理 `keep-alive`是一个内置的`组件`，因此它其实和普通组件类似，只是在keep-alive组件的`不同生命周期函数`中做了一些特殊的处理，可以缓存我们的组件，主要是通过`created`、`destroyed`、`mounted`、`render`四个函数进行处理。 ### （1）created阶段在`created阶段`，keep-alive组件会创建一个`空对象`，用于存放需要缓存的组件的信息。 ### （2）render阶段在`render`阶段，就会拿`插槽`中的内容，然后获取插槽中的`第一个组件`，这也是为什么在keep-alive中写多个组件时，`只会缓存第一个`的原因。拿到第一个组件之后，就会去获取当前组件的`name`，然后和`include/exclude`中的内容匹配，如果判断该组件`不需要缓存`，就直接返回组件VNode信息，如果需要缓存，就执行下一步操作。缓存时，会看组件的VNode信息中有没有`key`，如果没有key，就会根据组件标签（tag）和cid拼接成一个key，然后判断`key是否已经存在于缓存中`，如果不存在，就将key和当前VNode作为一组数据进行缓存，如果存在，就会把当前VNode的组件实例替换为`缓存中当前key的组件实例`，最后返回VNode，也就是说当我们访问一个组件时，如果`命中了缓存`，那么访问的其实就是`缓存中上一次该组件的实例信息`，并且每次命中缓存时，都会`调整该组件在缓存中的位置`，会移动到`末尾`。这时如果设置了`max`，当缓存内容超出这个范围时，就会`删掉缓存中的第一项`（因为最近访问的组件缓存都被移动到后面了，所以排在第一位的肯定就是最久未访问的了）。 ### （3）mounted阶段在`mounted`阶段，主要对`include/exclude`的值进行了`监听`，监听到值有变化时，说明`需要被缓存的组件有改动`，这时就会去遍历已缓存的组件，判断哪些已经`不需要被缓存`，然后将它们移除出缓存数据。 ### （4）destroyed阶段在`destroyed`阶段，说明keep-alive组件要销毁了，那它组件实例上的一些方法和属性也都会被销毁，因此在这个阶段就会`清除所有已缓存的组件实例`。 ## 5. Vue中常见的指令 Vue中常见的指令有以下几种： * `v-bind`：用于`动态`绑定`一个或多个属性`，它的语法糖是`:`，在Vue3中，v-bind可以作用于`style标签中的CSS属性`； * `v-model`：用于`双向绑定`，一般用于`input`之上，在input中输入内容，会改变data的数据，改变data数据也会让input的内容发生改变； * `v-on`：用于监听`dom的事件`，如点击事件、input事件、滚动事件等，它的语法糖为`@`； * `v-if/v-else-if/v-else`：用于`条件渲染`，在标签上使用`v-if`时，需要传入判断条件，满足条件的才会渲染，不满足的不会渲染； * `v-show`：用于`条件展示`，因为使用`v-show`和`v-if`不一样，`v-show`的标签是会进行渲染的，`v-show`的作用只是改变标签的`CSS中的display属性`； * `v-html`：用于`将HTML模板插入标签内容`，这种场景常在后台返回`富文本`时常用，平时尽量不要用，因为很容易导致`XSS攻击`； * `v-for`：用于`循环渲染`，渲染多个`相同类型的标签`，标签中的内容可以自己根据条件定义； * `v-slot`：只能用于`template`标签上，用于`绑定插槽`，传入指定的插槽名从而绑定对应的插槽，语法糖为`#`； * `v-pre`：用于`跳过编译`，普通写在模板中的标签会被`vue给编译`，如果给标签添加了该属性，就会跳过该标签的编译，比如标签中想展示`{{}}`这种字符，如果交由vue编译，会将该字符编译为`mustache语法`，使用该属性就不会编译了，就会当作普通的字符来处理； * `v-once`：用于`仅渲染一次`，该标签渲染一次之后，在后续页面的更新中，会将该标签视为`静态节点`，跳过更新，以用来优化性能； * `v-memo`：用于`缓存节点`，需要传入一个`数组`，如果下次更新时，数组中的元素都没有改变，那么该标签和它的子节点就会使用缓存，不进行更新，当传入一个`空数组时`，效果和`v-once一样`，通常可以和`v-for`一起使用，来达到优化的效果； ## 6. v-if和v-show的区别 * `v-if`会根据判断条件控制`是否渲染元素`，如果不满足条件，元素不会被渲染，节约内存； * `v-show`只是根据条件修改元素的`display属性`，元素还是会被渲染，只是控制在页面是否展示； * 在一个元素`频繁的在展示和隐藏之间切换时`，使用`v-show性能更好`，因为可以节约每次重新渲染带来的开销； * 在一个元素`永久性隐藏或者展示时`，使用`v-if性能更好`，因为可以减少dom结构。 ## 7. Vue中常见的修饰符 ### （1）事件修饰符 * `.stop`：阻止事件冒泡； * `.prevent`：阻止默认事件； * `.self`：只有事件在当前元素自身触发时，才会调用函数； * `.capture`：捕获模式，内部元素的事件在被内部元素处理`之前`，先被`外部元素处理`； * `.once`：该事件只会触发一次； * `.passive`：一般用于`触摸事件`的监听器，可以用来`改善移动端设备的滚动性能`； ### （2）按键修饰符 * `.enter`：仅在`Enter`键时调用； * `.page-down`：仅在`PageDown`键时调用； * `.tab`：仅在`tab`键时调用； * `.delete`：仅在`delete或Backspace`键时调用； * `.esc`：仅在`esc`键时调用； * `.space`：仅在`space`键时调用； * `.up`：仅在`up`键时调用； * `.down`：仅在`down`键时调用； * `.left`：仅在`left`键时调用； * `.right`：仅在`right`键时调用； * `.ctrl`：仅在`ctrl`键时调用； * `.alt`：仅在`alt`键时调用； * `.shift`：仅在`shift`键时调用； * `.meta`：在`Windows`上是`Win键`，在`Mac`上是`Command键`，不同机器上键位不同。 ### （3）鼠标按键修饰符 * `.left`：鼠标左键触发； * `.right`：鼠标右键触发； * `.middle`：鼠标中键触发； ### .sync修饰符 `.sync`修饰符是`v-bind:xxx`和`@update:xxx`的语法糖，在Vue3中已被移除，使用`v-model:xxx替代`。 ```html ``` ## 8. Vue中组件的传参 ### （1）父子组件传参 #### v-bind & props 这种方式主要场景是`父组件向子组件传参`，`父组件`通过`v-bind:xxx`的形式传递参数，子组件通过在组件实例的`props`属性中声明需要的参数以及类型。 ```html ``` 当父组件中有一个对象，想把对象中`所有的属性`传递给子组件，但是又不想一个个去写`v-bind`，这时候可以把`父组件`这么做： ```html ``` #### $emit/emit 这种方式主要场景是`子组件向父组件传参`，`子组件`通过`emits定义事件`，然后在有需要时向`父组件`抛出事件，父组件通过`@eventname`的方式接收子组件的事件以及参数。 ```html ``` #### \$parent/$children(Vue3被移除) ```html ``` ### （2）多级组件传参 #### provide/inject `provide/inject`用于`多级组件间的传参`，只需要在需要传参的地方使用`provide`，在它的`其它后代组件`中使用`inject`，就可以获取到传来的值。 ```html ``` #### \$attrs/$listeners(Vue3中被移除) `$attrs`的值是`父组件传过来的值中，没有被当前组件props接收的值`。 `$listeners`的值是`后代组件传过来的事件中，没有被当前组件接收的方法`。也就是说，它们一个是为了`传递属性`，一个是为了`传递方法`。 ```html ``` 利用这种方法，就能实现`父组件向孙组件甚至更深层级的组件传参`。 `$listeners`就不多做赘述了，毕竟是已经删除的内容，它的使用就是在`后代组件中抛出一个事件`，然后在中间传递的过程中使用`v-on监听事件`，最后在需要接收事件的组件上使用`@eventname`接收事件。 #### 状态管理（Vuex、pinia） `Vuex`和`pinia`都是`状态管理工具`，通常在`Vue2中使用Vuex`，在`Vue3中`作者更推崇我们使用`pinia`，同时`pinia也兼容了Vue2`。什么是状态管理工具呢，我们可以把它看作是一个`仓库（store）`，当有一些`公共的属性和方法`时，我们可以存储到这个store中，不管是`父子、爷孙`，甚至`毫无关系`的两个组件，都可以向`store中存储数据`，而其它组件想使用这些数据时，直接从`store获取`，就实现了`跨层级的数据共享和传参`。 #### 事件总线（event bus）在`Vue2`中，我们可以通过`新建一个文件夹，然后new一个Vue实例`，去实现一个`事件总线`，它可以在`任何组件`之间通过`$emit发送事件`、`$on监听事件`、`$once监听一次事件`、`$off停止监听事件`，即使是两个`毫无关系的组件`，想进行消息传递时，只需要其中一个组件使用`$emit发送一个事件`，在另一个组件中使用`$on/$once监听该事件`，然后执行相应的逻辑，在`组件销毁或非激活态`的时候`使用$off停止监听`，就可以做到`跨层级的通信`。在`Vue3`中，移除了`事件总线`，但是依然有一些`第三方库`实现了该功能，比如`Mitt`，使用方式也和Vue2中的相似。之所以移除了事件总线，是因为在使用该功能时，很容易导致`代码的混乱`，不同的组件`抛出各种事件`，这些事件又被各种组件接收，太多时就会产生`难以溯源`的情况，不知道这些事件都是从哪个组件发出来的，让代码变得`难以维护`。并且有些开发者在使用时，不遵守规范，`只使用$on，不使用$off关闭`，浪费性能。 ## 9. options API中的provide/inject 在使用`optionsApi`（一般在Vue2时使用）时，可以这样使用`provide/inject`。 ```html ``` 但是这种传参有一个缺点，那就是参数`不是响应式`的，如果传递`data中的数据呢`？ ```html ``` 传递`data`中的数据时，`provide`就要写成一个函数，返回一个`对象`，虽然传递的是`data中的数据`，但是`依旧不是响应式的`。想要将它变成响应式，一共有三种方法：`传递父组件实例`、`使用Vue.observable`、`使用computed`。 ### 传递父组件实例 ```html ``` ### 使用Vue.observable `Vue.observable`是`Vue2.6.0`之后新增的一个API，它的作用就是`让一个对象变成响应式的`。 ```html ``` ### 使用computed 在`Vue3`中，已经无法使用`Vue.observable`了，但是vue3提供了`computed函数`。 ```html ```html ``` ## 10. v-if和v-for谁的优先级更高在`Vue2`中，v-for的优先级要`高于`v-if，但是在`Vue3`中，v-for的优先级要`低于`v-if。在`Vue2`中，会先通过`v-for`遍历，然后对每一项使用`v-if`判断，不满足条件的不会渲染，但是这种方式并不好，相当于对很多个标签都添加了`v-if`，每次渲染之前都要判断。于是在`Vue3`中，`v-if`的优先级要`高于v-for`了，相当于在`v-for外层包裹了一层`，但是这时的判断条件肯定是错的，因此在`vue3中`同一标签使用`v-for和v-if`时，会报错。 ```html

``` ## 11. v-for的key是做什么的 `key`的作用就是标识当前`VNode节点`，一般用于`v-for`中。使用`key`进行标识的元素，在进行`更新`操作时会将`更新前后两个key相同的元素`视作同一元素，进行对比，然后进行相应的更新操作，如果没有`key`，就只能按`顺序`进行对比，在`合理的场景使用合理的key`可以提升`更新时的渲染性能`。 ## 12. 为什么不建议使用index作为v-for的key 比如说有以下代码： ```html ``` 在第一次渲染时，渲染了5个span标签，它们的key分别为`0、1、2、3、4`。这时v-for遍历的数组`头部`插入了一项新的值，页面进行`更新`，渲染了6个span标签，它们的key变成了`0、1、2、3、4、5`，虽然新的`1、2、3、4、5`就是之前的`0、1、2、3、4`，但是在进行更新时，会拿`key`相同的去对比，这样一来就变成了`旧的1和新的1（相当于旧的0）`、`旧的2和新的2（相当于旧的1）`......以此类推，明明本来只是`新增了一个节点，其它节点都不用改变`，但是现在却变成了`每个节点都需要更新`，影响了渲染性能。这也是为什么不提倡使用`索引值index`作为key的原因，因为它`并没有对更新时的渲染起到任何优化作用`。 ## 13. data为什么必须是一个函数 `data`是一个组件的`私有属性`，但是`一个组件`可以被`其它多个组件`使用，之所以必须是一个函数，是因为函数作用域是`私有作用域`，保证变量不会被污染。如果我们返回一个`普通对象`，在多个组件使用该组件时，如果都对data中的某个属性进行了修改，`所有使用该组件的组件`都会被影响，而使用函数则每次都会创建一个新的对象，保证当前的data不会被其它组件所影响。在每一次创建`组件实例`时，Vue都会去初始化这个组件的状态。 * 查看组件有没有data属性； * 如果有data属性，会查看data`是不是一个函数`，如果是函数，就直接调用这个函数，并将函数返回的对象`赋值给组件实例的data属性`（这就是为什么使用函数不会造成变量污染，因为每次都会调用这个函数，生成新的对象）； * 如果不是函数，会看之前组件实例上的data是不是空值，如果不是，就用之前的，如果是就赋值一个空对象（这就是为什么直接写成对象会造成变量污染，因为每次创建组件实例时都会使用之前的data）。 * Vue内部也帮我们做了`异常处理`，当我们的`data不是一个函数`时，会`抛出异常`。 ## 14. v-model的原理是什么 `v-model`就是`v-bind:xxx`和`@xxx`的语法糖，默认为`v-bind:value`和`@input`，在input标签上使用`v-model`时，类似于这样： ```html ``` ### Vue2 在Vue2中，如果我们想改变`v-model`绑定的值和事件，可以给组件添加`model配置项`，比如这样： ```html ``` ### Vue3 在Vue3中，移除了`.sync`修饰符，使用`v-model`来替代。此时在自定义组件中`v-model`代表的含义为`v-model:moduleValue`，也就相当于`:module-value="xxx" && @update:module-value="newValue => xxx = newValue"`。并且在Vue3中，v-model可以`传参`，默认参数就是`moduleValue`，我们也可以改为`v-model:a`，这时就代表我们给`子组件的一个名为a的props属性传参`，并且接收了一个`@update:a的回调`。 ## 15. Vue中computed和watch的作用是什么，有什么区别？ ### computed `computed`称为`计算属性`，它`必须拥有返回值`，它的值可以是`固定的`，也可以是`依赖其它响应式数据计算出来的`，它进行一些`同步运算处理`，当它依赖其它值时，只有当其它值改变时，它才会触发更新。 ### watch `watch`称为`监听`，它需要监听`一个响应式数据`，当它监听的数据改变时，它会处理回调任务，可以在回调中做一些`异步操作`。 ### 区别 * `computed`是有缓存的，读取computed属性时，如果`依赖的值没有变化`，就会读取缓存的内容，而`watch`没有缓存，只要数据改动，就会触发回调； * `computed`必须要有返回值，`watch`不需要有返回值； * `computed`在初始化时就会执行一次，而`watch`初始化时默认`不会执行`，如果我们想让它执行，可以设置它的`immediate`属性为`true`； * `computed`相当于创建了一个新的`响应式属性`，而`watch`相当于监听`原有的响应式属性`，然后执行回调； * `computed`中处理的是`同步操作`，而`watch`可以处理`异步任务`。 ## 16. Vue2和Vue3怎样挂载全局属性在`Vue2中`，可以通过将一些`公共属性`挂载到`Vue`的原型上，实现各个组件的共享，在组件中可以通过`this`来访问。 ```js Vue.prototype.a = 'a' ``` 在`Vue3中`，不再导出`Vue构造函数了`，并且在`composition API`中无法使用`this`，因此如果我们想挂载全局属性，应该使用这种方法： ```js // 添加 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.config.globalProperties.a = 'a' app.mount('#app') // 使用 import { getCurrentInstance } from 'vue' const { a } = getCurrentInstance().appContext.config.globalProperties ``` ## 17. vue-router `SPA单页面应用`其中特点之一就是`更改HTML显示内容`，来模拟页面跳转。而`vue-router`可以帮助我们做到这一点。 ### （1）路由模式 `vue-router`提供了三种路由模式，分别是`Hash模式`、`History模式`以及在Vue-Router4.x新增的`Memory模式`（一般不会用于浏览器环境），开发者可以通过设置`mode（vue-router4.x之后为history）`属性，去选择不同的路由模式。 ### （2）Hash模式实现原理 `Hash模式`下，URL的样子是这样的`https://xxx.com#123`。 `Hash模式`是vue-router的默认使用方式。这种方式是利用了`URL的hash`，`URL的hash`就是`#`，也可以称之为`锚点`，只改变URL中`#`之后的部分其实是相当于更改了`网页的位置`，也相当于更改了`window.location.hash`的属性值，但是网页地址还是没有改变，因此`不会进行刷新网页`，在进行请求接口时，也只会向`#`之前的地址进行请求，并不会带上`#`之后的内容，因此不会对服务端产生影响。每次改变`#之后`的内容时，都会在浏览器的`历史记录`中增加一个记录，使用浏览器的`后退/前进`功能可以回到上一次或下一次的页面位置，而根据`#之后的值`，我们就可以`渲染不同的页面`，从而达到`模拟页面跳转`的操作，而且可以通过`hashchange`监听URL-hash的变化。 ### （3）History模式实现原理 `Hash模式`下，URL会出现一个`#`符号，影响美观，而`History模式`不会有这个符号，因此当我们不想要这个符号时，可以设置为`History模式`。 `History模式`是利用了`HTML5中新增的history API`来进行URL管理，主要利用`pushState()`和`replaceState()`来改变URL，使用这两种方法，可以给浏览器的历史记录添加一条新纪录或者替换记录，但是这两种方法改变URL时，`不会立即`向服务器发送请求，只有在执行`history.back()`、`history.forward()`、`history.go()`的时候才会向服务器发送请求，可以通过监听`popstate事件`，来监听浏览器的`前进回退操作`，然后进行`路由的匹配`。 `History模式`需要服务端的支持，因为它在进行浏览器`前进/回退操作`时会发送请求，如果这时没有匹配到资源，就会出现`404`，因此需要服务端对这种场景做处理。 ### （4）vue-router的使用和配置 ```js // router文件夹下index.js文件 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' // 导入组件 import HomePage from '@/components/home-page.vue' import SecondPage from '@/components/second-page.vue' // 定义路由,将路由路径和组件进行映射 const routes = [ { path: '/', component: HomePage }, { path: '/second', // 可以设置路由的name属性 name: 'second', component: SecondPage } ] // 创建路由 const router = createRouter({ // 设置history模式路由 history: createWebHistory(), // 设置hash模式路由 history: createWebHashHistory(), routes }) // 导出路由实例 export default router // Vue项目入口main.js文件 import { createApp } from 'vue' import App from './App.vue' import router from '@/router' const app = createApp(App) app.use(router).mount('#app') ``` ### （5）路由跳转方法 `vue-router`提供了`router-link`标签来实现路由的跳转，相当于一个`a标签`，但是可以使用`vue-router`提供的一些方法； `vue-router`还提供了`push`、`replace`、`go`、`forward`、`back`等常用方法进行`编程式导航`。 * `push`：用于跳转下一个页面，会在历史记录添加一条新纪录； * `replace`：和push相同，只是会将当前历史记录替换掉； * `go`：可以传入一个数字，如果是负数则代表后退几条历史记录，如果是正数则代表前进； * `forward`：相当于go(1)； * `back`：相当于go(-1)；此外，在Vue2中，可以通过`this.$router`去执行相应的方法，而在Vue3中，则需要先引入`useRouter`组合式API，然后调用该方法得到一个router对象，才能够执行相应的方法。 ### （6）路由的传参路由的传参方式一共有两种，一种是`query`，另一种是`params`。 * `query`参数会在URL显式存在，`params`一般不会出现在URL上（动态路由除外）； * `query`传参可以和`path`属性一起使用，`params`不能和`path`属性一起使用，只能和`name`属性一起使用； * `params`传参在刷新页面时会`参数丢失`（动态路由不会），而`query`传参不会有这种情况。 ```html // 第一个页面通过query方式传参 // 跳转后的URL为 http://localhost:8080/second?a=1&b=2 // 第一个页面通过params方式传参 // 跳转后的URL为 http://localhost:8080/second ``` 如何获取传递的参数呢？ Vue2中可以通过`this.$route.query/this.$route.params`来获取，而Vue3中可以通过引入`useRoute`，然后调用该函数，得到route对象，访问`route.params/route.query`。 ```html // in second-page.vue ``` >在vue-router`4.14版本之前`，是可以访问到`params传参内容的`，但是这种传参方式一直是`不被提倡的`，因为刷新页面会使参数丢失。虽然这种情况可以通过`vuex或pinia等工具进行缓存`，在刷新页面时重新赋值，但是这种操作也会带来一定的风险。于是在4.14版本之后，如果`没有使用动态路由`，直接使用params传参，参数是不会被下个页面接收的。 ### （7）动态路由 `动态路由`就是路由的URL并不固定，是根据传入的参数动态决定的，动态路由的参数`必须通过params`传递，并且可以在`params中接收`。 ```js const routes = [ { path: '/', component: HomePage }, // 此时second就是一个动态路由，它可以接收两个参数a、b { path: '/second/:a/:b', name: 'second', component: SecondPage } ] ``` 此时进行params传参： ```html ``` 此时params的参数就可以被`正常接收了`，也就是说在vue-router`4.14版本之后`，如果我们想要通过params的方式给下个页面传递参数，那么必须使用`动态路由`，也就是说必须先将要传递的参数定义在路由中。 ### （8）路由中的props 每个路由对象中可以设置`props`属性，默认为false，设置为true表示通过`params传参的参数会作为组件的props传入`。但是这种通过路由传递过来的参数，类型都会变成`string`，因此在使用时要注意。此外`props属性`还可以被设置成`函数`或者`其它一些特殊场景的处理`，可以看[Vue-router的官网示例](https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B0%86-props-%E4%BC%A0%E9%80%92%E7%BB%99%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6)。 ### （9）\$router和$route的区别 `$router`在Vue3中以`useRouter`的方式使用，`$route`在Vue3中以`useRoute`的方式使用。这是`$router`包含的内容： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e81952380e94cf997ad0db3da3d7c90~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1075&h=370&s=46614&e=png&b=292929) 这是`$route`包含的内容： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0dc6f6801ea453387f72c8b5adfe290~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1061&h=375&s=36178&e=png&b=282828) 从中可以看到，`$router`中包含了路由的一些公共方法，比如`跳转`、`路由拦截`等，而`$route`则包含了一些`当前路由的属性`，比如`params`、`query`、`hash`等。 * 我们可以把`$router`视为`全局的路由对象`，操作路由一些方法时，使用`$router`； * 我们可以把`$route`视为`当前活跃的路由对象`，当访问当前路由信息的时候，使用`$route`； ### （10）一个页面使用多个路由可以使用多个`router-view`，设置`不同的name`，然后在路由中配置不同name映射的组件。 ```html ``` ```js // 路由文件 import { createRouter, createWebHistory } from 'vue-router' // 导入组件 import HomePage from '@/components/home-page.vue' import SecondPage from '@/components/second-page.vue' import LastPage from '@/components/last-page.vue' // 定义路由,将路由路径和组件进行映射 const routes = [ { path: '/', components: { // 设置不同name对应的组件 left: HomePage, default: SecondPage, right: LastPage } } ] // 创建路由 const router = createRouter({ // 设置history模式路由 history: createWebHistory(), routes }) // 导出路由实例 export default router ``` ### （11）设置404页面在`Vue2`中，vue-router为我们提供了一个`*通配符`，可以匹配到那些`未定义的路由`，从而可以让我们对这种场景进行一些处理，在`Vue3`中，删掉了`*通配符`，具体使用方法可以看[官网](https://router.vuejs.org/zh/guide/migration/#%E5%88%A0%E9%99%A4%E4%BA%86-%E6%98%9F%E6%A0%87%E6%88%96%E9%80%9A%E9%85%8D%E7%AC%A6-%E8%B7%AF%E7%94%B1)。 ### （12）路由的懒加载 `路由懒加载`就是将路由组件的`静态导入`变为`动态导入`，从而实现只有在`第一次进入页面时`，才会进行加载，后续将使用缓存。就拿我们上面定义的路由文件来说，它们可以通过懒加载改造成这样： ```js import { createRouter, createWebHistory } from 'vue-router' const HomePage = () => import('@/components/home-page.vue') const routes = [ { path: '/', component: HomePage }, { path: '/second', name: 'second', component: () => import('@/components/second-page.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` `component/components`接收一个`返回Promise组件`的函数，这样就实现了`路由的懒加载`，在我们使用`脚手架`进行开发时，借助`webpack`之类的打包工具，可以将代码打包时进行`分包`。比如在webpack中，我们可以通过`魔法注释`和`分包配置`，将路由组件打包到不同的包里去： ```js import { createRouter, createWebHistory } from 'vue-router' const HomePage = () => import(/* webpackChunkName: "group-a" */ '@/components/home-page.vue') const routes = [ { path: '/', component: HomePage }, { path: '/second', name: 'second', component: () => import(/* webpackChunkName: "group-b" */ '@/components/second-page.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` ### （13）路由的导航守卫路由的`导航守卫`可以分为`全局前置守卫`、`全局解析守卫`、`全局后置钩子`、`路由独享守卫`、`组件内的守卫`等几大类。 #### 全局前置守卫 `全局前置守卫`就是`router.beforeEach`，从名字来看，它的含义代表在进入路由`之前`。它一共有三个参数`to`、`from`、`next（可选）`。 * 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是`异步解析执行`，此时导航在所有守卫` resolve 完之前`一直处于`等待中`，也就是说等待我们的全局前置守卫执行完毕才会进入导航； * 第一个参数`to`代表要导航去哪个路由； * 第二个参数`from`代表从哪里来，或者说准备要离开的路由； * 返回值可以是`false`，代表`取消导航`，回到from的位置； * 返回值可以是一个`路由地址`，比如`return({name: second})`，那么将会中断当前导航，相当于重新创建一个`to为{name:second}`的导航； * 返回值如果是`undefined或者true`，说明导航是有效的，直接调用下一个导航守卫； * 第三个参数`next()`，它可以`直接调用`，也可以`传入一个路由地址`，直接调用相当于直接调用下一个导航守卫，这个参数已经被`移除`，但是目前还支持使用，最好还是不要使用，以防哪天官方移除该属性，如果使用，请保证`在同一逻辑处理下，该函数只被调用了一次`。 #### 全局解析守卫 `全局解析守卫`就是`router.beforeResolve`，和`router.beforeEach`类似，每次进入导航之前都会调用，但是它会在`导航被确认之前`、`所有组件内守卫和异步路由守卫被解析之后`再进行调用。 #### 全局后置钩子 `全局后置钩子`就是`afterEach`，它在导航完成之后调用，因此它不需要调用`next`，也不会改变导航本身，一般的作用就是`分析、更改页面标题`。 #### 路由独享守卫 `路由独享守卫`就是`beforeEnter`，它是定义在`路由文件中`的，只会在从`不同路由进入`时触发，如果只是`params、query、hash的改变`，不会触发该守卫，比如`/user/1`到`/user/2`并不会触发，因为这只是相当于`params的改变`，只有从`/home到/user/2`的时候才会被触发。 `路由独享守卫`可以接收`多个函数`，可以将一个`函数数组`传递给该属性，触发守卫时数组中所有函数都会被触发。 #### 组件内的守卫 `组件内的守卫`一共有三种，分别为`beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave`，用法类似于组件的`生命周期`，只是在这些守卫里`访问不到组件实例`，因为守卫发生在`导航确认之前`。但是可以在它的next中传入一个`回调函数`，回调函数接收`组件实例作为参数`，等到组件实例可以被访问时触发该回调，做一些相应的处理。 * `beforeRouteEnter`不能访问组件实例，其它两个可以； * `beforeRouteUpdate`会在组件实例复用时触发，比如`动态路由`，因为只是参数不同，但是会将路由复用。 #### 完整的导航解析流程 * 导航被触发； * 在失活的组件里调用`beforeRouteLeave`守卫； * 调用全局的`beforeEach`守卫； * 在重用的组件里调用`beforeRouteUpdate`守卫； * 在路由配置里调用`beforeEnter`守卫； * 解析异步路由组件； * 在被激活的组件里调用`beforeRouteEnter`守卫； * 调用全局的`beforeResolve`守卫； * 导航被确认； * 调用全局`afterEach`钩子； * 触发dom更新； * 调用`beforeRouteEnter`守卫中next的`回调函数`，创建好的组件实例会作为回调函数的参数传入。 ## 18. Vue3有哪些变动 * 响应式原理的变动，由`Object.defineProperty`变为`Proxy`； * diff算法优化； * 删除`filters`和`mixin`，用`methods`和`hooks`替代； * `options API`转变为`composition API`； * 新增`Fragment`内置组件，可以在不引入`多余DOM`的情况下，包裹并渲染`多个子元素`，这也是为什么`vue3`的模板不需要有一个`根节点`了； * 新增`Teleport`内置组件，它可以将`内容绑定到指定的节点之下`，比如有些弹窗，我们想让它作为`body的子元素`，而不是嵌套太深，就可以使用该组件包裹，然后设置`to="body"`; * 新增`Suspense`内置组件，该组件的作用是`等待`，该组件内部有`两个插槽`，默认插槽为`default`，另一个为`fallback`，我们可以将即将展示的东西放入默认插槽，在它还没有值时，展示`fallback`插槽的内容，这目前还是一项`实验性特性`； * 移除了`$children、$listeners`等属性； * `v-model`可以传参； * 更好的支持TypeScript； ## 19. setup语法糖的一些常用API 在使用`setup语法糖（script setup）`时，已经不能像`Vue2和setup函数`那样去定义`props`或者`emits`了，取而代之的是各种各样的`宏`。 * `defineProps`：用于定义组件的`props`； * `defineEmits`：用于定义组件的`emits`； * `defineOptions`：用于定义组件的一些信息`name`等； * `withDefaults`：用于定义`props的默认值`； * `defineExpose`：`script setup`的组件默认是`关闭的`（外界访问不到实例），需要通过该方法导出那些需要`被外界访问的属性`； * `useSlots、useAttrs`：相当于Vue2的`$slots`和`$attrs`，它们是真实的函数，在`setup函数`中也可以使用； ### script setup的优点 * 更简洁的代码； * 和ts更好的融合； * 更好的运行时性能； * 更好的ide类型推导； ## 20. Vue2和Vue3的响应式原理 ### 什么是响应式 `响应式`就是在我们修改数据之后，无需`手动`触发视图更新，视图会自动更新。 ### Vue2响应式实现 `Vue2`中，响应式系统是通过`依次遍历`data返回的对象，将里面每一个属性通过`Object.defineProperty`进行定义，然后在`属性描述符`中添加`get/set`，实现`getter/setter方法`，在`访问属性`时，在getter函数中`收集依赖`（记录哪些方法或变量在使用这个属性），在`修改属性`时，在setter函数中`派发依赖`（将收集到的依赖依次更新），从而达到`响应式`。 ### Vue3响应式实现 `Vue3`中，响应式系统是通过`ES6中的Proxy`实现对一个对象的`代理`，然后设置`handler.get/handler.set`，在对`代理对象`进行操作时，可以触发`get/set`，和`Object.defineProperty类似`，get中实现`收集依赖`，在set中实现`派发依赖`，从而达到`响应式`的效果。 ## 21. Vue3为什么要改为Proxy实现响应式？既然Vue3要更改响应式的实现方式，那么说明`Vue2的响应式实现一定是有缺点的`。 ### Object.defineProperty()实现响应式的缺点 1. `Object.defineProperty`只能对`对象的属性`进行监听，也就是说当我们想对`某个对象`进行监听时，必须将这个对象`遍历`，然后对其中的每一个属性进行监听。如果说对象中的某个属性又是一个对象，那就需要`递归遍历`，将每一层都进行监听，这样的性能肯定是比较低的。 2. `Object.defineProperty`只能对`已有属性`进行监听，也就是说，在Vue2中，`created()阶段`Vue内部已经帮我们把data中的属性遍历完毕并且对每个属性进行监听了，如果在之后的阶段我们给某个对象`使用obj.xx的方式`给对象添加了一个新属性，这个属性就`不再是响应式了`，这也是为什么我们在添加新属性时，需要使用`this.$set`的方式。 3. `Object.defineProperty`不能监听`数组长度的改变`，这也就造成了我们在使用一些`影响原数组`的数组方法时，它监听不到，比如我们使用`pop、shift、push`等，这也是为什么`Vue2要重写部分数组原型方法`。 >`Object.defineProperty`不能监听数组长度变化，但是它是可以监听数组内容变化的，前提是我们需要像对象一样，把数组进行遍历，然后对`每一个索引值`进行监听。之所以Vue2没有对数组的每一项进行监听，是因为`数组的长度有可能会很长`，一般来说对象的属性值并不会有太多，而数组中的数据可能`长达上万甚至数十万`，如果对数组进行遍历监听每一项，代价无疑是巨大的。 ### Proxy改变了什么 1. 首先针对Object.defineProperty的第一个缺点，`Proxy`的作用是`返回一个代理对象`，因此它不需要再`遍历/深度遍历`一个对象，而是只需要将`原对象作为参数传入`，就可以返回该对象的`代理对象`，并且它的第二个参数`handler`提供了`13种`方法，能够监听代理对象的各种操作。 2. 针对Object.defineProperty的第二个缺点，当我们对`代理对象`使用`obj.xx`的方式添加一个新属性时，它依旧能够对新添加的数据进行监听。 3. 针对Object.defineProperty的第三个缺点，`Proxy`不仅可以监听数组索引值的变化，还能够监听`原型方法（pop、push）`等。 ## 22. this.$set()的实现原理 `$set`解决的就是`对象/数组添加新属性不是响应式`的问题，因此它的核心就是调用此方法，`vue内部帮助我们把添加的属性变成响应式`。首先这个方法接收`三个参数`： * `target`：需要添加属性的对象； * `key`：需要添加/修改的对象key值； * `val`：需要修改的value值； ### 执行过程 1. 判断传入的对象是否为`数组`，并且`key是否为一个正确的索引`，如果是，就会`修改数组长度为key和原数组长度的最大值`，然后调用数组的`splice`方法进行更新数组，我们知道`splice方法也是不能被defineProperty监听的`，为什么这里要调用此方法呢？这是因为Vue内部帮我们重写了数组原型的该方法。 2. 如果传入的是一个对象，那么就判断`传入的key值是否在对象中`，并且`不是在对象的原型上`，如果已经在对象中的话，不管`当前对象是否为响应式对象`，直接通过`target[key] = val`修改属性值就行了（如果原对象是响应式，那么它已有的属性肯定是响应式的，如果不是，那它已有的属性也不需要是响应式）。 3. 如果传入的对象是`vue实例`，那么就会抛出警告； 4. 最后通过`target.__ob__`判断传入的对象是否为`响应式的`，如果`不是响应式`，那么给非响应式对象添加属性时，也不需要是响应式，直接使用`target[key]=val`就行了，如果对象`是一个响应式的`，那么给它添加新属性，也必须要变成响应式，于是就会调用`defineReactive方法将该属性添加getter/setter（本质就是使用Object.defineProperty）`将其变成响应式。 ## 23. Vue2重写了哪些数组方法 `Vue2`一共重写了`7个`数组原型上的方法，这些方法都会改变`原数组`。分别是`pop`、`push`、`unshift`、`shift`、`splice`、`sort`、`reverse`。 ```js const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] /** * Intercept mutating methods and emit events */ methodsToPatch.forEach(function (method) { // cache original method const original = arrayProto[method] def(arrayMethods, method, function mutator(...args) { const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // notify change if (__DEV__) { ob.dep.notify({ type: TriggerOpTypes.ARRAY_MUTATION, target: this, key: method }) } else { ob.dep.notify() } return result }) }) ``` 从源码可以看出，在调用数组这七个方法时，依旧会`调用原来的这些方法`，只是在调用完成之后会`触发依赖更新`，如果是`push`、`unshift`、`splice`这些可能会新增属性的，会将新增的属性变为响应式，然后触发依赖更新。 ## 24. Vue2和Vue3的diff算法有什么不同？ `diff`算法就是比较`新旧虚拟节点（VNode）`，对旧节点进行`更新、删除、新增`操作，然后更新到真实的DOM上。 * diff算法只会`同层对比`，不会跨层级，比如一个旧节点不会与新节点的子节点去进行对比； * diff算法一般都是从`两端开始对比`，逐渐向中间收拢； ### （1）Vue2的diff算法流程 ```js let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndIdx] let newEndIdx = newCh.length - 1 let newStartVnode = newCh[0] let newEndVnode = newCh[newEndIdx] let oldKeyToIdx, idxInOld, vnodeToMove, refElm ``` 1. 设置各种`变量`，记录当前的头尾索引值和新旧节点的信息，如`新旧节点的头节点、新旧节点的尾节点、新旧节点的长度`等； ```js while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] } ``` 2. 当`旧节点头部索引值 <= 旧节点总长度`并且`新节点头部当前索引值 <= 新节点总长度`时，执行以下代码，第一个判断，如果`当旧节点头部索引值的VNode是空`，那就将`头部的VNode变为第1项`（如果第一项还是空，那就变成第二项...依此类推），如果`当旧节点尾部索引值的VNode为空`，旧将`尾部的VNode变为前一项`。 ```js else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode( oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx ) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } ``` 3. 如果`旧节点头部节点和新节点头部节点相同`，那么就会执行`patch`，进行更新，然后指针变化，开始第二个节点的对比； ```js else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode( oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx ) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] } ``` 4. 如果头部不同，就会判断`旧节点尾部节点和新节点尾部节点是否相同`，如果相同，就执行`patch`，然后指针前移，开始前一个节点的对比； ```js else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right patchVnode( oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx ) canMove && nodeOps.insertBefore( parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm) ) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] } ``` 5. 如果`头头、尾尾都不相同`，接下来就会判断`旧的头部和新的尾部是否相同`，如果相同，就会将`旧头和新尾进行patch`，并且将`旧的头部真实节点`插入到`旧的尾部真实节点之后`，然后旧节点指针后移，新节点指针前移； ```js else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left patchVnode( oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx ) canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] } ``` 6. 如果`旧头部和新尾部还不相同`，就会对比`旧尾部和新头部`，如果相同，就将`旧尾和新头进行patch`，并且将`旧的尾部真实节点`插入到`旧的头部真实节点之前`，然后旧节点指针前移，新节点指针后移。 ```js else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) if (isUndef(idxInOld)) { // New element createElm( newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx ) } else { vnodeToMove = oldCh[idxInOld] if (sameVnode(vnodeToMove, newStartVnode)) { patchVnode( vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx ) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore( parentElm, vnodeToMove.elm, oldStartVnode.elm ) } else { // same key but different element. treat as new element createElm( newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx ) } } newStartVnode = newCh[++newStartIdx] } ``` 7. 如果上述场景都不满足，就要进行`最复杂`的diff了，这时首先会将`旧的VNode列表`从`oldStartIdx到oldEndIdx`的数据进行遍历，然后将它们的`key`和`索引`建立`映射关系`，存到一个表中记录。然后看`当前新的节点的key是否在表中存在`，如果不存在，说明这是新增的节点，直接创建新节点。如果存在，就会去判断`是不是可以复用的，类型一样的节点`，如果是就执行`patch`，如果不是`就创建新节点`。 ```js if (oldStartIdx > oldEndIdx) { refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm addVnodes( parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue ) } else if (newStartIdx > newEndIdx) { removeVnodes(oldCh, oldStartIdx, oldEndIdx) } ``` 8. `while循环`结束之后，判断`如果oldStartIdx > oldEndIdx成立`说明`旧的VNode节点先遍历完成了`（遍历完成之后，最后一次++index会让startIdx > endIdx），那么就说明`旧的VNode节点更少`，然后就把新节点多出来的节点进行创建然后添加到真实dom中，反之说明`旧的VNode节点更多`，需要`删除节点`，那就把旧节点多出来的从真实dom进行删除。至此，整个diff算法结束。 ### （2）Vue3的diff算法流程 ```js const c1 = n1 && n1.children const prevShapeFlag = n1 ? n1.shapeFlag : 0 const c2 = n2.children const { patchFlag, shapeFlag } = n2 // fast path if (patchFlag > 0) { if (patchFlag & PatchFlags.KEYED_FRAGMENT) { // this could be either fully-keyed or mixed (some keyed some not) // presence of patchFlag means children are guaranteed to be arrays patchKeyedChildren( c1 as VNode[], c2 as VNodeArrayChildren, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) return } ``` 1. 首先会根据新节点的`patchFlag标识`去判断子代是否为`全都有key或者一部分有key`，patchFlag的存在保证了`子代是一个数组`，此时执行`有key的diff算法`。 ```js else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) { // unkeyed patchUnkeyedChildren( c1 as VNode[], c2 as VNodeArrayChildren, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) return } } ``` 2. 如果子代`全都没有key`，直接进行`没key的diff算法`。 ```js // children has 3 possibilities: text, array or no children. // children有三种情况: 文本节点, 数组节点, 或者没有节点 if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { // text children fast path // 文本节点快速方式 if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) { unmountChildren(c1 as VNode[], parentComponent, parentSuspense) } if (c2 !== c1) { hostSetElementText(container, c2 as string) } } ``` 3. 如果`没有patchFlag或者patchFlag <= 0`，那么子节点有`三种情况`，分别为`文本节点、数组节点、空节点`。第一次先会根据新节点的`shapeFlag标识`判断子节点是不是`文本节点`，如果条件满足，就会去判断旧节点的`shapeFlag标识`，判断旧节点的子节点是不是`数组节点`，如果旧的是数组，新的是文本，直接把`旧节点卸载`。如果旧节点的子节点不是数组节点，那要么是空节点，要么是文本节点，此时判断`新旧节点是否全等`，如果不等，就直接执行`更新或插入新的文本节点`。 ```js else { if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) { // prev children was array // 旧VNode的子节点是数组节点 if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { // two arrays, cannot assume anything, do full diff patchKeyedChildren( c1 as VNode[], c2 as VNodeArrayChildren, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } else { // no new children, just unmount old // 没有新节点, 只是卸载掉旧节点 unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true) } } else { // prev children was text OR null // new children is array OR null // 旧的VNode的子节点是文本节点或者空节点 // 新的VNode的子节点是数组节点或者空节点 if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) { hostSetElementText(container, '') } // mount new if array if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { mountChildren( c2 as VNodeArrayChildren, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } } } ``` 4. 如果新节点的子节点`不是文本节点`，那就分情况判断，如果`旧节点的子节点是数组节点并且新节点的子节点也是数组节点`，就会直接执行`有key的diff方式`。如果`旧节点的子节点是数组节点，但是新节点的子节点不是数组节点`，说明新节点是`空节点`，直接卸载掉旧节点。如果`旧节点的子节点不是数组节点`，那么旧节点只可能为`文本或空节点`，新节点只可能为`数组或空节点`，如果`旧节点为文本节点`，直接将文本变为空的，这时再去判断`新节点的子节点是不是数组节点`，如果是的话就`重新创建一个数组节点`，如果不是的话，旧的文本节点依旧变成空节点了也就不需要做其它操作了。 5. 在这整个过程中，最重要的是两个方法`patchUnkeyedChildren` 和`patchKeyedChildren`，分别是`没key的diff算法`和`有key时的diff算法`。 ```js const patchUnkeyedChildren = ( c1: VNode[], c2: VNodeArrayChildren, container: RendererElement, anchor: RendererNode | null, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, isSVG: boolean, slotScopeIds: string[] | null, optimized: boolean ) => { c1 = c1 || EMPTY_ARR c2 = c2 || EMPTY_ARR const oldLength = c1.length const newLength = c2.length const commonLength = Math.min(oldLength, newLength) let i for (i = 0; i < commonLength; i++) { const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as VNode) : normalizeVNode(c2[i])) patch( c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } if (oldLength > newLength) { // remove old unmountChildren( c1, parentComponent, parentSuspense, true, false, commonLength ) } else { // mount new mountChildren( c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength ) } } ``` 6. 这是`无key时`的diff算法，它会直接按照`新旧节点较小的长度`进行遍历，然后一项一项进行对比，其中`optimized`的作用是标识了`渲染时是否进行了优化`（比如可能某些节点做了静态提升，那么optimized为true时就会去判断当前节点是否进行了静态提升，如果有静态提升就会克隆之前的节点进行复用）。遍历对比完之后去判断`新旧节点的长度`，如果旧的更长，说明需要进行`删除操作`，如果新的更长，说明需要进行`新增节点的操作`。 ```js const patchKeyedChildren = ( c1: VNode[], c2: VNodeArrayChildren, container: RendererElement, parentAnchor: RendererNode | null, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, isSVG: boolean, slotScopeIds: string[] | null, optimized: boolean ) => { let i = 0 const l2 = c2.length let e1 = c1.length - 1 // prev ending index let e2 = l2 - 1 // next ending index ``` 7. 这是`有key时`的diff算法，先声明了一些变量以及传入参数。 ```js // 1. sync from start // (a b) c // (a b) d e while (i <= e1 && i <= e2) { const n1 = c1[i] const n2 = (c2[i] = optimized ? cloneIfMounted(c2[i] as VNode) : normalizeVNode(c2[i])) if (isSameVNodeType(n1, n2)) { patch( n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } else { break } i++ } ``` 8. `有key时`第一个判断，从`头部依次对比`，第一个不同时，指针就会向后移对比第二个，直到不满足条件退出循环。这时，每次匹配到一个`相同的节点`就会进行`patch`。 ```js // 2. sync from end // a (b c) // d e (b c) while (i <= e1 && i <= e2) { const n1 = c1[e1] const n2 = (c2[e2] = optimized ? cloneIfMounted(c2[e2] as VNode) : normalizeVNode(c2[e2])) if (isSameVNodeType(n1, n2)) { patch( n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } else { break } e1-- e2-- } ``` 9. `有key时`第二个判断，从`尾部依次对比`，最后一个不同时，指针就会向前移对比倒数第二个，直到不满足条件退出循环。这时，每次匹配到一个`相同的节点`就会进行`patch`。 ```js // 3. common sequence + mount // (a b) // (a b) c // i = 2, e1 = 1, e2 = 2 // (a b) // c (a b) // i = 0, e1 = -1, e2 = 0 if (i > e1) { if (i <= e2) { const nextPos = e2 + 1 const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor while (i <= e2) { patch( null, (c2[i] = optimized ? cloneIfMounted(c2[i] as VNode) : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) i++ } } } ``` 10. `有key时`的第三种判断，这时根据规律，当`e1 < i <= e2`时，说明新旧节点`有公共序列并且需要新增节点`，这时就会把新节点多出来的去和空节点进行patch，相当于新增了。 ```js // 4. common sequence + unmount // (a b) c // (a b) // i = 2, e1 = 2, e2 = 1 // a (b c) // (b c) // i = 0, e1 = 0, e2 = -1 else if (i > e2) { while (i <= e1) { unmount(c1[i], parentComponent, parentSuspense, true) i++ } } ``` 11. `有key时`的第四种判断，这时根据规律，当`e2 < i`时，说明新旧节点`有公共序列并且需要删除旧节点`，这时就会把旧节点多出来的节点进行遍历，然后依次删除。 ```js // 5. unknown sequence // [i ... e1 + 1]: a b [c d e] f g // [i ... e2 + 1]: a b [e d c h] f g // i = 2, e1 = 4, e2 = 5 const s1 = i // prev starting index const s2 = i // next starting index // 5.1 build key:index map for newChildren // 建立一个Map集合, 这个集合的key是VNode的key, value为索引值 const keyToNewIndexMap: Map = new Map() for (i = s2; i <= e2; i++) { const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as VNode) : normalizeVNode(c2[i])) if (nextChild.key != null) { if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) { warn( `Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.` ) } keyToNewIndexMap.set(nextChild.key, i) } } ``` 12. 当节点`无序时`，首先第一步，会建立一个`Map集合`，里面会将新节点的所有子节点的`key和索引`作为`key:value`的形式存储进该集合。 ```js // 5.2 loop through old children left to be patched and try to patch // matching nodes & remove nodes that are no longer present let j let patched = 0 const toBePatched = e2 - s2 + 1 let moved = false // used to track whether any node has moved let maxNewIndexSoFar = 0 // works as Map // Note that oldIndex is offset by +1 // and oldIndex = 0 is a special value indicating the new node has // no corresponding old node. // used for determining longest stable subsequence const newIndexToOldIndexMap = new Array(toBePatched) for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0 for (i = s1; i <= e1; i++) { const prevChild = c1[i] if (patched >= toBePatched) { // 已经patch过的 >= 准备要patch的，说明都被patch过了，那当前节点就是多余的了，直接进行删除 unmount(prevChild, parentComponent, parentSuspense, true) continue } // 设置遍历寻找新节点中该节点的索引 let newIndex // 如果旧的节点的key不为空，直接去新节点的`key:value`表中去查找新索引 if (prevChild.key != null) { newIndex = keyToNewIndexMap.get(prevChild.key) } else { // 旧的节点没有key，尝试去新节点中找到和旧节点类型一样的那个节点，然后拿到新的索引 for (j = s2; j <= e2; j++) { if ( newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j] as VNode) ) { newIndex = j break } } } // 如果新节点中没有当前节点的索引，说明新节点中当前节点已经不存在了，直接删除即可 if (newIndex === undefined) { unmount(prevChild, parentComponent, parentSuspense, true) } else { // 找到新索引之后，更新当前节点新索引对应的旧索引 // 比如拿官方例子来说 // [i ... e1 + 1]: a b [c d e] f g // [i ... e2 + 1]: a b [e d c h] f g // i = 2， s1 = i s2 = i，此时第一次循环，s1 = 2， s2 = 2，i = 2，e1[i] = c // 找到c在新节点的索引为4，那么newIndexToOldIndexMap[4-2] = 2 + 1（arr[2] = 3） // 意思就是说需要更新的这一部分列表，第二项的数据对应的是旧节点的第3个数据 // 很多人在这里有疑问，c不是旧节点的第二个数据吗？怎么会变成第三个？为什么要i + 1? // 这是因为创建newIndexToOldIndexMap数组时，给每一项默认赋值了0，当前项的值为0时，说明还没有建立映射关系 // 因此使用i+1的方式建立对应关系，我们可以理解为newIndexToOldIndexMap[2] = 2，只是存储时在旧节点的索引值上加了1 newIndexToOldIndexMap[newIndex - s2] = i + 1 // 如果新节点的索引>=maxNewIndexSoFar，就更新maxNewIndexSoFar的值，否则就需要进行移动 // 比如第一次循环，c的newIndex为4，那么maxNewIndexSoFar就会被更新成4 // 第二次循环，d的newIndex为3，3 < 4，说明在新节点中，d的位置在c之前，需要进行移动 // 如果说新节点的顺序也是c、d、e、h，那么第一次循环，maxNewIndexSoFar的值就是2， // 第二次循环，d的newIndex是3，3>2说明d排在c之后，和旧节点情况一样，不用移动 if (newIndex >= maxNewIndexSoFar) { maxNewIndexSoFar = newIndex } else { // 标记为需要移动 moved = true } patch( prevChild, c2[newIndex] as VNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) patched++ } } ``` 13. 第二步，会`跳过那些已经patch过的节点`，对其它没有patch过的节点进行patch，并且会`移除那些已经不存在的旧节点`。这里面首先会创建一个`新节点的索引和旧节点索引对照关系的一个数组`，用于获取`无序序列的最长递增子序列`。然后`遍历旧节点`，找到在`新节点中存在的节点`，进行复用，执行patch，并且更新`索引对应关系表`，如果有多余的节点，就进行删除。 ```js // 5.3 move and mount // generate longest stable subsequence only when nodes have moved const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR j = increasingNewIndexSequence.length - 1 // looping backwards so that we can use last patched node as anchor for (i = toBePatched - 1; i >= 0; i--) { const nextIndex = s2 + i const nextChild = c2[nextIndex] as VNode const anchor = nextIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor if (newIndexToOldIndexMap[i] === 0) { // mount new patch( null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized ) } else if (moved) { // move if: // There is no stable subsequence (e.g. a reverse) // OR current node is not among the stable sequence if (j < 0 || i !== increasingNewIndexSequence[j]) { move(nextChild, container, anchor, MoveType.REORDER) } else { j-- } } } ``` 14. 最后一步，如果`需要移动`，就会生成一个`最长递增子序列`，然后遍历`需要patch的序列`，看看序列中有没有`对应的旧节点索引值为0的`，如果有，说明这些节点在旧节点中不存在，就需要执行`新增节点的操作`。如果存在，并且`需要移动`，就会将这些节点移动到对应的位置。至此，整个diff算法完成。 ### （3）最长递增子序列为什么可以优化加入`旧节点子元素列表的key`为[1,2,3,4,5]，经过数据变化，新的节点顺序变动，`key`变成了[1,3,5,2,4]，如果我们不进行任何优化，那么只有1是可复用的，我们需要把`2、3、4、5`四个节点分别移动到`对应位置`，需要移动`4次`。如果我们算出来了`新节点列表的最长递增子序列`（[1,2,4]），那么我们可以保持这三个元素`不做变动`，只将`3、5`两个元素进行移动，只需要移动`2次`。这就是为什么`最长递增子序列`可以`减少操作dom的次数`，从而达到优化的原因。 ### （4）总结在Vue2中，diff算法采用的是双指针进行`头头相比、尾尾相比、头尾相比`，最终通过`映射关系`来确认可复用的节点，进行更新。在Vue3中，diff算法分为`有key和无key和快速diff三种方式`，`快速diff`通过静态标记，对一些`文本`、`空节点`进行快速更新，`无key方式`简单粗暴对比每一项，判断是否可以复用节点，`有key的方式`依旧采用双指针，但是只进行`头头相比、尾尾相比`，最终会根据求取`无序列表的最长递增子序列`的方式，对能复用的节点进行patch，需要移动的节点进行`移动节点`，最终完成diff更新。 ## 25. Vue3在diff阶段都优化了哪些？ `Vue3`的diff算法优化点如下： * `静态提升`：在`模板编译时`，会将没有用到`动态变量`的`节点或属性(class、style这些元素属性)`进行`静态提升`，在进行render时，直接复用旧节点。而在`Vue2中`，无论元素是否使用了`动态变量`，每次更新都会`重新创建`，这也是为什么`Vue3`最好使用`template`而不是render函数，因为模板编译时会帮我们做优化； * `预字符串化`：当编译器遇到`大量的静态节点时`，会将这一整部分变成字符串，`减少VNode的创建`，渲染为`静态节点`，而在Vue2中，则会将这些节点一个个变成虚拟节点； * `缓存事件处理函数`：在Vue3中，会将dom元素绑定的事件进行`缓存`，在进行patch的时候会使用缓存中的事件处理函数； * `Block Tree`：在Vue3中，`Block`用于提取那些`动态属性`的节点，从而在进行更新时，可以精准的比较`Block中的内容`，只更新那些使用动态节点的节点； * `patchFlags`：`patchFlags`是编译器生成的`优化提示`，它标记了节点的哪些属性是`动态的`，从而在进行更新时，精确的对某些属性进行更新； * `shapeFlags`：`shapeFlags`也是一个标识，它标识了当前虚拟节点的类型，从而可以在进行diff时能够省去`类型判断`，对不同类型做不同的更新处理。 ## 26. $nextTick的作用是什么，原理是什么？ `$nextTick`是 Vue.js提供的一个异步更新DOM的方法。因为Vue的更新是`异步`的，如果你想在改变某个属性之后立即去操作DOM，可能结果并不是你想要的，而`nextTick`允许你在当前 DOM 更新循环结束之后执行一个回调函数，这样可以`确保在回调函数中操作的DOM是最新的`。 Vue2和Vue3中`使用`nextTick的方式和`实现的原理`都不一样。 ### （1）Vue2 在Vue2中，我们可以直接使用`this.$nextTick`去使用该函数。 ```js function flushCallbacks() { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } } // Promise is available, we will use it: /* istanbul ignore next, $flow-disable-line */ if (typeof Promise !== 'undefined' && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) // In problematic UIWebViews, Promise.then doesn't completely break, but // it can get stuck in a weird state where callbacks are pushed into the // microtask queue but the queue isn't being flushed, until the browser // needs to do some other work, e.g. handle a timer. Therefore we can // "force" the microtask queue to be flushed by adding an empty timer. if (isIOS) setTimeout(noop) } isUsingMicroTask = true } else if ( !isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor]') ) { // Use MutationObserver where native Promise is not available, // e.g. PhantomJS, iOS7, Android 4.4 // (#6466 MutationObserver is unreliable in IE11) let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // Fallback to setImmediate. // Technically it leverages the (macro) task queue, // but it is still a better choice than setTimeout. timerFunc = () => { setImmediate(flushCallbacks) } } else { // Fallback to setTimeout. timerFunc = () => { setTimeout(flushCallbacks, 0) } } export function nextTick(cb?: (...args: any[]) => any, ctx?: object) { let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e: any) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } } ``` 从Vue2的nextTick的源码实现中我们可以看到，传入nextTick的回调函数，会放入`callbacks数组中`，然后会`遍历callbacks数组`，依次执行其中的函数。具体在什么时机执行呢？如果`支持Promise`，就使用`Promise.then`，否则就使用`MutationObserver`，这两种是`微任务`，如果都不支持，会判断是否支持`setImmediate`（Node中），如果不支持则会使用`setTimeout`的方式来进行异步执行。如何确保nextTick的内容`一定会在`数据更新之后执行呢？这个其实是无法完全保证的，我们对数据的更新`也是通过nextTick添加到异步任务队列`进行异步更新的，当我们在数据更新之后手动调用`nextTick`时，我们的代码就会放在`数据更新之后`进行执行了。比如我们先改变了数据，Vue内部的任务队列此时会有`[a]`一个任务，这个任务就是准备更新数据的任务，此时我们`手动调用nextTick`，这时任务队列就会有`[a,b]`两个任务，到时候执行时先执行a，然后才会去执行我们的回调任务。 ### （2）Vue3 Vue3中，由于无法访问`this`，因此在使用时变成了`导入nextTick函数`进行调用，并且该函数`返回一个Promise对象`，我们可以使用`await或者.then`来获取异步操作的结果。 ```js export function nextTick( this: T, fn?: (this: T) => R ): Promise> { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p } ``` 由此可见，Vue3中的`nextTick`只是利用了`promise`来实现的（我感觉是因为Vue3已经打算放弃兼容那些低版本浏览器了，因此才会这么做），而`nextTick的回调`其实就像相当于放在`Promise.then()`中来执行的。当然还有各种细节，有兴趣的可以去看下源码（在runtime-core文件夹下的src文件夹中的scheduler.ts文件）。 ## 27. Vue3中ref和reactive的区别是什么？ ### （1）reactive ```js export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) } ``` 从源码可以看出，`reactive`需要传入一个`对象`，如果是一个只读的对象，那就返回原对象，否则就调用`createReactiveObject()`函数，返回一个`经过Proxy代理的对象`。 ### （2）ref ```js function createRef(rawValue: unknown, shallow: boolean) { if (isRef(rawValue)) { return rawValue } return new RefImpl(rawValue, shallow) } class RefImpl { private _value: T private _rawValue: T public dep?: Dep = undefined public readonly __v_isRef = true constructor( value: T, public readonly __v_isShallow: boolean ) { this._rawValue = __v_isShallow ? value : toRaw(value) this._value = __v_isShallow ? value : toReactive(value) } get value() { trackRefValue(this) return this._value } set value(newVal) { const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal) newVal = useDirectValue ? newVal : toRaw(newVal) if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal this._value = useDirectValue ? newVal : toReactive(newVal) triggerRefValue(this, newVal) } } } ``` 从源码可以看出，创建一个`ref变量`，如果传入的变量已经是一个ref变量了，就直接返回这个变量，如果不是就会返回一个`new RefImpl()`，new这个类又做了什么呢？其实就是把我们传入的变量进行`toReactive`然后赋值给`this._value`，当我们访问`value`的时候，通过get函数，给我们返回了`this._value`。说白了就是给我们的变量`包裹了一层对象`，然后转变成了`reactive`对象。 ### （3）区别既然都是用`reactive`实现的，为什么不都用`reactive`呢？这就要说到它们的区别了。 * Vue3的响应式原理是基于`Proxy`的，而`Proxy只能代理对象`，如果我们要实现一个`基本数据类型的响应式`怎么办呢？只能通过将它变成`对象的方式`； * `reactive`只能传入一个对象，而`ref`可以传入任何类型； * `ref`声明的变量，我们在访问时，除了模板之外，必须使用`xxx.value`，而`reactive不用`； * `reactive`声明的变量可能会造成`响应式丢失`，这也是为什么官方`更推荐使用ref的原因`； ### （4）reactive响应式丢失 ```html ``` 乍一看这种方式挺正常的，但是这种方式会引起`响应式丢失`，第一次使用`reactive`创建对象`obj`时，obj是一个正常的`被Proxy代理的对象`，它是响应式的。但是当我们给`obj重新赋值`时，相当于改变了obj的`内存地址`，此时`obj变成了一个非响应式的普通对象`，于是造成了`响应式丢失`。为什么`ref`不会产生这种问题呢？ ```html ``` 当我们使用`ref`创建响应式变量时，其实是类似这样的： ```html ``` 这时我们改变的其实是`obj对象的value属性`，并没有更改整个对象，于是不会造成`响应式丢失`。如果想使用`reactive`，一定要确保修改对象时`修改的是对象的某个属性`，如果想对`reactive对象重新赋值`，就必须要`再次包裹一层reactive`，但是不建议这么做。使用`reactive`时，进行解构操作，也会`丢失响应式`，这是因为在解构赋值中，如果是`原始类型`就是按照`值传递`，如果是`引用数据类型`就会按照`引用类型地址传递`，因此解构出来的值并不是一个响应式的。 ## 28. Vuex和pinia的使用和区别 `Vuex`是`Vue2`官方提供的一个状态管理工具；而`pinia`是`Vue3`官方推荐的一个状态管理工具。 * 它们都是用于储存和读取`公共属性和方法`的一个工具； * 它们中存取的数据都是`响应式的`，但是刷新页面会丢失数据，因此需要进行`持久化处理`； ### （1）Vuex `Vuex`一共有五个属性`state`、`getter`、`mutation`、`action`、`module`。 * `state`：主要是用于管理store的一个`容器`，可以在这里面定义一些`公用属性`； * `getter`：类似于Vue组件实例的`computed`，主要用于做一些计算，也可以用于`访问state中的属性`； * `mutation`：主要用于对`state的内容`进行同步修改，是`修改state内容`唯一被官方推荐使用的手段，可以使用`commit('mutation')`来调用`mutation`； * `action`：主要进行一些`异步操作`，然后通过`mutation`来该变`state的内容`，调用`action`的方法时使用`dispatch`； * `module`：用于将store分模块，否则所有属性存在一个store中时会造成冗余，而且某些场景下，可能不同数据属于不同的业务，将其分为多模块的方式比较好。 ### （2）pinia `pinia`在`Vuex`的基础上去掉了`mutation`，将`action`作为`同步和异步`共用的操作方法，并且去掉了`module`属性，因为每定义一个store就相当于一个模块。因此它一共有`三个属性`：`state`、`getter`、`action`。 `pinia`的各个属性和`Vuex`类似。 ### （3）区别 * 使用方式不同，`pinia`和`vuex`是两个不同的库，因此在使用方式上有些`细微差别`； * `pinia`支持compositionApi的格式，更加贴合Vue3； * `pinia`的语法和使用方式更加简洁，调用`action`的方法时无需使用`dispatch`； ## 29. SPA页面首页白屏如何优化 `SPA页面`首页白屏的原因是因为`所有资源`都需要在首页加载，因此优化首页白屏就是要优化首页资源的加载。 * 第三方库如果能进行`按需引入`就采用按需引入，如果不行可以采取`CDN`的方式引入； * 尽量减少图片资源，使用字体图标或精灵图，对大图使用TinyPng对图片资源进行压缩，并且使用CDN引入图片； * 代码层面，检查首页代码是否有`长耗时的同步任务`阻塞了页面的渲染； * 开启gzip压缩； * 打包出来的index.html文件中的`script标签`，使用`defer异步加载`或者放到`body`之后； * 利用webpack等打包工具进行分包，避免首页一次性加载太多资源； ## 30. 可以实现一个响应式吗？实现一个`简单的响应式`，首先我们要知道响应式其实就是通过`Proxy中的handler参数中的get/set来实现的（vue2是通过Object.defineProperty()）`，然后在`get中收集哪些函数使用了当前变量`，然后在`set中在变量更新时重新执行这些记录的函数`，让它们`用最新的值再次执行一遍`。 ```js // 存储每个响应式对象以及对应的依赖 key: 响应式对象, value: Map()(Map中的key是响应式对象的属性,value是对应属性的依赖) const targetDep = new WeakMap() // 存储当前需要被收集的依赖 let activeEffect = undefined // 定义一个方法，传入一个对象，返回一个该对象的代理，并且给代理对象设置get/set function reactive(target) { if (target === null || typeof target !== 'object') { console.log('请传入一个对象') return } const objProxy = new Proxy(target, { get(target, key, receiver) { // 收集依赖 track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, newValue, receiver) { if (newValue !== target[key]) { // 派发依赖 trigger(target, key) } return Reflect.set(target, key, newValue, receiver) } }) return objProxy } // 定义一个函数收集依赖 function track(target, key) { if (!activeEffect) return let dep = targetDep.get(target) if (!dep) { dep = new Map() targetDep.set(target, dep) } let propertyDep = dep.get(key) if (!propertyDep) { propertyDep = new Set() dep.set(key, propertyDep) } propertyDep.add(activeEffect) } // 定义一个函数派发依赖 function trigger(target, key) { const dep = targetDep.get(target) if (!dep) return const propertyDep = dep.get(key) if (!propertyDep) return // 在Vue中,并不会立即将函数立即执行,而是在内部维护了一个任务队列,将需要更新的任务放进任务队列,然后在微任务中统一执行,这样有两个好处, // 第一个是如果是同步执行,setter函数还没有返回值,此时对象的属性还没有更新完成,拿到的还是旧值。 // 第二个是如果是同步执行,如果在一个函数中多次修改同一变量时,会触发多次派发依赖。 propertyDep.forEach(item => { // 这里简单模拟，不添加异步队列了 item && Promise.resolve().then(() => item()) }) } // 定义一个函数，接收一个函数，将接收的函数赋值给全局的activeEffect变量，用于依赖收集，然后执行一遍该函数，触发里面用到变量的一些get，最后将全局变量置空 function effect(fn) { activeEffect = fn fn() activeEffect = undefined } // example const obj = reactive({ count: 1 }) effect(() => { console.log(`count:`, obj.count) //count: 1, count: 2 第一次是在effect函数中执行（为了触发obj的get），打印1；第二次是set时触发了依赖更新，打印2 }) obj.count = 2 ``` ## 31. 为什么Vue的数据更新要是异步的我们可能在一个方法中`更新多次数据`，如果是同步执行，那么可能会有许多次更新操作，开销会很大，使用`异步更新`，能够将一次事件循环内的多次数据更改合并成一次，减少更新操作。 ## 32. Vue.use怎么实现的链式调用 `Vue.use`的作用是给`Vue实例`注册插件。 ```js export function initUse(Vue: GlobalAPI) { Vue.use = function (plugin: Function | any) { const installedPlugins = this._installedPlugins || (this._installedPlugins = []) if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) if (isFunction(plugin.install)) { plugin.install.apply(plugin, args) } else if (isFunction(plugin)) { plugin.apply(null, args) } installedPlugins.push(plugin) return this } } ``` 在Vue2的`Vue.use`的源码中我们可以看到，Vue.use的参数是`一个函数或者一个any类型`，然后会拿到`已经注册的插件`，看传入的插件是否已经被注册，如果已经被注册就会直接返回`this`，如果没有被注册，就会看`参数是否有install属性，并且该属性是否为一个函数`，或者直接判断`参数是不是一个函数`，如果满足这两种情况，会`调用参数或参数中的install方法注册插件`。最后返回`this`。而这里返回的`this`就是`Vue`，因此我们调用完`Vue.use`，它的返回值还是一个Vue，我们又可以通过`.use`去注册下一个插件，这样就可以实现了链式调用。 ## 33. 为什么new一个Vue实例可以使用事件总线因为`Vue`每个实例上有`$emit`、`$on`、`$off`、`$once`等方法，我们的每个组件`都是一个Vue实例`，因此它们是不可以共享的，但是当创建一个公共的Vue实例时，将此实例导入我们需要使用`事件总线`的文件，然后调用实例上的`$emit`方法，抛出事件，在需要接收事件的页面调用`$on`方法，这两个页面访问的是`同一个实例上的方法`，事件和数据就可以共享了。 ### 实现事件总线事件总线是`发布订阅者模式`的一个场景。实现事件总线，有几个关键点，需要创建一个集合去记录`订阅者和发布者的映射关系`。`on`方法用于`监听事件`，也就是`订阅者`，`emit`用于`派发事件`，也就是`发布者`，然后可以通过`off`去`取消监听`。 ```js function eventBus() { // 创建map集合，记录事件名称以及该事件触发的回调集合 const map = new Map() return { // 订阅事件 on(eventName, callback) { // 获取到该事件名对应的回调 const handlers = map.get(eventName) if (handlers) { handlers.push(callback) } else { map.set(eventName, [callback]) } }, // 发布事件 emit(eventName, param) { // 获取到该事件名对应的所有回调 const handlers = map.get(eventName) if (handlers) { handlers.forEach(handler => { handler(param) }) } }, // 取消某个回调 off(eventName, callback) { // 获取到该事件名对应的回调 const handlers = map.get(eventName) if (handlers) { if (callback) { // 判断准备取消的回调是否在记录中 const index = handlers.indexOf(callback) if (index < 0) { return new Error('回调不存在') } // 删除该回调 handlers.splice(index, 1) } else { map.set(eventName, []) } } } } } ``` > 今天开始`Vue2`就要离我们远去，缅怀。