当前位置: 首页 > article >正文

【VUE】Vue2中如何监听(检测)对象或者数组某个属性的变化

当在项目中直接设置数组的某一项的值,或者直接设置对象的某个属性值,这个时候,你会发现页面并没有更新。这是因为Object.defineProperty()限制,监听不到变化。

解决方式:

  • this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
  • 或者调用以下几个数组的变异方法:
splice()push()、pop()、shift()、unshift()、sort()、reverse() 

Vue源码里缓存了array的原型链,然后重写了这几个方法,触发这几个方法的时候会observer数据,意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新。 推荐使用splice方法会比较好自定义,因为splice可以在数组的任何位置进行删除/添加操作。


http://www.kler.cn/news/353633.html

相关文章:

  • 第七课:Python学习之算数运算符
  • 强化学习之DQN算法
  • yocto编辑软件包-devtool的使用方法
  • 微服务中的负载均衡算法与策略深度解析
  • k8s--二进制包部署及常见报错解决方法
  • 请用python写一个小程序,把浏览器中打开的页面设置为深色模式
  • [LeetCode] 面试题01.02 判定是否互为字符重拍
  • 代码随想录 -- 贪心 -- 跳跃游戏
  • MapReduce工作机制源码解析
  • Kafka服务端SASL/PLAIN+ACL认证授权安装操作
  • 关于Git Bash中如何定义alias
  • 【2024软考高级架构师】论文篇——3、论Web系统的测试技术及其应用
  • 深入了解React 工作原理是什么
  • Docker 容器 数据卷 使用
  • leetcode 2536.子矩阵元素加一
  • @zabbix监控网站黑链接监控及数据推送
  • 深度学习-26-基于PyTorch的多层感知机DNN
  • Dubbo快速入门(二):第一个Dubbo程序(附源码)
  • Linux的习题+一道回溯类型的算法题
  • 数据结构--链表