vue响应数据的原理
2024-08-22 21:25:50
vue最大的特点就是数据驱动视图。
vue的数据改变,页面一定发生改变?不一定。
当操作引用类型的数据,动态添加属性时,页面不会发生改变。
vue响应式数据原理(也叫数据绑定原理、双向数据绑定原理):
底层是Object.defineProperty(),目前用的vue2.6版本和将来更新的vue3.0(proxy)都是通过给data中的数据加一个数据劫持(setter和getter方法)。但是不管哪种版本,ie浏览器都有兼容性问题,vue2.6不兼容ie8及以下,vue3.0不兼容ie11。
Object.defineProperty()处理data里的数据,数据就添加上get和set方法,数据获取的时候触发get,数据修改的时候触发set。在修改数据的时候,优先触发set,触发watcher监听,再通知界面。
vue中如果动态添加属性,该属性就没有经历过处理,就没有set和get方法,所以数据变页面不变。
vue提供一个实例方法:vm.$set(目标对象,'动态添加的属性名','属性值')可以添加一个响应式属性,会触发视图的更新。
最新文章
- pdfbox加载pdf时遇到wrappedioexception报错处理方式
- NVelocity介绍,NVelocity中文手册文档及实例下载
- win10突然不能使用usb大容量存储设备(移动硬盘)的解决方法
- IE10、IE11 无法写入Cookie
- 16款最佳HTML5超酷动画演示及源码
- 一些.net开源项目
- iOS中sqlite3操作
- UVALive 2521	Game Prediction 题解
- 在windows下使用cmd命令全速下载百度云文件
- FFPLAY的原理(七)
- bind 小测试
- JQuery button控制div或者section
- F分布
- 【C++】不要依赖编译器的默认初始值
- Jmeter实现对mysql的增、删、改、查
- mysql插入中文数据报错 java.sql.SQLException: Incorrect string value: '\xE5\x90\x88\xE8\xAE\xA1' for column
- 线性回归 Linear regression(4) 局部加权回归
- [ActionScript 3.0] 动态链接库
- POI 2018.10.22
- C# 中的单精度与双精度区别