Vue中模板渲染原理

1、概念

模板：本质字符串。
与字符串的区别：

有逻辑（vue中有v-if、v-for）
嵌入js变量（{{变量}}）
需要转化为html，页面才会识别并正确解析。

2、实现过程

过程：模板（字符串）解析成render函数---->render函数执行返回JS的vnode的结构，是如何实现嵌入变量和执行逻辑。转化为html则由updateComponent函数调用patch方法实现。
例子1（只有js变量、无涉及逻辑）：

  <div id="app"><p>{{price}}</p></div>

经过vue模板生成的结果（实现了模板转化为JS的vnode并填充data中的变量）：

// 此处vm为VUE的实例
//在控制台可以打印vm._c创建元素的，vm_v创建文本节点，vm_s是用来转化为字符串的
vm._c('div',{attrs: {'id': 'app'}},[vm._c('p', [vm._v(vm._s(vm.price))])])

用法备注:

vm._c是基于snabbdom中的h(‘节点标签’，{属性、特性、事件}，[子节点]/文本)实现的，是用来创建vnode的。vue中的render函数，实现了传入Vue实例后返回vnode的功能。
vm._v是用来创建文本节点或实现换行的。
vm._s是用来转化字符串的。
render内部实际是使用with（vm），这样在内部就可以直接使用_c、_v、_s和data中的属性

例子2（以todolist为例子，涉及v-for逻辑）：

  <div id="app"><div><input v-model="inputValue" type="text" /><button v-on:click="handleClick">submit</button></div><div><ul><li v-for='item of list'>{{item}}</li></ul></div></div>

v-for逻辑实现是通过v._l（）方法，生成对应的li结构后返回数组，将此数组作为ul节点的子节点。以下是返回的vnode:

with(vm) {_c(// 第一层（根元素）div'div',{attrs:{"id":"app"}},// 包含所有子节点的数组[_c(// 第二层第一个div（包含input、button以及其attrs、绑定事件还有值）'div',[_c('input',{//  v-model数据的双向绑定directives:[{name:"model",rawName:"v-model",value:(inputValue),expression:"inputValue"}],attrs:{"type":"text"},domProps:{"value":(inputValue)},on:{// 监听input内容，数据改变时，让Model层的数据更新"input":function($event){if($event.target.composing)return;inputValue=$event.target.value}}}),_v(" "),_c('button',{// 渲染绑定事件on:{"click":handleClick}},[_v("submit")])]),_v(" "),//创建空文本节点，用于换行_c(// 第二层第二个div(包含ul、li，其中li是通过for循环生成的)'div',[_c(// ul标签'ul',// _l返回的是包含子元素的数组_l((list),function(item){// v-for循环，实际是返回所有创建li标签的数组return _c('li',[_v("\n          "+_s(item)+"\n        ")])}),0)//数字表示list有多少项，要返回多少个li])])}}

3、总结：

个人理解（有误的话，欢迎指正）：
1、 模板解析成render函数---->返回JS模拟的虚拟DOM结构：模板是一段字符串，模板解析生成render函数，执行render函数返回为vnode，vnode表明了各个节点的层级关系、特性、样式、绑定的事件。
2、 vnode---->html：通过 updateComponent函数调用vm._update（）传入vnode，利用基于snabbdom的patch（)方法改造的生成真实DOM节点并渲染页面。
注：vm.__patch__：初次渲染时，调用vm.__patch__(containe, vnode)，生成真实的DOM结构渲染到容器中。re-render时，调用vm.__patch__(vnode, newVnode)利用diff算法对比新旧vnode之间的差异，生成需要更新的真实DOM，渲染到容器的对应位置。

Vue中模板渲染原理相关推荐

前端面试 vue生命周期钩子是如何实现的？理解vue中模板编译原理？
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
[vue] 你知道vue中key的原理吗？说说你对它的理解
[vue] 你知道vue中key的原理吗?说说你对它的理解 key的作用主要是为了高效的更新虚拟DOM; 如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低 ...
Vue中模板template的四种写法
<div id="app"><h1>我是直接写在构造器里的模板1</h1> </div><template id=" ...
[Vue源码] Vue中diff算法原理
一. Vue中diff算法原理理解: 1.先同级比较,在比较子节点 2.先判断一方有儿子一方没儿子的情况 3.比较都有儿子的情况 4.递归比较子节点图: 1.原节点:ABCD,新节点:ABCDE, ...
GO 语言中模板渲染的原理
文章目录 Go Template 简介模板的结构 Template 与 common 的结构模板函数和方法 New() 函数和 init() 方法 New() 方法 Parse() 方法 Pars ...
c# mvvm模式获取当前窗口_对Vue中的MVVM原理解析和实现
首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向 ...
自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...
基于vue通用模板渲染Table
文章目录前言一.需求分析二.实施方案 1.方案解析 2.实例总结前言日常业务中我们偶尔会用到使用通用模板渲染不同样式表格的需求,已避免重复开发的工作量:本文基于此场景谈谈如何解决此类问题 ...

Vue中模板渲染原理

Vue中模板渲染原理

1、概念

2、实现过程

3、总结：

Vue中模板渲染原理相关推荐

最新文章

热门文章