首页 前端知识 Vue3问题:如何解决watch监听对象和数组失效情况,以及如何停止监听?

Vue3问题:如何解决watch监听对象和数组失效情况,以及如何停止监听?

2024-03-08 10:03:03 前端知识 前端哥 804 92 我要收藏

笔者 | 大澈

大家好,我是大澈!

这两天天气真是愈加炎热了,出个门就感觉要晒掉一层皮。

趁着周末,难得抽空和对象去威海的海边转了转,抛开喧闹的人群不说,去吹吹海风,放空放空心情,真心是不错。

新的一周,努力工作,好好学习,狠狠捞金,慢慢生活。

ONE

需求分析,问题描述

一、需求

监听数组或对象,修改其属性数据,但watch并没有监听到变化,寻找原因和解决方式。

二、问题

1、怎样正确使用watch监听对象和数组?

2、怎样停止watch监听?

TWO

解决问题,答案速览

一、Watch监听器-监听Ref

1、监听单个ref对象

对于单个ref对象的监听,我们只需要直接监听即可,没有套路。

<script setup>import { reactive, ref, watch, computed } from 'vue';
// 定义数据let nameRef = ref('大澈')

// 点击事件-修改数据的值const handleChange = () => {  nameRef.value = '程序员大澈'}// 监听数据变化watch(nameRef, (newValue, oldValue) => {  console.log(`新的值是:${newValue},旧的值是:${oldValue}`);})</script>

2、监听单个ref对象的值-基本类型值

对于单个ref对象的基本类型值的监听,我们需要借助getter函数监听。直接监听会报警告,并且监听不到变化。

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef = ref('大澈')// 点击事件-修改数据的值const handleChange = () => {  nameRef.value = '程序员大澈'}// 监听数据变化watch(() => nameRef.value, (newValue, oldValue) => {  console.log(`新的值是:${newValue},旧的值是:${oldValue}`);})</script>

3、监听单个ref对象的值-复杂类型值

内部自动将值转为reactive对象,监听reactive对象的详细见下文。

4、监听多个ref对象或其值

对于多个ref对象或其值的监听,我们需要使用数组将watch监听器的目标包裹。​​​​​​​

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef111 = ref('大澈111')let nameRef222 = ref('大澈222')// 点击事件-修改数据的值const handleChange = () => {  nameRef111.value = '程序员大澈111'  nameRef222.value = '程序员大澈222'}// 监听数据变化watch([nameRef111, () => nameRef222.value], (newValue, oldValue) => {  console.log(`新的值是:${newValue[0]},旧的值是:${oldValue[0]}`);})</script>

二、Watch监听器-监听Reactive

1、监听单个reactive对象-对象类型值

对于单个reactive对象的对象类型值的监听,我们只需要直接监听即可,没有套路。

但此时我们会发现,watch的新值和旧值是相同的,为什么会这样呢?又怎么解决呢?

因为对于引用类型数据,赋值存的是地址,地址指向的是堆,所以无论值怎么改变,新旧对象都指向同一个地址。

至于解决的办法很简单, 我们不去直接监听一个引用类型,而是去监听引用类型中一个具体的值即可。​​​​​​​

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let dataReactive = reactive({  name: '大澈',})// 点击事件-修改数据的值const handleChange = () => {  dataReactive.name = '程序员大澈'}// 监听数据变化watch(dataReactive, (newValue, oldValue) => {  console.log(`新的值是:${newValue.name},旧的值是:${oldValue.name}`);})</script>

2、监听单个reactive对象-对象类型值-基本类型属性

对于单个reactive对象的对象类型值的基本类型属性的监听,我们需要借助getter函数监听。直接监听会报警告,并且监听不到变化。

值得注意的是,watch的新值和旧值是不同的了。

3、监听单个reactive对象-对象类型值-对象类型属性

对于单个reactive对象的对象类型值的对象类型属性的监听,我们需要借助getter函数监听。直接监听会报警告,并且监听不到变化。

如果是监听整个对象类型属性,只有进行整个对象替换时,才不需要开启deep深度监听。其它时候,如修改、删除、新增,都需要开启deep深度监听,才能监听数据的变化。

如果是监听对象类型属性中的某个属性值,则不需要开启deep深度监听。​​​​​​​

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let dataReactive = reactive({  obj: {    age: 18,  },})// 点击事件-修改数据的值const handleChange = () => {  dataReactive.obj.age = 99}// 监听数据变化watch(() => dataReactive.obj, (newValue, oldValue) => {  console.log(`新的值是:${newValue.age},旧的值是:${oldValue.age}`);}, {  deep: true,})</script>

5、监听单个reactive对象-对象类型值-数组类型属性

同监听单个reactive对象-对象类型值-对象类型属性。

6、监听单个reactive对象-数组类型值

所有情况都同监听单个reactive对象-对象类型值。

7、监听多个reactive对象值或其属性值

同监听多个ref对象或其值。

THREE

问题解析,知识总结

一、怎样正确使用watch监听对象和数组?

内容如上。

二、怎样停止watch监听?

有的时候,我们可能只需要监听一次。在监听之后,我们就需要取消对watch的监听。此时我们可以这样做,将watch监听器赋值给一个变量,在取消监听的时候调用此变量即可。​​​​​​​

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef = ref('大澈')// 点击事件-修改数据的值const handleChange = () => {  nameRef.value = '程序员大澈'}// 点击事件-停止对应的watch监听数据const handleStopChange = () => {  stopWatch()}// 监听数据变化const stopWatch = watch(() => nameRef.value, (newValue, oldValue) => {  console.log(`新的值是:${newValue},旧的值是:${oldValue}`);})</script>

- END -

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3450.html
标签
评论
发布的文章

JQuery对象操作

2024-04-01 10:04:46

jQuery 事件

2024-04-01 10:04:28

jQuery实现二级菜单

2024-04-01 10:04:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!