计算属性—>computed 监视—>watch

1.计算属性

在computed属性对象中定义计算属性的方法, 在页面中使用{{方法名}}来显示计算的结果.

在使用计算属性时, 都会用到缓存. 如果你不希望有缓存, 请用方法来替代.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" readonly="readonly" v-model="fullName1"><br>
<p>{{fullName1}}</p><!--注意:fullName1计算属性不一定每次都会调用-->
<p>{{fullName()}}</p><!--注意:这里用方法也可以实现想要达到的效果,不同的是方法没有缓存-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
firstName:"A",
lastName:"B",
},
methods:{
fullName(){
return this.firstName + " " + this.lastName;
}
},
computed:{
fullName1(vmObj){//当前vm对象,即this
return this.firstName + " " + vmObj.lastName;
}
}
});
</script>
</body>

2.监视属性

通过vm对象的$watch()或watch配置来监视指定的属性, 当属性变化时, 回调函数自动调用, 在函数内部进行计算

  在计算一些页面中的数据时, 计算属性与监视相比更简单一些. 但监视常用来做深度监视.

①配置监视

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名2(单向): <input type="text" placeholder="Full Name2" readonly="readonly" v-model="fullName2"><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
firstName:"A",
lastName:"B",
fullName2:"A B"
}
watch:{
//监视firstName
firstName:function (newVal,oldVal) {
this.fullName2 = newVal + " " + this.lastName;
}
}
});
</script>
</body>

②$watch()监视

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名2(单向): <input type="text" placeholder="Full Name2" readonly="readonly" v-model="fullName2"><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
firstName:"A",
lastName:"B",
fullName2:"A B"
},
watch:{
//监视firstName
firstName:function (newVal,oldVal) {
this.fullName2 = newVal + " " + this.lastName;
}
}
});
vm.$watch("lastName",function (newVal,oldVal) {
//监视lastName
this.fullName2 = this.firstName + " " + newVal;
});
</script>
</body>

3.计算属性高级

通过getter/setter实现对属性数据的显示和监视, 计算属性存在缓存, 多次读取只执行一次getter计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
firstName:"A",
lastName:"B",
}
computed:{
fullName3:{
//回调函数,计算当初始化或该属性的相关属性值改变时,计算当前的属性值
get(){
return this.firstName + " " + this.lastName;
},
//回调函数,监视当前的属性值,当其改变时,更新与它相关的属性值
set(value){
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
});
</script>
</body>

实现页面中双向的数据更新, 可以用计算属性的setter/getter实现, 也可以用监视来实现.


评论