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>