vue3 知识点

vue 3

• 设计目标

  • 更小
    • 使用了treeshaking 技术 可以把没有使用不必要的包给剔除
  • 更快
    • 更快的diff算法，通过添加没有变动的节点静态标记，下次发生变化的时候直接找该地方进行比较
    • 对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用
    • 事件监听缓存 绑定事件行为会被视为动态绑定，所以每次都会去追踪它的变化，开启事件静态缓存，没有了静态标记。也就是说下次diff算法的时候直接使用

• SSR优化

  • 当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染
  • 更友好
    • vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力

• 为什么用proxy 替代defineProperty

  • proxy
    • 检测不到对象属性的添加和删除
      数组API方法无法监听到
      需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题
  • Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的
  • Proxy可以直接监听数组的变化

• vue treeshaking 特性

  • Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination

  • 简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码