Vue：计算属性与监视属性
一、计算属性
在开发中，可以有这样的需求，在属性（date）中，有fistName和lastName两个属性，需要将两个属性拼接起来，这种需求也很简单，有以下实现方式
1、插值语法实现
直接在body中将两个数据拼接
<div id="root">
姓：<input type="text" v-model="fistName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
姓名：<span>{{fistName + lastName}}</span>
</div>
2、通过方法实现
编写一个方法，返回值为两者拼在一起的字符串
<div id="root">
姓：<input type="text" v-model="fistName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
姓名：<span>{{fullName()}}</span>
</div>
new Vue({
el:'#root',
data:{
fistName:'张',
lastName:'三'
},
methods: {
fullName(){
return this.fistName + this.lastName;
}
},
})
3、通过计算属性
计算属性就是vue中的computed，这里面存放的是计算属性
而data中的是属性，两者不一样
<div id="root">
姓：<input type="text" v-model="fistName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
姓名：<span>{{fullName}}</span>
</div>
const vm = new Vue({
el:'#root',
data:{
fistName:'张',
lastName:'三'
},
computed:{
fullName:{
get(){
return this.fistName + this.lastName;
},
set(value){
const arr = value.split('-')
this.fistName = arr[0]
this.lastName = arr[1]
}
}
}
})
计算属性和方法的编写方式有点区别
- {{}}中方法是写一个方法的，即带括号
- 但是计算属性只需要写名字即可，不用带花括号
计算属性中要编写两个方法，一个是get方法，另一个是set方法
- 当有人读取fullname这个计算属性，get方法就会被调用，返回值是fullname的值
- 当有人修改fullname这个计算属性，set方法就会被调用
当明确只有get方法，不需要set方法的时候，计算属性可以简写成如下：
fullName(){
return this.fistName + this.lastName;
}
get函数什么时候执行：
- 初次读取时会执行一次
- 当依赖的数据发生变化时会被调用一次
3.1、计算属性的优势
相对于方法来说，计算属性内部有缓存机制（复用），效率更好，调试更方便
简单来说，倘若计算属性不变，计算属性的数据就会存进缓存中，当页面上的其他数据需要读取这个计算属性的话，不再需要从vm获取，直接从缓存里面获取
二、监视属性
监视属性可以监视某个属性的变化，并且可以获取变化前和变化后的数值
通过关键词watch实现
<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changgeWeather">切换天气</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
isHot: true,
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
methods: {
changgeWeather() {
this.isHot = !this.isHot;
},
},
watch: {
isHot: {
immediate: true,
handler(newValue, oldValue) {
console.log("isHost被调用", newValue, oldValue);
}
},
});
</script>
</html>
例如如上案例，当isHost被修改的时候，监视属性中的isHost中的handler就会被调用
而 immediate: true 的作用是再初始化的时候调用一下这个监视属性
注意的是监视属性必须存在，才可以进行监视
除了以上邪恶写法，还可以通过vm.$watch监视
vm.$watch("isHost", {
immediate: true,
handler(newValue, oldValue) {
console.log("isHost被调用", newValue, oldValue);
},
});
两种的使用场合不同：
- 第一个则是，一开始就很明确这个属性需要监视，则写在vue里面
- 第二个则是，一开始不知道这个属性需要被监视，然后后面加上的，就可以用vm.$watch
当监视属性只有handler的时候，可以进行简写
watch: {
isHot((newValue, oldValue)): {
console.log("isHost被调用", newValue, oldValue);
}
}
三、深度监视
深度监视主要用于监视层次比较高的
data: {
isHot: true,
number: {
a: 1,
b: 1,
},
}
例如这个data里面的number，需要监视里面的a和b的变化，则需要用到监视属性
"number.a": {
handler(newValue, oldValue) {
console.log("a改变", newValue, oldValue);
},
},
监视对象里面的某个属性，就可以如上这也进行操作，“对象.属性”表示监视里面的某一个属性
同时也可以监视number的变化，只需要在在里面开启深度即可
number:{
deep:true,
handler(){
console.log("number发生改变");
}
监视对象里面的某个属性，就可以如上这也进行操作，“对象.属性”表示监视里面的某一个属性
同时也可以监视number的变化，只需要在在里面开启深度即可
number:{
deep:true,
handler(){
console.log("number发生改变");
}
|