Vue3生命周期
Vue3中可以继续使用[Vue2]中的生命周期钩子（写在setup函数外面），但是有两个更改：
beforeDestroy 改名为 beforeUnmount
destroyed 改名为 unmounted
Vue3把Vue2的一些钩子更改了名字，而且钩子需用去进行引用才能使用
beforeCreate ===> setup()
created =======> setup()
beforeMount ===> onBeforeMount
mounted =======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======> onUpdated
beforeUnmount ==> onBeforeUnmount
unmounted =====> onUnmounted
其中beforeCreate和created这两个钩子是没有的，因为在steup执行的时候就相当于这两个钩子
toRef
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性
import { toRef } from 'vue'
const name = toRef(person,'name')
const age = toRef(person,'age')
const Tome = toRef(person.job.j1, 'Tome')
其他Composition API
shallowRef与shallowReactive
shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
readonly与shallowReadonly
readonly: 让一个响应式数据变为只读的（深只读，每一层都不能改，都是readonly）
shallowReadonly：让一个响应式数据变为只读的（浅只读，只有第一层readonly，深层次仍然可以改）。
通常使用这种Api是不希望数据被修改时才会使用
provide和inject
作用：实现祖与后代组件间通信
父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
//父组件
import { provide } from 'vue'
setup(){
let car = reactive({name:'宝马',price:'40万'})
provide('car',car)
}
//后代组件
import { inject } from 'vue'
setup(props,context){
const car = inject('car')
return {car}
}
如何的去进行响应式数据的判断
isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 isReadonly: 检查一个对象是否是由 readonly 创建的只读代理 isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
组合式API的优势
使用传统的OptionsAPI，新增或者修改一个需求，需要分别在data、methods、computed中修改
组合式API我们可以把相关功能的代码更有序地组织在一起(不需要写那么多的this，比较靠近JS原生的写法)
