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

vue2 如何监听数组的变化

在Vue 2中,底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。

当Vue 2初始化一个响应式对象时,如果对象是一个数组,Vue会将数组的原型指向一个经过改造的Array原型对象。这个改造后的原型对象中重写了数组的一些常用方法,如push、pop、shift、unshift、splice、sort和reverse等。当调用这些方法时,Vue会在内部进行一系列的操作,包括触发变化通知、更新视图等。

具体来说,当调用数组的变异方法时(如push、pop、shift、unshift、splice、sort和reverse),Vue会执行以下步骤:

  1. 调用原始的数组方法,对数组进行相应的变异操作。

  2. 在执行变异操作后,Vue会触发一个通知,通知相关的依赖(如视图)进行更新。

  3. 在通知的过程中,Vue会遍历数组的所有观察者(Observer)并调用它们的更新方法,以更新相关的依赖。

通过这种方式,Vue能够实时地捕获数组的变化,并及时更新相关的依赖,从而实现对数组的监听和响应。

需要注意的是,Vue 2只能监听到通过变异方法对数组进行的变化,而无法监听到直接修改数组某个元素或使用非变异方法(如filter、concat等)对数组进行的变化。如果需要监听这些非变异的数组变化,可以使用watch选项或$watch方法来手动监听数组的变化。

http://www.lryc.cn/news/128688.html

相关文章:

  • CSS中的transform属性有哪些值?并分别描述它们的作用。
  • vue3跳转页面后 海康监控实例不销毁
  • Unity 射线检测
  • 微信支付报非法的密钥大小: Caused by: java.security.InvalidKeyException: Illegal key size
  • React 调试开发插件 React devtools 的使用
  • linux 搜索命令
  • 如何使用Spark/Flink等分布式计算引擎做网络入侵检测
  • 基于php驾校驾驶理论考试模拟系统
  • vue3+elementPlus table里添加输入框并提交校验
  • ios swift5 collectionView 瀑布流(两列)
  • 创建一个简单的HTML Viewer应用程序
  • 无公网IP,公网SSH远程访问家中的树莓派教程
  • 「UG/NX」Block UI 超级截面SuperSection
  • 高层建筑全景vr火灾隐患排查模拟培训软件助力群众防范火灾伤害
  • 【WPF】 本地化的最佳做法
  • VS2017编译同事VS2022创建的库,报错无法运行rc.exe
  • Leetcode49. 字母异位词分组
  • 设计模式之工厂方法模式(FactoryMethod)
  • python的进度条tqdm库,显示时进度条不换行设置
  • spark的使用
  • 力扣:66. 加一(Python3)
  • Go的标准库Context理解
  • Nuxt3_1_路由+页面+组件+资源+样式 使用及实例
  • Kafka第三课
  • elasticsearch修改es集群的索引副本数量
  • 【SpringCloud】Ribbon定制化配置
  • Mac terminal 每次打开都要重新配置文件
  • el-button实现按钮,鼠标移入显示,移出隐藏
  • uniapp+uview封装小程序请求
  • idea常见错误大全之:解决全局搜索失效+搜索条件失效(条件为空)+F8失灵