watch监听器的基本使用

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

    <div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <h1>全名：{{fullName}}</h1>
    </div>
    <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
            }, 200);
          }
        }
      })
    </script>

与computed比较：

• 对比computed而言，这个computed性能更好，所以能用computed实现就用computed实现。
• 在涉及到异步数据操作的时候，就只能用watch去实现了。