Vue渲染过程浅析
vue 推荐在绝大多数情况下使用 template 来创建你的 html。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤
- 把模板编译为render函数
- 实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
- 对比虚拟dom，渲染到真实dom
- 组件内部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')
我们能够看到在我们引入的app这个模块，里面是一个对象，对象里面存在一个方法叫做render。在说render函数之前，我们可以想一想，每一次加载一个组件，然后对模板进行解析，解析完后，生成dom，挂载到页面上。这样会导致效率很低效。而使用vue-cli进行组件化开发，在我们引入组件的后，其实会有一个解析器(vue-loader)对此模板进行了解析，生成了render函数。当然，如果没有通过解析器解析为render函数，也没有关系，在组件第一次挂载的时候，vue会自己进行解析。源码请参考:
这样，能保证组件每次调用的都是render函数，使用render函数生成vnode。
第二步：虚拟节点vnode
我们把vue的实例挂载到#app, 会调用实例里面的render方法，生成虚拟dom。来看看什么是虚拟节点，把例子修改一下。
new vue({
render: h => {
let root = h(app)
console.log('root:', root)
return root
}
}).$mount('#app')
上面生成的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>
我们可以看到，当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>
截图如下:
在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去掉，在没创建实例对象时，该标签内的内容都会被隐藏
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。