watchEffect一进入页面就会执行一次，也可以进行监听
watchEffect的回调函数中的响应式数据只要发生了变化，回调函数会全部执行一遍
const obj=reactive({
name:'zhangsan',
age:20
})
const msg=ref('你好坏噢')
watchEffect(()=>{
let v=obj.name;
let v2=msg;
console.log(v,v2.value);
})
return{
obj,
msg
}
shallowReactive
使用shallowReactive创建的响应式对象不执行嵌套对象的深层响应式转换，如下，obj.name和obj.age都是响应式的，而obj.stu.no不是响应式的，当改变obj.stu.no的value时，页面中使用obj.stu.no的部分并不会重新渲染。
const obj1=shallowReactive({
name:'法外狂徒',
age:30,
car:'BMW',
dog:'哈士奇',
stu:{
no:55
}
})
toRef 与 toRefs
import {reactive} from 'vue'
export default {
setup(){
const obj = reactive({
name:'zhangsan',
age:20
})
return {
obj,
name:obj.name
}
}
}
如上，我们定义了一个响应式对象obj，并将obj.name给到变量name，在使用时可以直接访问到obj.name，但这样name无法做到响应式，即使用v-model指令绑定name时，无法实现双向数据绑定，使用toRef或toRefs可以实现响应。
toRe接收两个参数，第一个参数为目标对象，第二个参数为值为字符串类型的key，toRefs则直接接收一个目标对象作为参数。
在 setup 中使用生命周期函数
在setup中可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在setup函数中编写。
执行顺序setup>onBeforeCreate>created>onBeforeMount>onMounted。
在Vue3中，beforeUnmount替代了beforeDestroy，unmounted替代了destroyed。
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
setup(){
console.log('setup');
// dom挂载之前
onBeforeMount(()=>{
console.log('onBeforeMount');
})
// dom挂载之后
onMounted(()=>{
console.log('onMounted');
})
// setup 中return 的数据更新之前
onBeforeUpdate(()=>{
console.log('onBeforeUpdate');
})
// setup 中return 的数据更新之后
onUpdated(()=>{
console.log('onUpdated');
})
// 组件卸载之前
onBeforeUnmount(()=>{
console.log('onBeforeUnmount');
})
// 组件卸载之后
onUnmounted(()=>{
console.log('onUnmounted');
})
}
}
