组件化

Vue 的组件和实例

Vue是由一个个实例构建而成的，一个组件就是一个Vue的实例，每个组件内部都可以写属性，因此每一个组件都是一个Vue的实例。组件是可复用的 Vue 实例

单文件组件

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

为什么使用 extend

在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一些。但是这样做会有几个缺点： 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？ 所有内容都是在 #app下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert()提示组件要求像调用 JS 函数一样调用它，该怎么办？ 这时候，Vue.extend + vm.$mount 组合就派上用场了。

    var Profile1 = Vue.extend({
    template: '<p>My name is {{Name}}</p>',
    data: function () {
        return {
        Name: 'ElucidatorSky'
        }
      }
    })
    // 输出 Profile1 实例，在控制台输出为VueComponent{}
    console.log(new Profile1());
    // 创建 Profile1 实例，并挂载到一个元素上。
    new Profile1().$mount('#element')

组件最后也会调用this.init 实例一样进入这个流程

每个 *.vue 都会被 vue-loader 编译成一个对象，姑且称为 options， 包含的部分被编译成 render() {} 方法，内容形式如下：

const render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    { attrs: { id: "app" } },
    [_c("home"), _c("div", [_vm._v(_vm._s(_vm.ll))]), _vm._v("\n  lalal\n")],
    1
  )
}

options 会被用于传进 Vue.extend(options) 里生成一个继承 Vue 的子类，比如叫 VueComponent，然后这个 VueComponent 被用来生成 vm。VueComponent 跟 Vue 接受一样的参数，实例化时也跟 Vue 实例化做一样的事情：调用 this._init(options)