vue.extend、 new vue()、component、render

前言
vue菜鸟一枚，对vue.extend、 new vue()、component、render比较懵逼，理不清关系，用法，查看了一些博文后，这里记录一下自己一点浅显的理解。

1.vue.extend、 new vue()
vue.extend() 是new vue() 的一个子类。用法都一样，都是实例化一个对象，然后是挂载到到dom元素上。

注意：
（1）挂载到dom元素，其次vue.extend（）里面的的HTML模板（template："

hello

"）会覆盖被挂载的那个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: "
{{author}} & {{name}}
",
  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