1. watch是什么?

watch:侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

2. watch的使用

2.1 watch基础语法

watch: {
	被监听的数据: {
		handler(数据改变后的值, 数据改变之前的值) {
			相关代码逻辑...
		}
	}
}
  • 被监听的数据:data中定义的数据;
  • 数据改变后的值:该数据改变后的新值;
  • 数据改变之前的值:该数据改变之前的值。

2.2 watch监听单个简单数据类型

<template>
  <div>
    输入: <input type="text" v-model="text">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      text: "",
    };
  },
  watch: {
    text: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
        console.log("------------------");
      },
    }
  },
};
</script>

在输入框中输入文本后:
在这里插入图片描述
这里text改变了三次,分别输入1、2、3,得到如上输出。

2.3 监听复杂数据类型的某个属性的变化

<script>
export default {
  name: "Home",
  data() {
    return {
      person: {
      	name: ""
      }
    };
  },
  watch: {
   "person.name": {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
      },
    }
  },
};
</script>

检测某个属性值的时候需要用对象.属性名的写法,用法和简单数据类型一致。

2.4 immediate (立即处理 进入页面就触发)

immediate 设为true,进入页面会立即执行handler函数。

<template>
  <div>
    输入: <input type="text" v-model="text">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      text: "",
    };
  },
  watch: {
    text: {
      handler(newVal, oldVal) {
        
      },
      immediate: true
    }
  },
};
</script>

2.5 deep 深度监听

对象和数组都是复杂数据类型,复杂数据类型存的是地址值,地址没有变,不会触发watch。这时我们需要进行深度监听,就需要加上一个属性 deep,值设为 true,使用deep属性可以监测到整个对象所有属性值的变化,某个属性发生变化,watch都会触发监听该对象。

<script>
export default {
  name: "Home",
  data() {
    return {
      person: {
      	name: ""
      }
    };
  },
  watch: {
   person: {
      handler(newVal, oldVal) {
        
      },
      deep: true
    }
  },
};
</script>

3. watch简写形式

如果只是监听单个简单的数据,使用watch的简写形式就可以满足需求。

代码如下:

<script>
export default {
  name: "Home",
  data() {
    return {
      text: ""
    };
  },
  watch: {
    text(newVal, oldVal) {
      
    }
  },
};
</script>
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