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

  • 荣耀30pro的yoyo唤醒词可以更换吗(荣耀30pro的yoyo怎么唤醒)

    荣耀30pro的yoyo唤醒词可以更换吗(荣耀30pro的yoyo怎么唤醒)

  • wpsword全文下划线怎么设置(wps文件自带的下划线填写文字不能在上面)

    wpsword全文下划线怎么设置(wps文件自带的下划线填写文字不能在上面)

  • 滴滴行程已被好友查看(滴滴行程已被好友取消)

    滴滴行程已被好友查看(滴滴行程已被好友取消)

  • smartresponse要不要开(smartreaponse)

    smartresponse要不要开(smartreaponse)

  • 中国电信接入点哪个快(中国电信接入点设置网速最快)

    中国电信接入点哪个快(中国电信接入点设置网速最快)

  • 华为另一个系统在哪里(华为另一个系统在哪里关)

    华为另一个系统在哪里(华为另一个系统在哪里关)

  • cad文字输入快捷键(cad里文字输入快捷键)

    cad文字输入快捷键(cad里文字输入快捷键)

  • 伊对视频可以开美颜吗(伊对视频聊天怎么赚钱)

    伊对视频可以开美颜吗(伊对视频聊天怎么赚钱)

  • 为什么华为手机连不上wifi(为什么华为手机突然黑屏然后按开机键都不显示)

    为什么华为手机连不上wifi(为什么华为手机突然黑屏然后按开机键都不显示)

  • 我自己删掉的朋友圈怎么还原(我自己删掉的朋友圈怎么还原苹果11)

    我自己删掉的朋友圈怎么还原(我自己删掉的朋友圈怎么还原苹果11)

  • os103是锤子什么型号(锤子od103是什么型号)

    os103是锤子什么型号(锤子od103是什么型号)

  • 华为基于鲲鹏处理器的机架服务器名称是什么(华为鲲鹏是干啥的)

    华为基于鲲鹏处理器的机架服务器名称是什么(华为鲲鹏是干啥的)

  • 拼多多待分享能发货吗(拼多多待分享能备注吗)

    拼多多待分享能发货吗(拼多多待分享能备注吗)

  • 支付宝如何更改实名认证的身份证号码(支付宝如何更改支付密码)

    支付宝如何更改实名认证的身份证号码(支付宝如何更改支付密码)

  • 怎么删除本地主题(怎么删除本地主页的视频)

    怎么删除本地主题(怎么删除本地主页的视频)

  • vivo用华为的充电器能行吗(vivo给华为充电)

    vivo用华为的充电器能行吗(vivo给华为充电)

  • 手机丢了怎么找回通讯录(手机丢了怎么找回原来的微信)

    手机丢了怎么找回通讯录(手机丢了怎么找回原来的微信)

  • 滴滴加油在哪里找(滴滴加油在哪里看加油记录)

    滴滴加油在哪里找(滴滴加油在哪里看加油记录)

  • 荣耀9x有没有屏幕指纹解锁(荣耀9x有没有屏幕录制功能)

    荣耀9x有没有屏幕指纹解锁(荣耀9x有没有屏幕录制功能)

  • 苹果xr和苹果11的区别(苹果xr和苹果11pro哪个好)

    苹果xr和苹果11的区别(苹果xr和苹果11pro哪个好)

  • 苹果蓝牙耳机怎么加减音量(苹果蓝牙耳机怎么看电量)

    苹果蓝牙耳机怎么加减音量(苹果蓝牙耳机怎么看电量)

  • vivo手机电耗得快怎么办(vivo手机电耗得太快怎么办)

    vivo手机电耗得快怎么办(vivo手机电耗得太快怎么办)

  • 为什么开热点网速很慢(为什么开热点网络不稳定)

    为什么开热点网速很慢(为什么开热点网络不稳定)

  • 华为p30的功能(华为手机p30的功能)

    华为p30的功能(华为手机p30的功能)

  • a88主板配什么cpu(i5处理器配什么主板)

    a88主板配什么cpu(i5处理器配什么主板)

  • RuntimeError: CUDA error: CUBLAS_STATUS_NOT_INITIALIZED when calling `cublas‘

    RuntimeError: CUDA error: CUBLAS_STATUS_NOT_INITIALIZED when calling `cublas‘

  • 异地预缴可以退吗
  • 纳税义务发生时间记忆口诀
  • 经营所得和企业所得
  • 小规模不动产租赁增值税税率是多少
  • 会计忘记申报税款会有什么影响
  • 技术服务费怎么开票税率
  • 增值税退税什么时候办理
  • 个人互换住房土地增值税
  • 留底税款
  • 软件著作权如何入账
  • 免税单位无租使用纳税单位土地
  • 员工一次性赔偿怎么算
  • 营改增后停车费税率
  • 开票资料没有电话号码可以写法人名字吗
  • 报废车辆补贴收据怎么写
  • 中小企业货币资金内部控制案例
  • 直接快递到国外的货物如何收汇?
  • 环保税计算方法和税率1.2
  • 外汇局网上申报
  • 房子报废
  • 软件产品登记证书官费
  • 公司开年会的费用谁承担
  • 苹果系统中怎么删除软件
  • 土地增值税清算的条件
  • 高速公路电子发票抵扣进项税
  • 零基础java从入门到精通
  • 二手房房屋买卖注意哪些问题
  • 最小的蓝牙鼠标是哪款
  • 深度学习——VGG16模型详解
  • 物业管理企业会计核算的特点如何?
  • 伫立枝头的旅鸫鸟,加拿大 (© marcophotos/Getty Images)
  • 个人股权转让应税凭证名称
  • 推荐国内免费使用的电影
  • vue接入高德地图
  • vue权限控制设计
  • 帝国cms功能
  • 处置固定资产清理费用影响利润吗
  • gin框架使用案例
  • 采购的技术服务费会计分录
  • 小型微利企业的认定标准2023年
  • sql server存储过程写法
  • 国税申报流程怎么操作的
  • 营改增利息收入增值税
  • 装修费用账务怎么处理
  • 记账凭证会计核算形式的程序
  • 股权转让如何缴纳个税
  • 跨年收入冲销如何申报
  • 工资扣税是减去五险一金吗
  • 注册工贸公司业务范围
  • 小规模发票跨月冲红税款可以退回吗
  • 小企业会计准则会计科目表
  • 商业批发企业有哪些
  • mysql通过文档读取并执行命令之快速为mysql添加多用户和数据库技巧
  • ubuntu的系统设置在哪里
  • mac系统10.10
  • ubuntu15.10中文版
  • macbookair无响应
  • Linux系统复制图片
  • 怎么用U盘装系统
  • 出现闪退该怎么办
  • Win10 Mobile RS2预览版WiFi设置页面将和pc页面相同
  • smss.exe是干嘛的
  • windowsxp改密码怎么改
  • linux下4种kill某个用户所有进程的方法
  • linux命令怎么删除
  • win10打开蓝屏怎么解决
  • Linux系统怎么用FTP传文件
  • unity3d界面布局
  • 最简单的游戏开发工具
  • me分析方法
  • android ios UI
  • jquery二级导航栏
  • unityshader
  • 简单谈谈你对公安工作的认识
  • androidstudio手机编程软件
  • js实现拖拽div的弹出框
  • 怎么看上期留抵税额
  • 进项税额的抵扣凭证
  • 税务局登记是什么
  • 货车附加费多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设