概述
vue3与vue2的写法有了本质的区别，不过尤雨溪考虑到在写vue3时做了降级处理，就是用vue2的语法可以去做vue3的项目，对项目技术升级十分友好，但还是强烈建议使用vue3的新语法
1. step()和ref()
学过react的应该感觉很熟悉这种写法
- step() 是vue2中data和methods中的数据和函数方法结合到了step()，
- ref() 变量声明函数，知道react hooks 的感觉是不是有点像useState(),在模板中渲染的变量必须用ref()方法声明 最后将要渲染的变量return出去
注意： 用ref声明的变量取值和改变值时需要加上.value属性
2.reactive()
使用ref声明的变量需要改变值时需要加上.value属性，reactive时用来解决这个问题的方法。reactive接收一个对象，将方法和变量包裹，并赋值一个变量。然后在step()中return这个变量，此时template模板中的变量需要用ruturn的这个变量去渲染。
3.toRefs()
用了reactive()函数处理过的变量和方法都被一个对象接收，如果你想用解构赋值将其解构出来此时需要用到toRefs()函数处理一下
4.1vue3的生命周期
- setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
- onBeforeMount() : 组件挂载到节点上之前执行的函数。
- onMounted() : 组件挂载完成后执行的函数。
- onBeforeUpdate(): 组件更新之前执行的函数。
- onUpdated(): 组件更新完成之后执行的函数。
- onBeforeUnmount(): 组件卸载之前执行的函数。
- onUnmounted(): 组件卸载完成后执行的函数
- onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
- onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
- onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数
4.2vue2和vue3生命周期对比
- Vue2--------------vue3
- beforeCreate -> setup()
- created -> setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- activated -> onActivated
- deactivated -> onDeactivated
- errorCaptured -> onErrorCaptured
