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 原理

数据代理

数据绑定

vue_源码 原理 剖析