new Vue/Vue.Component/Vue.extend的区别

Posted 2020-09-19 刘心悠儿

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