vue3.0 与 vue2.0

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

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

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

命令发生变化
下载安装 npm install -g vue@cli 删除了vue list 创建项目 vue create 启动项目 npm run
serve 默认项目目录结构也发生了变化 移除了配置文件目录,config 和 build 文件夹 移除了 static 文件夹,新增
public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类
视图组件 和 公共组件

2.生命周期的调整
在这里插入图片描述

3.vue3.0的属性变化

1,vue3.0将组件的逻辑都写在了函数内部,setup()会取代vue2.x的data()函数,返回一个对象,暴露给模板,而且只在初始化的时候调用一次,因为值可以被跟踪。

2,新的函数api:const count = value(0)
value是一个wrapper,是一个包装对象,会包含数字0,可以用count.value来获取这个值。在函数返回的时候会关心是value
wrapper,一旦返回给模版,就不用关心了。
优点:即使count包含的是基本类型,例如数字和字符串,也可以在函数之间来回传递,当用count.value取值的时候会触发依赖,改值的时候会触发更新。

区别:
1.部分命令发生变化
1.1创建文件时:
3.0:vue create 进入工程文件夹,创建项目。
2.0:vue init webpack

1.2启动项目
3.0启动npm run serve
2.0启动npm run dev

2.默认项目目录结构也发生了变化:
2.0 目录中有config与build
3.0 无以上两个目录,如需更改配置文件,需在最外层自己新建vue.config.js,自动下载node-model。
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

3.配置跨域
2.0 proxy: ‘http://localhost:4000’ // 配置跨域处理,只有一个代理
3.0

proxy: {
	‘/api’: {
		target: ‘’,
		ws: true,
		changeOrigin: true
	},
	‘/foo’: {
		target: ‘<other_url>}
},

4.生成的链接变化
2.0 localhost:8080
3.0 localhost: 8888, 和 线上链接,能够自启动浏览器(open: true)

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

5.默认进行懒观察(lazy observation)。
2.0,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。
3.0,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

参考地址1
参考地址2

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值