深入Vue2.0底层思想

初志

vue2.0和1.0模板衬着的差别

常识普及

在开端浏览源码之前，先懂得一些相干的常识：AST 数据构造，VNode 数据构造，createElement 的问题，render函数。

AST 数据构造

要看懂膳绫擎的 render函数，只须要懂得 _c，_m，_v，_s 这几个函数的定义，个中 _c 是 createElement(创建元素)，_m 是 renderStatic(衬着静态节点)，_v 是 createTextVNode(创建文本dom)，_s 是 toString (转换为字符串)

AST 的全称是 Abstract Syntax Tree(抽象语法树)，是源代码的抽象语法构造的树状表示情势，计算机学科中编译道理的概念。而vue就是将模板代码映射为AST数据构造，进行语法解析。

我们看一下 Vue 2.0 源码中 AST 数据构造的定义：

declare type ASTNode = ASTElement | ASTText | ASTExpression 
 
declare type ASTElement = { // 有关元素的一些定义 
 
  type: 1; 
 
  tag: string; 
 
  attrsList: Array{ name: string; value: string }>; 
 
  attrsMap: { [key: string]: string | null }; 
 
  parent: ASTElement | void; 
 
  children: ArrayASTNode>; 
 
  //...... 
 
} 
 
declare type ASTExpression = { 
 
  type: 2; 
 
  expression: string; 
 
  text: string; 
 
  static?: boolean; 
 
} 
 
declare type ASTText = { 
 
  type: 3; 
 
  text: string; 
 
  static?: boolean; 
 
}

我们看到 ASTNode 有三种情势：ASTElement，ASTText，ASTExpression。用属性 type 区分。

VNode数据构造

下面是 Vue 2.0 源码中 VNode 数据构造的定义 (带注释的跟下面介绍的内容有关)：

constructor { 
 
  this.tag = tag   //元素标签 
 
  this.data = data  //属性 
 
  this.children = children  //子元素列表 
 
  this.text = text 
 
  this.elm = elm  //对应的┞锋实 DOM 元素 
 
  this.ns = undefined 
 
  this.context = context 
 
  this.functionalContext = undefined 
 
  this.key = data && data.key 
	
			 1/6    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　拯救者Linux：我是如何给我的团队引入Linux的
            
            在项目早期就碰到公开的掉败后，一个有名大年夜学的 IT 团队决定将他们的 web 注册体系安排到 Linux上，此举几乎将办事器的最大年夜用户拜访量进步了 3  倍1998年，我在明尼苏达大年夜学为>>>详细阅读


本文标题：深入Vue2.0底层思想–模板渲染
地址：http://www.17bianji.com/lsqh/36398.html
 1/2    1