vue(35)vue中CompositionAPI中监听watch的使用

<template>

  <div class="home">

    <button @click="a++">{{ a }}</button>

    <br />

    <button @click="b++">{{ b }}</button>

  </div>

</template>

<script>

import { ref, reactive, readonly, toRefs, computed, watch } from "vue";

export default {

  setup() {

    let a = ref(0);

    let b = ref(0);

    //如果watch方法中不传任何参数，代码体中也不使用任何响应式变量，则它的代码只会执行一次，就是初始化时执行。

    //没有在参数中传入变量的watch中的代码至少会执行一次，在初始化的时候执行

    // watch(()=>{

    //   console.log('------');

    // });

    //如果watch中使用了任何的响应式变量的值，那么每次任意变量有变化的时候都会执行一次代码

    // watch(()=>{

    //   console.log(a.value+'------');

    // });

    //将a作为参数传入watch则表示对a进行监听，那么a变化的时候就会执行一次watch中的代码

    //有监听的变量的watch默认不会初始化执行一次

    // watch(a,()=>{

    //   console.log('--------');

    //   console.log(a.value);

    // });

    //如果传入传入{immediate:true}则会始终默认先以a的初值执行一次watch回调函数中的代码

    // watch(a,()=>{

    //   console.log('--------');

    //   console.log(a.value);

    // },{immediate:true});

    //可以在回调函数中传入参数获取变量变化前和变化后的值

    // watch(a, (newValue, oldValue) => {

    //   console.log(oldValue);

    //   console.log(newValue);

    // });

    //监听多个变量的写法

    watch([a,b], ([newa,olda], [newb,oldb]) => {

      console.log(olda);

      console.log(newa);

       console.log(oldb);

      console.log(newb);

    });

    //注意：如果上面的a或者b是对象（reactive声明的）的话，也可以监控到对象的变化，但是在回调函数中的新旧对象中访问不到

    //对象中的成员，如果希望能拿到对象中的成员最好是监控的时候不是传入整个响应对象而是对象中的某个属性即可。

    return { a, b };

  },

};

</script>