computed-计算属性
为什么要用computed?
- computed 主要用于对绑定到 UI 中的数据进行处理;
- 如果直接在 template 中处理数据,需要写一些复杂的逻辑和表达式,会显得很累赘,也不好维护。
<div class="example">
{{ message.split('').reverse().join('')}}
<div>
如果需要通过复杂逻辑来处理数据,推荐大家使用计算属性。
computed主要用法
getter
template
<div>
<p>原始值:{{ message }}</p>
<p>计算属性值:{{ message }}</p>
</div>
data
const vm = new Vue({
data(){
return { message: 'hello' }
}
computed:{
reverseMessage(){
return this.message.split('').reverse().join('')
}
}
})
// 输出结果
// 原始值:Hello
// 计算属性值:olleH
getter和setter
- computed默认只有getter,不过在需要时可以提供一个 setter;
- getter主要用于读取当前属性数据,并计算和返回当前属性的值;
- setter监听当前属性值的变化,一变化立即执行并更新相关属性的数据。
const vm = new Vue({
data(){
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName(){
get(){
return this.firstName + '' + this.lastName
},
set(newValue){// value就是fullName最新的值
const names = value.split(' ')
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
watch-侦听器
定义
数据变化时,执行一个函数。
主要用法
用法一
template
<div>
<button @click=" n += 1 ">n+1</button>
<button @click=" obj.a + 'hi' ">obj.a + 'hi'</button>
<button @click=" obj.a = {a:'a'} ">obj.a = 新对象</button>
</div>
data
const vm = new Vue({
data(){
return {
n: 0,
obj: {a:'a'}
}
},
watch:{
n(){ console.log('n 变了')}
},
obj:{
handler(value, oldValue){ console.log('obj 变了') },
deep: true // 如果想让Vue认为一个对象发生了变化,就用deep: true,反之用 deep: false
},
"obj.a"{
handler(value, oldValue){ console.log('obj.a 变了') },
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
}
})
注意:不能在 watch 中使用 this。
用法二
vm.$watch('xxx', fn, {deep: true, immediate: true})
computed和watch
相同点
都是在数据变化时去执行一个函数。
不同点
watch有immediate,表示在第一次渲染时是否要执行该函数;另一个是deep,表示我们在监听对象时,是否要监听对象里面的变化;
computed用于计算出一个值,调用时不用加括号,根据依赖会自动缓存。
总结
- computed主要用于计算比较复杂的数据;
- watch主要用于监听数据,同时对数据进行一些操作;
- 遇到一个可以使用computed和watch实现的需求时,优先使用computed;
本文使用 mdnice 排版