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

  • teamviewer无法建立连接原因未知(teamviewer无法建立连接无法连接伙伴)

    teamviewer无法建立连接原因未知(teamviewer无法建立连接无法连接伙伴)

  • 微信好友辅助怎么取消(微信好友辅助怎么取消验证)

    微信好友辅助怎么取消(微信好友辅助怎么取消验证)

  • 华为p10录屏不见了(华为p10屏幕录制不见了)

    华为p10录屏不见了(华为p10屏幕录制不见了)

  • 抖音可以加自己logo吗(抖音可以加自己的音乐吗)

    抖音可以加自己logo吗(抖音可以加自己的音乐吗)

  • ->c语言什么意思(c语言什么意思 视频教程)

    ->c语言什么意思(c语言什么意思 视频教程)

  • qq被批量登录什么意思(qq批量登录什么意思)

    qq被批量登录什么意思(qq批量登录什么意思)

  • 电源开关on和off哪个是开(电源开关off和on怎么读)

    电源开关on和off哪个是开(电源开关off和on怎么读)

  • 华为截图手势怎么弄(华为手机截图手势)

    华为截图手势怎么弄(华为手机截图手势)

  • 登别人美团会有提醒吗(登别人美团会有记录吗)

    登别人美团会有提醒吗(登别人美团会有记录吗)

  • 远程抹掉iphone会显示什么(远程抹掉iphone需要联网吗)

    远程抹掉iphone会显示什么(远程抹掉iphone需要联网吗)

  • p40多少瓦快充(华为p40是多少瓦快充的)

    p40多少瓦快充(华为p40是多少瓦快充的)

  • 手机声音小怎么调大声(手机声音小怎么回事)

    手机声音小怎么调大声(手机声音小怎么回事)

  • 怎么撤销退款退货申请(退款后如何取消退款)

    怎么撤销退款退货申请(退款后如何取消退款)

  • word2010纸型设置为16开(word在哪设置纸型)

    word2010纸型设置为16开(word在哪设置纸型)

  • 苹果xs支持多大的快充(苹果xs支持多大功率充电)

    苹果xs支持多大的快充(苹果xs支持多大功率充电)

  • 快手怎么置顶同城作品(快手怎么能置顶)

    快手怎么置顶同城作品(快手怎么能置顶)

  • 苹果11根苹果x大小对比(苹果11根苹果x大小)

    苹果11根苹果x大小对比(苹果11根苹果x大小)

  • 微信运动不联网计步数吗(微信运动不联网的情况下能用吗)

    微信运动不联网计步数吗(微信运动不联网的情况下能用吗)

  • macbook怎么删除app(macbook怎么删除apple id提示)

    macbook怎么删除app(macbook怎么删除apple id提示)

  • ai图片修复方法(ai修复软件)

    ai图片修复方法(ai修复软件)

  • 数据可视化怎么做(数据可视化怎么将图片混合)

    数据可视化怎么做(数据可视化怎么将图片混合)

  • oppo reno什么处理器(opporeno系列什么处理器)

    oppo reno什么处理器(opporeno系列什么处理器)

  • iphone 8接电话怎么录音(苹果八接电话别人听不到声音)

    iphone 8接电话怎么录音(苹果八接电话别人听不到声音)

  • qq影音怎样截取音乐(qq影音怎么截图)

    qq影音怎样截取音乐(qq影音怎么截图)

  • Linux下多线程下载工具MWget和Axel使用介绍(linux多线程运行)

    Linux下多线程下载工具MWget和Axel使用介绍(linux多线程运行)

  • 电脑内存条是什么,能够起到什么作用?(电脑内存条是干什么的?)

    电脑内存条是什么,能够起到什么作用?(电脑内存条是干什么的?)

  • deepin20窗口最小化魔灯效果怎么设置?(deepin缩放)

    deepin20窗口最小化魔灯效果怎么设置?(deepin缩放)

  • Linux中使用cut命令来提取文本的用法指南(linux中cut命令详解)

    Linux中使用cut命令来提取文本的用法指南(linux中cut命令详解)

  • 印花税会计分录怎么做
  • 房地产企业实收资本要求
  • 当月红冲发票账务怎么处理
  • 个体工商户生产经营所得税税率表2021
  • 个体工商户季度不超过30万免增值税吗
  • 公司财务外包费怎么入账
  • 公司购买东西怎么做分录
  • 把材料退给客户怎么处理
  • 房地产开发企业预收款预缴增值税
  • 会计代理服务是什么行业
  • 税务局代增值税专用发票盖什么章
  • 附加税减半征收计提和缴纳的会计分录
  • 收购药材再销售可以免税
  • 个税少报有什么后果
  • 可以开运费发票的单位有哪些
  • 电子汇票如何背书步骤
  • 记账凭证填制的内容
  • 酒店长包房正常打几折
  • 应付票据包括哪些票
  • 对某公司的了解
  • 二手固定资产使用年限
  • 汇算清缴申报表怎么填
  • 系统搜索力
  • bios详细解释及作用
  • 已认证进项税发票可抵扣么
  • 工程结算和决算一样吗
  • 苹果macOSBigSur是什么型号
  • 战地3 win10
  • 货到付款怎么做账
  • 收到短期借款会计分录怎么写
  • php smtp类
  • js正则表达式删除特定字符
  • 控制层框架
  • php 模拟post
  • 预提费用计提的分录
  • 对公户怎么取备用金
  • vgchange命令
  • 借款利息记入短期借款吗
  • 工会收到单位拨款的会计分录
  • 织梦如何使用
  • 国税联网状态怎么没显示
  • 会计单据可以用什么代替
  • 知道实发工资怎么算应发工资计算器
  • sqlserver2005连接到服务器
  • 社保为什么单位缴费是0什么时间才正常
  • 商业一般纳税人辅导期截止时间
  • 增值税勾选统计后如何导出明细表
  • 所得税费用的账目处理
  • 公司股东分红要交税吗?
  • 用友t3怎样查明细账
  • 软件产品增值税即征即退
  • 开票确定收入分录
  • 财务费用?
  • 应收账款收不回来的情况说明
  • 从银行提取现金分录
  • 工会经费按照什么计算缴纳
  • 建账的内容一般包括什么
  • sql中cursor是什么意思
  • mysql批量删除数据库死锁
  • xp开机chkdsk
  • 电脑英伟达控制面板在哪
  • 如何打开和关闭HMB
  • linux ftp用户存在哪个文件中
  • win7系统英雄联盟黑屏
  • js实现计时器在线时间
  • 备份文件并上传到网盘
  • div +css
  • js秒数转时间
  • node.js express中app.param的用法详解
  • javascript如何学
  • js层级选择器
  • javascript程序设计教程
  • 安卓应用 开发
  • 企业自建旧房产怎么处理
  • 云南省税务局网址
  • 广东怎么交农村合作医疗保险
  • 税务登记证信息
  • 深圳关内停车场收费标准
  • 财税专业全称叫什么
  • 越南进口废塑料新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设