Vue -- 模版解析

模版

	

		
		submit
	
	

		
{{item}}
	

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

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

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

	
{{price}}

• 模版中所有信息都包含在了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的三要素：响应式（如何监听属性的变化）、模版解析、渲染