Vue2与Vue3的区别

阅读目录

1. 支持Framents语法
2. Vue3新增的Composition API

 

---

回到顶部

支持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的入口。