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 动态将数字金额转化为中文大写金额
May 14 Javascript
js表格分页实现代码
Sep 18 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
PHP Array交叉表实现代码
2010/08/05 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vuex 的简单使用
2018/03/22 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python unittest单元测试框架总结
2018/09/08 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python实现QQ批量登录功能
2019/06/19 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
深入了解Python enumerate和zip
2020/07/16 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
十八大宣传标语
2014/10/09 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
家长高考寄语
2015/02/27 职场文书
Python WSGI 规范简介
2021/04/11 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript