模板内的表达式非常便利,但放入太多的逻辑会让模板过重且难以维护,所以,对于复杂的逻辑,可以使用计算属性 computed。
HTML 代码:
<div id="app">
<p>原字符串: {{ msg }}</p>
<p>计算后反转字符串: {{ rmsg }}</p>
</div>
JS 代码:
var vm = new Vue({
el: '#app',
data: {
msg: 'ABCDE'
},
computed: {
rmsg: function () {
return this.msg.split('').reverse().join('')
}
}
})
// 运行结果
以上代码中声明了一个计算属性 rmsg,提供的函数将用作属性 vm.rmsg 的 getter,vm.rmsg 依赖于 vm.msg,在 vm.msg 发生改变时,vm.rmsg 也会更新
vm.msg='123';
// 运行结果自动更新
这里将 vm.msg 改为“123”,rmsg 的值会自动 computed 为“321”
可以使用 methods 来替代 computed,效果上两个是一样的,但 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而 methods 在重新渲染的时候,函数总会重新调用执行
HTML 代码:
<div id="app">
<p>原字符串: {{ msg }}</p>
<p>计算后反转字符串: {{ rmsg1 }}</p>
<p>使用方法后反转字符串: {{ rmsg2() }}</p>
</div>
JS 代码:
var vm = new Vue({
el: '#app',
data: {
msg: 'ABCDE'
},
computed: {
rmsg1: function () {
return this.msg.split('').reverse().join('')
}
},
methods: {
rmsg2: function () {
return this.msg.split('').reverse().join('')
}
}
})
// 运行结果
Vue 提供监听属性 watch,来相应数据的变化。
示例:
var vm = new Vue({
el: '#app',
data: {
msg: "theold"
},
watch: {
msg: function(newval, oldval){
console.log('newval is:'+newval);
console.log('oldval is:'+oldval);
}
}
});
// 当 vm.msg 的值改变时,运行结果如下