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,
}
);
在上面的例子中,我们使用 ref
函数创建了 username
和 userinfo
两个响应式变量。
然后,我们使用 watch
函数创建了 username
和 userinfo.age
两个侦听属性。
watch
函数的第一个参数是侦听的属性,第二个参数是回调函数,第三个参数是选项。
选项中,deep
选项用来开启深度监听。
总结
- 在
Vue2
中,计算属性和侦听属性都是用来简化模板中的表达式、缓存计算结果、自动订阅依赖的属性。 - 在
Vue3
中,计算属性的语法发生了变化,使用ref
函数创建响应式变量,使用computed
函数创建计算属性。 - 在
Vue3
中,侦听属性的语法发生了变化,使用ref
函数创建响应式变量,使用watch
函数创建侦听属性。