一、计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
- 使用计算属性反转字符串
<div id='app'> <p>原始字符串 {{msg}}</p> <p>计算后的字符串 {{reverseMsg}}</p> </div> var vm = new Vue({ el: '#app', data:{ msg:'Hello world!' }, computed:{ // 计算属性的 getter reverseMsg: function(){ // `this` 指向 vm 实例 return this.msg.split('').reverse().join('') } } })
计算属性 reversedMsg。
提供的函数将用作属性 vm.reverseMsg 的 getter 。
vm.reverseMsg 依赖于 vm.msg，在 vm.msg 发生改变时，vm.reverseMsg 也会更新。
- computed 和 methods 的比较
- 可以使用 methods 来替代 computed，效果上两个都是一样的。
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
使用 computed 在 {{}} 里面调用时不同加 ()，而使用 methods 在 {{}} 调用时需要加 ()
在标签内调用时，conputed 和 methods 均不用加 ()
<div id='app'> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> <p>使用方法后反转字符串: {{ reversedMessage2() }}</p> <p>使用方法后反转字符串: {{ reversedMessage2() }}</p> </div> var cnt=1; var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 cnt+=1; return cnt+this.message.split('').reverse().join('') } }, methods: { reversedMessage2: function () { cnt+=1; return cnt+this.message.split('').reverse().join('') } } })
二、监听属性
可以通过 watch 来响应数据的变化。
- 通过 watch 实现计数器
<div id='app'> <p>计数器: {{ counter }}</p> <button @click = "counter++">点我</button> </div> var vm = new Vue({ el: '#app', data: { counter: 1 }, watch:{ counter: function(nval, oval){ alert(oval + '变为' + nval) } } })
- 千米 和 米 之间的换算
<div id='app'> 千米：<input type="text" v-model = 'kilometers'> 米：<input type="text" v-model = 'meters'> </div> var vm = new Vue({ el: '#app', data: { kilometers: 0, meters: 0 }, watch:{ kilometers: function(val){ this.kilometers = val this.meters = this.kilometers * 1000 }, meters: function(val){ this.kilometers = val / 1000 this.meters = val } } })
- 以上代码中创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
- watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
- 当在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
- 不积跬步无以至千里 不积小流无以成江海
