vue知识点总结 --- watch

• 检测到数据变化，去做某一个操作

  watch: {
      firstName (newName, oldName) {
          this.fullName = newName + this.lastName
      }
  }

• 立即执行一次之后，检测到数据变化再执行

  watch: {
      firstName: {
          handler (newName, oldName) {
              this.fullName = newName + this.lastName
          },
          immediate: true
      }
  }

• handler只监听对象属性引用的变化，也就是说只有改变赋值的时候才能够监听到。如果对象里面的值发生变化，需要添加deep: true

  data: {
      obj: {
          a: 0
      }
  },
  watch: {
      obj: {
          handler () {
              console.log('obj.a changed')
          },
          deep: true
      }
  }

  但是性能消耗大，可以在字符串中写对象深入的属性调用，他会层层解析，最终解析到最后一个点后面的属性，然后再去监听真正想去监听的属性。

  data: {
      obj: {
          a: 0
      }
  },
  watch: {
      'obj.a': {
          handler () {
              console.log('obj.a changed')
          }
      }
  }