Vue.extend初探

无意间看到了有的项目里面用到了vue.extend这个api，然后看了一下文档，实在想不出使用场景，然后经过一番百度，接着看了一波element ui的源码，知道了vue.extend能这么用，接下来就简单讲一下这个api的使用。

用法

Vue.extend(options),可以看到这个api接受一个对象做参数，这个对象是一个包含组件选项的对象，也就是一个组件。

看个栗子

	<div id="app">
		{{message}}
		<div id="mount-point"></div>
	</div>
	<script>
		let VM = new Vue({
			el: '#app',
			data: {
			    message: 'Hello Vue!'
			  }
		})
		var Profile = Vue.extend({
		  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
		  data: function () {
		    return {
		      firstName: 'Walter',
		      lastName: 'White',
		      alias: 'Heisenberg'
		    }
		  }
		})
		// 创建 Profile 实例，调用$mount方法替换掉指定的元素
	
		new Profile().$mount('#mount-point')
		也可以这样写
		new Profile({el: '#mount-point'})
	</script>
	
	$mount为手动挂载,如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态
	new Vue({
			data: {
			    message: 'Hello Vue!'
			  }
		})
	可以使用$mount()手动的挂载一个实例
	new Vue({
			data: {
			    message: 'Hello Vue!'
			  }
		}).$mount('#app)

element ui里面的extend

可以从element ui源码中看出，用extend实现了很多全局的组件，比如loading，alert、message等.把组件通过用Vue.extend包装后，添加到Vue的prototype上，方便使用this.xxx调用。 无意间看到了有的项目里面用到了vue.extend这个api，然后看了一下文档，实在想不出使用场景，然后经过一番百度，接着看了一波element ui的源码，知道了vue.extend能这么用，接下来就简单讲一下这个api的使用。

element ui里面的extend

可以从element ui源码中看出，用extend实现了很多全局的组件，比如loading，alert、message等.把组件通过用Vue.extend包装后，添加到Vue的prototype上，方便使用this.xxx调用。

组件里面通过一个js文件，导入组件，然后在js文件里面通过Vue.extend(componented)把组件挂载到指定元素。

好了，后面在项目中也可以使用这种方法写一些全局组件了....