Vue中的watch是如何实现深度监听的?

简介: Vue中的watch是如何实现深度监听的?

在 Vue 中,可以使用watch选项来监听数据的变化。如果需要深度监听对象中的数据变化,可以使用deep: true选项。例如:

<template>
  <div>
    <input type="text" v-model="obj.a" @input="handleInput" />
    <input type="text" v-model="obj.b" @input="handleInput" />
    <p>{
   {
    obj }}</p>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      obj: {
    a: '', b: '' },
    };
  },
  watch: {
   
    obj: {
   
      handler(newValue, oldValue) {
   
        console.log('obj changed:', newValue, oldValue);
      },
      deep: true,
    },
  },
  methods: {
   
    handleInput(event) {
   
      this.obj[event.target.name] = event.target.value;
    },
  },
};
</script>

在上述示例中,我们使用watch选项监听obj对象的变化。当obj对象中的任何一个属性发生变化时,都会触发handler函数。同时,我们使用deep: true选项开启深度监听,这样当obj对象中的子属性发生变化时,也会触发handler函数。

目录
相关文章
|
1天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
7 0
|
1天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
4 0
|
1天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
4 0
|
1天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
8 0
|
1天前
|
JavaScript
vue下拉列表
vue下拉列表
5 0
vue下拉列表
|
5月前
|
缓存 JavaScript
vue中computed和watch的区别
vue中computed和watch的区别
|
3月前
|
缓存 JavaScript
|
4月前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
9月前
|
缓存 JavaScript
Vue 中 computed 和 watch 的区别
Vue 中 computed 和 watch 的区别
54 0
|
5月前
|
缓存 JavaScript 前端开发
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
54 0

相关实验场景

更多