vue3.0和vue2.0的区别有哪些
创始人
2024-11-22 07:22:27
0次

区别:vue2.0中不管数据多大,都会在一开始就为其创建观察者;当数据很大时,这可能会在页面载入时造成明显的性能压力。而vue3.0只会对“被用于渲染初始可见部分的数据”创建观察者,而且vue3.0的观察者更高效。

vue3.0和2.0的区别

Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观

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

更快
  1、virtual DOM 完全重写,mounting & patching 提速 100%;
  2、更多编译时 (compile-time)提醒以减少 runtime 开销;
  3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能;
  4、放弃 Object.defineProperty ,使用更快的原生 Proxy;
  5、组件实例初始化速度提高 100%;
  6、提速一倍/内存使用降低一半;

更小
  1、Tree-shaking 更友好;
  2、新的 core runtime:~ 10kb gzipped;

===============

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 文件夹,用于分类 视图组件 和 公共组件

安装

npm install -g vue@cli

创建项目文件:

vue create project //项目的名称

====================

vue2和vue3的区别

一、常用命令

vue -V 查看本地 vue 版本

二、官方文档

3.0:https://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

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
 // outputDir: 'dist',
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: 'localhost',
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 proxy: {
 '/api': {
 target: '',
 ws: true,
 changeOrigin: true
 },
 '/foo': {
 target: ''
 }
 }, // 配置多个代理
 }
 }

==================

Vue3.0和Vue2.0的区别

一、默认进行懒观察(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 文件夹,用于分类 视图组件 和 公共组件

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...