Vue3中watch监听的五种情况详解

更新时间：2024年03月25日 10:12:46 作者：扶苏1002

watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑,本文将给大家介绍了Vue3中watch监听的五种情况,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下

一、watch

1.1. 监听ref定义的基本类型数据

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

1.1.1. 单个监听

let num = ref(1);
watch(num, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

1.1.2. 多个监听

import { ref, watch } from "vue";

let num1 = ref(1);
let num2 = ref(2);
watch([num1, num2], ([newNum1, newNum2], [oldNum1, oldNum2]) => {
  console.log(newNum1, newNum2, oldNum1, oldNum2);
});

1.2. 监听ref定义的对象类型数据

监视ref定义的【对象类型】数据：直接写数据名

注意：

监视的是对象的【地址值】，若想监视对象内部的属性，需要手动开启深度监视。
若修改的是ref定义的对象中的属性，因为它们是同一个对象（内存地址不变），所以newValue 和 oldValue 都是新值。
若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<script setup>
import { ref, watch } from "vue";

let person = ref({
  name: "zs",
  age: 13,
});

function updateName() {
  person.value.name += "~";
}

function updatePerson() {
  person.value = {
    name: "ls",
    age: 18,
  };
}

watch(
  person,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  {
    deep: true,
  }
);
</script>

<template>
  <h1>姓名: {{ person.name }}</h1>
  <h1>年龄: {{ person.age }}</h1>
  <button @click="updateName">修改姓名</button>
  <button @click="updatePerson">修改整个人</button>
</template>

1.3. 监听reactive定义的对象类型数据

reactive不能定义基本类型数据

监视reactive定义的【对象类型】数据，且默认开启了深度监视，并且是不可关闭的深度监听。数据中的任何一点蛛丝马迹的变化，都会被监听到。

<script setup>
// 监视`reactive`定义的【对象类型】数据，且默认开启了深度监视。
import { reactive, watch } from "vue";

let person = reactive({
  name: "zs",
  age: 18,
  car: {
    c1: "c1",
    c2: "c2",
  },
});

function updateName() {
  person.name += "~";
}

function updatePerson() {
  person = Object.assign(person, {
    name: "lisi",
    age: 13,
  });
}

function updateCar() {
  person.car.c1 += "1";
}

watch(person, (newValue, oldValue) => {
  console.log("person变化了", newValue);
});
</script>

<template>
  <h1>姓名: {{ person.name }}</h1>
  <h1>年龄: {{ person.age }}</h1>
  <h1>car: {{ person.car.c1 + "--" + person.car.c2 }}</h1>
  <button @click="updateName">修改姓名</button>
  <button @click="updatePerson">修改整个人</button>
  <button @click="updateCar">修改car</button>
</template>

1.4. 监听ref或reactive定义的数据中的某个属性

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

注意点： 若是对象，则监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<script setup>
// 监视`reactive`定义的【对象类型】数据，且默认开启了深度监视。
import { reactive, watch } from "vue";

let person = reactive({
  name: "zs",
  age: 18,
  car: {
    c1: "c1",
    c2: "c2",
  },
});

function updateName() {
  person.name += "~";
}

function updatePerson() {
  person = Object.assign(person, {
    name: "lisi",
    age: 13,
  });
}

function updateCar() {
  person.car.c1 += "1";
}

watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log("person.name变化了", newValue);
  }
);

watch(
  () => person.car,
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue);
  },
  {
    deep: true,
  }
);
</script>

<template>
  <h1>姓名: {{ person.name }}</h1>
  <h1>年龄: {{ person.age }}</h1>
  <h1>car: {{ person.car.c1 + "--" + person.car.c2 }}</h1>
  <button @click="updateName">修改姓名</button>
  <button @click="updatePerson">修改整个人</button>
  <button @click="updateCar">修改car</button>
</template>

1.5. 组合监听多个数据

<template>
  <h1>sum: {{ sum }}</h1>
  <h1>name: {{ person.name }}</h1>
  <button @click="updateSum">修改sum</button>
  <button @click="updateName">修改name</button>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";

let sum = ref(0);
let person = reactive({
  name: "zs",
});

function updateName() {
  person.name += "~";
}

function updateSum() {
  sum.value += 1;
}

watch([sum, person], ([sumNew, personNew], [sumOld, personOld]) => {
  console.log(sumNew, personNew, sumOld, personOld);
});
</script>

1.6. 清除watch副作用

watch 的第二个参数是数据发生变化时执行的回调函数。

这个回调函数接受三个参数：新值、旧值，以及一个用于清理副作用的回调函数。该回调函数会在副作用下一次执行前调用，可以用来清除无效的副作用，如等待中的异步请求：

const id = ref(1)
const data = ref(null)

watch(id, async (newValue, oldValue, onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value)
  // `cancel` 会在 `id` 更改时调用
  // 以便取消之前未完成的请求
  onCleanup(cancel)
  data.value = await response.json()
})

watch 的返回值是一个用来停止该副作用的函数：

const unwatch = watch(() => {})
// ...当该侦听器不再需要时
unwatch()

以上就是Vue3中watch监听的五种情况详解的详细内容，更多关于Vue3 watch监听情况的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue的异步渲染axios问题
这篇文章主要介绍了Vue的异步渲染axios问题，具有很好的参考价值，希望对大家有所帮助。
2023-03-03
vue-cli webpack配置文件分析
这篇文章主要介绍了vue-cli webpack配置文件分析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
基于vue-draggable 实现三级拖动排序效果
这篇文章主要介绍了基于vue-draggable 实现三级拖动排序效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
Vue OptionsAPI与CompositionAPI的区别与使用介绍
OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧
2024-10-10
vue+Element-ui实现分页效果
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
element-plus的el-table自定义表头筛选查询功能实现
这篇文章主要介绍了element-plus的el-table自定义表头筛选查询功能实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-07-07
在vue中:style 的使用方式汇总
在Vue开发中使用:style绑定样式是常见需求,应注意:class与:style的配合使用,错误的使用可能导致样式不生效,正确的方法是使用数组绑定多个样式,这些技巧有助于提高开发效率和保持代码整洁,感兴趣的朋友跟随小编一起看看吧
2024-09-09
vue+electron实现创建多窗口及窗口间的通信(实施方案)
这篇文章主要介绍了vue+electron实现创建多窗口及窗口间的通信,本文给大家分享实施方案结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
vue的props实现子组件随父组件一起变化
这篇文章主要为大家详细介绍了vue的props如何实现子组件随父组件一起变化,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Vue如何使用cdn加载资源加快打包速度
外部的库文件,可以使用CDN资源,或者别的服务器资源等,下面这篇文章主要给大家介绍了关于Vue如何使用cdn加载资源加快打包速度的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05