vue原理简单理解
在理解原理之前先简要了解一些ES5的Object.defineProperty()方法。
1.Object.defineProperty()
ECMAScript 5 为 JavaScript 添加了大量新的对象方法。
// 添加或更改对象属性 Object.defineProperty(object, property, descriptor) // 添加或更改多个对象属性 Object.defineProperties(object, descriptors) // 访问属性 Object.getOwnPropertyDescriptor(object, property) // 以数组返回所有属性 Object.getOwnPropertyNames(object) // 以数组返回所有可枚举的属性 Object.keys(object) // 访问原型 Object.getPrototypeOf(object) // 阻止向对象添加属性 Object.preventExtensions(object) // 如果可将属性添加到对象，则返回 true Object.isExtensible(object) // 防止更改对象属性（而不是值） Object.seal(object) // 如果对象被密封，则返回 true Object.isSealed(object) // 防止对对象进行任何更改 Object.freeze(object) // 如果对象被冻结，则返回 true Object.isFrozen(object)
这里简单的了解一下Object.defineProperty()方法。
（0）语法：
Object.defineProperty(obj, prop, descriptor)
参数：
obj：要在其上定义属性的对象
prop：要定义或修改的属性的名称
descriptor：将被定义或修改的属性描述符
返回值：
被传递给函数的对象。
描述符可同时具有的键值：
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。
（1）更改属性：
Object.defineProperty(object, property, {value : value})
例如：
var person = { firstName: "Bill", lastName: "Gates", language: "EN" }; // 更改属性 Object.defineProperty(person, "language", { value: "ZH" }); console.log(person);
结果：
（2）添加属性，可以指定是否允许修改、枚举、可重新配置等。
// 创建属性 Object.defineProperty(object, property, { value: value, // 值 writable: true // 属性值可修改 enumerable: true // 属性可枚举 configurable: true // 属性可重新配置 writable: false // 属性值不可修改 (默认值) enumerable: false // 属性不可枚举 configurable: false // 属性不可重新配置(默认值) });
例如：
<script type="text/javascript">
// 创建对象
var person = {
firstName: "Bill",
lastName: "Gates"
};
// 添加属性
Object.defineProperty(person, "fullName", {
value: "QZ",
configurable: true,
writable: true
});
console.log(person);
person.fullName = "新值";
console.log(person);
</script>
结果：
（3）添加getter与setter
// 创建对象 var person = { firstName: "Bill", lastName: "Gates" }; // 添加属性 Object.defineProperty(person, "fullName", { value: "QZ", configurable: true, writable: true }); // 添加getter与setter Object.defineProperty(person, "getF", { get: function() { console.log("getF被调用"); return this.fullName; } }); Object.defineProperty(person, "setF", { set: function(newValue) { console.log("setF被调用 " + newValue); this.fullName = newValue; } }); console.log(person.getF) person.setF = "新值" console.log(person.getF)
结果：
（4）Object.defineProperty()实现数据劫持
// 用于记录劫持的数据 let objName = ""; let obj = {}; // 添加属性 Object.defineProperty(obj, "name", { configurable: true, // 允许配置 enumerable: true, // 允许枚举，遍历 // getter。每次调用obj.name都会走这里 get: function() { console.log("get被执行！"); return objName; }, // setter。每次调用obj.name=xxx 修改属性都会走这里 set: function(newValue) { // 达到劫持数据的效果 console.log("set被执行！"); objName = newValue; } }); obj.name = "123456"; console.log("objName: " + objName)
结果：
2.深入响应式原理
当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
简单理解是由数据劫持结合发布者－订阅者模式实现的。说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时通过发布者-订阅者模式来实现更新试图。
1.检测变化的注意事项
受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应式的 vm.b = 2 // `vm.b` 是非响应式的
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
Vue.set(vm.someObject, 'b', 2)
还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.someObject,'b',2)
有时可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
补充：Object.assign() 方法
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。类似于jQuery.extend()方法。
因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。可以用jQuery.extend()实现深拷贝。
语法：
Object.assign(target, ...sources)
2.声明响应式属性
由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值：
var vm = new Vue({ data: { // 声明 message 为一个空值字符串 message: '' }, template: '<div>{{ message }}</div>' }) // 之后设置 `message` vm.message = 'Hello!'
如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。
这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式属性，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
3.异步更新队列
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如：
<div id="example">{{message}}</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
// vm.$el 获取的是元素。textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
var va1 = vm.$el.textContent === 'new message'; // false
console.log("va1" + va1)
// 修改完属性会
Vue.nextTick(function() {
var va2 = vm.$el.textContent === 'new message' // true
console.log("va2" + va2)
})
</script>
结果：
在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：
<div id="example">{{message}}</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: '123'
},
methods: {
changeValue() {
this.message = 'new message';
var va1 = this.$el.textContent === 'new message'; // false
console.log("va1" + va1)
// 修改完属性会
this.$nextTick(function() {
var va2 = vm.$el.textContent === 'new message' // true
console.log("va2" + va2)
})
}
}
});
vm.changeValue();
</script>
结果同上。
因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：
<div id="example">{{message}}</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: '123'
},
methods: {
async changeValue() {
this.message = 'new message'
console.log(this.$el.textContent) // => '123'
await this.$nextTick()
console.log(this.$el.textContent) // => 'new message'
}
}
});
vm.changeValue();
</script>
结果：
3.手写vue双向数据绑定
通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时通过发布者-订阅者模式来实现更新试图。
页面结构如下：
<div id="app"> <form> <input type="text" v-model="number"> <button type="button" v-on:click="increment">增加</button> </form> <h3 v-bind:title="number">{{number}}</h3> </div>
解释：
(1)一个input,用v-model指令实现双向数据绑定
(2)一个button，用v-on:click 实现绑定事件
(3)一个h3，用v-bind和 {{ }} 实现动态数据监听
对应的JS如下：
<script>
/**
* 构造函数
* @param {Object} options 选项
*/
function myVue(options) {
this._init(options);
}
// 初始化
myVue.prototype._init = function(options) {
this.$options = options;
this.$el = document.querySelector(options.el);
this.$data = options.data;
this.$methods = options.methods;
// _binding 存的是每个属性的观察者，在setter方法中获取到之后通知观察者进行更新。扮演一个导演者的角色
this._binding = {};
this._observe(this.$data);
this._complie(this.$el);
}
// 观察者：拦截对象(劫持get、set方法，绑定每个属性的观察者到_binding属性)
myVue.prototype._observe = function(obj) {
var value;
for(key in obj) {
// Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。
// 如果是自身的属性就绑定监听者
if(obj.hasOwnProperty(key)) {
this._binding[key] = {
_directives: []
};
value = obj[key];
if(typeof value === 'object') {
this._observe(value);
}
var binding = this._binding[key];
// 劫持get、set方法
Object.defineProperty(this.$data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log(`获取${value}`);
return value;
},
set: function(newVal) {
console.log(`更新${newVal}`);
if(value !== newVal) {
value = newVal;
// 通知订阅者更新自身
binding._directives.forEach(function(item) {
item.update();
})
}
}
})
}
}
}
/**
* 解析DOM结构
* @param {Object} root 元素
*/
myVue.prototype._complie = function(root) {
var _this = this;
var nodes = root.children;
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if(node.children.length) {
this._complie(node);
}
// 解析v-on指令
if(node.hasAttribute('v-on:click') || node.hasAttribute('@click')) {
node.onclick = (function() {
var attrVal = nodes[i].getAttribute('v-on:click');
if(!attrVal) {
attrVal = nodes[i].getAttribute('@click');
}
// fun.bind是绑定一个函数，语法是fun.bind(thisArg[, arg1[, arg2[, ...]]])
return _this.$methods[attrVal].bind(_this.$data);
})();
}
// 解析v-model指令
if(node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {
node.addEventListener('input', (function(key) {
var attrVal = node.getAttribute('v-model');
_this._binding[attrVal]._directives.push(new Watcher(
'input',
node,
_this,
attrVal,
'value'
))
return function() {
_this.$data[attrVal] = nodes[key].value;
}
})(i));
}
// 解析v-bind指令，缩写:。
if(node.hasAttribute('v-bind:title') || node.hasAttribute(':title')) {
var attrVal = node.getAttribute('v-bind:title');
if(!attrVal) {
attrVal = node.getAttribute(':title');
}
_this._binding[attrVal]._directives.push(new Watcher(
'text',
node,
_this,
attrVal,
'title'
))
}
// 解析innerHtml，替换{{}}里面的数据
if(node.innerHTML) {
let innerHTMLStr = node.innerHTML;
var matchReg = /(?<={{).*?(?=})/g;
if(innerHTMLStr.match(matchReg)) {
for(let attrVal of innerHTMLStr.match(matchReg)) {
_this._binding[attrVal]._directives.push(new Watcher(
'text',
node,
_this,
attrVal,
'innerText'
))
}
}
}
}
}
// 观察者
function Watcher(name, el, vm, exp, attr) {
this.name = name; //指令名称，例如文本节点，该值设为"text"
this.el = el; //指令对应的DOM元素
this.vm = vm; //指令所属myVue实例
this.exp = exp; //指令对应的值，本例如"number"
this.attr = attr; //绑定的属性值
this.update();
}
Watcher.prototype.update = function() {
this.el[this.attr] = this.vm.$data[this.exp];
}
// 类似vue的运行方法
var app = new myVue({
el: '#app',
data: {
number: 0
},
methods: {
increment: function() {
this.number++;
},
}
})
</script>
代码解释：
(1)上面执行new myVue(option)的时候会执行一系列的初始化工作，最重要的就是_observe方法劫持对象，重写set更新值方法，更新 值的方法会通知订阅了指定属性的订阅者进行更新操作。_complie 方法是编译DOM，解析里面指定的指令，重新设置属性，以及向 _directives 注册属性的观察者
(2)当修改属性的时候会走set方法，通知订阅者进行update操作。update方法根据订阅的属性以及元素进行修改指定的属性。
运行成功之后我们在控制台打印app看一下属性如下;将其属性number改为9.如下
