Vue渲染过程浅析

当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去掉，在没创建实例对象时，该标签内的内容都会被隐藏