vue_源码 原理 剖析
相关基础知识点
// 可以让 任意函数/方法 成功临时指定成对象的方法进行调用 - call/apply
// 1. 根据伪数组生成 真数组
const lis = document.getElementsByTagName("li");
const arr = [].slice.call(lis);
const relArr = Array.from(lis); // ES6语法
// 2. node.nodeType // 得到节点类型
// 3. 给对象添加属性，指定 属性描述符：存取描述符 get(),set() - 数据描述符
Object.defineProperty(ojb, propertyName, {
get(){return this.firstNAme+"-"+this.lastNAme},
set(newVAlue){const names=newValue.split("-");this.firstNAme=names[0];this.lastNAme=names[1]},
})
// 4. Object.keys(obj); // 得到对象自身可枚举属性组成的数组
// 5. obj.hasOwnProperty("name") // 判断 obj 对象自身属性是否包含 name
// 6. DocumentFragment 文档碎片(高效更新多个节点)
内存中用来存储多个节点对象 的容器，不与任何 页面/页面节点 对应
思路： 先将节点复制到内存中，在内存中修改完后，一次性添加到页面中
// 1. 创建一个内存中 节点容器
const fragment = document.createDocumentFragment();
// 2. 取出 div 中所有节点，转移到 fragment 中
const div = document.getElementById("demo");
let child; // newPos = appendChild(child) 会将 child 从原来位置取下来，放到 newPos 的最后位置
while(child=div.firstChild){fragment.appendChild(child)}
// 3. 在内存中遍历修改
const nodes = fragment.children[0].childNodes;
Array.prototype.slice.call(nodes).forEach(node=>{
if(node.nodeType === 1){
node.textContent = "丘魔的兵"
}
})
// 4. 一次性添加到页面
div.appendChild(fragment);
在 git 上，有个开源项目，剖析了 vue 原理
- 数据代理
为达到简化编码的目的，
内部实现的关键点: 通过 Object.defineProperty(vm, key, {}) 实现
对于 data 中状态的数据，通过 ViewModel 实例 来进行 代理读/代理写 操作
---------------------------------------------------------------
function Vue(configObj){
var me = this;
// 1. 保存 配置对象 到 ViewModel
this.$configObj = configObj;
// 2. 保存 data 对象到 ViewModel 和 变量 data 上
var data = this._data = this.$configObj.data;
// 3. 遍历 data 中所有属性, 实现数据代理
Object.keys(data).forEach(function (key) {
me._proxy(key);
});
// 实现数据绑定
observe(data, this);
// 实现模版解析
this.$compile = new Compile(options.el || document.body, this)
}
Vue.prototype = {
//
_proxy: function(key){
var vm = this;
// 给 vm 添加指定属性，使用 属性描述符 (设置 getter/setter)
Object.defineProperty(vm, key, {
configurable: false,
enumerable: true,
get: function proxyGetter(){ // 代理读
return vm._data[key]
},
set: function proxySetter(newValue){ // 代理写
vm._data[key] = newValue
}
})
},
$watch: function (key, cb, options) {
new Watcher(this, key, cb);
}
}
- 模板解析
- 模板表达式
- 指令
- 事件指令
- 一般指令
this.$compile = new Compile(options.el || document.body, this)
-
function Compile(el, vm) { this.$vm = vm; this.$el = this.isElementNode(el) ? el : document.querySelector(el); if (this.$el) { // 整体流程： this.$fragment = this.node2Fragment(this.$el); // 1. 将 目标元素节点 拷贝到 DocumentFragment this.init(); // 2. 内存中编译 DocumentFragment this.$el.appendChild(this.$fragment); // 3. 将 DocumentFragment 追加到目标元素节点 } } Compile.prototype = { node2Fragment: function(el) { var fragment = document.createDocumentFragment(), child; // 将原生节点拷贝到fragment while (child = el.firstChild) { fragment.appendChild(child); } return fragment; }, init: function() { this.compileElement(this.$fragment); // 传入待处理节点，进行编译处理 }, compileElement: function(el) { var childNodes = el.childNodes, me = this; [].slice.call(childNodes).forEach(function(node) { var text = node.textContent; // 换行 var reg = /\{\{(.*)\}\}/; // 匹配 {{模板表达式}} if (me.isElementNode(node)) { me.compile(node); } else if (me.isTextNode(node) && reg.test(text)) { // 如果是 {{模板表达式}}
// 则 解析 成node.textContent = 模板表达式，不管匹配成功几个表达式，总是只生效第一个
me.compileText(node, RegExp.$1);
}if (node.childNodes && node.childNodes.length) { // 如果还有子节点，则递归编译 me.compileElement(node); } }); }, compile: function(node) { var nodeAttrs = node.attributes, me = this; [].slice.call(nodeAttrs).forEach(function(attr) { var attrName = attr.name; if (me.isDirective(attrName)) { var exp = attr.value; // 得到表达式 即 回调函数名 var dir = attrName.substring(2); // 得到指令 // 事件指令 if (me.isEventDirective(dir)) { compileUtil.eventHandler(node, me.$vm, exp, dir); // 普通指令 } else { compileUtil[dir] && compileUtil[dir](node, me.$vm, exp); } node.removeAttribute(attrName); } }); }, compileText: function(node, exp) { compileUtil.text(node, this.$vm, exp); }, isDirective: function(attr) { return attr.indexOf('v-') == 0; }, isEventDirective: function(dir) { return dir.indexOf('on') === 0; }, isElementNode: function(node) { return node.nodeType == 1; }, isTextNode: function(node) { return node.nodeType == 3; } }; // 用于编译的方法 - 指令处理集合 var compileUtil = { text: function(node, vm, exp) { // 编译 v-text 或者 {{模板表达式}} this.bind(node, vm, exp, 'text'); }, html: function(node, vm, exp) { // v-html this.bind(node, vm, exp, 'html'); }, model: function(node, vm, exp) { // v-model this.bind(node, vm, exp, 'model'); var me = this, val = this._getVMVal(vm, exp); node.addEventListener('input', function(e) { var newValue = e.target.value; if (val === newValue) { return; } me._setVMVal(vm, exp, newValue); val = newValue; }); }, class: function(node, vm, exp) { // v-bind:class this.bind(node, vm, exp, 'class'); }, bind: function(node, vm, exp, dir) { var updaterFn = updater[dir + 'Updater']; // 根据指令名 得到一个用于更新节点的更新函数 updaterFn && updaterFn(node, this._getVMVal(vm, exp)); // 得到指定表达式对应的值
// 解析每个表达式后 - 为表达式创建对应的 watcher 对象(事件表达式除外) new Watcher(vm, exp, function(value, oldValue) { updaterFn && updaterFn(node, value, oldValue); // 更新节点 }); }, // 事件处理 eventHandler: function(node, vm, exp, dir) { var eventType = dir.split(':')[1], fn = vm.$options.methods && vm.$options.methods[exp]; if (eventType && fn) { node.addEventListener(eventType, fn.bind(vm), false); } }, _getVMVal: function(vm, exp) { var val = vm._data; exp = exp.split('.'); exp.forEach(function(k) { val = val[k]; }); return val; }, _setVMVal: function(vm, exp, value) { var val = vm._data; exp = exp.split('.'); exp.forEach(function(k, i) { // 非最后一个key，更新val的值 if (i < exp.length - 1) { val = val[k]; } else { val[k] = value; } }); } }; // 更新节点的方法集 var updater = { textUpdater: function(node, value) { // v-text 或者 {{模板表达式}} node.textContent = typeof value == 'undefined' ? '' : value; }, htmlUpdater: function(node, value) { // v-html node.innerHTML = typeof value == 'undefined' ? '' : value; }, classUpdater: function(node, value, oldValue) { // v-bind:class var className = node.className; className = className.replace(oldValue, '').replace(/\s$/, ''); var space = className && String(value) ? ' ' : ''; node.className = className + space + value; }, modelUpdater: function(node, value, oldValue) { // v-model node.value = typeof value == 'undefined' ? '' : value; } };
- 数据绑定 -------- 双向数据绑定
使用 数据劫持技术 实现数据绑定
思想： 通过 defineProperty() 来监视 data 中所有状态属性(任意层次)的变化，一旦变化了，界面会实时更新
Observer
用来对 data 中数据进行监视 的构造函数
为每个 data 数据设置 getter 和 setter ，并配置 dep 对象
Compile
用来解析模板页面对象的构造函数
利用 compile 对象解析模板页面
每解析一个表达式都会创建一个 watcher 对象，并建立 watcher 和 dep 的关系
1 个 watcher 对应 n>=1 个 dep -------- 假设表达式是 2 层表达式 mom.son 时，当前 watcher 就对应 2 个 dep
1 个 dep 对应 n>=0 个 watcher -------- 没有一个表达式用到这个属性; 只有一个表达式用到这个属性; 多个表达式用到这个属性
每个 dep 都有唯一的 id
subs 包含 n 个对应 watcher 的数组 ---- subcribes 的简写
-
function Observer(data) { this.data = data; this.walk(data); } Observer.prototype = { walk: function(data) { var me = this; Object.keys(data).forEach(function(key) { me.convert(key, data[key]); }); }, convert: function(key, val) { // 给每个对象设置 响应式属性 this.defineReactive(this.data, key, val); }, defineReactive: function(data, key, val) { // 对某个属性进行劫持 var dep = new Dep(); // 在每个属性进行劫持前创建一个对应的 dep 对象 var childObj = observe(val); // 递归实现属性下所有层次属性的劫持 Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { if (Dep.target) { dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; childObj = observe(newVal); // 新的值是object的话，进行监听 dep.notify();// 通知订阅者 } }); } }; function observe(value, vm) { if (!value || typeof value !== 'object') { return; } return new Observer(value); }; var uid = 0; function Dep() { this.id = uid++; this.subs = []; } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, depend: function() { Dep.target.addDep(this); }, removeSub: function(sub) { var index = this.subs.indexOf(sub); if (index != -1) { this.subs.splice(index, 1); } }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; Dep.target = null;
5
5
5
55
5
5
