前言
vue菜鸟一枚，对vue.extend、 new vue()、component、render比较懵逼，理不清关系，用法，查看了一些博文后，这里记录一下自己一点浅显的理解。
1.vue.extend、 new vue()
vue.extend() 是new vue() 的一个子类。用法都一样，都是实例化一个对象，然后是挂载到到dom元素上。
注意：
（1）挂载到dom元素，其次vue.extend（）里面的的HTML模板（template："<p>hello</p>"）会覆盖被挂载的那个dom元素。new vue()里面的render的模板也会覆盖被挂载的那个dom元素。
（2）vue.extend（）中的data是一个函数且返回一个对象。
data:function(){
return { }
}
2.vue.component全局注册和局部注册components
通过component注册组件不会覆盖原有的dom元素，直接把标签放到相应元素内就可使用。
下面进行实例对比
1.component注册使用
1.png
2.png
2.new 实例().$mount() 被挂在的元素会被覆盖
5.png
6.png
3.new vue()挂载到组件， render渲染的组件会覆盖被挂在的dom元素
7.png
8.png
注意
1.vue.extend()完了需要操作new 实例().$mount() ，才能挂载。
2.图片中的两种挂载方法
4.png
延伸：vue.extend（）的传参propsData
var author = Vue.extend({
template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
},
props : ['name']
});
new author({propsData: {name : 'dear_mr'}}).$mount('#author');
参考：
https://blog.csdn.net/dkr380205984/article/details/80116024
https://blog.csdn.net/Dear_Mr/article/details/72627214
