vuejs are functions. What is the order in which they are executed?
for example, the following code:
new Vue({
el: "-sharpapp",
data: {
content:"main"
},
computed:{
viewComponent(){
console.log("viewComponent")
return {
template:`<div>${this.content=="main"?"":"404"}
<br><br>
<button data-content="main" v-on:click="handleClick"></button>
<button data-content="404" v-on:click="handleClick">404</button>
</div>`,
methods:{
handleClick(event){
let {target:{dataset:{content}}}=event;
this.$root.content=content;
}
}
}
}
},
render(h) {
console.log("render")
return h(this.viewComponent)
},
methods:{
}
})what I understand is that h (this.viewComponent) in the render function is dependent on viewComponent. You can only know what the final rendered template looks like until you let viewComponent run and return the latest result. If the render function runs first and viewComponent has not responded to the update, then the rendering result is wrong. So my expected result is:
viewComponent
renderbut the code I tested, the result is:
render function runs before viewComponent. That"s strange. Why?
did an online test demo, as follows:
https://codepen.io/quiettroja.