Vue创建组件实例的几种方式 - Vue.extend()、VueComponent()、new Vue()...

Vue有几种创建组件实例的方式，还有几种挂在组件的方式。因为刚刚开始学习Vue,很容易混淆，所以这里对Vue.extend()、VueComponent()、new Vue()、new xxx()、{}、$mount()、$el、template和render、createElement()做一个总结。

• vue构造、vue组件和vue实例 是不同的概念。
• 首先在了解上述的方法前，要先了解这几个概念。

1. vue构造
   vue构造相当于一个对象，不能成为一个Vue组件，其中可以通过Vue.extend()来构造，也可以直接通过对象来构造。其中Vue。extend()在Vue官网上有解释。Vue.extend()

   Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

   // 创建构造器
   var Profile = Vue.extend({
     template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
     data: function () {
       return {
         firstName: 'Walter',
         lastName: 'White',
         alias: 'Heisenberg'
       }
     }
   })
   

   这样，就是一个Vue的构造器。其中也可以不实用这个方法，而直接定义对象。

   {
   	  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
   	  data: function () {
   	    return {
   	      firstName: 'Walter',
   	      lastName: 'White',
   	      alias: 'Heisenberg'
   	    }
   	  }
   }
   

   但是这两种方法构造的变量都不是一个Vue组件，想要创建一个Vue组件，需要使用刚刚的构造器来注册，使之成为一个组件。

2. vue组件
   Vue组件分为全局组件和局部组件。

   其中全局组件使用Vue.component(‘组件名’，Vue构造器)的方式来创建。
   Vue构造器可以为以上两种方式。

   // 构造器1
   Vue.component("icom",Vue.extend({
   		template:"<h1>这是组件的内容</h1>"
   }))
   
   // 构造器2
   Vue.component("icom",{
   		template:"<h1>这是组件的内容</h1>"
   })
   

   而局部组件，就是在组件实例的内部使用components：构造器 | 组件 来创建。
   可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件。

   // 作用到vue实例
   new Vue({
     el: '#app',
     components: {
       'component-a': ComponentA,
       'component-b': ComponentB
     }
   })
   
   // 作用到某个组件中
   var ComponentA = { /* ... */ }
   var ComponentB = {
     components: {
       'component-a': ComponentA
     },
     // ...
   }
   

   其中的new Vue()就是创建组件实例的一种方式，说完了Vue组件，接下来就说说组件实例。

3. vue实例
   当要在页面展示时，需要用到组件实例，需要将要展示的组件实例和容器绑定起来。
   创建组件实例有两个方法：1. 通过new Vue()； 2.通过new 构造器()。
   挂载到容器上也有两个方法：1. 通过$el；2. 通过$mount

   1. 通过new Vue()

   // $el挂载在#app上
   new Vue({
     el: '#app',
     data: obj
   })
   
   // $mount挂载在app上
   const app = new Vue({
     data: obj
   })
   app.$mount('#app');
   
   // 这样app就可以使用Vue的全局注册的组件，以及组件实例的components中的组件。
   new Vue({
     el: '#app',
     components: {
       'component-a': ComponentA,
       'component-b': ComponentB
     }
   })
   

   2. 通过new 构造器()
      之前在讲构造器的地方说了有两个方法可以创建构造器，而构造器其实就是一个对象（类），可以通过new来直接创建实例。

   var Comp = Vue.extend({
     props: ['msg'],
     template: '<div>{{ msg }}</div>'
   })
   
   // el挂载，如果构造器有需要的props，则在new中通过propsData传入
   var vm = new Comp({
     el:'#app',
     propsData: {
       msg: 'hello'
     }
   })
   
   // $mount挂载
   new Comp().$mount('#app');
   

最后想说，组件的渲染方式也有两种，普通的就是通过字符串模板，即HTML，在通过component。
还可以通过渲染函数——render。

// 加载主页面
// new Vue
function initApp(){
	const app = new Vue({
		router,
		store,
		render : (h:CreateElement): Vnode => h(App);
	})
	app.$mount('#app');
}

//Vue.component
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
}

render中的参数是createElement 。createElement 参数
它到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

他的参数可以使标签名或者构造器或者Vue组件。详情可以在上面链接中看到。