标签：Vue get 数据 Object 绑定 key 双向 defineProperty data
1 双向绑定
顾名思义, 使用v-bind实现数据(data)=>视图(input), 使用@input事件实现视图(input)=>数据(data)
重点在v-bind
2 响应式原理(v-bind: 与 v-text{{}})
不要认为数据发生改变，界面就跟着更新，这并不是理所当然的，这其实是Vue的内部做了许多的操作
首先我们要思考两个问题
1.当data中的数据被修改时，Vue内部是如何监听data中数据的改变
首先这一部分用到了Object.defineProperty,目的是监听对象属性的改变
2.当data中的数据发生改变时，Vue是如何知道要通知哪些数据以及界面发生刷新
这一部分用到的是发布订阅者模式，这是一种设计模式, 也是由Object.defineProperty实现
3 Object.defineProperty()
[define]定义[Property]属性
该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Object.defineProperty(obj, prop, descriptor)
//obj 对象
//prop 要定义或修改的属性的名称或 Symbol
//descriptor 要定义或修改的属性描述符。
例如:
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
})
descriptor分为数据描述符和存取描述符
数据描述符:
value 任何有效的 JavaScript 值, 默认undefined
writable value值可写true/默认false
存取描述符: get set
⭐重点是两个回调函数⭐
Object.defineProperty(o, "b", {
// get : function() { return bValue; },
// set : function(newValue) { bValue = newValue; },
get() { return bValue; },
set(newValue) { bValue = newValue; },
});
get() { return ...; }//当访问该属性时，会调用此函数
set(newValue) { ... }//当属性值被修改时，会调用此函数,newValue=修改的新值
4 发布者-订阅者的模式
一个数据变化 => 多个数据
发布者(也叫观察者)Observer的实现, Object.defineProperty() 的 set() 回调函数
1 监听数据
2 数据变化时通知Watcher
var _data_ = data() //data函数返回一个对象
_data_.forEach(function(key) {
Object.defineProperty(_data_, key, {
set(newValue) { key变化时触发, 通知订阅者Watcher },
});
});
依赖收集器subs=[] 的实现, Object.defineProperty() 的 get() 回调函数
var _data_ = data() //data函数返回一个对象
_data_.forEach(function(key) {
Object.defineProperty(_data_, key, {
get() { 访问(使用)key时触发, subs.push( target添加订阅者,就是添加data的依赖 )},
});
});
通过Watcher得到依赖 => target
_data_[key] 主动触发上边的get() 保存依赖
Compile解析指令
1 解析模板指令，将模板中的变量替换成数据，初始化渲染页面视图. 与响应式无关, 页面编译只有一次
2 获得v-bind v-text 数据依赖
3 将数据依赖传给Watcher
订阅者Watcher, 依赖于data的数据, 比如computed属性
1 能够订阅并收到每个属性变动的通知
2 执行指令绑定的相应回调函数, 就是接受 数据依赖
3 更新视图
标签：Vue,get,数据,Object,绑定,key,双向,defineProperty,data 来源： https://www.cnblogs.com/boji/p/15934294.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。