Vue in depth listening watch and listen

• (Watch) to observe changes and the response data instance Vue

 <div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <!-- 这样写不好，这样是模板逻辑变得厚重，不易维护 -->
        <div>全名：{{firstName + lastName}}</div>

        <h1>computed</h1>
        <div>全名：{{fullName}}</div>

        <h1>watch</h1>
        <div>全名：{{watchFullName}}</div>
    </div>
    <script>
        // 计算属性是根据data中已有的属性，计算得到一个新的属性
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: '',
                watchFullName: ''
            },
            // 创建计算属性通过computed关键字，它是一个对象
            // 计算属性是基于它们的依赖进行缓存的
            computed: {
                // 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
                fullName() {
                    return this.firstName + this.lastName
                }
            },

            // watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
            // 创建监听器通过watch属性，它是一个对象
             watch: {
                 // 这里面的函数名很特殊，它是你需要监听的data的名字，这个函数包含两个参数，一个是newVal,一个是oldVal
                firstName(newVal, oldVal) {
                     console.log(newVal, oldVal);
                     this.watchFullName = newVal + this.lastName
                 },
                 lastName(newVal, oldVal) {
                     console.log(newVal, oldVal);
                     this.watchFullName = this.firstName + newVal
            //     }
            // }


            // 开发时，能用computed实现的时候，就用computed实现
            // 需要执行异步操作的时候，就要用到watch
        })
    </script>

• Depth monitor

<div id="app">
      <input type="text" v-model="user.name">
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          user: {
            name: 'jack'
          }
        },
        watch: {
          // 监听对象不能使用下面这种写法，要使用深度监听
          // user(newVal, oldVal) {
          //   console.log('改变了');
          // }

          user: {
            // hanlder这个函数名字固定
            handler (newval) {
              console.log('改变了');
              console.log(newval.name);
            },
            // deep:true表示深度监听
            deep: true
          }
        }
      })
    </script>