计算属性与监听器

计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。

计算属性缓存 vs 方法

计算属性的结果会进行缓存，只要属性的内容不变，就不会重新计算 。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。如果你不希望有缓存，请用方法来替代。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

<div>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

vue侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id='app'>
    {{msg}}
</div>

<script type='text/javascript'>
    var app = new Vue({
        el:"#app",
        data:{
            msg:
        },
        watch:{
            msg:function(val){   //传递一个参数，表示修改的结果
                console.log('修改msg后触发')
                console.log(val)   //打印结果为修改后的值
            }        
        }
    })
</script>