位置: IT常识 - 正文

Vue2 watch监听对象的属性值变化(vue的watch监听)

编辑:rootadmin
Vue2 watch监听对象的属性值变化 文章目录前言一、错误分析二、如何监听一个对象整体的改变?三、如何监听对象中一个属性值的改变?四、如何组织对象避免监听失败总结前言

推荐整理分享Vue2 watch监听对象的属性值变化(vue的watch监听),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue监听watch监听全局对象,vue的watch监听props,vue watch监听vuex数据,vue的watch监听,vue的watch监听,vuewatch监听data里的数据,vue watch监听耗费性能,vue2 watch监听对象,内容如对您有帮助,希望把文章链接给更多的朋友!

昨天拿到一个任务需要自己写组件, 然后就遇到这个问题了. 父组件中, 我需要在鼠标选中多选表格的一行时将这一行的数据对象传入子组件, 显然这不是个异步操作, 但是子组件那边怎么都拿不到值, 子组件需要在created周期调用一堆函数, 函数里面需要用到这个传过来的表格数据对象. 但是在函数里怎么数据对象输出都是undefined, 我大概对我的watch做了4-5次改进, 都没有解决这个事情, 起初以为是没有深度监听, 然后认为是需要深度监听里把新对象里的每个值遍历赋值出来存储. 最后病急乱投医了直接觉得是createed周期太早了而取不到.

一、错误分析

首先我不应该把新值重新赋值到props的this.rawParams…额是个低级错误, 这违背了Vue类似MVVM的通信原则. 其次我在父组件里组织这个对象的方式是使用obj.xxx = xxx的方式, 这就是改变对象值, 会加大监听难度, 不过这篇也是围绕这点来说的.

我两天有一个猜想, props传值的时候直接传个新的对象(就是直接把一个做好的对象赋值到要传的变量), 和使用obj.xxx的格式慢慢组织对象后传入, 这两种办法在被子组件监听时是否会有区别? 正好今天遇到这个情况, 顺手试一下, 我把两种情况各分一个章节来说.

二、如何监听一个对象整体的改变?Vue2 watch监听对象的属性值变化(vue的watch监听)

这就是我说的第一种情况, 直接组织好对象, 把整个新对象传入. 直接赋值一个新的对象更加易于监听到, 这就像直接赋值了一个String或者什么别的类型的变量:

<!-- 父组件内 --><ebec030i-res-display :rawParams="rawParams"></ebec030i-res-display>//父组件事件//你就想一个方法触发这玩意儿就好了, 不写了...rowClick(row) { let temParams = {} temParams.会计科目 = row.value1 temParams.往来单位 = row.value2 temParams.管理编号 = row.value3 temParams.余额 = row.value4 this.rawParams = temParams},

直接传新对象的话可以像监听一个简单数据类型一样去监听, 当然, 待会会说到监听对象内值变化的监听方法, 你也可以用那个监听这个…只要你愿意.

// 子组件监听watch: { watchRawParams: { handler: function(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, deep: true, immediate: true, },},三、如何监听对象中一个属性值的改变?

相比直接赋值新的对象, 监听一个值的变化牵扯到深浅拷贝, 现在要监听this.rawParams. 出于性能的考虑, Vue天生不支持检测对象里属性值本身的变化(可以做, 但是性能消耗大, 成本与用户收益不成正比), watch监听单个属性值的变化也需要做一些特殊的配置.

