位置: 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)

  • 总额法和净额法会计分录对比
  • 增值税专用发票有效期是多长时间
  • 实际发的工资跟个人所得税不一样
  • 无金额的合同印章有效吗
  • 车辆日常维护费用
  • 横向转拨财政款应通过什么科目
  • 住宿费发票可以抵扣进项税吗
  • 股利怎么算出来的
  • 新会计准则开办费装修费计入什么科目
  • 销售包装物的会计处理
  • 新办建筑劳务公司有资质证书吗
  • 国外劳务费用是怎样产生的
  • 注册公司未签名怎么办
  • 减免增值税可以税前扣除吗
  • 外币业务汇兑损益根据业务划分为
  • 公司买回来做样衣的服装怎么做会计分录?
  • 管理费用明细是什么意思
  • 销售产品的成本属于什么科目
  • 生产企业出口需要什么手续
  • 电脑在线测速的软件
  • 跨年的费用可以直接入账吗
  • rapimgr.exe - rapimgr进程是什么文件.有哪些作用
  • 商业承兑汇票提示承兑期限
  • 长期投资损失的确认
  • 缴税怎么入账
  • 刷路由器固件的作用和意义
  • 员工福利费账务处理
  • php的数组函数
  • 税款滞纳金会计科目
  • ppap是什么意思中文
  • 期间损益结转都结转什么
  • 其他应付款不需要支付的怎么处理,预算会计
  • laravel视频教程
  • 股东分红应该在哪个科目
  • 物流费属于什么税目
  • 微信小程序图片大小如何设置
  • react.fc
  • 网络模型参数方法
  • vue中$route
  • 往来款怎么做账
  • 一个月可以勾选多少进项税额
  • 无产权证房屋转让需要公证吗
  • 技术服务收入属于什么收入
  • 管理不善的进项税额去了哪里
  • 附加税多计提了怎么调整
  • 未确认融资费用怎么算
  • 物流辅助服务是
  • 理财产品分红和收益
  • 固定资产报废该怎么处理
  • 养猪死亡
  • 跆拳道馆薪酬详细方案
  • 车船税征收范围有
  • 银行承兑汇票包括支票吗
  • 签合同的名称和内容
  • 资产负债表税务局能看到吗
  • 购置成本由什么构成
  • 本年利润的年末余额
  • 特定担保债权
  • 电子承兑追索清偿的顺序
  • sql server233错误
  • mysql怎么修改用户名和密码
  • window怎么操作
  • 修改注册表解决画面撕裂
  • 鲁大师完全卸载
  • win8.1技巧
  • win7断电后无法正常启动
  • 安装linux系统步骤图解
  • win7怎么在桌面添加时钟
  • 系统自带邮件
  • 快速掌握阅读题的技巧
  • bat批处理命令运行程序
  • cocos2dx3.3 便条提示语功能简单实现
  • 分区工具怎么取消主分区
  • 深入解读2023年一号文件
  • js引用传递
  • jquery 滑动显示
  • 安卓模拟器测试
  • js判断ua
  • 成都国家税务局每个月交全民付的钱是什么
  • 广东国税局发票查询平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设