vue项目实战（五）：监听器watch与计算属性

Vue 通过 watch 选项提供了一个通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

一、基本数据类型的监听

我们使用如下的方式在Vue对象的watch内对msg声明一个监听函数，他的参数是修改后的msg和修改前的msg。

   new Vue({
     el:"#app",
     data(){
       return{
         msg:""
       }
     },
     watch:{
       msg:function(newV, oldV){
         console.log(oldV, newV);
       }
     }
   })

然后我们在绑定的Dom对象里写下如下代码：

   <div id="app">
     <input type="text" v-model="msg">
     <h3>{{msg}}</h3>
   </div>

此时我们就可以看到watch的作用了，每当监听的变量发生了修改，我们watch中定义的监听函数就会调用，执行相应的操作。

当然监听函数中我们还可以进行其他的操作，比如加上一个条件判断，输出我们希望的值，下面代码实现了当input中的内容是给定值时，输出一段话。

     watch:{
       msg:function(newV, oldV){
         console.log(oldV, newV);
         if(newV==="yfZhang"){
           console.log("yfZhang is coming!")
         }
       }
     }

监听的对象可以是string，当然也可以是整数等类型，但是当监听的对象是一个字典，或者其他的复杂类型时，直接在watch中定义函数对其进行监听往往达不到想要的目的。

二、复杂数据类型深度监视

类似于object，array等数据类型，我们需要进行深度监视。下边代码声明了一个复杂的数据类型stus:[{name:"yfZhang"}]，然后用一个button，当我们敲击button时，改变数组的元素值，那么，我们如何对这个数组进行监视？

   <div id="app">
     <button @click="stus[0].name='Rose'">改变这个名字</button>
     <h2>{{stus[0].name}}</h2>
   </div>
   <script type="text/javascript">
   new Vue({
     el:"#app",
     data(){
       return{
         stus:[{name:"yfZhang"}]
       }
     },
     watch:{
       stus:{
         deep:true,//深度监视的标志
         handler:function(newV, oldV){
           console.log(newV[0].name);
         }
       }
     }
   })
  </script>

答案是使用深度监视的模板，
tips：这里的newV，oldV都是监视的对象改变前后的值，并不是你的Vue对象。

三、计算属性

实时监听所有的数据属性，一旦数据属性发生更改，computed的方法就会立即执行，效果相当于我们v-on + Vue.method，比如下面的例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter；reversedMessage时函数名
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。