Vue组件渲染与更新怎么实现
导读:本文共2214字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 1. 模板编译Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说,当组件的生命周期执行到created和beforeMounted之间时,Vue会将模板(template)编译成渲染函数(render),render函数是一个纯JavaScript函数,由with语句构成,它接收一个Vue组件实例作为参数。当render函数执行时会调用h函数,生成虚... ...
目录
(为您整理了一些要点),点击可以直达。1. 模板编译
Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说,当组件的生命周期执行到created和beforeMounted之间时,Vue会将模板(template)编译成渲染函数(render),render函数是一个纯JavaScript函数,由with
语句构成,它接收一个Vue组件实例作为参数。当render函数执行时会调用h函数,生成虚拟DOM节点(vnode)。
下面给出了常见的template模板以及模板编译后的结果:
插值
`<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{message}}</p>`
with(this){return_c('p',[_v(_s(message))])}//_c表示createElement也就是h函数返回vnode//_v表示createTextVNode//_s表示toString
表达式
`<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{flag?message:'nomessagefound'}}</p>`
with(this){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->return_c('p',[_v(_s(flag?message:'nomessagefound'))])}
属性和动态属性
`<divid="div1"class="container"> <img:src="imgUrl"/></div>`
with(this){ return_c('div', {staticClass:"container",attrs:{"id":"div1"}}, [_c('img',{attrs:{"src":imgUrl}})] )}
条件
`<div><pv-if="flag==='a'">A</p><pv-else>B</p></div>`
with(this){ return_c('div',[(flag==='a')?_c('p',[_v("A")]):_c('p',[_v("B")])])}
循环
`<ul><liv-for="iteminlist":key="item.id">{{item.title}}</li></ul>`
with(this){ return_c('ul',_l((list), function(item){return_c('li',{key:item.id}, [_v(_s(item.title))])}),0 )}
事件
`<button@click="clickHandler">submit</button>`
with(this){return_c('button',{on:{"click":clickHandler}},[_v("submit")])}
v-model
`<inputtype="text"v-model="name">`
with(this){return_c('input', {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}}} )}
2. 组件渲染和更新
Vue组件渲染和更新的过程简单地概况为以下几个步骤:
初始化组件实例:在渲染一个组件之前,Vue会创建一个组件实例,并将组件的选项对象进行合并、处理,最终形成一个组件实例的配置对象。
渲染组件:Vue将组件实例的配置对象转化为一个渲染函数,并执行该渲染函数,生成一个虚拟DOM树。此时,Vue会对虚拟DOM树进行初次渲染,将组件显示在页面上。
监听数据变化:当组件实例中的响应式数据发生变化时,Vue会立即检测到这些变化,并重新计算组件的渲染函数,生成一个新的虚拟DOM树。
对比新旧虚拟DOM树:Vue会将新生成的虚拟DOM树和上一次渲染时生成的虚拟DOM树进行比较,找出需要更新的部分。
更新组件:Vue会将需要更新的部分进行精细化地修改,使组件达到更新的效果。如果有需要,Vue会重新渲染整个组件。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Vue组件渲染与更新怎么实现的详细内容,希望对您有所帮助,信息来源于网络。