1、计算属性：computed

计算属性，顾名思义通常是用于处理一些逻辑上的问题，计算属性第一次会将计算好的值存到缓存中去，当下一次它所依赖的值还是上一次的，未发生改变，那么就会直接在缓存中去拿，而不会去进行重新计算。
优点：提升了代码执行速度，优化了性能

1.1、计算属性的第一种简洁写法：直接return

针对上述提出的名词【所依赖的值】，这个依赖的值是指的什么呢？指的就是computed在进行逻辑运算中所牵涉到的变量值，简单的比方就是：假如计算属性处理的是一个人的个人用户信息，那么这个人的姓名，年龄等值就属于所依赖的值，只有当这些值发生了变化，计算属性才会重新执行。

<template>
  <div class="demo">
    <h3>姓名:{{ user }}</h3>
    <h3>年龄:{{ userAge }}</h3>
    <!-- 添加一个按钮，去修改年龄，年龄不是计算属性依赖的值 -->
    <button @click="changeAge">修改年龄</button>
    <button @click="changeUser">修改姓名</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      firstName: "",
      lastName: "",
      userAge: 18,
    };
  },
  created() {
    this.firstName = "Mike";
    this.lastName = "Brown";
  },
  methods: {
    // 随机修改年龄，非依赖值，计算属性不会去执行，拿到的是缓存中的数据信息。
    changeAge() {
      this.userAge = Math.floor(Math.random() * 20) + 2;
    },
    // 修改姓名，会重新去执行计算属性
    changeUser() {
      // 当firstName 或 lastName 再次和缓存中存储的数据信息一样的时候，就同样会是去拿缓存中的数据。
      this.firstName = String(Math.floor(Math.random() * 10) + 1);
      this.lastName = String(Math.floor(Math.random() * 20) + 10);
    },
  },
  // 使用计算属性去缓存用户信息
  computed: {
    user: function () {
      console.log("依赖的值发生了变化，执行了一次.");
      // 当依赖的值(this.firstName，this.lastName)发生变化时，才会再次执行该函数
      return this.firstName + " " + this.lastName;
    },
  },
};
</script>

<style scoped>
</style>

代码中，只有当firstName或者lastName发生了变化，计算属性user才会去重新执行，如果发生变化的是userAge，那么计算属性拿的是上一次执行代码时缓存下来的数据内容。

结果展示：

1. 当修改userAge时：【userAge非计算属性所依赖的值】

userAge发生改变.gif

可以看到，修改年龄时是没有去执行计算属性的
2. 当修改lastName和firstName时：【是计算属性依赖的值】

user发生改变.gif

可以看到，经过了computed计算属性.

1.2、计算属性的第二种完整的写法：get()和set()

get()方法是去获取计算后的值，而set()是当依赖的值发生了改变，set去做逻辑处理的部分，参数为修改后的值。

  methods: {
    // 修改姓名，会重新去执行计算属性
    changeUser() {
      this.user = 'xiao chen'
    },
  },
  // 使用计算属性去缓存用户信息
  computed: {
    user: {
      get() {
        console.log("打印获取到的值：", this.firstName + " " + this.lastName);
        return this.firstName + " " + this.lastName;
      },
      set(value) {
        console.log('打印value值：',value);
        let arr = value.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];
      },
    },
  },

2、普通的methods

普通的方法去修改或者去处理一些逻辑的话，就不会将值进行缓存，因此，每次相同的变量值都会被重复执行。

  methods: {
    change() {
      console.log("change执行了....");
      this.firstName = "xiao";
      this.lastName = "chen";
      return this.firstName + " " + this.lastName;
    },
  }

change事件触发.gif

3、watch监听器

watch监听只要监听的值产生了变化，那么就会执行监听中的handler方法，handler方法有两个参数，一个是newValue,一个是oldValue，但是在监听整个对象时，两个值打印出来是一样的，普通的值变化打印出来是不同的。

<template>
  <div class="demo">
    <h3>姓名:{{ user.firstName + "" + user.lastName }}</h3>
    <h3>年龄:{{ user.userAge }}</h3>
    <button @click="change">修改姓名</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      user: {
        firstName: "Mike",
        lastName: "Brown",
        userAge: 18,
      },
    };
  },
  created() {},
  methods: {
    change() {
      this.user.firstName = "xiao";
      this.user.lastName = "chen";
      this.user.userAge = Math.floor(Math.random() * 20) + 2;
    },
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      deep: true,
      immediate:true
    },
  },
};

打印结果.png

3.1、使用watch监听对象的某个属性的变化

  data() {
    return {
      user: {
        firstName: "Mike",
        lastName: "Brown",
        userAge: 18,
      },
    };
  },
  created() {},
  methods: {
    change() {
      this.user.firstName = "xiao";
      this.user.lastName = "chen";
      this.user.userAge = Math.floor(Math.random() * 20) + 2;
    },
  },

  watch: {
    'user.firstName'(newValue, oldValue) {
      console.log(newValue,oldValue)
    },
  },

image.png

这样写法就能监听到firstName的属性值的变化了。

Vue方向：梳理computed和watch以及普通methods三者之间的差异性