vue3-下篇

1,072 阅读1分钟

实验性特性

image.png

h函数

h函数是一个用于创建vnode的函数

h函数接受三个参数

第一个参数:一个元素/一个组件/一个异步组件/一个函数式组件。

第二个参数:元素/组件的一些属性,无属性时最好传个null。

第三个参数:(string/Array/object)children子元素,或者有插槽的对象。

image.png

image.png

image.png

image.png

image.png

jsx

image.png

自定义指令

image.png

image.png

image.png

image.png

image.png

Block Tree

修改时,不变的元素没必要重新创建新的vnode,render时对于不变的操作,做了作用域的提升放到变量中,下一次只需要引用变量创建改动的vnode即可,也就是说,对于不会改变的静态节点,进行了作用域的提升(render)。

image.png

patch,不变的元素没必要进行patch,diff时只比对那些修改的vnode,看到render 时 return了一个 openBlock,他会创建一个数组,会将修改的vnode放进去,最终放到dynamicChildren参数中,diff时只要diff这个参数即可,dynamicChildren没值patchChildren,有值patchBlockChildren.

data与setup执行顺序

image.png

Vue3.0 响应式数据本质

image.png

shallowReactive shallowRef 实现

image.png

reactive ref 实现

image.png

shallowReadonly readonly 实现

image.png

全局API改为实例方法

image.png

image.png

全局 API Treeshaking

image.png

image.png

image.png

image.png

image.png

v-model使用的变化

image.png

image.png

image.png

image.png

slot统一

image.png

image.png

异步组件使用变化

image.png

Data 选项

image.png

image.png

过渡的 class 名更改

image.png

按键修饰符

image.png

image.png

事件 API

image.png

通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt。

过滤器

从 Vue 3.0 开始,过滤器已删除,不再支持。

建议用方法调用或计算属性替换它们。

key属性

image.png

v-if 与 v-for 的优先级对比

image.png

provide inject

image.png

image.png