vue watch 数据监听

vue watch 监听 用于检测数据变化

1. 简单用法

data() {
  return {
    isEdit: false
  }
},
watch: {
  isEdit(newVal, oldVal) {
    console.log(`${newVal},${oldVal}`)
  }
},

2. 深度监听 （主要用于 数组 和 对象 类型数据的监听）

data() {
  return {
    form: {},
  }
},
watch: {
  form(newVal, oldVal) {
    console.log(oldVal)
    console.log(newVal)
  }
},
methods: {
  handleChangeForm() {
    this.form = {
      id: 'id',
      name: 'name',
      type: 'type'
    }
    //此时watch能监听到数据的变化
  },
  handleChangeFormItem() {
    this.form.id = '001'
    //当改变对象的某一项时，简单的数据监听无效，需要添加deep:true，属性
  }
}

watch: {
  form: {
    handler(newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
    },
    deep: true //深度监听
  }
}

3. 立即执行 （初始值时立即执行handler函数）

watch: {
  form: {
    handler(newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
    },
    deep: true, //深度监听
    immediate: true //立即执行
  }
}

4. 只监听对象种某一个属性的值，使用字符串的形式

watch: {
  'form.id': {
    handler(newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
    },
    deep: true, //深度监听
    immediate: true //立即执行
  }
}