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