Vue3 新特性
前言
Vue.js 3.0 “One Piece” 已正式发布啦，在 2020 年 9 月 19 日 Vue3 更新了 正式版本，正式版本一出，代表着不会再有太大的改动了，也意味着又要开始学习啦
官方网站地址: v3.vuejs.org
案例的github地址：github地址
新特性
1 向下兼容
Vue3和Vue2是一样的，也是一套用于构建用户界面的渐进式框架，并且向下兼容，也就是说用Vue2的语法基于Vue3进行开发是没有问题的
2 性能的提升
官方网站给出的数据是：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54% (不禁感叹大佬还是大佬，请收下我的膝盖)
3 更好TypeScript支持
Vue3 的源代码就是使用TypeScript进行开发的
4 Composition API
Vue 官方发布了 Composition API 的官方插件，使广大用户可以在 Vue2.x 中享受 Function Base 带来的新体验。
而在 vue 3 中无需单独安装插件，开箱即用
5 Multiple root elements
在 Vue 2 中，tempalte 只能取一个根元素。即使我们只有两个p标签 标记，我们也必须将它们包含在一个根元素中，在 Vue 3 中取消了这一限制：可以直接在template标签中使用任意数量的标签:
通过vue-cli搭建Vue3
1 安装vue-cli
npm install -g @vue/cli // 安装
通过命令vue --version获取版本信息，如果你的版本低于V4.5.4，可以再使用npm install -g @vue/cli来进行安装，因为只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项。
通过命令vue create vue3即可创建vue3项目
Please pick a preset: (Use arrow keys) // 请选择预选项
> Default ([Vue 2] babel, eslint) // 使用Vue2默认模板进行创建
Default (Vue 3 Preview) ([Vue 3] babel, eslint) // 使用Vue3默认模板进行创建
Manually select features // 手动选择(自定义)
我们选择第二个使用Vue3默认模板进行创建
这样我们就创建出一个vue3的项目啦
通过案例加深对Vue3的理解
案例1 setup 与 ref
import {
ref } from "vue";
setup() {
// Composition API
let count = ref(0);
let inc = () => {
count.value++;
};
let list = ref([1, 2]);
function myFun() {
list.value[2] = 3;
}
return {
count,
inc,
list,
myFun
};
}
setup 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑挂载 setup 里，return出去就可以了。
注意：setup 函数创建组件之前，在beforeCreate和created之前执行
通过ref函数可以创建响应式数据，在setup中需要通过xxx.value的形式才能获取到值，在template中无需通过xxx.value的形式，只需要xxx即可获取到值
案例2 reactive与toRefs
在案例1中我们不难发现，ref可以实现响应式数据，方法可以通过return的形式暴露到template中使用，所有的变量和方法都混淆在一起，可以说没什么章法可言，最难受的是在setup中要改变和读取一个ref返回的值，还要加上value。很容易开发时候就遗忘，这种代码一定是可以优化的。这个时候就需要用到reactive，他是一个方法，接收一个对象参数。
import {
ref, reactive, toRefs } from "vue";
setup() {
console.log('setup------>');
const data = reactive({
count: 0,
list: [1, 2],
inc: () => {
data.count++;
},
myFun: () => {
data.list[2] = 3;
}
})
const refData = toRefs(data);
return {
...refData
};
},
通过reactive方法无论是变量和方法，都可以作为 参数Object 中的一个属性，而且在改变某个属性值的时候也不用再加讨厌的value属性了。再return返回的时候也不用一个个返回了，只需要返回一个data,就可以了。
toRefs函数则是可以将一个reactive生成的对象，转化为ref，在template模板中就不需要用data.xxx的形式了
案例3 生命周期
通过Vue3与Vue2生命周期的对比，进行了解
值得注意的是vue3中的setup要比beforeCreate和created 更早的执行，vue2的destroyed 对应的是onUnmounted
| vue2 | vue3 |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |