Vue渲染过程浅析

来源：动视网责编：小采时间：2020-11-27 22:00:05

Vue渲染过程浅析

Vue渲染过程浅析:Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom 对比虚拟dom，渲染

推荐度：

点击下载本文 文档为doc格式

导读Vue渲染过程浅析:Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom 对比虚拟dom，渲染

当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>

截图如下: