Vue杂谈

Diff算法

Diff算法有三大策略：

1. Tree Diff 是对树每一层进行遍历，找出不同
2. Component Diff 是数据层面的差异比较
3. Element Diff真实DOM渲染，结构差异的比较

---

关于nexttick

• nexttick的回调函数是等到dom更新后才会被调用，跟在哪没关系
• $nextTick()返回一个Promise对象

---

关于vue-router

• $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等
• $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
• 全局路由：beforeEach(前置守卫)，beforeResolve(解析守卫)，afterEach(后置守卫)
• 单个路由守卫：beforeEnter
• 局部路由守卫：beforeRouteEnter（前置守卫），beforeRouteUpdate（路由改变守卫），beforeRouteLeave(后置守卫)

---

父子组件的生命周期执行顺序

加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程：父beforeUpdate->父updated

销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

A页面跳转到B页面时：B.beforeCreated->B.created->B.beforeMounted->A.beforeDestroy->A.destroyed->B.mounted

---

Vue3性能提升的体现

1. 编译阶段
   • diff算法优化：vue3在diff算法中相比vue2增加了静态标记
   • 静态提升：Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用
   • 事件监听缓存：默认情况下绑定事件行为会被视为动态绑定，所以每次都会去追踪它的变化，开启了缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用
   • SSR优化：当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染
2. 源码体积
   • 除了移出一些不常用的API
   • Tree shaking：任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小
3. 响应式系统
   • vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
   • vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
     
     • 可以监听动态属性的添加
     • 可以监听到数组的索引和数组length属性
     • 可以监听删除属性

---