Vue组件渲染与更新实现过程浅析
作者:周兴 发布时间:2023-07-02 17:00:43
标签:Vue,组件,渲染,更新
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 : '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}}}
)
}
2. 组件渲染和更新
Vue组件渲染和更新的过程简单地概况为以下几个步骤:
初始化组件实例:在渲染一个组件之前,Vue会创建一个组件实例,并将组件的选项对象进行合并、处理,最终形成一个组件实例的配置对象。
渲染组件:Vue将组件实例的配置对象转化为一个渲染函数,并执行该渲染函数,生成一个虚拟DOM树。此时,Vue会对虚拟DOM树进行初次渲染,将组件显示在页面上。
监听数据变化:当组件实例中的响应式数据发生变化时,Vue会立即检测到这些变化,并重新计算组件的渲染函数,生成一个新的虚拟DOM树。
对比新旧虚拟DOM树:Vue会将新生成的虚拟DOM树和上一次渲染时生成的虚拟DOM树进行比较,找出需要更新的部分。
更新组件:Vue会将需要更新的部分进行精细化地修改,使组件达到更新的效果。如果有需要,Vue会重新渲染整个组件。
来源:https://blog.csdn.net/zx1041561837/article/details/129307600
0
投稿
猜你喜欢
- 前言yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法。最近又重新学习了下,所以整理了下面这
- 一个网站能切换不同的CSS风格大家应该都了解,像众所周知的腾讯在今年改版时也增加了切换皮肤的功能。根据时间自动调整站点风格是不错的想法,这种
- 前言相关一些检测工具挺多的,比如powertop、powerstat、s-tui等。但如何通过代码的方式来实时检测,是个麻烦的问题。通过许久
- 我们都知道数据是无价,如果不对数据进行备份,相当是让数据在裸跑,一旦服务器出问题,只有哭的份了。下面将介绍mysql数据库的自动备份,大家可
- Smptp类定义:smtplib.SMTP(host[,port[,local_hostname[,,timeout]]]),作为SMTP的
- 这篇论坛文章(赛迪网技术社区)根据网友的个人实践扼要的讲解了将MySQL 5.0下的数据导入到MySQL 3.23中的具体方法及步骤,详细内
- 1.创建带有缺失值的数据库:import pandas as pdimport numpy as npdf = pd.DataFrame(n
- 通过win32 COM接口实现软件的操作本质上来看跟直接操作软件一致,这跟我之前经常用的通过各种扩展的组件或者库实现各种文件的处理有较大的差
- 目前防采集的方法有很多种,先介绍一下常见防采集策略方法和它的弊端及采集对策: 一、判断一个IP在一定时间内对本站页面的访问次数,如果明显超过
- tkinter是python的标准Tk GUI工具包的接口,在windows下如果你安装的python3,那在安装python的时候,就已经
- 以下来自Stack Overflow从上面我们可以很清晰的看出应该如何使用matplotlib的figure方法。补充知识:matplotl
- 本文实例讲述了Python反转序列的方法。分享给大家供大家参考,具体如下:序列是python中最基本的数据结构,序列中每个元素都有一个跟位置
- Python里的正则表达式Python里的正则表达式,无需下载外部模块,只需要引入自带模块:re:import re官方re模块文档: ht
- 1.strip():str.strip([chars]);去除字符串前面和后面的所有设置的字符串,默认为空格chars -- 移除字符串头尾
- 1. 引言本文是数独游戏问题求解的第二篇,在前文中我们使用回溯算法实现了最简单版本的数独游戏求解方案。本文主要在前文解决方案的基础上,来思考
- python3 读取串口数据 demo最近在写一个demo,zigbee串口连接树莓派,树莓派使用串口通信接受zigbee穿过来得值。其中我
- 我最近在参与Python字节码相关的工作,想与大家分享一些这方面的经验。更准确的说,我正在参与2.6到2.7版本的CPython解释器字节码
- 车牌识别在高速公路中有着广泛的应用,比如我们常见的电子收费(ETC)系统和交通违章车辆的检测,除此之外像小区或地下车库门禁也会用到,基本上凡
- 1) chocolatappChocolat是最新出现的一款强大的Mac系统文本编辑器,兼具原生的Cocoa及强大的文本编辑功能。Choco
- # 从X和Y中取出相应步长对应的数组并保存至x_data和y_data中x_data = []y_data = []for i in ran