computed(计算属性)与watch(侦听器),是Vue中常用的属性,那么什么时候该如何computed,什么时候该使用watch呢?
1. computed - 计算属性 简介
1.1 使用场景:
当我们要显示在页面中的数据不在data中,可以通过计算data中的数据得到时,我们可以采用computed
1.2 使用方式:
在computed对象中定义computed属性,在页面中使用{{方法名}}来显示计算的结果
1.3 小案例:
在文本框中输入姓或者名,当姓发生变化时,全名发生变化,当名发生变化时,全名发生变化
案例代码如下所示:fullName是computed属性,可以设置get和set方法,
<div id="root">
姓:<input type="text" v-model="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
全名:<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
// 当读取fullName时,get就被调用,返回值作为fullName的值
// 1,初次读取fullName时,2.所依赖的数据发生变化时,get被调用
get() {
console.log(this) //此处的this是vue对象
return this.firstName + '-' + this.lastName
},
//fullName被修改时,set被调用
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
})
</script>
只考虑读取,没有修改时,计算属性可以简写
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三'
},
// 只考虑读取,没有修改时,计算属性可以简写
computed: {
// 简写形式
fullName(){
console.log(this)
return this.firstName + '-' + this.lastName
}
},
})
</script>
结果如下:
2. watch(侦听器)简介
2.1 使用场景:
侦听属性是观察和响应 Vue 实例上的数据变动
2.2 使用方式:
通过 Vue实例对象的$watch()或 watch 配置来监视指定的属性,当属性变化时, 回调函数自动调用, 在函数内部进行计算
2.3 小案例:
点击按钮,切换天气,页面展示:今天天气很炎热或凉爽
案例代码如下所示:当isHot发生变化时,就打印到控制台
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
isHot: true
},
// 监视的watch实现
watch: {
isHot:{
immediate:true, //初始化时,调用handler,默认是false
//当isHot发生改变时,回调函数handler被调用
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
})
</script>
实现监视的另一种实现方法:vm为Vue的一个实例对象
// 监视的另一种实现方法
vm.$watch('isHot', {
immediate: true,
//当isHot发生改变时,回调函数handler被调用
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
})
3. computed与watch的区别总结:
3.1 computed能完成的功能,watch都可以完成。
注意: computed可以缓存,如果computed依赖的值不变,它就不会去执行,用上次的结果
但是watch无论依赖的值有没有变,每次都会去执行
3.2 watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)