刚开始学习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的区别