vue3新特性1

一、创建一个vue3.0项目

vscode打开项目

二、对比vue2的新特性

1、set up、ref和reactive

以前的data、声明周期、自定义函数都可以放置在set up内，setup是相当于beforeCreate和created生命周期钩子， beforeCreate和created钩子中编写的任何代码都可以直接在setup函数中编写。在 setup 函数中必须 return 出去才可以在模板区域使用。

ref 是 vue 3.0 的新特性，其作用为创建响应式的值

reactive 是 vue 3.0 的，其作用为创建响应式的对象或数组

2、生命周期

vue2.0	vue3.0	说明
beforeCreate	setup	组件创建之前
created	setup	组件创建完成
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成
beforeUpdate	onBeforeUpdate	数据更新，虚拟 DOM 打补丁之前
updated	onUpdated	数据更新，虚拟 DOM 渲染完成
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁后

vue3.0的生命周期是从vue中到出，我们需要什么就引入什么。常用的生命周期是挂载相关的。这样会使得最终编译项目的体积减小。除set up之外，其他的生命周期函数都是在set up里面直接书写。

life.vue

lifeCycle.vue

初始：

点击加：

点击隐藏：（隐藏是挂载在组件上的）