Vue 创建一个组件, vue内部会做什么操作?

Question

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必须是一个函数,返回一个对象?

是因为组件只是创建了一次, 生成一个组件对象? 然后解析的时候重复利用这个对象去生成组件实例?

Answer 1

你可以先看看vue.js 的整个生命周期是怎样的,有哪些结构,然后对照源码解读
可以看看这篇文章
【Vue源码探究一】当我们引入Vue，我们引入了什么？

【Vue源码探究二】从 $mount 讲起，一起探究Vue的渲染机制