Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return {}
}
})
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
运行上面代码, vue内部会做什么操作?
创建完组件后, 是如何去解析这些dom的呢? 为什么data必须是一个函数,返回一个对象?
是因为组件只是创建了一次, 生成一个组件对象? 然后解析的时候重复利用这个对象去生成组件实例?
你可以先看看vue.js 的整个生命周期是怎样的,有哪些结构,然后对照源码解读
可以看看这篇文章
【Vue源码探究一】当我们引入Vue,我们引入了什么?
【Vue源码探究二】从 $mount 讲起,一起探究Vue的渲染机制