Vue渲染过程浅析


Posted in Javascript onMarch 14, 2019

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板,不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤

  1. 把模板编译为render函数
  2. 实例进行挂载, 根据根节点render函数的调用,递归的生成虚拟dom
  3. 对比虚拟dom,渲染到真实dom
  4. 组件内部data发生变化,组件和子组件引用data作为props重新调用render函数,生成虚拟dom, 返回到步骤3

第一步: 模板到render

在我们使用Vue的组件化进行开发应用的时候, 如果仔细的查看我们要引入的组件, 例子如下

// App.vue 
<template>
  <div>
    hello word
  </div>
</template>

<script>

export default {
}

</script>

<style>

</style>

在我们的主入口main.js

import Vue from 'vue'
import App from './App'

console.log(App)

new Vue({
 render: h => h(App)
}).$mount('#app')

Vue渲染过程浅析

我们能够看到在我们引入的App这个模块,里面是一个对象,对象里面存在一个方法叫做render。在说render函数之前,我们可以想一想,每一次加载一个组件,然后对模板进行解析,解析完后,生成Dom,挂载到页面上。这样会导致效率很低效。而使用Vue-cli进行组件化开发,在我们引入组件的后,其实会有一个解析器(vue-loader)对此模板进行了解析,生成了render函数。当然,如果没有通过解析器解析为render函数,也没有关系,在组件第一次挂载的时候,Vue会自己进行解析。源码请参考: https://github.com/vuejs/vue/blob/dev/src/platforms/web/entry-runtime-with-compiler.js

这样,能保证组件每次调用的都是render函数,使用render函数生成VNode。

第二步:虚拟节点VNode

我们把Vue的实例挂载到#app, 会调用实例里面的render方法,生成虚拟DOM。来看看什么是虚拟节点,把例子修改一下。

new Vue({
 render: h => {
  let root = h(App)
  console.log('root:', root)
  return root
 }
}).$mount('#app')

Vue渲染过程浅析

上面生成的VNode就是虚拟节点,虚拟节点里面有一个属性elm, 这个属性指向真实的DOM节点。因为VNode指向了真实的DOM节点,那么虚拟节点经过对比后,生成的DOM节点就可以直接进行替换。

这样有什么好处呢?

一个组件对象,如果内部的data发生变化,触发了render函数,重新生成了VNode节点。那么就可以直接找到所对应的节点,然后直接替换。那么这个过程只会在本组件内发生,不会影响其他的组件。于是组件与组件是隔离的。
例子如下:

// main.js
const root = new Vue({
 data: {
  state: true
 },
 mounted() {
  setTimeout(() => {
   console.log(this)
   this.state = false
  }, 1000)
 },
 render: function(h) {
  const { state } = this // state 变化重新触发render
  let root = h(App)
  console.log('root:', root)
  return root
 }
}).$mount('#app')
// App.vue
<script>
export default {
 render: (h) => {
  let app = h('h1', ['hello world'])
  console.log('app:', app)
  return app
 }
}
</script>

Vue渲染过程浅析

我们可以看到,当main.js中重新触发render函数的时候,render方法里面有引用App.vue这个子组件。但是并没有触发App.vue组件的的render函数。

在一个组件内,什么情况会触发render?

如何才能触发组件的render

数据劫持是Vue的一大特色,原理官方已经讲的很多了深入响应式原理。在我们给组件的data的属性进行的赋值的时候(set),此属性如果在组件内部初次渲染过程被引用(data的属性被访问,也就是数据劫持的get), 包括生命周期方法或者render方法。于是会触发组件的update(beforeUpdate -> render -> updated)。

注: 为了防止data被多次set从而触发多次update, Vue把update存放到异步队列中。这样就能保证多次data的set只会触发一次update。

当props会触发组件的重新渲染是怎么发生的呢?

把父组件的data通过props传递给子组件的时候,子组件在初次渲染的时候生命周期或者render方法,有调用data相关的props的属性, 这样子组件也被添加到父组件的data的相关属性依赖中,这样父组件的data在set的时候,就相当于触发自身和子组件的update。

例子如下:

// main.vue
import Vue from 'vue'
import App from './App'

const root = new Vue({
 data: {
  state: false
 },
 mounted() {
  setTimeout(() => {
   this.state = true
  }, 1000)
 },
 render: function(h) {
  const { state } = this // state 变化重新触发render
  let root = h(App, { props: { status: state } })
  console.log('root:', root)
  return root
 }
}).$mount('#app')

window.root = root
// App.vue
<script>
export default {
 props: {
  status: Boolean
 },
 render: function (h){
  const { status } = this
  let app = h('h1', ['hello world'])
  console.log('app:', app)
  return app
 }
}
</script>

截图如下:

Vue渲染过程浅析

main.js中 state 状态发生了变化,由false => true, 触发了自身与子组件的render方法。

补充

上面的内容是本人的一些使用心得,由于水平有限, 内容有些错误或者表达不当。多欢迎大神来指导!!!

PS:vue渲染过程的{{xxx}}显示的解决办法

这是由于浏览器的渲染机制导致的,浏览器是从头到尾  如果你的js引用在底部,那么浏览器会先加载dom此时,你用于渲染的{{}}识别符,因为还没读到该识别符对应的js文件,所以会被解析为字符串而显示在页面中,我们可以用过自定义属性v-cloak解决,

实例对象对应标签中加入 v-cloak:

<div id="wrap" v-cloak>

然后在css中给定义属性选择器 

[v-cloak]{


display:none

}

vue实例创建完成后会把v-cloak去掉,在没创建实例对象时,该标签内的内容都会被隐藏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 #Javascript
详解使用React制作一个模态框
Mar 14 #Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 #Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 #Javascript
详解jQuery-each()方法
Mar 13 #jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 #Javascript
react同构实践之实现自己的同构模板
Mar 13 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python抓取网页中链接的静态图片
2018/01/29 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
jupyter 添加不同内核的操作
2021/02/06 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
文明礼仪倡议书
2015/04/28 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android