Vue2与Vue3的区别
支持Framents语法
在Vue2中要求组件模板中只能有一个根元素,因为在Diff算法中,虚拟DOM是一个树结构,单个根有利于Diff算法对比时进行查找与遍历。而Vue3实际上在多个根节点外层包裹一个虚拟根节点,来实现单个根的虚拟DOM树,因此在Vue3的组件模板中支持多个根元素。
Vue3新增的Composition API
在Vue2中,我们只需要向组件实例的data选项添加属性便能得到响应式数据,而Vue3在兼容Options API的同时,新增了Composition API,其中提供了两个函数来实现数据的响应式:
- ref()函数
接收一个内部值,返回一个响应式的ref对象,此对象只有一个指向其内部值的value属性。
-
- 当接收基本数据类型数据时,依然靠Object.defineProperty()将数据转换成getter/setter的形式来实现响应式;
- 当接收引用数据类型数据时,会调用reactive()函数将其转为具有深层响应式的对象;
- reactive()函数
返回一个对象的响应式代理,也即Proxy对象。该对象嵌套的对象也会通过Proxy对象包裹,因此具有深层响应式。
另外,Vue3的Composition API使用setup()钩子函数来完成beforeCreate()与created()钩子中添加的操作,它是组合式API的入口。