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

说一下vue2的响应式原理?

vue2采用数据代理+数据劫持+发布订阅模式的方法。

在初始化vue实例时,会把data对象和data对象的属性都添加到vm对象中,通过object.defineProperty()进行数据代理,用vm对象的属性来代理data对象的属性,并在Observer类中递归遍历data对象,对data对象中的每个属性都进行数据劫持,都指定一个getter、setter。

例外的,对于数组,不能通过object.defineProperty()进行数据代理,因为监听的数组下标变化时会出现数据错乱问题,所以数组是调用数组重写的原生方法来实现响应式。

当通过vm对象修改data对象中的属性时,会触发data属性的setter方法,然后触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。【Watcher回调是异步任务,它的执行会遵循事件循环机制,且重复的Watcher回调不会放到任务队列中,所以多次重复数据更新时,只会重新渲染一次页面】。

当通过vm对象读取data对象中的属性时,会触发data属性的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

当data对象中数组元素发生变化时,会调用数组重写的原生方法,然后触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。

当读取data对象中数组元素时,会触发数组的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

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

相关文章:

  • 如何使用CORS和CSP保护前端应用程序安全
  • C/C++输出硬币翻转 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
  • ipad可能会在iOS 16中失去智能家居中心功能
  • maven打包可运行jar
  • Arcgis连接Postgis数据库(Postgre入门十)
  • 【蓝桥杯选拔赛真题17】C++时间换算 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析
  • 【腾讯云 HAI域探秘】探索AI绘画之路:利用腾讯云HAI服务打造智能画家
  • 安卓常见设计模式10------责任链模式(Kotlin版)
  • 利用 Google Artifact Repository 构建maven jar 存储仓库
  • Facebook广告被暂停是什么原因?Facebook广告账号被封怎么办?
  • Javaweb之javascript的BOM对象的详细解析
  • 使用Nginx和Spring Gateway为SkyWalking的增加登录认证功能
  • Android 12.0 增加多张图片作为系统静态壁纸的功能实现
  • 无线优化之RRM模板
  • BI 数据可视化平台建设(1)—交叉表组件演变实战
  • Python---练习:求幸运数字6
  • 【云栖2023】王峰:开源大数据平台3.0技术解读
  • 如何改变Wi-Fi的IP地址,提高网络连接稳定性和速度
  • APP 备案公钥、签名 MD5、SHA-1、SHA-256获取方法。
  • 屏幕提词软件Presentation Prompter mac中文版使用方法
  • Rc与Arc实现1vN所有权机制
  • 建造者模式 rust和java的实现
  • 书写Prompt的经验总结
  • WebSocket实时应用
  • 从零开始搭建React+TypeScript+webpack开发环境-基于lerna的webpack项目工程化改造
  • 网络监控系统和防火墙的区别有哪些?
  • 刷题学习记录BUUCTF
  • Linux imu6ull驱动- led
  • 【 云原生 | K8S 】Kubernetes 概述
  • 边缘计算多角色智能计量插座:用电监测和资产管理的未来智能化引擎