位置: IT常识 - 正文

vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性)

编辑:rootadmin
vue2中无法监听数组和对象的某些变化问题 一、数组1. 不能监听的情况

推荐整理分享vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0监听,vue mousedown监听失败,vue监听页面所有组件 加载完毕,vue中的监听,vue监听不到props的变化,vue监听不到props的变化,vue无法监听数组的变化,vue无法监听数组的变化,内容如对您有帮助,希望把文章链接给更多的朋友!

(1) 直接通过下标赋值  arr[i] = value

(2) 直接修改数组长度 arr.length = newLen

2. 替代做法

(1)修改值

1

2

3

Vue.set(arr, index, newvalue)

vm.$set(arr, index, newvalue)

arr.splice(index, 1, newvalue)

(2) 修改数组长度,

1

arr.splice(newLen)

3. 注意

调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的

vue内部相当于重写了数组的原型,劫持了这七个方法

二、对象1. 不能监听的情况

属性的新增和删除

1

2

obj.newkey=newvalue

delete obj.key

2. 替代做法

1

2

3

4

5

vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性)

6

7

// 新增

 Vue.set(obj, newkey, newvalue)

 vm.$set(obj, newkey, newvalue)

 obj = Object.assign({}, obj, {newkey1: newvalue1, newkey2: newvalue2})

// 删除

 Vue.delete(obj, key)

 vm.$delete(obj, key)

三、分析 vue 2 无法监听数组和对象的这些变化的原因

首先,vue2是通过Object.defineProperty(obj, key, value)这种方式监听数据的

1. 对于数组

Object.defineProperty()是可以对数组实现监听操作的,但是vue并没有实现这个功能,因为数组长度不定而且数据可能会很多,如果对每一个数据都实现监听,性能代价太大

但是注意:数组中的元素是引用类型时是会被监听的

2. 对象

Object.defineProperty()针对的是对象的某个属性,而且这个操作在vue的初始化阶段就完成了,所以新增的属性无法监听,通过set方法新增对象就相当于初始化阶段的数据响应式处理

四、vue 3响应式原理

vue 3是通过proxy直接代理整个对象来实现的,而不是像Object.defineProperty针对某个属性。

所以,只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性

关于vue监听的一些问题对象的监听

vue通过object.defineProperty将对象的key转化成getter/setter的形式来追踪变化,但是这种追踪方式只能追踪到数据的修改,对象的属性的删除和增加,这种形式追踪不到。为此vue提供可$set 和$delete两种API来配合使用,解决监听不到属性新增删除问题。

*需要特别注意,在使用$set时,需要传递的参数有三个 vm.$set(target,key,value),target不能是Vue.js实例或者vue.js实例的根数据对象,所谓的根数据对象是指vm.$data *

*在使用$delete时候,也可以中另外一种方法实现,但是不太推荐:

1

2

 delete this.obj.name;

 this.obg._ob_.dep.notify  //手动向依赖发送变化通知;

 (说明: _ob_ 是 vue中是否是响应式的判断依据)*

 在使用$delete时候,target不能是Vue.js实例或者vue.js实例的根数据对象,

数组的监听

vue通过拦截数组原型的方式实现数组的变化的监听,所以有些不是数组原型定义的方法进行的数组操作,发生的变化,是数组感知不到的,比如通过数组下标修改对应位置的值(this.list[0] = 2),或者通过数组长度改变数组(比如通过数组length清空数组的操作: this.list.length = 0 )。

所以进行数组操作的时候,尽量使用数组原型方法操作:

1

push pop unshift shift concat reverse sort slice splice join 

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

上一篇:html表白代码(html表白代码动态)

