1、基础例子
<div>
<input v-model="message"/>
<p>message的值: "{{ message }}"</p>
<p>message的反转值: "{{ reversedMessage }}"</p>
</div>
<script>
data(){
return {
message: 'Welcome to Your'
}
},
computed:{
// 计算属性geeter
reversedMessage(){
// this指向vm 实例
return this.message.split('').reverse().join('')
}
}
</script>
在表达式中调用方法也可达到同样的效果
<script>
methods:{
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
</script>
计算属性是基于它们的响应式依赖进行缓存的,只有在相关响应式依赖发生改变的时候才会重新计算求值,只要响应式依赖没有发生改变,计算属性会立即返回之前的计算结果,而不必再次执行函数。
2、计算属性的 setter
计算属性默认只有getter,在需要的时候也可提供一个setter
// getter
<input v-model="a"/>
<p>fullName:{{ aaa }}</p>
// setter
<input v-model="lastName"/>
<p>fullName:{{ fullName }}</p>
data:{
firstName: 'xiao',
lastName : 'ming',
a: 0,
b: 1
}
computed:{
// getter 当a或b改变时,就会触发aaa
aaa(){
return this.a + this.b
},
// setter
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 当 firstName 或 lastName 会触发上面的 get,从而更新fullName
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
3、侦听属性 watch
<input v-model="firstName"/>
<p>fullName:{{ fullName }}</p>
data:{
firstName: 'xiao',
lastName : 'ming',
fullName : 'xiao ming'
}
watch: {
// 当监听到firstName变化时,给fullName重新赋值
firstName: function (newVal,oldVal) {
// val 就是 firstName 的新值
this.fullName = newVal+ ' ' + this.lastName
}
},
4、computed 和 watch 区别
- computed:
- 支持缓存,当依赖数据发生改变才会进行重新计算。
- 不支持异步,computed内有异步操作无法监听数据的变化。
- 计算属性基于响应式依赖进行缓存的,就是基于data中声明的值或父组件传递的props中的数据通过计算得到。
- watch:
- 不支持缓存,data 或 props 中的数据改变,直接会触发相应的操作。
- watch支持异步。
- 监听的数据接受两个参数,第一个时最新的值,第二个是输入之前的值。
总的来说就是,在页面中使用大量或者是复杂的表达式去处理数据,对页面的维护会有很大的影响,这个时候就需要用到computed计算属性来处理复杂的逻辑运算,computed一般是改变data或者props里面的值为自己用。当需要在数据变化时执行异步或开销较大的操作时,就使用watch。watch可以进行深度监听,监听1对象的变化。