【学Vue就像玩一样】什么是计算属性？什么使监视属性？
目录
1.计算属性
2.监视属性
2.1监视属性
2.2深度监视
3.computed和watch的区别
本栏会细致的将Vue划分为两大模块，基础篇，进阶篇。想要顺利通关vue篇首先要拥有三剑客，当然node ajax法宝也会辅佐你通关的，在学习的途中如果遇到了问题，可以试着回顾一下之前的情节，以便于更好的推进主线剧情，准备出发!
1.计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。 在Vue中有多种方法为视图设置值： 使用指令直接将数据值绑定到视图; 使用简单的表达式对内容进行简单的转换; 使用过滤器对内容进行简单的转换（晦涩难懂的很）
举个例子
我们要实现这样一个需求：说有个人啊叫山鱼，我们要把他的名和姓分开，来渲染到页面种，这该怎么做呢？
方法1：直接使用插值语法
直接再data里面写个姓写个名在使用插值语法插进去就可以了，虽然看起来非常简单，但是一旦传入的数据多了起来，就会使代码看起来很臃肿，后期进行维护也比较艰难
<body>
<!-- 容器 -->
<div class="user">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
姓名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script>
new Vue({
el:'.user',
data:{
firstName:'山',
lastName:'鱼'
}
})
</script>
</body>方法二：使用计算属性
我们在这里定义了一个计算属性fallName。
更改此应用的data中firstName和lastName值后，可以看到 fallName也会随之改变。
在模板中使用计算属性的方式和一般的属性并无二致。Vue 会检测到this.fallName依赖于this
.firstName和lastName所以当所以data数据改变时，任何依赖于this.fallName的绑定都将同时更新。这种计算属性可以很好的将代码臃肿的问题解决掉也利于维护。
<body>
<!-- 容器 -->
<div class="user">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
姓名：<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el: '.user',
data: {
firstName: '山',
lastName: '鱼'
},
// 计算属性
computed: {
fullName: {
// 当ful1Name被读取时，get就会被调用，且返回值就作为fullName的值，而且get有个缓存效果
// 这里的get在初次读取fullName时会被调用，在所依赖的数据进行改变时也会调用
// 这里所依赖的数据有俩分别是firstName和lastName
get() {
return this.firstName +"-" +this.lastName
},
// 当fullName被修改时调用
set(value){
console.log('set被执行');
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>简写方式
<body>
<!-- 容器 -->
<div class="user">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
姓名：<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el: '.user',
data: {
firstName: '山',
lastName: '鱼'
},
// 计算属性
computed: {
// 简写
fullName() {
return this.firstName + "-" + this.lastName
}
}
})
</script>
</body>2.监视属性
2.1监视属性
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法:
(1) . new Vue时传入watch配置
(2) .通过vm. $watch监视
举个小例子
<body>
<div class="user">
<h1>今天我很{{info}}</h1>
<button @click='changeMood'>点击切换心情</button>
</div>
<script>
new Vue({
el: '.user',
data: {
mood: true
},
computed: {
info() {
return this.mood ? '开心' : '不开心'
},
},
methods: {
changeMood() {
this.mood = !this.mood
}
},
watch: {
// 被监视的是谁
mood: {
immediate: true,// 初始化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue) {
console.log('mood被修改了', newValue, oldValue);
}
},
// 这个监视属性也可以监视计算属性
info: {
immediate: true,// 初识化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue) {
console.log('info被修改了', newValue, oldValue);
}
},
}
})
// 也可以用vm.$watch进行监视 => vm.$watch(监视对象，如何监视)
vm.$watch('mood', {
immediate: true,// 初识化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue) {
console.log('info被修改了', newValue, oldValue);
}
})
</script>
</body>2.2深度监视
(1)Vue中的watch默认不监测对象内部值的改变(层)
(2)配置deep:true可以监测对象内部值改变(多层)。
(3)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
(4)使用watch时根据数据的具体结构，决定是否采用深度监视
watch: {
// 完整写法
// mood: {
// deep:true
// handler(newValue, oldValue) {
// console.log("mood被修改", newValue, oldValue);
// }
// }
// 简写（但是不能配置immediate:true,deep:true）
mood(newValue, oldValue) {
console.log('mood被修改', newValue, oldValue);
}
}
})
// 正常写法
vm.$watch('mood',{
immediate:true,
deep:true,
handler(newValue, oldValue) {
console.log('mood被修改', newValue, oldValue);
}
})
// 简写(但是不能配置immediate:true,deep:true)
vm.$watch('mood',function(newValue, oldValue){
console.log('mood被修改', newValue, oldValue);
})3.computed和watch的区别
1.监视属性可以完成计算属性的所有功能，但是computed无法完成，watch可以进行的异步操作。
2.两个重要的小原则:
1.所被Vue管理的函数写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(例如定时器的回调函数、ajax的回调函数等)，最好写成箭头函数， 这样this的指向才是vm或组件实例对象。
点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区