Vue计算属性和侦听器
一、计算属性：computed
模板内的表达式非常便利，但放入太多的逻辑会让模板过重且难以维护，所以，对于复杂的逻辑，可以使用计算属性 computed。
1、基本用法
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”
2、computed 与 methods 的区别
可以使用 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('')
}
}
})
// 运行结果
二、侦听器：watch
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 的值改变时，运行结果如下
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录