vue2.0和3.0区别

Posted 2023-05-01

项目目录不同

1、vue-cli3.o移除了config.文件夹。

2、多了vue.config.js文件。

3、新增了一个views文件夹。

4、删除了static新增了public文件夹。

5、index.html移动到public了。

配置项不同

1、vue-cli2.0的域名配置，分为开发环境和生产环境。

2、所以配置域名时，需要在config中的dev.env.js和。

3、prod.env.js中分别配置3.0 config.文件已经被移除。

4、但是多了。env.production和env.development文件。

5、除了文件位置，实际配置起来和2.没什么不同。

创建项目的方式不一样

1、vue-cli2.0，vue init webpack项目名。

2、vue-cli3.0 vue create项目名。

参考技术A

前面的答主回答的太水了，我来总结一下二者的区别:

vue3采用组合式API的函数式编程引入vue的核心api，这是vue3和vue2最大的不同

vue3不再要求组件必须有div根元素

生命周期不同，不再有beforeCreated和created这两个生命周期，而集成到了setup函数里面

核心特性： 响应数据类型以ref和reactive为主

对typescript类型编程风格的支持

打包工具不再局限于webpack,开发阶段可以使用vue自行开发的vite,生产打包可以使用rollup或者webpack.

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

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