文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3问题:如何解决Watch监听对象数组失效,及如何停止监听?

2024-11-30 05:33

关注

一、需求分析,问题描述

1、需求

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

2、问题

二、解决问题,答案速览

1、Watch监听器-监听Ref

(1)监听单个ref对象

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

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

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

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

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

(4)监听多个ref对象或其值

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

2、Watch监听器-监听Reactive

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

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

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

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

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

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

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

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

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

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

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

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

(4)监听单个reactive对象-对象类型值-数组类型属性

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

(5)监听单个reactive对象-数组类型值

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

(6)监听多个reactive对象值或其属性值

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

三、问题解析,知识总结

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

内容如上。

2、怎样停止watch监听?

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

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