构造器-extend&手动挂载$mount

1、写.vue文件进行页面渲染的特点

  1. 所有的内容，都是在 #app 节点内渲染的；
  2. 组件的模板，是事先定义好的；
  3. 由于组件的特性，注册的组件只能在当前位置渲染。

一些特殊的场景无法满足：

  1. 组件的模板是通过调用接口从服务端获取的，需要动态渲染组件；

(组件是异步的，甚至预先不知道模板是啥）

  1. 实现类似原生 window.alert() 的提示框组件，它的位置是在 <body> 下，而非 <div id="app">，并且不会通过常规的组件自定义标签的形式使用，而是像 JS 调用函数一样使用。

使用extend创建动态模板：

  1. import Vue from 'vue';
  2. # extend：基于vue创建子类，data和组件一样 需要是函数
  3. # 以此创建构造器，可以解决异步获取模板的问题
  4. const AlertComponent = Vue.extend({
  5.   template: '<div>{{ message }}</div>',
  6.   data () {
  7.     return {
  8.       message: 'Hello, Aresn'
  9.     };
  10.   },
  11. });
  13. # 使用$mount手动渲染 data 注入到 模板里
  14. const component = new AlertComponent().$mount();
  16. # 挂载在真实dom上
  17. document.body.appendChild(component.$el);
  18. 简写：
  19. new AlertComponent().$mount('#app');
  20. new AlertComponent({ el: '#app' });

使用render函数：

  1. import Vue from 'vue';
  2. import Notification from './notification.vue';
  4. const props = {};  // 这里可以传入一些组件的 props 选项
  6. # 创建实例
  7. const Instance = new Vue({
  8.   render (h) {
  9.     return h(Notification, {
  10.       props: props
  11.     });
  12.   }
  13. });
  15. const component = Instance.$mount();
  16. document.body.appendChild(component.$el);
  18. # 操作 Render 的 Notification 实例
  19. 因为 Instance 下只 Render 了 Notification 一个子组件，所以可以用 $children[0] 访问到。
  20. const notification = Instance.$children[0];

当然手动$mount渲染组件，就手动销毁

手动挂载模板的好处就是