vue3优化

响应式

 vue2采用object.defineProperty()进行数据劫持,vue3基本数据类型采用object.defineProperty(),类型,数组采用proxy()进行数据劫持,利用reflect对源数据进行操作,优点如下:
 1.可以监听动态添加对象的属性
 2.可以监听删除的属性
 3.可以监听数组的索引以及数组的length属性

性能优化

1.diff算法优化。增加了patch flag,标记静态元素(-1)和动态文本元素,标记静态元素的在diff中不会参与比较
2.静态提升。标记静态元素的会被静态提升,放置在render 函数外,并且会在项目启动后只会创建一次,在渲染时直接复用

Fragment

Vue3中不在要求模版的根节点必须是只能有一个节点。根节点和和render函数返回的可以是纯文字、数组、单个节点,如果是数组,会自动转化为 Fragments,减少了不必要的dom元素

TreeShaking

因为ES6模块是静态引用的,所以我们可以在编译时正确的判断到底加载了哪些代码。对代码全局做一个分析,找到那些没用被用到的模块、函数、变量,并把这些去掉。

Composition Api

reactive
ref
computed
readonly
watchEffect
watch
Lifecycle Hooks

TypeScript

你可能感兴趣的:(vue)