vue2.0和3.0的区别

121 阅读2分钟

vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松;

  • 3.0安装脚手架同时提前安装好一些项开发必备的插件,同时提供了可视化创建脚手架。
  • 益于 vue3.0 的特性,我们现在不比把组件内容全部包裹在某一个 div 下面了,一个 template 里面可以有多个根节点元素,是没有关系的。
  • image.png
  • Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快 100%还有就是快一倍 / 减少一般的内存使用 vue2和vue3的区别

一、常用命令

vue -V 查看本地 vue 版本

二、官方文档

3.0:cli.vuejs.org/zh/

三、创建文件

3.0:vue create 进入工程文件夹,创建项目。

2.0:vue init webpack

四、启动项目

3.0启动npm run serve

2.0启动npm run dev

build没了、config没了、哦对了还有最重要的一点,3.0的安装项目时自动下载node-model。

在根目录下创建一个vue.config.js

vue2和vue3的区别

一、默认进行懒观察(lazy observation)。

在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

二、更精准的变更通知。

比例来说:2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。

三、3.0 新加入了 TypeScript 以及 PWA 的支持

四、部分命令发生了变化:

下载安装 npm install -g vue@cli

删除了vue list

创建项目 vue create

启动项目 npm run serve

五、默认项目目录结构也发生了变化:

移除了配置文件目录,config 和 build 文件夹

移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件