【Vue】watch监听器的基本使用

基本用法
- watch监听器会监听data中数据的变化，只要一变化，就能够执行相应的逻辑
- 监听的数据名放到 watch 里作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值

  <div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <h2>全名：{{fullName}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: '',
        fullName: ''
      },
      watch: {
        firstName(newVal, oldVal) {
          console.log(newVal, oldVal)
          this.fullName = newVal + this.lastName
        }, 
        lastName(newVal, oldVal) {
          setTimeout(() => {
            this.fullName = this.firstName + newVal
          }, 500);
        }
      }
    })
  </script>

与computed比较：
- computed性能更好，所以能用computed实现就用computed。
- 在涉及到异步数据操作的时候，就只能用watch去实现了。

【Vue】watch监听器的基本使用

推荐阅读