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注册使用

2. new 实例().$mount() 被挂在的元素会被覆盖

3. new vue()挂载到组件， render渲染的组件会覆盖被挂在的dom元素

注意

1. vue.extend()完了需要操作new 实例().$mount() ，才能挂载。

2. 图片中的两种挂载方法

延伸：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');

参考：

• blog.csdn.net/dkr38020598…
• blog.csdn.net/Dear_Mr/art…