Vue -- 模版解析

模版

<div id="app">
	<div>
		<input v-model="title" />
		<button @click="todo">submit</button>
	</div>
	<ul>
		<li v-for="item in list">{{item}}</li>
	</ul>
</div>

• 本质：字符串
• 有逻辑：入v-if v-for等
• 与html格式很像，但有很大区别：html是静态的，没有逻辑
• 最终还要转换为html来显示

模版最终必须转换成JS代码，因为：

• 有逻辑（v-for v-if），必须用js才能实现
• 转换为html渲染页面，必须用js才能实现
• 因此，模版最终要转换成一个js函数（render函数/渲染函数）

<div>
	<p>{{price}}</p>
</div>

<script>
	var vm = new Vue({
		el: '#app';
		data: {
			price:100
		}
	});

	// 以下是手写的render函数
	// 用with
	function render(){
		with(this){ // this就是vm
			_c(
				'div',
				{
					attrs: {'id': 'app'}
				},
				[
					_c('p', [_v(_s(price))]);
				]
			)
		}
	}
	// 不用with
	function render1(){
			return vm._c(
				'div',
				{
					attrs: {'id': 'app'}
				},
				[
					vm._c('p', [vm._v(vm._s(vm.price))]);
				]
			)
		}
	}
</script>

• 模版中所有信息都包含在了render函数中
• this即vm
• price即this.price即vm.price,即data中的price
• _c即this._c即vm._c

vue的整个实现流程

• 第一步：解析模版成render函数
• 第二步：响应式开始监听
• 第三步：首次渲染，显示页面，且绑定依赖
• 第四步：data属性变化，触发rerender

第一步：解析模版成render函数

• with的用法
• 模版中所有的信息都被render函数包含
• 模版中用到的data中的属性，都变成了JS变量
• 模版中的v-model v-for v-on都变成了JS逻辑
• render函数返回vnode

第二步：响应式开始监听

• Object.defineProperty
• 将data的属性代理到vm上

第三步：首次渲染，显示页面，且绑定依赖

• 初次渲染，执行updateComponent，执行vm._render
• 执行render函数，会访问到vm.list和vm.title
• 会被响应式的get方法监听到
• 执行updateComponent，会走到vdom的patch方法
• patch将vnode渲染成DOM，初次渲染完成

为什要监听get，不能直接监听set

• data中有很多属性，有些被用到，有些可能不被用到
• 被用到的会走到get,不被用到的不会走到get
• 未走到get中的属性，set的时候我们也无需关心
• 避免不必要的重复渲染

第四步：data属性变化

• 修改属性，被响应式的set监听到
• set中执行updateComponent
• updateComponent重新执行vm._render()
• 生成的vnode和prevVnode，通过patch进行对比
• 渲染到html中

vue的三要素：响应式（如何监听属性的变化）、模版解析、渲染