Vue2.X数据响应原理
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Vue2.x使用属性里的get和set实现了数据响应。
常用属性：
value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined 。
get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。 默认为 undefined 。
set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。 默认为 undefined 。
writeable：当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。
enumrable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
configurable： 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
Vue从改变一个数据到发生改变的过程
Vue2.X数据响应原理
实例：在页面上初始化“I am Hector”，延时2s，修改“Hector”部分的值，修改为“Hector Real”，页面显示“I am Hector Real”，实现数据响应。
创建页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LearnVue3.0</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
const vm = new vue();
// 延时2s修改数据
setTimeout(function () {
console.log('change');
console.log(vm.$data);
vm.$data.a = 'Hector Real';
}, 2000);
</script>
</body>
</html>
test.js中使用Object.defineProperty实现数据响应：
function vue() {
// 固定对象和dom
this.$data = {
a: 'Hector'
};
this.el = document.getElementById('app');
// 需要渲染的文字
this._html = "";
// 初始化
this.observe(this.$data);
this.render();
}
// 数据监听
vue.prototype.observe = function (obj) {
let self = this;
let value;
// 解决只能对某个属性进行defineProperty的问题
// 所以针对传入obj进行了for-in遍历
for (let key in obj) {
value = obj[key];
if (typeof value === 'object') {
// 再对这个对象设置监听
this.observe(value);
} else {
Object.defineProperty(this.$data, key, {
// 依赖收集
get: function () {
return value;
},
// 触发更新
set: function (newvalue) {
value = newvalue;
self.render();
}
})
}
}
}
// 渲染
vue.prototype.render = function () {
this._html = "I am " + this.$data.a;
this.el.innerHTML = this._html;
}
在Chrome中运行，结果页面显示： I am Hector Real
在Chrome的console中的log：
数组特性化
针对数组特性化处理：
let arraypro = Array.prototype;
// 为什么要create再次创建对象，create是深拷贝，不影响之前的arraypro
let arrayob = Object.create(arraypro);
// 定义哪些方法触发更新
let arr = ["push", "pop", "shift"];
// arr里的方法，既能保持原有方法，又能触发更新
// 装饰者模式
arr.forEach(function (method, index) {
// 对自己的push方法重写
arrayob[method] = function () {
let ret = arraypro[method].apply(this, arguments);
// self.render();
console.log('检测到数组变化，触发更新');
return ret;
}
});
在Chrome中console运行示例：
let arr = [];
arr.__proto__ = arrayob;
arr.push(1);
结果显示：
欢迎关注我的公众号，谢谢大家！
