// 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 v-cloak>
然后在css中给定义属性选择器
[v-cloak]{ display:none }
vue实例创建完成后会把v-cloak去掉，在没创建实例对象时，该标签内的内容都会被隐藏