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

目录
  • 1. 模板编译
  • 2. 组件渲染和更新

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会重新渲染整个组件。

到此这篇关于Vue组件渲染与更新实现过程浅析的文章就介绍到这了,更多相关Vue组件渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue跨端渲染实现多端无缝衔接

    Vue 内部的组件是以虚拟 dom 形式存在的.下面的代码就是一个很常见的虚拟 Dom,用对象的方式去描述一个项目.相比 dom 标签相比,这种形式可以让整个 Vue 项目脱离浏览器的限制,更方便地实现 Vuejs 的跨端 { tag: 'div', props: { id: 'app' }, chidren: [ { tag: Container, props: { className: 'el-container' }, chidren: [ 'Hello Little Gay!!!' ]

  • 解决vue组件渲染没更新数据问题

    目录 问题: 现象: 原因 解决步骤 问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日期时,B日期数据虽已改变,但是页面数据未改变 例如我要点击留样日期,销毁日期就得默认设置为留样日期之后的三个月,只有第一次点击,效果能正常显示,但是第二次点击,销毁日期就不会更新了… 原因 前端组件没有重新加载,一直保持旧数据 解决步骤 使用标志位让组件每次更改刷新一次 一.前端组件绑定点击事件 二.新增一

  • Vue的异步渲染axios问题

    目录 Vue异步渲染axios Vue axios发起异步请求 真实项目中的使用 总结 Vue异步渲染axios 首先我们要知道axios不是vue里面的. axios是一个基于Promise的,发送http请求的一个工具库,并不是vue中的第三方插件,使用时不能通过“Vue.use()”安装插件,需要在原型上进行绑定. axios异步跟jquery中ajax其实是一样的,功能相同,不过获取到数据以后渲染的难易程度不同让axios更加突出,jquery需要不停的操作dom元素进行渲染,而axio

  • vue中动态渲染数据时使用$refs无效的解决

    目录 vue动态渲染数据时使用$refs获取dom无法获取问题 解决办法 vue中$refs取值是undefined 总结 vue动态渲染数据时使用$refs获取dom无法获取问题 场景:在循环的列表上绑定了 ref, 想当数据动态渲染完了,然后获取列表,接着就是获取不到了 解决办法 在请求数据了以后,方法内后, 加上 this.$nextTick(() => { // 在这里获取 this.$refs.dom }) 列子 messList().then(res => {      conso

  • Vue 组件渲染详情

    目录 前言 全局组件 Vue.extend 组件渲染流程 总结 前言 Vue中组件分为全局组件和局部组件: 全局组件:通过Vue.component(id,definition)方法进行注册,并且可以在任何组件中被访问 局部组件:在组件内的components属性中定义,只能在组件内访问 下面是一个例子: <div id="app"> {{ name }} <my-button></my-button> <aa></aa> &

  • 加速vue组件渲染之性能优化

    背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { data(){ return { tableTitle:[ { label:'省份', prop:'prop' }, { label:'城市', prop:'prop' }, { label:'汇总', prop:'prop', colconfig:[ { label:'下级', prop:'prop'

  • React 组件渲染和更新的实现代码示例

    最近一直写React,慢慢就对里面的一些实现很好奇.最好奇的就是自定义标签的实现和this.setState的实现.这里不分析JSX是如何解析的,所有组件都用ES5方式编写. 组件渲染 渲染时候,我们会调用render方法.类似下面这样: var SayHi = React.createClass({ getInitialState: function() { return {verb: 'say:'}; }, componentWillMount: function() { console.l

  • Vue组件的渲染流程详细讲解

    目录 引言与例子 举一个工作中能用到的例子: 实现 extend 执行流程 1. 注册流程(以Vue.component()祖册为例子): 2. 执行流程 3. 渲染流程 总结 注: 本文目的是通过源码方向来讲component组件的渲染流程 引言与例子 在我们创建Vue实例时,是通过new Vue.this._init(options)方法来进行初始化,然后再执行$mount等,那么在组件渲染时,可不可以让组件使用同一套逻辑去处理呢? 答:当然是可以的,需要使用到Vue.extend方法来实现

  • 详解vue 组件

    Vue的两大核心 1. 数据驱动 - 数据驱动界面显示 2. 模块化 - 复用公共模块,组件实现模块化提供基础 组件基础 组件渲染过程 template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面 Vue组件需要编译,编译过程可能发生在 打包过程 (使用vue文件编写) 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板) 对应的两种方式 r

  • Vue渲染过程浅析

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.但是模板毕竟是模板,不是真实的dom节点.从模板到真实dom节点还需要经过一些步骤 把模板编译为render函数 实例进行挂载, 根据根节点render函数的调用,递归的生成虚拟dom 对比虚拟dom,渲染到真实dom 组件内部data发生变化,组件和子组件引用data作为props重新调用render函数,生成虚拟dom, 返回到步骤3 第一步: 模板到render 在我们使用Vue的组件化进行开发应用的时候, 如果仔细

  • 细说Vue组件的服务器端渲染的过程

    声明:需要读者对 NodeJs.Vue 服务器端渲染有一定的了解 现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React.Vue 等组件技术的发展,更是使这种方式深入人心. 但有一些应用,客户端渲染就会遇到一些问题了: 需要做 SEO(搜索引擎优化),但客户端渲染的 html 中几乎没有可用的信息 需要首屏快速加载,但客户端渲染一般是长时间的加载动画或者白屏 如果能把客户端渲染的组件化技术(React.Vue 等)与传统的后端渲染的

  • 深入浅析vue组件间事件传递

    深入浅析vue组件间事件传递

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的. 我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间的通信,不仅有props,还有一种事件监听,也是可以通过组件间传递的. 但是,在vue2.+中,vue引入了diff算法和虚拟dom来提升效率.我们知道这些事为了处理频繁更新dom元素所提出的一种优化方案,可频繁变动更新以及事件监听的初始化之间是否会有矛盾,当组件需要变动时,有没有对注册过的事件进

  • 详解vue修改elementUI的分页组件视图没更新问题

    今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页. 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处. 然后想了想,想起了.sync这个语法糖,让数据进行双向绑定. 直接上修改的代码看看 <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 30, 50]&

随机推荐