vue watch 实现方法

vue watch 的基本用法

在 Vue 中，watch 用于监听数据的变化并执行相应的操作。可以在组件的 watch 选项中定义监听器。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal)
    }
  }
}

监听对象属性

如果需要监听对象的某个属性变化，可以使用点号语法或字符串形式。

watch: {
  'user.name': function(newVal, oldVal) {
    console.log('Name changed')
  }
}

深度监听对象

当需要监听对象内部所有属性变化时，可以设置 deep: true。

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('User object changed')
    },
    deep: true
  }
}

立即执行监听器

设置 immediate: true 可以让监听器在创建时立即执行一次。

watch: {
  message: {
    handler(newVal, oldVal) {
      console.log('Message initialized or changed')
    },
    immediate: true
  }
}

使用 $watch API

除了在组件选项中定义 watch，还可以使用实例方法 $watch 动态添加监听器。

created() {
  this.$watch('message', (newVal, oldVal) => {
    console.log('Message changed')
  })
}

监听计算属性

watch 也可以用于监听计算属性的变化。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  fullName(newVal) {
    console.log('Full name changed to', newVal)
  }
}

取消监听

使用 $watch 返回的函数可以取消监听。

const unwatch = this.$watch('data', handler)
// 需要取消时调用
unwatch()

监听数组变化

Vue 可以监听数组的变异方法（push、pop 等）引起的变化。

watch: {
  items: {
    handler(newVal) {
      console.log('Array changed')
    },
    deep: true
  }
}