Vue组件渲染与更新实现过程浅析

Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说，当组件的生命周期执行到created和beforeMounted之间时，Vue会将模板(template)编译成渲染函数(render)，render函数是一个纯JavaScript函数，由with语句构成，它接收一个Vue组件实例作为参数。当render函数执行时会调用h函数，生成虚拟DOM节点(vnode)。

下面给出了常见的template模板以及模板编译后的结果：

插值

1. `<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{message}}</p>` 
2. with(this){return _c('p',[_v(_s(message))])} 
3. // _c 表示 createElement   也就是h函数  返回vnode  
4. // _v 表示 createTextVNode 
5. // _s 表示 toString 

表达式

1. `<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{flag ? message : 'no message found'}}</p>` 
2. with(this){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->return _c('p',[_v(_s(flag ? message : 'no message found'))])} 

属性和动态属性

1. `<div id="div1" class="container"> 
2.     <img :src="imgUrl"/> 
3. </div>` 
4. with(this){ 
5.     return _c('div', 
6.             {staticClass:"container",attrs:{"id":"div1"}}, 
7.             [_c('img',{attrs:{"src":imgUrl}})] 
8.             ) 
9. } 

条件

1. `<div> 
2. <p v-if="flag === 'a'">A</p> 
3. <p v-else>B</p> 
4. </div>` 
5. with(this){ 
6.     return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])]) 
7. } 

循环

1. `<ul> 
2. <li v-for="item in list" :key="item.id">{{item.title}}</li> 
3. </ul>` 
4. with(this){ 
5.     return _c('ul',_l((list), 
6.         function(item){return _c('li',{key:item.id}, 
7.         [_v(_s(item.title))])}),0 
8.         ) 
9. } 

事件

1. `<button @click="clickHandler">submit</button>` 

1. with(this){return _c('button',{on:{"click":clickHandler}},[_v("submit")])} 

v-model

1. `<input type="text" v-model="name">` 
2. with(this){ 
3. return _c('input', 
4.     {directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}} 
5.     ) 
6. } 

组件渲染和更新

Vue组件渲染和更新的过程简单地概况为以下几个步骤：

• 初始化组件实例：在渲染一个组件之前，Vue会创建一个组件实例，并将组件的选项对象进行合并、处理，最终形成一个组件实例的配置对象。
• 渲染组件：Vue将组件实例的配置对象转化为一个渲染函数，并执行该渲染函数，生成一个虚拟DOM树。此时，Vue会对虚拟DOM树进行初次渲染，将组件显示在页面上。
• 监听数据变化：当组件实例中的响应式数据发生变化时，Vue会立即检测到这些变化，并重新计算组件的渲染函数，生成一个新的虚拟DOM树。
• 对比新旧虚拟DOM树：Vue会将新生成的虚拟DOM树和上一次渲染时生成的虚拟DOM树进行比较，找出需要更新的部分。
• 更新组件：Vue会将需要更新的部分进行精细化地修改，使组件达到更新的效果。如果有需要，Vue会重新渲染整个组件。