rowClick(row) { this.rawParams.会计科目 = row.value1 this.rawParams.往来单位 = row.value2 this.rawParams.管理编号 = row.value3 this.rawParams.余额 = row.value4},computed: { watchRawParams: function() { let obj = {} Object.keys(this.rawParams).forEach((key) => { obj[key] = this.rawParams[key] }) return obj }},watch: { watchRawParams: { handler: function(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, deep: true, immediate: true, },},

话说我以前干过这种蠢事, 我把监听到的新值又赋值给props里的值, 然后各种崩…这不符合MVVM的规范(其实根本成功不了). 所以现在有两种选择是在data上开一个新值来接收监听完的值, 或者用computed来接收. 修改对象或者数组, 也就是我说的第二种情况时, watch监听的新值和旧值都会指向同一个原数据, 也就是浅拷贝. 仅针对数组或者对象来说, 浅拷贝结果的子对象如果发生改变会导致源数据一同改变, 进而影响其它指针上的浅拷贝. 而第二种情况即是在浅拷贝情况下对对象子对象的改动, 会影响到源数据继而影响其他指针上的浅拷贝结果. 导致的后果就是watch监听到的新值和旧值是一样的, 判定为不需要进行值变动处理方案, 这种时候不会执行watch里你规定的值变化处理方案, 连里面的输出都不会执行.

所以如果是这种情况, 需要手动深拷贝一个完全一样的待监听对象出来还要让他们时刻保持相同, computed无疑更加合适, 缓存机制让它仅仅在发生变动时参与计算, 可以保证深拷贝出的待监听对象与原待监听对象完全相同又完全隔离互不影响. 原理是把第二种方式转换为第一种方式, 直接由computed返回一个全新的数组来避免使用浅拷贝监听.

四、如何组织对象避免监听失败

不需要监听对象属性值变化(或者能组织新数组)就直接赋值做好的新数组, 参考第二章, 很多时候并不需要监听属性值变化, 尽量避免. 不能避免的需要监听对象属性值变化, 参考第三章使用深拷贝法.

总结

被坑惨了…今下午修这个组件修了一个多小时啊啊啊… 希望这篇文章对你有帮助.

本文链接地址:https://www.jiuchutong.com/zhishi/289768.html 转载请保留说明!

上一篇:微信小程序之开发遇到 does not have a method “xxxx“ to handle event “tap“ 问题的解决方案【已解决】(微信小程序开挂方法)

下一篇:Nvidia Jetson TX2入门指南(白话版)(jetson nano nvidia-smi)

  • 关于微博营销的4大属性改变现代社会的营销格局(关于微博营销的日常运营与管理说法错误的是)

    关于微博营销的4大属性改变现代社会的营销格局(关于微博营销的日常运营与管理说法错误的是)

  • 微信系统维护要多久20218月份(微信系统维护要多久)(微信系统维护要多久6月)

    微信系统维护要多久20218月份(微信系统维护要多久)(微信系统维护要多久6月)

  • 微信群文件在哪找(微信群文件在哪里看到)

    微信群文件在哪找(微信群文件在哪里看到)

  • 抖音视频怎么合拍同框(抖音视频怎么合拍)

    抖音视频怎么合拍同框(抖音视频怎么合拍)

  • 手机淘宝积分在哪里看(淘宝积分在哪儿)

    手机淘宝积分在哪里看(淘宝积分在哪儿)

  • nova7和荣耀30对比(nova7手机和荣耀30)

    nova7和荣耀30对比(nova7手机和荣耀30)

  • 苹果手机支不支持电信卡(苹果手机支不支持无线反向充电)

    苹果手机支不支持电信卡(苹果手机支不支持无线反向充电)

  • 华为nova7电池能用多久(华为nova7电池能上网多久)

    华为nova7电池能用多久(华为nova7电池能上网多久)

  • 为什么微信显示非朋友(为什么微信显示账号异常)

    为什么微信显示非朋友(为什么微信显示账号异常)

  • C盘中esupport是什么文件夹(c盘esupport文件可以删除吗)

    C盘中esupport是什么文件夹(c盘esupport文件可以删除吗)

  • 英特尔和酷睿有什么区别?(英特尔和酷睿有什么不同)

    英特尔和酷睿有什么区别?(英特尔和酷睿有什么不同)

  • 苹果平板已停用连接itunes是什么意思?(苹果平板已停用连接itunes最简单办法)

    苹果平板已停用连接itunes是什么意思?(苹果平板已停用连接itunes最简单办法)

  • 微信的分身怎么弄出来(微信的分身怎么关闭)

    微信的分身怎么弄出来(微信的分身怎么关闭)

  • 照片实况是什么意思(照片实况叫什么)

    照片实况是什么意思(照片实况叫什么)

  • qq赞资料卡是什么意思(qq赞资料卡有什么用)

    qq赞资料卡是什么意思(qq赞资料卡有什么用)

  • 荣耀20青春版有陀螺仪功能吗(荣耀20青春版有多重)

    荣耀20青春版有陀螺仪功能吗(荣耀20青春版有多重)

  • 华为nova5z怎么分屏(华为手机怎么分屏nova5)

    华为nova5z怎么分屏(华为手机怎么分屏nova5)

  • mate20有无线充电功能吗(华为哪款可以无线充电)

    mate20有无线充电功能吗(华为哪款可以无线充电)

  • 小红书什么时候能恢复下载(小红书什么时候可以开店的)

    小红书什么时候能恢复下载(小红书什么时候可以开店的)

  • iqooneo支持nfc功能吗(iqooneo有nfc)

    iqooneo支持nfc功能吗(iqooneo有nfc)

  • 如何在图片上编辑文字(如何在图片上编辑添加文字)

    如何在图片上编辑文字(如何在图片上编辑添加文字)

  • 8p的home键能按下去吗(8p的home键按下去会咔咔响)

    8p的home键能按下去吗(8p的home键按下去会咔咔响)

  • 微信笔记在哪里(华为手机微信笔记在哪里)

    微信笔记在哪里(华为手机微信笔记在哪里)

  • windows的桌面指的是(WINDOWS的桌面指的是某个正在运行的文档窗口)

    windows的桌面指的是(WINDOWS的桌面指的是某个正在运行的文档窗口)

  • 分享一个CSS的垂帘效果(css垂直导航栏)

    分享一个CSS的垂帘效果(css垂直导航栏)

  • JS原生读取 本地 JSON(原生js获取document)

    JS原生读取 本地 JSON(原生js获取document)

  • 免抵税额计入什么科目
  • 费用的进项税额可以抵扣吗
  • 出口退税是什么部门负责
  • 老项目增值税简易计税
  • 应付账款及预付账款分录
  • 营改增后为什么利息要提供发票吗
  • 本年利润和利润分配未分配利润的区别
  • 发票认证没有信用怎么办
  • 陈列费属于什么大类
  • 境外公司汇款给境内个人
  • 员工出差自驾怎么看待
  • 固定资产明细账需要每年更换吗
  • 待摊费用和预提费用是按照什么而设置的账户
  • 售后回租涉税
  • 个人住房契税2021年收费标准
  • 进口报关手续费
  • 收到款未开发票挂账入什么科目?
  • 公司预存话费应该怎么做会计处理?
  • 委托加工的加工费要交增值税吗
  • 小型微利企业免于填报
  • 2018年2月1日以后出口发票如何开具
  • 哪些情况下,企业需要进行分销渠道设计决策
  • 6月实施的新政有哪些?
  • 个体工商户要交附加税吗
  • 房屋契税怎样计算公式
  • 报销客户车费会计分录怎么写?
  • 香港公司可以给个人打款吗
  • u盘如何进行杀毒
  • 如何在excel中自动筛选
  • 租赁公司车转个人有报废年限吗?
  • php 生成验证码
  • 要求快速启动
  • linux virt-manager
  • 债务重组收益会计分录怎么做?
  • php怎么上传图片
  • 文件上传漏洞及解决方案
  • 供电局销售电力产品
  • 文化事业建设费减免政策
  • vuecli项目实战
  • 精读论文分析
  • 实战到底究竟是什么意思啊
  • 网络命令traceroute
  • php curl_init
  • 开多少票就要进多少钱吗
  • 收到股东投资款现金流量表入哪一项
  • 智能商亭超级大骗局
  • 什么是外勤会计制度
  • 已冲销凭证是否可以删除
  • 维修费发票应必须开具吗
  • 租金收入怎样缴纳个税
  • 计提费用收到发票怎么做
  • 代开发票要带什么资料?
  • 用现金支付的款项
  • 物业公司代收取暖费怎么缴纳税额
  • 收到实收资本的现金流
  • 研发费用和研发支出的会计处理
  • 收到转账支票怎么填
  • 个体工商户如何注销网上
  • mysql清空表内容
  • svchosl.exe - svchosl是什么进程 有什么作用
  • mssecsvc是什么进程
  • pavprot.exe - pavprot是什么进程 作用是什么
  • win10无法回退到以前的版本怎么办
  • win7系统通知在哪
  • javascript零基础
  • 使用forever管理nodejs应用教程
  • jquery的心得
  • android手机传感器应用程序
  • 全屏沉浸式
  • python搭建网站并在服务器上部署
  • python 描述符类
  • javascript入门教学
  • unity中事件分发系统 EventDispatcher
  • 编写javascript代码
  • Javascript字符串奇数位替换
  • 浙江省国税电子税务局如何新增企业
  • 交通运输业的税率9%和13%
  • 沈阳新公司办理社保流程
  • 什么是新闻主管部门负责
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设