下一篇:将uniAPP项目导入到微信开发者工具中保姆级教程(uniapp怎么引入elementui)

  • 海尔滚筒洗衣机好吗(海尔滚筒洗衣机好吗)(海尔滚筒洗衣机洗涤剂盒怎么用)

    海尔滚筒洗衣机好吗(海尔滚筒洗衣机好吗)(海尔滚筒洗衣机洗涤剂盒怎么用)

  • 2021微信昵称怎么加表情符号(weixin微信昵称)

    2021微信昵称怎么加表情符号(weixin微信昵称)

  • 华为荣耀10和青春版的区别(华为荣耀10和青春版对比)

    华为荣耀10和青春版的区别(华为荣耀10和青春版对比)

  • 苹果x旁白怎么关闭(苹果x旁白怎么关闭按键说明)

    苹果x旁白怎么关闭(苹果x旁白怎么关闭按键说明)

  • 微信零钱一直提示系统升级(微信零钱一直提示异常)

    微信零钱一直提示系统升级(微信零钱一直提示异常)

  • 苹果平板1566是哪年款的(苹果平板1566是什么型号的)

    苹果平板1566是哪年款的(苹果平板1566是什么型号的)

  • 华为p30pro双扬声器吗(p30pro双扬声器设置)

    华为p30pro双扬声器吗(p30pro双扬声器设置)

  • 在windows中,对文件的确切定义应该是(在windows中对文件或文件夹进行更名)

    在windows中,对文件的确切定义应该是(在windows中对文件或文件夹进行更名)

  • 华为nova7智能遥控在哪里(华为nova7智能遥控需要登录吗)

    华为nova7智能遥控在哪里(华为nova7智能遥控需要登录吗)

  • 用平板上钉钉直播能够使用屏幕分享功能吗(用平板上钉钉直播课能看到老师吗)

    用平板上钉钉直播能够使用屏幕分享功能吗(用平板上钉钉直播课能看到老师吗)

  • 手机功能nfc什么意思(手机的nfc功能是)

    手机功能nfc什么意思(手机的nfc功能是)

  • 微信语音转文字失败怎么解决(微信语音转文字识别不出来怎么办)

    微信语音转文字失败怎么解决(微信语音转文字识别不出来怎么办)

  • 快手直播b类行为都包括啥(快手直播b类行业有哪些)

    快手直播b类行为都包括啥(快手直播b类行业有哪些)

  • 戴尔一直显示正在重新启动(戴尔电脑一直显示正在启动怎么办)

    戴尔一直显示正在重新启动(戴尔电脑一直显示正在启动怎么办)

  • 无限局域网和蜂窝网络什么意思(无限局域网和蜂窝网络一起开着的时候流量算谁的)

    无限局域网和蜂窝网络什么意思(无限局域网和蜂窝网络一起开着的时候流量算谁的)

  • 路由器上宽带灯不亮是欠费吗(路由器上宽带灯不亮是什么意思)

    路由器上宽带灯不亮是欠费吗(路由器上宽带灯不亮是什么意思)

  • 电脑有静电怎么消除(电脑有静电怎么接地)

    电脑有静电怎么消除(电脑有静电怎么接地)

  • 定向版和速推版有什么区别(你们用速推还是定向)

    定向版和速推版有什么区别(你们用速推还是定向)

  • 华为充电器充vivo行吗(华为充电器充vivo手机)

    华为充电器充vivo行吗(华为充电器充vivo手机)

  • 手机qq空间怎么发定时说说(手机qq空间怎么进入)

    手机qq空间怎么发定时说说(手机qq空间怎么进入)

  • 小怪兽怎么连接蓝牙(小怪兽怎么连接applewatch)

    小怪兽怎么连接蓝牙(小怪兽怎么连接applewatch)

  • 苹果官换机和新机质量一样吗(苹果官换机和新机怎么区分)

    苹果官换机和新机质量一样吗(苹果官换机和新机怎么区分)

  • nova4e有nfc功能吗(nova4e有没有nfc)

    nova4e有nfc功能吗(nova4e有没有nfc)

  • 如何获得米币(如何获得米币兑换)

    如何获得米币(如何获得米币兑换)

  • 长期零申报的公司容易注销吗
  • 金税四期记账报税流程
  • 对公账户的钱都是国有资产吗
  • 人力资源的差额征收怎么报企业所得税
  • 应纳税所得额为什么要减去国债利息收入
  • 土地使用税在交多少
  • 没有车加油费可以入账吗
  • 专项应付款在资产负债表中如何列示
  • 持有至到期投资是什么意思
  • 原始投资额包括资本化利息吗
  • 应收账款周转率多少合适
  • 个体户要交国税和地税吗
  • 融资租赁中承租人的权利
  • 小规模都纳什么税
  • 税款滞纳金怎么入账
  • 重疾险可以扣税吗
  • 售楼部购买空调计入哪个科目
  • 行政费用包括哪些企业行政后勤管理费用
  • 保理利息开具增值税专用发票
  • 金融企业呆账准备金是否允许补提
  • 农产品加工所得税
  • 代订住宿费可以开专票吗
  • 1697509063
  • 按照税收一般规定计算的折旧摊销金额
  • 应收账款现金折扣计入什么科目
  • 无法收回的款项摘要怎么写
  • 子网掩码和默认网关怎么填
  • 溢价发行股票的相关交易费用冲减资本公积
  • 停止维护win7
  • windows11右键菜单设置
  • linux 硬盘满了
  • assoc .exe=exefile是什么
  • 固定资产计提折旧是当月还是次月
  • CNN+LSTM+Attention实现时间序列预测(PyTorch版)
  • 生产车间工资计提
  • 增值税纳税人如何界定
  • 金税盘锁死能正常报税吗
  • php文件夹在哪
  • 当深度学习遇上Web开发:Spring和OpenAI如何实现图片生成?
  • dos命令怎么转到d盘
  • 专票减免政策
  • 小微企业免征增值税报表填写
  • 股东出资证明书范本
  • 垃圾处理费计提吗
  • 库存周转率会大于1吗
  • 应发工资与应税的区别
  • js与或运算符
  • 出资人和法人承担责任
  • 企业主营业务收入净额怎么算
  • 资产合计是期末余额吗
  • c#连接access数据库实例
  • mysql怎么使用表
  • 免征增值税个税计税依据
  • 增值税税负率是多少
  • 弥补亏损账务处理流程
  • 现金日记账怎么记账
  • 预付账款可以开发票吗
  • 复利终值和年金终值的公式
  • 贷款公司如何确定利率
  • mysql数据库简单介绍
  • win10怎么用xp经典主题
  • win2008 r2 hosts文件修改方法
  • 活动目录管理工具
  • linux虚拟机基本操作
  • windows使用svn命令
  • win11怎么关闭系统防火墙
  • win7系统回收站文件夹的位置
  • 车钥匙失灵了10秒教你快速解决
  • linux跨服务器调用shell脚本
  • css样式表可以兼容所有浏览器吗
  • shell脚本 教程
  • 简单实现异步编码的方法
  • javascript教程推荐知乎
  • node.js怎么用
  • 使用jquery实现的项目
  • Android通知栏点击打开安装
  • 山东统一发票查询平台
  • 落地和全包一样吗
  • 开健身会所国家有补贴吗
  • 地源热泵有收费标准吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设