在平常，我们使用vue组件的时候，都要先在.vue文件中引入我们要使用的组件。虽然这样能满足大部分日常开发的需求，但这种方法在某些场景下，就有些难以应对。
- 组件的模板是通过调用接口从服务端获取的，需要动态渲染组件；
- 实现类似原生 window.alert() 的提示框组件，它的位置是在 下，而非 ，并且不会通过常规的组件自定义标签的形式使用，而是像 JS 调用函数一样使用。
extend
Vue.extend 的作用，就是基于 Vue 构造器，创建一个“子类”，它的参数跟 new Vue 的基本一样，但 data 要跟组件一样，是个函数，再配合 $mount ，就可以让组件渲染，并且挂载到任意指定的节点上，比如 body。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import Vue from 'vue';
<!-- 创建了一个构造器，这个过程就可以解决异步获取 template 模板的问题 -->
const AlertComponent = Vue.extend({
template: '<div>{{ message }}</div>',
data () {
return {
message: 'Hello, Aresn'
};
},
});
<!-- 调用 $mount 方法对组件进行了手动渲染， -->
const component = new AlertComponent().$mount();
<!-- 挂载节点 -->
document.body.appendChild(component.$el);
<!-- 快捷的挂载方式 -->
new AlertComponent().$mount('#app');
这样就可以满足我们用js方法调用的方式来控制组件，但是在平常的开发中，我们用的vue的runtime编译环境，不支持template模板，而且用字符串来描述组件的模板，也有些不太友好。那么，我们可以试试用new Vue()的方式。
new Vue
new Vue()也可以直接创建 Vue 实例，并且用一个 Render 函数来渲染一个 .vue 文件。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import Vue from 'vue';
import Notification from './notification.vue';
const props = {}; // 这里可以传入一些组件的 props 选项
const Instance = new Vue({
render (h) {
return h(Notification, {
props: props
});
}
});
const component = Instance.$mount();
document.body.appendChild(component.$el);
这样既可以使用 .vue 来写复杂的组件,还可以根据需要传入适当的 props。渲染后，如果想操作 Render 的 Notification 实例，也是很简单的:1
const notification = Instance.$children[0];