Vue学习笔记---Vue3渲染(对比Vue2)

1.响应性原理

• 定义：new Proxy(target,handler)
• Proxy：将对象包装在Proxy中，对对象进行拦截处理
• Reflect：返回值
• track：跟踪对象
• trigger：更改对象

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, property, receiver) {
    track(target, property)
    return Reflect.get(...arguments)
  },
  set(target, property, value, receiver) {
    trigger(target, property)
    return Reflect.set(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

• template片段：支持多根节点

2.异步组件

• defineAsyncComponent({})方法明确定义异步组件
• 异步组件component选项重命名为loader
• loader函数本身不接受resolve和reject传递参数，必须返回Promise

3.render函数

• h全局导入，不需要作为参数传递进渲染函数，render函数内直接h(‘div’)渲染即可
• 渲染函数配置项domProps展平
• 渲染函数中不可使用字符串ID隐式查找已注册组件，需要导入resolveComponent方法显示查找

4.插槽

• 插槽内容：
  • vue2.0渲染函数中slot作为节点属性定义
  • vue3.0渲染函数中slot作为节点子对象定义
• 作用域插槽：this.$scopedSlots访问转为this.$slots访问

5.自定义指令

• 钩子函数替换成生命周期函数
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount
  • unmounted

6.过渡类名变更：

• v-enter过渡类重命名为v-enter-from
• v-leave过渡类重命名为v-leave-from