Vue 中 计算属性与侦听属性的使用与介绍

Vue 中 计算属性与侦听属性的使用与介绍

计算属性 - computed

计算属性是一种特殊的属性，它依赖于其他属性，并返回一个新的值。当依赖的属性发生变化时，计算属性会重新求值。

计算属性的语法如下：

computed: {
  // 计算属性名: function() {
  //   // 计算属性的逻辑
  // }
}

计算属性的逻辑可以是一个函数，也可以是一个返回值的对象。

计算属性的优点是：

1. 简化模板中的表达式
2. 缓存计算结果，只有当依赖的属性发生变化时才重新计算
3. 自动订阅依赖的属性，当依赖的属性发生变化时，自动更新计算属性的值

使用计算属性

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    },
    fullName2: () => {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      /**
       * 计算属性的 setter
       */
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }

    }
    birthday: function() {
      return new Date(Date.now() - this.age * 365 * 24 * 60 * 60 * 1000);
    }
  }
});

在上面的例子中，我们定义了三个计算属性：

1. fullName：返回 firstName 和 lastName 两个属性的拼接结果
2. fullName2：返回 firstName 和 lastName 两个属性的拼接结果，使用箭头函数定义
3. birthday：返回 age 属性对应的生日日期，通过 Date 对象计算得到

我们可以在模板中使用这些计算属性：

<div id="app">
  <p>{{ fullName }}</p>
  <p>{{ birthday }}</p>
  <input type="text" v-model="fullName2" />
</div>

在上面的例子中，我们使用 {{ }} 语法在模板中输出了 fullName 和 birthday 两个计算属性的值。

我们还使用 v-model 指令将 fullName2 计算属性绑定到输入框的 value 属性上，这样当用户输入内容时，fullName2 计算属性的值也会自动更新。

计算属性的注意事项

计算属性的依赖属性必须是响应式的，否则计算属性的值不会自动更新。

计算属性的值是惰性计算的，只有当它被访问时才会重新计算。

计算属性的值是缓存的，只有当依赖的属性发生变化时才会重新计算。

计算属性不能有自己的方法，只能依赖于其他属性的计算结果。

计算属性不能访问 this 上下文，只能访问依赖的属性。

计算属性不能使用异步操作，只能使用同步操作。

侦听属性 - watch

侦听属性是一种特殊的属性，它监听某个数据变化，并在变化时执行回调函数。

