Vue 当中提供了监听器 watch 用以监听某些数据的变化并做出响应。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch: {
  fullName (newVal, oldVal) {
    setTimeout(() => {
      const nameList = newVal.split(' ')
      this.firstName = nameList[0]
      this.lastName = nameList[1]
    })
  }
}

8-1.deep

如果要深层监听对象，可以使用 deep 选项。

data () {
  return {
    obj: {
      props: {
        id: 0
      }
    }
  }
}
created () {
  this.obj.props.id = 19
},
watch: {
  obj: {
    handler (val) {
      // 打印 19
      console.log(val.props.id)
    },
    deep: true
  }
}

8-2.immediate

默认情况下，watch 只会在监听到数据变化时，才会触发 hanlder 函数。

如果要，在初始化时刻立即调用，则可以声明 immediate: true。

data () {
  return {
    obj: {
      props: {
        id: 0
      }
    }
  }
}
created () {
  this.obj.props.id = 19
},
watch: {
  obj: {
    handler (val) {
      // 打印 0 然后打印 19 
      console.log(val.props.id) // 19
    },
    deep: true,
    immediate: true
  }
}