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

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

计算属性 - `computed`

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

计算属性的语法如下：

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

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

计算属性的优点是：

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

使用计算属性

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);}}
});

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

fullName：返回 firstName 和 lastName 两个属性的拼接结果
fullName2：返回 firstName 和 lastName 两个属性的拼接结果，使用箭头函数定义
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},
});

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

username：监听 username 属性的变化，并在变化时输出日志
userinfo.age：监听 userinfo 对象中 age 属性的变化，并在变化时输出日志
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,}
);