Vue数据监听（watch、computed、keyup）

1、watch

watch的使用方法

（1）简单监听

（2）深度监听

（3）监听数据变化并执行某个方法

（1）简单监听

watch: {
    mydata(val, newval) {
        console.log(val)
        console.log(newval)
    }
  }

（2）深度监听

watch: {
    myData: {
      handler(newVal) {
        this.change_number++
      },
      deep: true
    }
}

（3）监听数据变化并执行某个方法

watch: {
   mydata： 'changeData'  // 值可以为methods的方法名
}，
methods: {
      changeData(curVal,oldVal){
    　　　 conosle.log(curVal,oldVal)
　　}
}

watch监听数据变化详解见这里：https://www.cnblogs.com/meiyanstar/p/14047456.html

watch监听路由变化详解见这里：https://www.cnblogs.com/meiyanstar/p/14047622.html

2、computed计算属性

在computed中，可以定义一些属性，这些属性叫作计算属性。

计算属性的本质：就是一个方法，只不过在我们使用这些计算属性的时候，是把它们的名称直接当作属性来使用，并不会把计算属性当作方法去调用。

注意1：

computed和methods平级
计算属性，在引用时，不要加（）去调用，直接当作普通属性去使用就好了
只要计算属性的function内部，所用到的任何data中的数据发生了变化，就会重新计算这个计算属性的值。

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>


  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
      },
      methods: {},
      watch: {},
      computed: {
          'fullname': function(){
              return this.firstname + '-' + this.lastname
          }
      }
    });
  </script>
</body>

注意2：

fullname没有在data中定义
在computed定义fullname后直接return出去就好
计算属性的求值结果，会被缓存起来，方便下次直接使用;如果计算属性方法中所有的任何属性都没有发生变化，则不会重新对计算属性求值。

3、利用keyup事件来实现，结合methods

在input标签里绑定keyup事件

<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">

var vm = new Vue({
  el: '#app',
  data: {
     firstname: '',
     lastname: '',
     fullname: ''
   },
  methods: {
    getFullname() {
       this.fullname = this.firstname + '-' + this.lastname
    }
  }
});

总结对比

watch:主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
computed:属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods:方法表示一个具体的操作，主要书写业务逻辑。