当前位置：首页 > wzjs >正文

网站建设情况百度官网优化

wzjs 2025/8/13 3:30:42

网站建设情况,百度官网优化,_x wordpress,正规靠谱的代加工平台前言说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch 的操作可不止如此，本章就带大家一起深剖细析 vue 中的 watch 方法。 watch？ 因为 vue…

前言

说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch 的操作可不止如此，本章就带大家一起深剖细析 vue 中的 watch 方法。

watch？

因为 vue 是双向数据绑定，所以当页面数据发生变化时，我们通过 watch 方法就可以拿到数据变化前和变化后的值，从而做一系列操作，下面我们通过一个简单的例子来解释。

先看下面这段代码

<template><div><input type="text" v-model="nameModel" /></div>
</template>
<script>
export default {data() {return {nameModel: "",};},watch: {nameModel() {console.log("触发打印");},},
};
</script>

实现效果

在这里插入图片描述

immediate 和 handler

问：immediate 和 handler 是干嘛用的？

在回答这个问题之前，我们先回到上面的例子中，如果我想让值第一次绑定的时候就监听函数该怎么办？这就牵扯到 watch 的一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。那如果我们就是需要在最初绑定值的时候也执行函数，举个最常见的例子，当父组件向子组件动态传值时，子组件 props 首次接收父组件传来的默认值时，也需要执行函数，这个时候就需要用到 immediate 属性。

接着看下面这段代码

父组件

<template><div><Child :message="informtion"></Child></div>
</template><script>
import Child from "./subassembly/seed.vue";
export default {data() {return {informtion: "默认传递给子组件的数据",};},components: {Child,},
};
</script>

子组件

<template><h2>接收父组件值：{{ value }}</h2>
</template><script>
export default {data() {return {value: "",};},props: {message: {type: String,default: "",},},watch: {message: {handler(newName, oldName) {this.value = newName;},immediate: true, //首次绑定的时候，是否执行 handler},},
};
</script>

当 immediate 为 false 时

在这里插入图片描述

当 immediate 为 true 时

在这里插入图片描述

通过上面的例子我们不难推出：immediate 表示在 watch 中首次绑定的时候，是否执行 handler，值为 true 时表示在 watch 中声明的时候，就立即执行 handler 方法，反之，则和一般使用 watch 一样，在数据发生变化的时候才执行 handler。

注意：handler 有 2 个参数。第一个是 newValue，第二个是 oldValue，分别表示新的值和旧的值。

deep

deep 其实就是深度监听，那可能又有同学要问了，深度监听又是啥？试想一下，当你监听的目标是一个对象时，当对象中的 a 值发生变化，在不使用 deep 的前提下，是不会触发 handler 函数的，因为这个对象并没有改变，再通俗的讲就是对象中的 a 并没有变成 b 或者是消失了，你只是修改了 a 的值，但是 a 的值是 a 的，并不是对象的，并不能代表对象的改变。

再看下面这段代码

<template><div><input type="text" v-model="forms.nameModel" /></div>
</template>
<script>
export default {data() {return {forms: {nameModel: "",},};},watch: {forms: {handler(newName, oldName) {console.log("触发打印");},},},
};
</script>

实现效果

在这里插入图片描述

可以看到控制台并没有打印任何结果，再回到上面的问题，deep 属性就是用来解决这个问题的。当你需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要 deep 属性对对象进行深度监听。

正确的写法

通过设置 deep: true 则可以监听到对象中属性值的变化。

<template><div><input type="text" v-model="forms.nameModel" /></div>
</template>
<script>
export default {data() {return {forms: {nameModel: "",},};},watch: {forms: {handler(newName, oldName) {console.log("触发打印");},deep: true,},},
};
</script>

实现效果

在这里插入图片描述

有同学可能要问了，对象中有 n 个属性，但是我只想监听某一个属性值的变化该怎么写呢？其实有一个非常简单的方法：使用字符串的形式监听对象属性值变化。

实例

<template><div><input type="text" v-model="forms.nameModel" /></div>
</template>
<script>
export default {data() {return {forms: {nameModel: "",},};},watch: {"forms.nameModel": {handler(newName, oldName) {console.log("触发打印");},},},
};
</script>