赞
踩
vue 中的双向数据绑定其实就是在单向数据绑定的基础上,给可输入元素(input textare) 等添加change事件,来动态改变绑定的Model 以及视图。
先来一张结构图:
首先,这个vue 是通过数据劫持结合发布者-订阅者模式来实现的双向绑定。首先通过Object.defineProperty() 给每个属性绑定getter / setter 。当数据发生变化时,发布消息给订阅者,出发相应的回调函数,完成视图更新。
源码里面是这样的:
先是处理对象数据,先遍历对象的key 然后通过响应式函数defineReactive 实现响应式数据,内部的原理依然是Object.defineProperty() 实现的,此时数据都是响应式的,也就是说我们可以监听到数据的变化了
- function observe(data) {
- //先不考虑数组的情况
- if (!data || typeof data !== 'object') {
- return;
- }
- // 取出所有属性遍历
- Object.keys(data).forEach(function(key) {
- defineReactive(data, key, data[key]);
- });
- };
-
- function defineReactive(data, key, val) {
- observe(val); // 监听子属性
- Object.defineProperty(data, key, {
- enumerable: true, // 可枚举
- configurable: false, // 不能再define
- get: function() {
- return val;
- },
- set: function(newVal) {
- console.log('哈哈哈,监听到值变化了 ');
- val = newVal;
- }
- });
- }

接下来,当监听到数据的变化之后,我们需要通知订阅者,以完成相关的数据更新;
如何通知订阅者?我们要实现一个消息订阅器,用来收集消息订阅者,当数据变动时,就触发notify(), notify() 会调用订阅者的 update() 方法,完成视图更新ÿ
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。