watch

 <!-- 1 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    // 3 创建vue实例
    new Vue({
      // 元素
      el: '#app',
      // 数据
      data: {
        info: 'hello vue',
        arr: [1, 2, 3],
        username: {
          age: 10,
          job: 'fe-enginer',
        },
      },
      watch: {
        // 监听的data数据名() {}
        arr(newV, oldV) {
          console.log(this.arr)
          console.log(newV, oldV)
        },
        info(newV, oldV) {
          console.log(newV, oldV)
        },
        // '对象.属性'() {}   => '对象.属性': { handler() {}}
        // 'username.age'() {
        //   console.log('hhh')
        // },
        // 'username.job'() {
        //   console.log('hhh')
        // },
        // watch完整 写法
        username: {
          deep: true, // 深度监听 当监控的数据或数据里的属性发生改变都可以被侦听
          handler() {
            console.log('发生变化')
          },
          immediate: true, // 立刻调用handler函数
        },
      },
    })
  </script>