一、diff算法 性能优化
1.diff算法的优化
vue2.0
在vue2中使用的Object.definePropert(进行劫持,结合发布订阅模式的方式来实现的
缺点很明显。只能监听某个属性,无法对新添加或删除的属性进行监听、无法监听数组的变化。
vue3.0
源码全部用TS重写。使用monorepo的方式来组织项目的结构,把独立的功能模块都提取到不同的包中
用proxy也就是代理对象重写了响应式的代码,并且对编译器做了优化,重写了虚拟DOM,从而让渲染和update的性能都有了大幅度的提升,另外官方介绍 服务端渲染的性能也提升了2-3倍
二、数据监听双向绑定原理发生了变化
vue2.0 使用的是Object.definePropert(),缺点很明显。
1.defineProperty只能监听某个属性,不能对全对象监听
2.无法监听数组的变化,导致vue只能重写数组方法来监听数组
vue3.0升级使用的是es6新语法 Proxy
proxy优点:功能很强大
1 .可以直接监听整个对象,⽽⾮是对象的某个属性
2 .可以直接监听数组的变化
ref()定义简单数据类型
reactive()定义复杂数据类型
三、vue3.0可以存在多个根节点了
3.0引入了fragment概念,这是一个抽象的节点,如果发现组件是多根的会自动创建一个fragment节点,把多根节点视为自己的children。在patch时,如果发现这是一个fragment节点,则直接遍历children创建或更新