亲宝软件园·资讯

展开

Vue中watch使用方法详解

水星记_ 人气:0

前言

说到 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>

immediatefalse

immediatetrue

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

注意:handler2 个参数。第一个是 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>

实现效果

注意: 数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要深度监听。

拓展

computed 和 watch 区别

两者最明显的区别在于 watch 是观察某一个属性的变化,从而重新计算属性的值;而 computed 是通过所依赖的属性的变化计算属性值,在绝大部分情况下,computedwatch 没有明显区别,但如果是在数据变化的同时进行异步操作,那么 watch 无疑是最好的选择。

加载全部内容

相关教程
猜你喜欢
用户评论