卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › Vue响应式原理

Vue响应式原理

坚果大叔
2018-12-12 17:09:42技术阅读 3,315
1、vue响应式原理就是对你数据的变化,vue会有一个响应,去完成某件事。
2、vue的响应式原理就是基于vue知道了数据发生了变化,那么vue是如何知道数据发生了变化呢?
3、数据劫持 vue.js 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个值
4、数据劫持盲区
1. vue 在实例化的时候会将data数据中的属性全部做数据劫持
2. 如果时对象,也会迭代本身属性将全部属性都实现数据劫持
3. 当赋值的时候,如果时newVal是对象,也会迭代newVal的属性实现全部属性的数据劫持

什么时候会发生盲区:
    比如说,data中现有一个obj 的值 list,但是现有list中没有name 这个属性。现在主动 list.name = 1,因为list.name的属性不是 Getter/Setter,所以赋值后不会去发布消息给订阅者,订阅者也没有办法更新。这就是数据劫持盲区 但是有一个有趣的现象:就是虽然obj.newparam不会发布消息,但是如果别的发布者触发的时候,页面局部渲染时如果包括obj.newparam的值,渲染效果也是会显示obj.newparam的最新值。这是由于页面更新时是直接读取的obj.newparam的值。
5. 数组Array的特殊性
vue中实现的方法实际是对数组的属性重写,重写过后的方法不仅能实现原有的功能,还能发布消息给订阅者。

当然Array也有特殊现象:如果要更新 Array 某个索引对应的值得时候,要用Vue.set方式实现
vue
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
页面的重绘(repaint)与回流(reflow)
上一篇
Python + Wxpy 搭建简单微信机器人
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
魔都一日游~
看一看
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
日常,下班啊,唉唉唉唉
小米 note3 折腾记
远方
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
429 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