监视基本类型

// 监视基本类型
const x = ref(0);
const y = ref(0);
// 监视一个响应式基本类型变量
watch(x, (newVal, oldVal)=>{
  console.log("newVal", newVal);
  console.log("oldVal", oldVal);
},{
  // 设置初始化就监听一次
  immediate:true
})
// 利用getter函数监视,必须返回具体的值，即基本类型的value属性
watch(()=>x.value, (newVal, oldVal)=>{
  console.log("newVal", newVal);
  console.log("oldVal", oldVal);
})
// 通过数组监视多个响应式基本类型变量
watch([x, y], (newVal, oldVal)=>{
  console.log("newVal", newVal);
  console.log("oldVal", oldVal);
})
// 通过数组监视多个getter函数返回的值
watch([()=>x.value, ()=>y.value], (newVal, oldVal)=>{
  console.log("newVal", newVal);
  console.log("oldVal", oldVal);
})

监视引用类型

// 监视引用类型
const obj = reactive({
  count:0,
  deepObj:{
    a:0
  }
})
// // 监视一个响应式引用类型变量，默认就是深度监视
watch(obj, (newVal, oldVal)=>{
  console.log("newVal", newVal);
  // 此处oldVal和newVal一致，因为地址没有改变，指向同一个对象
  console.log("oldVal", oldVal);
})
// 监视利用getter函数监视
watch(()=>obj.count, (newVal, oldVal)=>{
  console.log("newVal", newVal);
  // 此处可以获取oldVal
  console.log("oldVal", oldVal);
})
// 监视响应式引用类型变量的深层对象，需要开启深度监视
watch(()=>obj.deepObj, (newVal, oldVal)=>{
  console.log("newVal", newVal);
  // 此处oldVal和newVal一致，因为地址没有改变，指向同一个对象
  console.log("oldVal", oldVal);
},{
  // 开启深度监视
  deep:true
})

watchEffect

const num = ref(0);
// 创建监视器是就执行一次回调，并且会依赖回调里的变量变化来执行回调
watchEffect(()=>{
  console.log(num.value);
})

// 手动停止一个watchEffect监视器
const unwatch = watchEffect(() => {
  console.log(num.value);
})
unwatch();