vue2.0
解析：
- 纯dom法
- 字符join法(innerHtml解析字符串，字符串拼接解析)
- 反引号法（ES6 ``）
- mustache模板引擎
mustache模板引擎
//arr数组被循环，#arr和/arr报错的代码被循环
{{#arr}}
<div></div>
{{/arr}}
//渲染
var teplate1=`
<ul>
{{#arr}}
<div></div>
{{/arr}}
</ul>
`
var data={
arr:[{},{}]
}
Mustache.render(teplate1，data)
//Mustache.render('模板字符串'，循环数据)
- mustache不光可以循环数组，还可以直接渲染对象 Mustache.render(teplate1，对象)
- mustache内部可以数组嵌套 arr嵌套循环arr1
{{#arr}}
<div>
{{#arr1}}
<div></div>
{{/arr1}}
</div>
{{/arr}}
- mustache内部不能计算表达式
- mustache布尔值可以判断是否 。渲染
var data={
arr:false
}
- 拆分tokens AST 抽象dom树，通过拆分成tokens，以双大括号为节点拆分
diff算法
{
sel:'div',
data:{},
children:[
sel:'div',
data:{},
children:[]
]
}
- 虚拟节点
{
children:undefined //子类
data:{} //节点属性
elm:undefined //元素对应的真实dom节点
key:undefined //唯一标识
sel:'div' //节点类型
text:'我十分的' //节点text
}
- 模板解析
- h函数 可以嵌套使用 解析成虚拟dom，并不是将真实dom转换为虚拟dom 模板引擎解析->h函数解析->虚拟dom 同层比较，key标注节点唯一标识
- patch函数 diff节点 “上树”：将虚拟节点渲染到页面
- 精细对比算法
- snabbdom
数据响应式
- object.defineProperty
带有隐藏属性例如：writable(是否可改变)
- defineReactive
闭包：设置object.defineProperty set的值
observe:
observer:
defineReactive:
- 对数组的响应式 vue改写了以下方法
push
pop
shift
unshift
splice
sort
reverse
//处理数组的原型链上方法
Object.setPrototypeOf(0,arrayMethods)
observer:
- 收集依赖
dep:每一层虚拟dom都有独自的dep
watcher
- 抽象语法树 AST
多层嵌套对象语法树
{
tag:"div",
attrs:[{name:"class"}],
type:1,
children:[{}]
}
模板语法->AST->h函数（渲染函数）->虚拟节点->diff生成界面
- 创建虚拟节点
document.createDocumentFragment()
