vue_源码 原理 剖析

时间:2024-07-30 12:34:56

相关基础知识点

// 可以让 任意函数/方法 成功临时指定成对象的方法进行调用 - call/apply

// 1. 根据伪数组生成 真数组

const lis = document.getElementsByTagName("li");

const arr = [].slice.call(lis);

const relArr = Array.from(lis);        // ES6语法

// 2. node.nodeType        // 得到节点类型

vue_源码 原理 剖析

// 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 文档碎片(高效更新多个节点)

内存中用来存储多个节点对象 的容器,不与任何 页面/页面节点 对应

vue_源码 原理 剖析

思路: 先将节点复制到内存中,在内存中修改完后,一次性添加到页面中

// 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);

vue_源码 原理 剖析

在 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);

}

}

  • 模板解析
  • 模板表达式

vue_源码 原理 剖析

  • 指令
  • 事件指令

vue_源码 原理 剖析

  • 一般指令

vue_源码 原理 剖析

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 的简写

vue_源码 原理 剖析

  • 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