Vue API 之 Vue.extend 的用法

Vue.extend(options) 是 Vue 的全局 API，使用基础 Vue 构造器，创建一个“子类”。一般用于动态渲染的场景，即现用现实例化，注意实例化以后要挂载到指定 dom 元素上。以下是官方给的例子：

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

Vue.extend() 和 new Vue() 有什么区别呢？可以将前者理解为后者的一个子类，用法基本相同。Vue.extend 里的 template 相当于 new Vue() 里的 render() 返回的字符串模板。除了上述写法，也可以以独立文件的形式实现：

<template>
  <div>{{title}}</div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return { 
        title: 'example'
    }
  },
  methods: {
    click() {}
  }
})
</script>