new Vue({
  data: {
    username: "John Doe",
    userinfo: {
      age: 30,
      gender: "male",
    },
  },
  watch: {
    // 监听数据的变化
    username: function (newVal, oldVal) {
      console.log("Username changed from" + oldVal + "to" + newVal);
    },
    // 也可以监听对象的属性变化
    "userinfo.age": function (newVal, oldVal) {
      console.log("Age changed from" + oldVal + "to" + newVal);
    },

    // 深度监听
    userinfo: {
      deep: true,
      handler: function (newVal, oldVal) {
        console.log("Userinfo changed from" + oldVal + "to" + newVal);
      },
      // 立即执行回调函数
      immediate: true
  },
});

在上面的例子中，我们定义了两个侦听属性：

1. username：监听 username 属性的变化，并在变化时输出日志
2. userinfo.age：监听 userinfo 对象中 age 属性的变化，并在变化时输出日志
3. userinfo：监听 userinfo 对象本身的变化，并在变化时输出日志，使用 deep 选项开启深度监听

我们可以在模板中使用这些侦听属性：

<div id="app">
  <p>{{ username }}</p>
  <p>{{ userinfo.age }}</p>
  <p>{{ userinfo.gender }}</p>
</div>

在上面的例子中，我们使用 {{ }} 语法在模板中输出了 username 和 userinfo.age 两个侦听属性的值。

当 username 或 userinfo.age 属性发生变化时，会触发对应的侦听函数，并输出日志。

当 userinfo 对象发生变化时，会触发 deep 选项开启的侦听函数，并输出日志。

侦听属性的注意事项

侦听属性的依赖属性必须是响应式的，否则侦听属性的值不会自动更新。

侦听属性的值是惰性计算的，只有当它被访问时才会重新计算。

侦听属性的值是缓存的，只有当依赖的属性发生变化时才会重新计算。

侦听属性不能有自己的方法，只能依赖于其他属性的计算结果。

侦听属性不能访问 this 上下文，只能访问依赖的属性。

侦听属性不能使用异步操作，只能使用同步操作。

计算属性 vs 侦听属性

	计算属性	侦听属性
定义	依赖其他属性，返回一个新的值	监听某个数据变化，并在变化时执行回调函数
语法	computed: { 计算属性名: function() { 计算属性的逻辑 } }	watch: { 侦听属性名: function(newVal, oldVal) { 侦听属性的逻辑 } }
依赖属性	必须是响应式的	必须是响应式的
缓存	只有当依赖的属性发生变化时才重新计算	只有当依赖的属性发生变化时才重新计算
立即执行	否	否
异步	否	否
访问上下文	不能访问 this 上下文	不能访问 this 上下文
访问依赖属性	不能访问依赖属性	不能访问依赖属性
访问计算属性	不能访问计算属性	不能访问计算属性
访问数据	不能访问数据	不能访问数据

总结

• 计算属性是一种特殊的属性，它依赖于其他属性，并返回一个新的值。
• 计算属性的逻辑可以是一个函数，也可以是一个返回值的对象。
• 计算属性的优点是：简化模板中的表达式、缓存计算结果、自动订阅依赖的属性。
• 侦听属性是一种特殊的属性，它监听某个数据变化，并在变化时执行回调函数。
• 侦听属性的优点是：简化模板中的代码、缓存计算结果、自动订阅依赖的属性。
• 两种属性都可以定义在组件的选项中，但它们的用法和语法有所不同。

Vue3 中使用计算属性

在 Vue3 中，计算属性的语法发生了变化。

import { ref, computed } from "vue";

const firstName = ref("John");
const lastName = ref("Doe");

const fullName = computed(() => {
  return firstName.value + " " + lastName.value;
});

const birthday = computed(() => {
  return new Date(Date.now() - age.value * 365 * 24 * 60 * 60 * 1000);
});

在上面的例子中，我们使用 ref 函数创建了 firstName 和 lastName 两个响应式变量。

然后，我们使用 computed 函数创建了 fullName 和 birthday 两个计算属性。

Vue3 中使用侦听属性

在 Vue3 中，侦听属性的语法发生了变化。

import { ref, watch } from "vue";

const username = ref("John Doe");
const userinfo = ref({
  age: 30,
  gender: "male",
});

watch(username, (newVal, oldVal) => {
  console.log("Username changed from" + oldVal + "to" + newVal);
});

watch(
  () => userinfo.value.age,
  (newVal, oldVal) => {
    console.log("Age changed from" + oldVal + "to" + newVal);
  }
);

watch(
  userinfo,
  (newVal, oldVal) => {
    console.log("Userinfo changed from" + oldVal + "to" + newVal);
  },
  {
    deep: true,
  }
);

在上面的例子中，我们使用 ref 函数创建了 username 和 userinfo 两个响应式变量。

然后，我们使用 watch 函数创建了 username 和 userinfo.age 两个侦听属性。

watch 函数的第一个参数是侦听的属性，第二个参数是回调函数，第三个参数是选项。

选项中，deep 选项用来开启深度监听。

总结

• 在 Vue2 中，计算属性和侦听属性都是用来简化模板中的表达式、缓存计算结果、自动订阅依赖的属性。
• 在 Vue3 中，计算属性的语法发生了变化，使用 ref 函数创建响应式变量，使用 computed 函数创建计算属性。
• 在 Vue3 中，侦听属性的语法发生了变化，使用 ref 函数创建响应式变量，使用 watch 函数创建侦听属性。