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的渲染机制