Vue.js 3.0

一、Vue 3.0 性能提升主要是通过哪几方面体现的？

1.响应式系统升级

• vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，来实现响应式
• vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
  • 可以监听动态属性的添加
  • 可以监听到数组的索引和数组length属性
  • 可以监听删除属性

2.编译优化

• vue2中采用标记静态根节点，优化diff过程，来减少操作dom
• vue3中标记和提升所有静态根节点,diff过程只需要对比动态节点
  • Fragments
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

3.源码体积的优化

• vue3中移出课一些不常用的API,eg:inline-template,filter等
• Tree-sharking(vue3中没有用到的模块不会被打包，但是核心模块会被打包，Keep-Alive,transition等都是按需引入)

二、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

• Options Api
  • 包含一个描述组件选项（data,methods,props）的对象
  • 开发复杂组件，同一个功能代码被拆分到不同选项中
• Composition Api
  • 一组基于函数的API
  • 可以灵活的组织组件的逻辑

  • 更好的类型推导，容易集合TypeScript

    
    Composition Api 与 Vue 2.x使用的Options Api

三、Proxy 相对于 Object.defineProperty 有哪些优点？

• vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，来实现响应式
• vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
  • 可以监听动态属性的添加
  • 可以监听到数组的索引和数组length属性
  • 可以监听删除属性
  • 多层属性嵌套，在访问属性过程中处理下一级属性

四、Vue 3.0 在编译方面有哪些优化？

• vue2中采用标记静态根节点，优化diff过程，来减少操作dom
• vue3中标记和提升所有静态根节点,diff过程只需要对比动态节点
  • Fragments
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

五、Vue.js 3.0 响应式系统的实现原理？

• Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的
  • 1.reactive：
    • 接受一个参数，typeof判断这个参数是否是对象，不是对象直接返回这个参数，不能用reactive做响应式处理
    • 是对象，创建响应拦截器handler,里面实现get/set/deleteProperty
    • get：通过track收集依赖,通过Reflect.get获取当前key的值，注意这里如果key的值是个对象，要为该对象创建响应拦截器递归调用reactive
    • set：先比较新旧value是否相等，相等直接返回,不想等，通过Reflect.set设置新的value,并通过trigger触发更新，最后记得返回boolean值，否则会报warn
    • deleteProperty:当前对象有这个key值，删除这个key，并通过trigger触发更新，最后记得返回boolean值，否则会报warn
  • 2.effect
    • 接受一个函数作为参数，记得把函数赋值给全局对象activeEffect，作用是访问响应式对象属性时区收集依赖
  • 3.track
    • 接受两个参数target和key
    • 如果没有 activeEffect，则说明没有创建 effect 依赖
    • 如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性，
      • WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
      • WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
        • depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
        • depsMap 中有 key 属性，则添加这个 activeEffect
  • 4.trigger
    • 判断 WeakMap 中是否有 target 属性
      • WeakMap 中没有 target 属性，则没有 target 相应的依赖
      • WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()