1、响应式原理
vue2
vue2中采用 defineProperty
来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter
和setter
,结合发布订阅模式实现响应式。
存在的问题:
- 检测不到对象属性的添加和删除
- 数组API方法无法监听到
- 需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题
Vue3
vue3采用proxy
重写了响应式系统,proxy
的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作。
proxy
可以直接监听数组的变化。
2、语法API
vue2
Options API
,即选项API。以vue为后缀的文件,通过定义methods
,computed
,watch
,data
等属性与方法,共同处理页面逻辑。
然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解。
Vue3
Composition API
,即组合式API。组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)。
即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API。
3、Vue3支持多个根节点
Vue2中,组件只能有一个根节点;
Vue3中,组件可设置多个根节点;
4、生命周期
Vue 3 新增了 setup()
函数,替代了 Vue 2 的 beforeCreate
和 created
钩子函数。在 setup()
函数中,我们可以直接访问组件的实例属性和方法,以及通过 next() 函数来访问父组件中的属性和方法。
5、Tree Shaking
tree shaking
是一种通过清除多余代码方式来优化项目打包体积的技术。主要是借助ES6
模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量。
Vue3源码引入tree shaking
特性,将全局 API 进行分块。如果您不使用某些功能,它们将不会包含在您的基础包中。
6、Diff算法优化
Vue2
当数据发生变化,它就会新生成一个DOM树,并和之前的DOM树进行比较,找到不同的节点然后更新。但这比较的过程是全量的比较,也就是每个节点都会彼此比较。但其中很显然的是,有些节点中的内容是不会发生改变的,那我们对其进行比较就肯定消耗了时间。
Vue3
在创建虚拟DOM树的时候,会根据DOM中的内容会不会发生变化,添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候,就只会对比这些带有静态标记的节点。
7、静态提升
Vue2中无论元素是否参与更新,每次都会重新创建,然后再渲染。
Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用。这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用。
例子:
<span>你好</span>
<div>{{ message }}</div>
没有做静态提升之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("span", null, "你好"),_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}
做了静态提升之后
const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1,_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}// Check the console for the AST
静态内容_hoisted_1被放置在render 函数外,每次渲染的时候只要取 _hoisted_1 即可。
同时 _hoisted_1 被打上了 PatchFlag ,静态标记值为 -1 ,特殊标志是负整数表示永远不会用于 Diff。
8、事件监听缓存
默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化。但是因为是同一个函数,所以没必要去追踪它的变化。开启事件侦听器缓存后,没有了静态标记,下次diff算法的时候直接使用提升性能。
9、TypeScript
Vue3是基于typeScript编写的,提供了更好的类型检查,能支持复杂的类型推导。
以上就是个人的一些见解,如有不足或补充,欢迎一起探讨!!!