Vue3 + Ts 学习笔记第三天

watch 监听属性
开启深度监听 deep： true
进入第一次开始监听 immediate: true
1.reactive 情况 如果监听对象的某个属性时 () => people.sex.man
2.ref 情况 如果监听对象的某个属性时 () => people.value.sex.man 还要开启deep： true

整体来看监听 reactive 还是比 ref 好使的多
监听多个属性 [ ] 数组包裹

1.ref 监听 深层次需要 开启 deep:true 
import { ref , watch } from 'vue'
const name = ref({  
               nav: { 
                 bar: ""
               }
            })
 watch(name, (newval,oldval) => {
     console.log(newval,'=====',oldval)
 },{deep: true})

2.reactive 监听 bug新旧值都一样 但是监听深层次不需要deep: true
import { reactive , watch ,ref} from 'vue'
const people = reactive({ 
     sex: {
       man: '',
       woman: ''
     } 
})
const msg = ref<string>("野原广志")
// 如果想监听对象的某个属性是() => people.sex.man
watch(() => people.sex.man,(newval) => {
    consloe.log(newval)
})
// 列举监听多个属性
watch([sex,msg],(newval,oldval) => {})

watchEffect 高阶监听
相当于结合 deep: true （深度监听） 和 immediate: true （首次进入页面监听）

import { watchEffect, ref, reactive } from "vue";
const message = ref<String>("大哥");
const msg = reactive({
  message: "二弟",
});
const stop = watchEffect((o) => {
  o(() => {
    console.log("before");
  });
  console.log(message.value);
  console.log(msg.message);
});

watchEffect((回调) => {
    回调(() => {
     执行监听的时候会在前执行
    })
})