Vue3的watch监听的多种情况

一.、vue3中的watch为函数形式，直接在setup里面使用，有三个参数：

• 第一个是监听的对象
• 第二个是监听的回调，由于setup不需要考虑this的指向问题，所以可以直接在watch中写箭头
• 函数
•  第三个参数： 接受一个对象  { deep： true;(深度监听)   immediate: true（立即监听； 页面一开始加载的时候监听）}

二、多种情况

第一种：监听单个基本数据类型（ref）

 const age = ref(18);
   watch(age,(newVal, oldVal) => {
     console.log(newVal, oldVal);
   })

第二种：监听多个基本数据类型（ref）

  const age = ref(18);
  const sum = ref(60);
  watch([age,sum],(newVal, oldVal) => {
     console.log(newVal, oldVal);
  })

第三种：监听对象类型（ref）-2个方式

1）使用.value

 const obj = ref({
     name:'clt',
     age:'18'
   });
   watch(obj.value,(newVal, oldVal) => {
     console.log(newVal, oldVal);
   })

2）开启深度监听（deep，默认值是 false，代表是否深度监听）

  const obj = ref({
     name:'clt',
     age:'18'
   });
   watch(obj,(newVal, oldVal) => {
     console.log(newVal, oldVal);
   },{deep: true})

第四种：监听对象中某一个属性变化（reactive）

 const obj = reactive({
     name: 'clt',
     age: 18
   })
   watch(()=>obj.age,(newVal, oldVal) => {
     console.log(newVal, oldVal);
   })

第五种：监听props里面的属性

 props: {
   age: {
      type: Number,
      default: 18
    }
  },
watch(() => props.age,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
});

 

三、在vue2中watch只有一个, 而在vue3中可以存在多个watch.