[JavaScript知识库]vue3和vite原理解析

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

• 响应式系统升级
  • 由vue2.0核心defineProperty升级为使用Proxy对象重写响应式系统
• 编译优化
• 源码体积优化
  • 移除了一些不常用的API
  • tree-shaking

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

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

在维护很复杂的组件时
CompositionAPI能够在一个功能函数中找到编写的逻辑代码
OptionsAPI需要上下很多选项中寻找,不太方便

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

• 性能的提升
• 可以监听动态新增的属性
• 可以监听删除的属性
• 可以监听数组的索引和length属性

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

• Fragments(升级vetur插件)
• 静态提升(vue2通过标记静态根节点,优化diff的过程,vue3通过标记静态节点)
• patch flag
• 缓存事件处理函数

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

const isObject = val => val !== null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
function reactive (target) {
  if (!isObject(target)) return target

  const handler = {
    get (target, key, receiver) {
      // 收集依赖
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      return convert(result)
    },
    set (target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      let result = true
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // 触发更新
        trigger(target, key)
      }
      return result
    },
    deleteProperty (target, key) {
      const hadKey = hasOwn(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        // 触发更新
        trigger(target, key)
      }
      return result
    }
  }

  return new Proxy(target, handler)
}