watch监听器的简单使用

    <div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>全名：{{fullName}}</p>
    </div>
    <script>
      // 监听器能够用来监听data中数据的变化，并且执行相应的操作
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '李',
          lastName: '白',
          // 定义变量来接受新的全名
          fullName: ''
        },
        // 创建监听器在watch属性中
        watch: {
          // 要监听谁，就将该变量拿过来作为一个函数名字, 这个函数中带有newVal, 和 oldVal两个参数，参数名字随意
          firstName(newVal, oldVal) {
            console.log(newVal, oldVal);
            this.fullName = newVal + this.lastName
          },
          lastName(newVal, oldVal) {
            this.fullName = this.firstName + newVal
          }
        }

        // watch 和 computed对比
        // 1. computed性能比watch更好，我们能用computed实现就用computed去实现
        // 2. 涉及到异步数据的时候，就需要用watch
      })
    </script>