SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({ 
    el: '#app',
    data: {
        a: {
          b: 'Hello',
          c: 'world'
        }
    },
    watch: {
      a: function(newValue, oldValue) {
        console.log(oldValue, newValue)
      },
      
      // 使用用于响应a对象多个属性的改动
      // a: {
      //   handler: function(newValue, oldValue) {
      //     console.log('你修改了a对象(watch deep)', newValue, oldValue)
      //   },
      //   deep: true
      // },
      
      // 适合监听对象下的某一个属性
      // 'a.c': function(newValue, oldValue) {
      //   console.log('你修改了a对象(a.c)', newValue, oldValue)
      // }
      
      // 另外一种更low的方式
      // changeA: function(newValue, oldValue) {
      //   console.log('你修改了a对象(computed)', newValue, oldValue)
      // }
    },
    // computed: {
    //   changeA() {
    //     return {
    //       b: this.a.b,
    //       c: this.a.c
    //     }
    //   }
    // },
    created() {
      // 直接改变a对象下的c属性
      this.a.c = 'haha'
    }
});
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
  </script>
</head>
<body>
  <div id="app">
    {{ a.b + ' ' + a.c }}
  </div>