VUE.extend深度剖析

1.1vue.extend的概念

使用基础 Vue 构造器，创建一个”子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意-在 vue.extend() 中它必须是函数

// Vue组件扩展示例
var Profile = Vue.extend({
    template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
    data: function () {
        return {
            firstName: "walter",
            lastName: "White",
            alias: "Heisenberg"
        };
    }
});

// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point");
new Vue().$mount();

1.2 分析

• 所有的组件创建时都会调用vue.extend方法进行创建。
• 有了此方法我们可以用于手动挂载组件。
• 后端存储的字符串模板我们可以通过 Vue.extend 方法将其进行渲染，但是需要引入编译时。
   

1.3源码剖析

继承父类的属性方法，生成一个子类，可以进行对元素节点的挂载

所有的组件创建时都会调用vue.extend方法进行创建