Vue 中如何实现监测数组变化

2023-11-05

vue中响应式数据的原理是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计。
数组考虑性能原因没有用defineProperty对数组的每一项进行拦截,而是选择重写数组api方法。
通过以上 Vue 源码部分查看,我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象,从而达到利用Object.defineProperty() 也能对对象和数组(部分方法的操作)进行监听。
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()


总结:
使用函数劫持的方式,重写了数组的方法
Vue 将 data 中的数组,进行了原型链重写。指向了重新定义的数组原型方法,这样当调用数组
API 的时候,可以通知依赖更新。如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

/**
 * Observe a list of Array items.
 */
observeArray (items: Array<any>) {
 for (let i = 0, l = items.length; i < l; i++) {
 observe(items[i]) // observe 功能为监测数据的变化
 }
}
/**
 * 对属性进行递归遍历
 */
let childOb = !shallow && observe(val) // observe 功能为监测数据的变化控拦截处理

所以用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化
vue2对数组的监听存在两个缺陷
无法监测数组的新增
无法监测用索引改变数组的操作


Vue3是用Proxy来进行对象、数组的代理

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 中如何实现监测数组变化 的相关文章

随机推荐

  • springboot多模块开发中实现打包

    前言 因为我使用的是idea社区版 所以在创建项目的时候他没有springboot的选项 所以只能创建普通maven项目 创建完成查看项目结构和pom文件 这里我并没有觉得有什么不对劲 所以没管 就去搭建其他模块了 这里就不展示了 后来我需
  • python函数与Lambda表达式

    python函数与Lambda表达式 函数的定义 def functionname parameters 函数 文档字符串 function suite return expression 函数定义的参数为形参 表示表示占据一个参数位置 传
  • Sql Server查询语句

    文章目录 Sql Server查询语句 基础查询 条件查询 模糊查询 Sql Server查询语句 对于Sql Server创建的表中的数据进行查询 可以进行 基础查询 条件查询 模糊查询 基础查询 基础查询语句为 select from
  • 央行数字货币研究所、中国信通院合作立项2项区块链国际标准

    国际电信联盟第十六研究组 简称ITU T SG16 于2021年4月19日至2021年4月30日召开全体会议 来自中国 美国 德国 巴西 西班牙 俄罗斯 瑞士 加拿大 英国 韩国 日本等国家和世界卫生组织等国际组织的百余名代表参加了此次为期
  • spring三级缓存总结

    前言 其实说到spring的三级缓存 也是经常被提到 自己也看过对应的源码 但是 总觉得自己还是没有真正的理解 为什么这样说呢 因为每次看到三级缓存相关的技术问题 自己心里感觉还是迷糊的 不知道为什么要有三级缓存 一级缓存不行吗 二级缓存是
  • unity3d学习笔记-动画(2.控制动画与Animator Controller)

    一 探索Animator Controller动画控制器 每当为选定的游戏对象创建第一个动画剪辑时 就会自动创建动画器组件 Animator负责分配动画 但是 它不控制实际的动画剪辑 这个任务落到了动画控制器身上 它也是用第一个动画剪辑自动
  • $.ajax如何在response中获取请求头

    ajax如何在response中获取请求头 下载文件时需要获取后端带在responseHeader中的文件名称 ajax type get url http xxxx currentuser contentType application
  • Qt操作excel的三方库Qtxlsx在Windows下使用注意事项

    Qt操作excel的三方库Qtxlsx在Windows下使用注意事项 文章目录 Qt操作excel的三方库Qtxlsx在Windows下使用注意事项 1 Qt Xlsx简介 2 编译及添加模块 2 1 下载及编译 2 2 拷贝相关文件集成到
  • WebGL 杂记

    WebGL 2D RotationHow to rotate in 2Dhttps webglfundamentals org webgl lessons webgl 2d rotation html 假设您有一个矩形 并且想要旋转它 在开
  • java 删除文件路径下的指定文件

    起因 租赁项目过期或未按指定机器被套用 检测到违反规定 需要删除数据库并删除重要文件 本文主要解决问题 删除文件夹下的指定文件 解决方案 import java io File public class TestMain public st
  • 水星迷你无线路由器ap模式 下要不要启用 dhcp服务器,水星(Mercury)Mini无线路由器AP模式设置...

    本文介绍了水星 MERCURY Mini系列无线路由器AP模式的设置方法 水星迷你路由器实现了即插即用 非常适合出差或者在旅行途中入住酒店时使用 直接把酒店房间里面的网线插在水星迷你无线路由器上 就可以正常使用了 下面以水星MW150RM迷
  • 编程 打油诗_CNC操机10年老员工献给大家的一首心酸打油诗

    操机苦 倒班累 操机倒班活受罪 半夜起 早晨睡 好比参加革命游击队 整日在思 彻夜不能寐 工作不顺奖金全作废 煎熬一夜 下班打瞌睡 吃个早餐凌晨还得排队 洗漱列队 厕所抢位 回到宿舍心神疲惫 请假难请 扣钱双倍 每天都在请假排队 数控操机何
  • Android之使用本地缓存数据

    前言 在通常做项目的时候 需要存储数据 会使用GreenDAO数据库 bmob后端云 或者其他方法 以及本篇文章所讲解的本地缓存 也就是通过SharedPreferences 来进行缓存 第一部分 1 那么首先呢需要创建一个缓存数据的类Ca
  • python编程中的注意事项

    虚拟环境 win下的虚拟环境创建 virtualenv name python 3 7 9 conda创建虚拟环境 conda create prefix home coData venv python 3 8 conda环境恢复 起因 c
  • 我的128创作纪念日

    机缘 写CSDN博客的时候 应该纯属一个巧合 还记得当初是和一个班上的同学一起记录学习笔记 最初是在博客园的平台上记录笔记 可以在以后复习时使用 后来我的同学开始推荐使用CSDN平台 于是我们两就转战CSDN啦 不知不觉 从3月份到现在也有
  • PyQt中的多线程QThread示例

    PyQt中的多线程 一 PyQt中的多线程 二 创建线程 2 1 设计ui界面 2 2 设计工作线程 2 3 主程序设计 三 运行结果示例 一 PyQt中的多线程 传统的图形用户界面应用程序都只有一个执行线程 并且一次只执行一个操作 如果用
  • Vscode:常用插件 & 快捷键 & 配置等

    一 常用插件 1 git相关的 1 在代码中显示git提交日志 包含Git账号 commit信息 给Vscode添加Git功能 GitLens Git supercharged 2 显示图形化的瀑布时间线Git记录 可基于某个分支创建新分支
  • w10计算机怎么恢复出厂设置路由器,技术编辑为你解决win10系统打不开192.168.1.1设置界面的还原步骤...

    很多人都懂一些简单的电脑系统问题的解决方案 但是win10系统打不开192 168 1 1设置界面的情况 想必大家都遇到过win10系统打不开192 168 1 1设置界面的情况吧 那么应该怎么处理win10系统打不开192 168 1 1
  • 【SQL】5 SQL SELECT DISTINCT 语句

    SELECT DISTINCT 语句用于返回唯一不同的值 SQL SELECT DISTINCT 语句 在表中 一个列可能会包含多个重复值 有时您也许希望仅仅列出不同 distinct 的值 DISTINCT 关键词用于返回唯一不同的值 S
  • Vue 中如何实现监测数组变化

    vue中响应式数据的原理是通过Object defineProperty控制getter和setter 并利用观察者模式完成的响应式设计 数组考虑性能原因没有用defineProperty对数组的每一项进行拦截 而是选择重写数组api方法