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

  • 网站推广之BBS推广的特点,网站推广之BBS推广技巧(推广论坛 推广论坛)

    网站推广之BBS推广的特点,网站推广之BBS推广技巧(推广论坛 推广论坛)

  • 错误习惯成自然(错误决定改变人的一生)

    错误习惯成自然(错误决定改变人的一生)

  • 苹果11如何给app上锁(苹果11如何给相册设置密码锁)

    苹果11如何给app上锁(苹果11如何给相册设置密码锁)

  • 爱奇艺季卡是什么(爱奇艺季卡和月卡的区别)

    爱奇艺季卡是什么(爱奇艺季卡和月卡的区别)

  • 微信紧急解冻需要多久(微信紧急解冻需多久)

    微信紧急解冻需要多久(微信紧急解冻需多久)

  • 小爱同学功能有那些(小爱同学所有功能)

    小爱同学功能有那些(小爱同学所有功能)

  • glidecache什么文件夹(giidecache啥意思)

    glidecache什么文件夹(giidecache啥意思)

  • 电脑小写字母怎么打出来(电脑小写字母怎么切换成拼音)

    电脑小写字母怎么打出来(电脑小写字母怎么切换成拼音)

  • ipadmini2能不能分屏(ipadmini2可以分屏多任务吗)

    ipadmini2能不能分屏(ipadmini2可以分屏多任务吗)

  • 微信账号信息已过期是什么意思(微信总是显示账户信息已过期怎么办)

    微信账号信息已过期是什么意思(微信总是显示账户信息已过期怎么办)

  • word公式下标怎么打(word公式下标怎么打快捷键)

    word公式下标怎么打(word公式下标怎么打快捷键)

  • 多媒体系统的基本组成(多媒体系统基于功能可分为哪几类)

    多媒体系统的基本组成(多媒体系统基于功能可分为哪几类)

  • 支付宝怎样取消刷脸支付(支付宝怎样取消银行卡绑定)

    支付宝怎样取消刷脸支付(支付宝怎样取消银行卡绑定)

  • 淘宝海外版app叫什么(淘宝海外app下载)

    淘宝海外版app叫什么(淘宝海外app下载)

  • realme Q和realme x青春版区别

    realme Q和realme x青春版区别

  • 服务器是什么(服务器是什么意思)

    服务器是什么(服务器是什么意思)

  • 全高清视频的分辨率为(全高清视频的分辨率为1920×100)

    全高清视频的分辨率为(全高清视频的分辨率为1920×100)

  • 奥维地图怎么使用教程(奥维地图怎么使用经纬度导航)

    奥维地图怎么使用教程(奥维地图怎么使用经纬度导航)

  • 苹果手机怎么清理内存(苹果手机怎么清除所有数据恢复出厂设置)

    苹果手机怎么清理内存(苹果手机怎么清除所有数据恢复出厂设置)

  • 如何升级emui10(如何升级EMUI10)

    如何升级emui10(如何升级EMUI10)

  • 畅享9plus电池不耐用(华为畅享9s手机电池)

    畅享9plus电池不耐用(华为畅享9s手机电池)

  • 拼多多挖矿在哪里找(拼多多挖矿游戏怎么玩)

    拼多多挖矿在哪里找(拼多多挖矿游戏怎么玩)

  • qq自己加自己怎么删除(手机qq自己加自己好友)

    qq自己加自己怎么删除(手机qq自己加自己好友)

  • 什么是安卓手机(什么是安卓手机消息)

    什么是安卓手机(什么是安卓手机消息)

  • autocad2006安装步骤(cad2006如何安装步骤)

    autocad2006安装步骤(cad2006如何安装步骤)

  • wwwxxx域名选择(www.xxx.com或者.cn)

    wwwxxx域名选择(www.xxx.com或者.cn)

  • 板栗怎样保存1年不坏,如何保存板栗(板栗怎样保存1年不坏)

    板栗怎样保存1年不坏,如何保存板栗(板栗怎样保存1年不坏)

  • 三分钟认知Softmax和Sigmoid的详细区别(softag)

    三分钟认知Softmax和Sigmoid的详细区别(softag)

  • 收益性支出和资产的区别
  • 小规模纳税人每季度超过30万交税
  • 无形资产摊销年限可以变更吗
  • 什么需要填
  • 纳税申报操作流程
  • 百旺普通发票作废流程
  • 执行企业会计准则第21号租赁的企业
  • 净收益营运指数大于1说明什么
  • 退回来的增值税税费怎么做账务处理
  • 债券置换债务
  • 接受捐赠的材料会计分录怎么写
  • 取得虚开增值税专票如何税务处理
  • 工程未完工但已开票
  • 本月进项税额不够抵扣怎么办
  • 开出银行汇票支付手续费
  • 办公室的取暖费怎么做会计分录
  • 以前年度的所得税怎么入账
  • 固定资产报废需要税务备案吗
  • 技术开发合同免征企业所得税吗
  • 工程发票备注怎么写
  • 宽带合同属于什么合同
  • 中国增值税发展史
  • 金税四期什么时候正式上线
  • 哪些情况下小型车不能走
  • 企业购销业务流程包括哪些
  • 简述房地产开发企业设立的特殊规定
  • 移动通信定额发票
  • 发票勾选保存后不提交了能留到下月抵扣吗?
  • 库存商品在贷方怎么调回借方
  • 农产品收购销售免税吗
  • 公司成立前的准备工作有哪些
  • win10禁用安全杀毒功能
  • 此电脑当前不满足运行win11是怎么回事
  • PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
  • 个体户工商年报异常怎么解除
  • 融资租赁的租金是什么意思
  • 业务招待费应计入期间费用的哪项费用
  • uniapp示例
  • 企业如何减少税收
  • 出口货物退免税证明办税进度
  • node 卸载
  • 微信公众号实现对应查询
  • 初学者是啥意思
  • php xdebug配置
  • vue项目创建流程
  • 企业所得税怎么征收几个点
  • 外商独资企业资本金要求
  • 报税网页打不开报表怎么办
  • vue style import
  • 小规模纳税人销售货物税率是多少
  • 小微企业季度申报所得税税率
  • 固定资产哪几类
  • mysql数据库查询表命令
  • 一般纳税人应交税费二级科目有哪些
  • 医院发票丢失怎么补办
  • 研发费用会影响什么
  • 为什么购入股票是综股
  • 支付安全生产费会计科目
  • 公司发放工资的形式
  • mysql 隐式游标
  • windows10秋季创意者更新
  • linux运行级别定义在
  • win8已共享但别电脑无权限
  • Vista 新命令收集整理完整版
  • win10系统无法安装到gpt分区
  • win8系统关机后电脑一直运行
  • win7 64位系统重装后无线信号找不到的原因分析以及解决方法
  • javascript数据结构与算法
  • 浅析学校德育的个体智能发展功能
  • linux如何创建守护进程
  • 在python中的用法
  • node.js上传文件
  • android 科大讯飞语音引擎 调用无响应
  • js调用url接口
  • s='python is beautiful!'
  • 安卓 触摸屏
  • 山东省2023年医改方案
  • 矿山占用荒山是什么意思
  • 不予处理的法律依据
  • 河北省税务局稽查局领导班子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设