Embarking on my Vue journey, I've been immersing myself in online videos to grasp the essence of this framework. One intriguing observation that has piqued my curiosity is the difference in behavior when I switch from a template to a render function inside the Counter object.
I'm left wondering - why exactly does this alteration have such an impact?
-----Excerpt from HTML----
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<button @click="inc">increment</button>
</div>
------Within the Script Tag------
const state = new Vue({
data: {
count: 0
},
methods: {
inc() {
this.count++;
}
}
});
const Counter = {
template: `<div>{{state.count}}</div>`
}
new Vue({
el: '#app',
components: {
Counter
},
methods: {
inc() {
state.inc();
}
}
})
Making a slight adjustment by transitioning the template inside Counter to the following code snippet yields successful results:
render: h => h('div', state.count)