目录1. 模板编译2. 组件渲染和更新1. 模板编译 Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说,当组件的生命周期执行到created和beforeMounted
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 : 'no message found'}}</p>`
with(this){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->return _c('p',[_v(_s(flag ? message : 'no message found'))])}
属性和动态属性
`<div id="div1" class="container">
<img :src="imgUrl"/>
</div>`
with(this){
return _c('div',
{staticClass:"container",attrs:{"id":"div1"}},
[_c('img',{attrs:{"src":imgUrl}})]
)
}
条件
`<div>
<p v-if="flag === 'a'">A</p>
<p v-else>B</p>
</div>`
with(this){
return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])])
}
循环
`<ul>
<li v-for="item in list" :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
`<input type="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}}}
)
}
Vue组件渲染和更新的过程简单地概况为以下几个步骤:
到此这篇关于Vue组件渲染与更新实现过程浅析的文章就介绍到这了,更多相关Vue组件渲染内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue组件渲染与更新实现过程浅析
本文链接: https://www.lsjlt.com/news/198329.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0