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

  • 手机突然不能快充了(手机突然不能快充了怎么办)

    手机突然不能快充了(手机突然不能快充了怎么办)

  • 微信号登不上去,里面的钱还能取出吗(绑定qq微信号登不上去)

    微信号登不上去,里面的钱还能取出吗(绑定qq微信号登不上去)

  • 手机qq怎么离线发送文件(手机QQ怎么离线请留言)

    手机qq怎么离线发送文件(手机QQ怎么离线请留言)

  • 12+512的手机有哪些(12 512 手机)

    12+512的手机有哪些(12 512 手机)

  • 荣耀v30和v30pro膜通用吗(荣耀30pro和荣耀30pro+膜通用吗)

    荣耀v30和v30pro膜通用吗(荣耀30pro和荣耀30pro+膜通用吗)

  • 交换机能当路由器用吗(交换机能当路由器用发送wifi)

    交换机能当路由器用吗(交换机能当路由器用发送wifi)

  • 苹果11掉电快是什么原因(苹果11掉电快是不是电池问题)

    苹果11掉电快是什么原因(苹果11掉电快是不是电池问题)

  • beautycam水印是什么相机(camhomme水印是什么相机)

    beautycam水印是什么相机(camhomme水印是什么相机)

  • 为什么微信发视频很模糊(为什么微信发视频发不出去?)

    为什么微信发视频很模糊(为什么微信发视频发不出去?)

  • oppoa11是双卡双待手机吗(oppoa11双卡都可以4g吗)

    oppoa11是双卡双待手机吗(oppoa11双卡都可以4g吗)

  • 网络上pc是什么意思(网络pc是啥)

    网络上pc是什么意思(网络pc是啥)

  • 你无权拨打该号码是什么意思(你无权拨打该号码怎么设置)

    你无权拨打该号码是什么意思(你无权拨打该号码怎么设置)

  • 华为plctl00是什么型号(华为型号plc-al00价格)

    华为plctl00是什么型号(华为型号plc-al00价格)

  • 淘宝付款后怎么备注(淘宝付款后怎么修改地址)

    淘宝付款后怎么备注(淘宝付款后怎么修改地址)

  • 全民k歌如何去掉访问痕迹(全民k歌如何去掉伴奏)

    全民k歌如何去掉访问痕迹(全民k歌如何去掉伴奏)

  • 如何查找本地打印机(怎么查找本地手机号)

    如何查找本地打印机(怎么查找本地手机号)

  • 计算机后门木马种类包括哪些(计算机后门木马种类包括)

    计算机后门木马种类包括哪些(计算机后门木马种类包括)

  • 陌陌维护一般多久(2021陌陌维护一般多久)

    陌陌维护一般多久(2021陌陌维护一般多久)

  • 苹果自动扣费如何追回(苹果自动扣费如果没钱了会停吗)

    苹果自动扣费如何追回(苹果自动扣费如果没钱了会停吗)

  • pinball.exe是什么进程 pinball进程查询(clipbrd.exe是什么意思)

    pinball.exe是什么进程 pinball进程查询(clipbrd.exe是什么意思)

  • re.findall() 的用法(re.findall()用法)

    re.findall() 的用法(re.findall()用法)

  • Vue实战【调整Vue-element-admin中的菜单栏,并添加顶部模块菜单栏】(vue设置宽度)

    Vue实战【调整Vue-element-admin中的菜单栏,并添加顶部模块菜单栏】(vue设置宽度)

  • Anaconda 3.6安装教程(详细版本)---可运行Python代码(anaconda3.5.2安装教程)

    Anaconda 3.6安装教程(详细版本)---可运行Python代码(anaconda3.5.2安装教程)

  • python处理mysql如何拿到表头

    python处理mysql如何拿到表头

  • 所得税税前扣除项目及扣除标准
  • 金融资产的构成
  • 固定资产账务处理实操
  • 预扣预缴和汇算清缴
  • 个税系统如何增员
  • 个体户每月超过30万
  • 货车的折旧年限怎么算
  • 免费给客户提供服务怎么做账
  • 城建税纳税申报表
  • 去年的进项发票今年还能抵扣吗
  • 补充医疗保险应享尽享方案
  • 债券作为交易性金融资产的账务处理
  • 期末小规模纳税人差额纳税的会计处理分析
  • 行政事业单位核算短期投资时有关预算会计核算正确的是
  • 不含税价怎么转化为含税价
  • 应收帐款坏帐损失摘要
  • 材料入库时实收什么意思
  • 土地增值税清算时间
  • 被合并企业评估什么意思
  • 社会保险的登记和申报程序
  • 定制化软件开发
  • 当月开票一定要当月入账吗
  • 小企业报表为什么勾选不到小型微利企业
  • 补交社保如何证明劳动关系
  • 固定资产改造计入什么科目
  • 劳务报酬所得缴多少税
  • 员工交通费报销标准
  • 来料加工出口退税申报操作
  • 生产型企业公司有哪些
  • 应交增值税的会计科目
  • 电脑重装win7系统后无法连接网络
  • linux命令“ln file1 file2”的含义是
  • php中数组的常用函数及用法
  • macbookzen
  • 营改增全面推开为什么还叫试点
  • php图片下载本地功能
  • 乐吾实验学校网站
  • php支付功能
  • framework3.5启用
  • nginx webservice
  • 个人独资企业如何做账
  • vue3.0 vite
  • 搭建本地http服务器
  • 公司购买电脑怎么做会计分录
  • SQL Server 2012 FileTable 新特性详解
  • sqlserver2008中有那些设备
  • 资产负债表中的货币资金包括哪些
  • 质量不合格怎么说
  • 货物已发出可以退款吗
  • 淘宝卖家运费险为什么越来越贵
  • 研发费用的会计处理对公司经营成果的影响
  • 金三财务报表如何更正?
  • 固定资产折旧方法的选择
  • 软件测试费用明细
  • mysqlpid文件没有
  • sql server数据库中的null(空值)
  • mysql中日期格式
  • windows vista电脑
  • linux 详解
  • igfxsrvc module
  • win8任务管理器快捷键
  • win7系统开机后很卡什么原因
  • 如何关闭mcafee软件
  • linux双网卡双ip配置
  • angular创建项目命令
  • 获取linux命令执行结果
  • css图片垂直居中对齐
  • 阿里面试题和答案
  • 详细分析使用AngularJS编程中提交表单的方式
  • python编写代码的步骤
  • javascript中的函数该如何理解
  • 重庆市电子税务局官网登录入口注册
  • 青岛的红叶什么时候红
  • 国有企业租赁经营 河北省
  • 济南税务开票软件是什么
  • 个人所得税税率怎么算
  • 为什么阿里会放弃dubbo?
  • 新车交购置税的流程图
  • 个人所得税法全文完整版2021实施细则
  • 省银保监局长是什么级别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设