这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战
vue2.0到3.0的周期函数的更改：
| vue2.x | vue3.x |
|---|---|
| beforeCreate (初始化) | setup (初始化) |
| create (初始化) | setup(初始化) |
| beforeMount (挂载阶段) | onBeforeUpdate (挂载阶段) |
| mounted (挂载阶段) | onMounted (挂载阶段) |
| beforeUpdate (更新阶段) | onBeforeUpdate (更新阶段) |
| updated (更新阶段) | onUpdated (更新阶段) |
| beforeDestory (销毁阶段) | onBeforeUnmount (销毁阶段) |
| destroyed (销毁阶段) | omUnmounted (销毁阶段) |
| errorCaptured(捕获一个来自子孙组件的错误时被调用) | onErrorCaptured (捕获一个来自子孙组件的错误时被调用) |
注意：
- setup函数是 Composition API（组合API）的入口
- setUp这个生命周期发生在beforeCreate和created之前
- setUp中不能使用data和methods，所以为了避免我们错误的使用，vue3.0直接将 setup函数中的this修改成了 undefined
- setup函数只能是同步的不能是异步的
使用： 首先要在页面中先导入这个生命周期函数,用到哪个导入哪个：
<script>
import { reactive, ref, computed ,toRefs,onMounted,onUnmounted,watch} from "vue";
</script>
定义一个变量：vue3.0给我们提供了ref() 和 reactive()用于定义变量，区别是，一般ref()用于定义简单类型的数据（字符串，数字等），reactive()用于定义复杂类型的数据（对象，数组等）
//ref()定义一个变量a 为100
<script>
setup() {
let a = ref(100);
console.log(a)
return {
a //注意，要return出去才能用
}
}
</script>
打印a得到如下所示：
RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: 100, _value: 100}
1. dep: Set(1) {ReactiveEffect}
1. __v_isRef: true
1. _rawValue: 100
1. _shallow: false
1. _value: 100
1. value: 100
在js中要正确获取或操作到a定义的值，我们需要这样做：
setup(){
...
console.log(a.value) //100
function plusOne(){
a.value++
}
return ...
}
在标签中又如何使用呢：
<template>
<div class="hello">
{{a}} //这里直接就能获取到100，不需要.value
</div>
</template>
reactive()定义一个对象b ：{name:100,age：10}
<script>
setup() {
let b = reactive({
name:100,
age：10
});
console.log(b)
return {
b //一定要return出去
}
}
</script>
打印b得到如下：
Proxy {name: "liudan", age: 18}
1. [[Handler]]: Object
1. [[Target]]: Object
1. [[IsRevoked]]: false
由上可知：reactive()函数内部是使用es6的proxy API来实现响应式的
页面使用：
<template>
<div class="hello">
{{b}} //{name:'liudan',age:18}
</div>
</template>
