vue2中computed与watch的使用

computed和watch 我们先看下它们的主要作用和区别：请看下方的导图记录：

下面是代码实现： watch的代码：

<template>
  <div class="">
    <input type="text" v-model="name" />
    <input type="text" v-model="info.city" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "coco",
      info: {
        city: "上海",
      },
    };
  },
  watch: {
    name(oldVal, val) {
      // 基本类型可以拿到oldval和val
      console.log("watch name", oldVal, val);
       //   模拟异步操作
      setTimeout(() => {
        console.log("这里是异步的操作", oldVal, val);
      }, 1000);
    },
    info: {
      handler(oldVal, val) {
        // 引用类型，是拿不到oldVal的；因为引用类型是放在堆里的，引用指针是相同的，此时已经指向了新的val
        console.log("watch info", oldVal, val);
      },
      deep: true, //深度监听
      immediate: true, //进入组件的第一次就监听一次
    },
  },
};
</script>

<style lang="scss" scoped></style>

computed的代码：

<template>
  <div class="">
    <p>num:{{ num }}</p>
    <p>double1:{{ double1 }}</p>
    <input type="text" v-model="double2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 2,
    };
  },
  computed: {
    // 计算属性的两种写法
    double1() {
    //计算属性中不能有异步操作，因为computed属性是通过return来返回计算的值的
      return this.num * 2;
    },
    double2: {
      get() {
        return this.num * 3;
      },
      set(val) {
        console.log("1111", val);
        this.num = val;
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>