vue中的computed属性包含有两种形式：一种是函数，另一种是对象，对象中包含getter和setter函数。
实际上，每个computed属性都包含了getter以及setter函数，只不过默认情况下使用的都是getter函数，可以省略不写，也就是第一种方式。如果要使用setter函数，那么必须用第二种方式，写上setter函数。
方式一：
computed:{
fullName(){
return ...
}
}
方式二：
computed:{
fullName:{
get(){
return ...
},
set(value){
}
}
}
1. 计算属性的getter函数
当其依赖的响应式属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="rm">
<input type="text" v-model="value" />
<div>{{getData}}</div>
</div>
<script>
Vue.createApp({
data() {
return {
value: "",
};
},
computed: {
getData: {
get() {
return new Date() + this.value;
},
},
},
}).mount("#rm");
</script>
</body>
</html>
注意点：
- getter函数必须要有return返回值，否则会报错。
- computed属性有缓存，当computed所依赖的响应式数据发生变化时，computed属性才会执行。但是并不是所有数据变化都会导致computed属性执行。例如，上述例子的new Date()变化就不会重新执行getData计算属性。只有当computed所依赖的变量是响应式数据时，当响应式变量发生变化时，this.value变化时才会执行。
2. 计算属性的setter函数
当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="rm">
firstName: <input type="text" v-model="firstName" /><br />
lastName: <input type="text" v-model="lastName" /><br />
fullname: <input type="text" v-model="fullName" /><br />
<div>{{fullName}}</div>
</div>
<script>
Vue.createApp({
data() {
return {
firstName: "zhang",
lastName: "san",
};
},
computed: {
fullName: {
get() {
console.log("getter");
return this.firstName + " " + this.lastName;
},
set(value) {
console.log("setter", value);
const newName = value.split(" ");
this.firstName = newName[0];
this.lastName = newName[newName.length - 1];
return this.firstName + " " + this.lastName;
},
},
},
updated() {
console.log("updated");
},
}).mount("#rm");
</script>
</body>
</html>
-
简单理解，getter为获取值，setter为设置值。 当firstName、lastName响应式数据发生变化时，computed计算属性的getter函数会执行，控制台会依次打印出：getter、updated。但是setter函数不会执行，只有当重新给fullName赋值的时候，setter才会执行，执行顺序是：setter > getter > updated。注意，上述例子之所以setter函数执行，也会执行getter和updated函数，是因为在setter函数中改变了firstName、lastName响应式数据的值，才会导致getter、updated函数的执行。setter函数执行是独立的，与getter函数是否执行无关。
-
setter函数接受一个参数，是setter函数执行时设置的fullName的值。
