标签：one class 输出 定义 tail 构造参数 不同 div str
刚开始学习Vue时，当我们看到创建Vue实例和创建一个组件时，会发现Vue实例的参数和组件参数是那么的相似；当我们学习路由时， 又发现Vue.extend创建的对象和自定义的组件非常的相似，那么这三者究竟是什么关系呢，对于3个对象了解清楚对后续精准编程很有意义， 因此，我们需要好好的了解一下他们的区别和使用场景
Vue.extend和Vue.component区别比较
运行示例
var PageNotFind = Vue.component("pagenotfind",{template:‘<div> 404 page</div>‘});
var Home = Vue.extend({template:‘<div> 系统首页</div>‘});
console.log(PageNotFind);//输出Vue内部的函数 ‘VueComponent‘
console.log(Home);//输出Vue内部的函数 ‘VueComponent‘
//由上可见，component和extend返回的结果是一模一样的
var vm = new Vue({
el:"#app",
render:function(createElement){
var vnode1 = createElement(Home); //成功得到vnode对象
var vnode2 = createElement(PageNotFind);//成功得到vnode对象
var vnode3 = createElement(‘pagenotfind‘);//成功得到vnode对象
/** 通过createElement测试得知，
** 1.extend和component返回的对象均可以被用来创建vnode，
** 2.使用component定义的组件名称也可以使用CreateElement创建vnode对象
**/
return createElement(Home);
}
});
});
结论:通过上面的测试我们可以得知，extend和component作用基本相同，区别仅在于当我们不需要组件名称时，使用extend更简便些； 而当我们需要使用新的标签时，那么请使用component去创建组件
Vue.component和new Vue的比较
运行示例
var PageNotFind = Vue.component("pagenotfind",{template:‘<div> 404 page</div>‘});
var vm = new Vue({
el:"#app",
render:function(createElement){
return createElement(PageNotFind);
}
});
console.log(PageNotFind);//输出Vue内部的函数 ‘VueComponent‘
console.log(Home);//输出Vue$3的实例 ‘Vue$3‘
//由上可见，component和new Vue()返回的实例对应的是Vue内部不同的类
});
结论:通过上面的测试我们可以得知，new Vue()和component对应的是不同的内部对象，只是构造参数相似而已； 当我们需要定义一个模块实例时，使用new Vue(),他会把实例和容器绑定起来。 当我们需要定义的对象不需要外层容器时，此时我们可以考虑使用组件的形式进行封装。
new Vue/Vue.Component/Vue.extend的区别
new Vue/Vue.Component/Vue.extend的区别
标签：one class 输出 定义 tail 构造参数 不同 div str
原文地址：http://www.cnblogs.com/lxye/p/vue_component_extend.html
