vue 监听器watch

vue 监听器watch

new Vue({
  el: '#root',
  template: `<div>
  <div>Name: {{name}}</div>
  <div>Name: {{getName()}}</div>
  <div>FullName: {{fullName}}</div>
  <div>FirstName: <input v-model="fisrtName" /></div>
  <div>LastName: <input v-model="lastName" /></div>
  </div>`,
  data () {
    return {
      fisrtName: 'hello',
      lastName: 'world',
      fullName: ''
    }
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.fisrtName} ${this.lastName}`
    }
  },
  watch: {
    fisrtName (newName, oldName) {
      this.fullName = `${newName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('get name')
      return `${this.fisrtName} ${this.lastName}`
    }
  }
})

watch 方法可以监听变量，在watch对象中，变量是watch对象的键，而值是函数，函数接收两个参数，第一个是新值，第二个是更改前的旧值。
注意，初始化时，watch对象中的方法不会执行。但是可以配置immediate属性，使其立即执行。此时值是包括选项的对象。

  watch: {
    fisrtName: {
      handler (newName, oldName) {
        this.fullName = `${newName} ${this.lastName}`
      },
      immediate: true
    }
  }

watch可以用于，当监听的值发生改变时，向后台发送请求

watch 还有一个deep属性

new Vue({
  el: '#root',
  template: `<div>
  <div>Ojb.a: <input v-model="obj.a" /></div>
  </div>`,
  data () {
    return {
      obj: {
        a: '111'
      }
    }
  },
  watch: {
    obj: {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true,
      deep: true
    }
  }
})

更改obj.a时，watch监听的obj方法不会执行，加deep属性为true时，更改obj.a的值，obj方法会执行

优化方法

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