【Vue】Vue3新特性

Vue2 和 Vue3 的区别

 

90% 的写法完全一致，除了以下几点

1. Vue2 的组件只能有一个根元素，而 Vue 3 的组件支持多个根元素（可以减少很多组件之间的div包裹元素）
2. Vue2 使用选项类型API（Options API），Vue3合成型API（Composition API）（setup()方法可以包含了基本所有东西，将分散在各处的数据都整合到一个setup函数中进行初始化：比如data、计算属性、钩子）
3. 按需引入。Vue3 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。（比如要在 Vue3 使用计算属性，我们先需要在组件内引入computed。）
4. 接收 Props。在 Vue2，this代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。但是在 Vue3 中，this无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的setup()方法可以接收两个参数：
5. 触发事件。在setup()中的第二个参数content对象中就有emit。

1. props - 不可变的组件参数
2. content - Vue3 暴露出来的属性（emit，slots，attrs）