一、示例计算属性局限性

计算属性有个缺点是异步中无法监听数据

.<template>
  <div>
    <h2>计算属性在异步中无法监听,解决:watch监听器可以解决</h2>
    <!-- v-model实现数据双向绑定 -->
    <input type="number" v-model="num" />
    <!-- 调用 -->
    <p>{{ getage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    //   示范数据
    return {
      age: 20,
      num: 0,
    };
  },
  computed: {
    //可以监听
    // getage() {
    //   let age = this.num;
    //   console.log(1);//输出num数
    // },

    //模拟异步函数,监听不到
    getage() {
      setTimeout(() => {
        let age = this.num;
        console.log(1); //只输出默认1
      }, 1);
    },
  },
};
</script>

<style>
</style>

非异步效果

异步效果

二、解决方案-------watch监听器

作用: 1.可以侦听指定属性值的变化,当属性值发生变化的时候,就会自动的触发侦听器 2.可以侦听异步操作中的数据变化 特点(相对计算属性来比较) 1.不能人为调用,它是自动触发的 2.它一般没有返回值 3.侦听器的名称不能随意,必须和你想要侦听的属性名称完全一致 watch监听器异步非异步都可以,只不过每次调用都要重新监听

.<template>
  <div>
    <h2>计算属性在异步中无法监听,解决:watch监听器可以解决</h2>
    <!-- v-model实现数据双向绑定 -->
    <input type="number" v-model="num" />
  </div>
</template>

<script>
export default {
  data() {
    //示范数据
    return {
      age: 20,
      num: 0,
    };
  },
  //使用watch监听
  //num:你想监听的属性
  watch: {
    num() {
      setTimeout(() => {
        let age = this.num;
        console.log(age);
      }, 1);
    },
  },
};
</script>

<style>
</style>

效果 watch监听器还有两个参数,新值和旧值

nv:新值,ov:旧值

 //使用watch监听
  //num:你想监听的属性
  watch: {
    // nv:新值,ov:旧值
    num(nv, ov) {
      setTimeout(() => {
        let age = this.num;
        //let age = nv;也可以
        console.log(nv, ov);
      }, 1);
    },
  },

效果

三、watch深度监听

主要针对对象或数组监听 数组可以直接监听数组本身,通过api改值就可以了

.<template>
  <div>
    <!-- v-model实现数据双向绑定 -->
    <input type="number" v-model="obj.name" />
    <button @click="dodo">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    //示范数据
    return {
      obj: { name: "", age: 0 },
      arr: [],
    };
  },
  methods: {
    dodo() {
      //通过api对数组的操作,能够触发对数组本身的倾听
      this.arr.push("1");
    },
  },

  //使用watch监听
  //修改了对象的属性值,并不代表对象本身的变化,所以不会触发监听器
  //   watch: {
  //     obj() {
  //       console.log("aa");触发不了
  //     },
  //   },

  watch: {
    // 深度监听方法一:
    // obj: {
    //   handler() {
    //     console.log("aa");
    //   },
    //说明当前的handler是一个深度侦听
    //       deep: true,
    //     },
    //深度监听方法二:
    // "obj.name"(nv) {
    //   console.log("aaa");
    // },
    // 倾听数组
    arr() {
      console.log("11");
    },
  },
};
</script>

<style>
</style>