认识Vue源码（1）

我就是我 2022-12-02 13:47 117阅读 0赞

# 一、预备知识 #

### 1、节点与节点类型 ###

1.  如何获得元素节点
    
        var elementNode=document.querySelector('selector');
        var elementNodes=document.querySelectorAll('selector');
2.  如何获得属性节点（一个元素节点的html属性）
    
        var attrs=elementNode.attributes;   //返回elementNode的所有属性节点的集合
        var attr=elementNode.getAttrubuteNode('attrName');//返回elementNode指定的属性节点
3.  如何获得文本节点
    
        var subNode=elementNode.firstChild;   //返回元素节点的第一个子节点
        var subNode=elementNode.lastChild;   //返回元素节点的最后一个子节点
4.  如何获得所有的子节点：childNodes
    
        var temp=elementNode.childNodes;
5.  三大节点类型：nodeType  
    三大节点：元素节点（`<div></div>`）、属性节点（`title='标题'`）、文本节点。  
    节点的三大属性：nodeType、nodeName、nodeValue。  
    返回节点的类型：元素节点–1、属性节点–2、文本节点–3

### 2、属性的特性：也叫作属性的“描述符” ###

> 属性：利用var声明的变量、对象的属性、对象的方法。  
> 一个属性要么具备数据特性，要么具备访问器特性。

1.  **属性的数据特性**：枚举性、可写性、取值、可配置性。  
    一个属性被创建出来之后，默认具备属性的数据特性。  
    Vue实例中data数据区所有的变量都具备访问器特性，不具备数据特性。
2.  **属性的访问器特性**：枚举性可配置性、getter、setter。
    
    > getter：当获取属性取值时执行的代码（get:function()\{\}）。  
    > setter：当设置属性取值时执行的代码（set:function()\{\}）。
    
    getter（可以拦截用户为变量的使用）和setter（可以拦截用户对变量的赋值）可以成功的实现数据拦截，例：
    
        //有两个window下的属性：a,x。实现x对a的响应。
        //修改x的值，a也变。
        //获取x的值，返回a的值。
        
        var a = 1000;
        Object.defineProperty(window,'x',{ 
        	enumberable:true,	//可枚举
        	configurable:true,	//可配置
        	get:function(){ 		//有人使用x变量了
        		return a;
        	},
        	set:function(newValue){ 		//有人为X变量赋新值了
        		a = newValue;
        		// console.log(newValue)
        	}
        })
3.  读取属性的特性：  
    `Object.getOwnPropertyDescriptor(对象,'属性');`  
    `Object.getOwnPropertyDescriptors(对象))`
    
        var x=100,y=200,z='abc';
        var temp=Object.getOwnPropertyDescriptor(window,"x");
        console.log(temp);
4.  设置属性的特性：
    
        Object.defineProperty(对象,'属性',{ 描述符});
        Object.defineProperty(对象,{ 
        	属性:{ 描述符}
        	属性:{ 描述符}
        })

### 3、利用利用Object的方法遍历对象的可枚举属性 ###

`Object.keys(对象)`：遍历对象的可枚举属性名，结果为数组。  
`Object.values(对象)`：遍历对象的可枚举属性值，结果为数组。  
`Object.entries(对象)`：遍历对象的可枚举属性名和属性值，结果为二维数组。

var obj = { a:100,b:200,c:300,d:400,e:'abC'}
    console.log(Object.keys(obj))	//["a", "b", "c", "d", "e"]
    console.log(Object.values(obj))		//[100, 200, 300, 400, "abC"]
    console.log(Object.entries(obj))	//[["a", 100]["b", 200]["c", 300]["d", 400]["e", "abC"]]

### 4、ES6为数组新增的静态方法 ###

`Array.from()`：将类数组和可遍历对象转换为数组。  
我们这里用来遍历NodeList对象、NameNodeMap对象。

1.  类数组（长得像数组的对象like-array object）
    
        //对象的属性必须是整数，对象必须具备length属性。例：
        let obj={ “0”:100,“1”:200,“2”:300,length:3}
        let array=Array.from(obj);
2.  可遍历对象（lterator）：可以使用for-of遍历的对象
    
    > 原生的可遍历对象：数组、字符串、Set、Map、NodeList、NameNodeMap
    
    for-in和for-of的区别：for-in用来遍历对象，for-of用来遍历可遍历的对象  
    NodeList对象：DOM操作当中找到的包含多个标记的元素节点。  
    NameNodeMap对象：DOM操作当中找到的属性节点的集合。  
    A. 利用for-of遍历NodeList对象：
    
        let nodes = document.querySelectorAll('.box');	//[Object NodeList]
        for(let item of nodes){ 
        	console.log(item)
        }
        let temp = Array.from(nodes)
        console.log(temp)
    
    B. 利用for-of遍历NameNodeMap对象：
    
        <a href="#" title="链接" target="_blank" class="lj">超级链接</a>
        
        let ljNode = document.querySelector('.lj');
        let attrs = ljNode.attributes;
        console.log(attrs);
        for(let item of attrs){ 
        	console.log(item)
        }
        let temp = Array.from(attrs)
        console.log(temp)

### 5、ES6为字符串新增的方法 ###

`startWith(str)`：判断字符串是否以指定的子串str开头。

//例：判断.lj元素节点的所有属性是属性还是指令。
    <a href="#" title="链接" target="_blank" class="lj" v-text='wenben' v-ok='message'>超级链接</a>
    
    let ljNode = document.querySelector('.lj');
    let attrs = ljNode.attributes;
    Array.from(attrs).forEach(item=>{ 
    	if(item.nodeName.startsWith('v-')){ 
    		console.log(item.nodeName + '是指令')
    	}else{ 
    		console.log(item.nodeName + '是属性')
    	}
    })

### 6、ES6类的书写方式 ###

class 类名{ 
    	constructor(){ //构造函数（创建实例的同时自动执行的函数叫做构造函数,在构造函数例this是指向实例的）}
    	方法名(){ //方法}
    }

//例：利用ES6类的书写方式定义Person类并创建p实例
    class Person{ 
    	constructor(name,sex,age){ 
    		this.name = name;
    		this.sex = sex;
    		this.age = age;
    	}
    	showName(){ 
    		return this.name;
    	}
    }
    var p = new Person('小惜','女',21);	
    console.log(p.showName())