全网营销的渠道,seo快速排名代理,九江广安建设网站,网页制作软件免费版dw在2020年9月18日#xff0c;Vue.js发布3.0版本#xff0c;代号#xff1a;One Piece#xff08;海贼王#xff09;
既然vue2已经存在了六七年之久为什么还要研发vue3呢#xff1f;
那就不得不提vue3带来的提升了
1.Vue3带来了什么
1.性能的提升 打包大小减少41% 初次…在2020年9月18日Vue.js发布3.0版本代号One Piece海贼王
既然vue2已经存在了六七年之久为什么还要研发vue3呢
那就不得不提vue3带来的提升了
1.Vue3带来了什么
1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54%
2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking ......
3.拥抱TypeScript Vue3可以更好的支持TypeScript
4.接下来也就是vue3带来的最新技术组合式API但同时在市场上也饱受争议。
Composition API组合API setup配置 ref与reactive watch与watchEffect provide与inject ......
setup语法糖 理解Vue3.0中一个新的配置项值为一个函数。 setup是所有Composition API组合API“ 表演的舞台 ”。 组件中所用到的数据、方法等等均要配置在setup中。 setup函数的两种返回值 若返回一个对象则对象中的属性、方法, 在模板中均可以直接使用。重点关注 若返回一个渲染函数则可以自定义渲染内容。了解 注意点 尽量不要与Vue2.x配置混用 Vue2.x配置data、methos、computed...中可以访问到setup中的属性、方法。 但在setup中不能访问到Vue2.x配置data、methos、computed...。 如果有重名, setup优先。 setup不能是一个async函数因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。后期也可以返回一个Promise实例但需要Suspense和异步组件的配合
ref函数 作用: 定义一个响应式的数据 语法: const xxx ref(initValue) 创建一个包含响应式数据的引用对象reference对象简称ref对象。 JS中操作数据 xxx.value 模板中读取数据: 不需要.value直接div{{xxx}}/div 备注 接收的数据可以是基本类型、也可以是对象类型。 基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
reactive函数 作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数 语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象 reactive定义的响应式数据是“深层次的”。 内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作。
是的没有错vue3放弃了原有的书写格式取而代之的不同API的组合式维护。这样代码更加层次分明。
在Vue 2中我们使用Options API来定义组件即通过一个包含不同选项的对象来描述组件的行为。而在Vue 3中引入了Composition API组合式API它可以让我们更好地组织和复用组件逻辑。
使用组合式API我们可以通过函数形式定义组件的逻辑而不再强制按照选项的方式来分割代码。这意味着可以更容易地组合和复用逻辑提高开发效率。
组合式API的核心概念是使用setup()函数来定义组件的逻辑。在setup()函数中我们可以使用Vue.js提供的一些函数和响应式API来定义数据、计算属性、方法、生命周期钩子等。
但是这并不是说vue3完全弃用了vue2的语法规则你依然可以在vue3里面写vue2的代码但是在这样会让你的代码非常不协调。一边是组合式api一边又是传统的option API代码之间的割裂感会很强。我个人觉得还是vue2里面写vue2的vue3那就用新的组合式api这样是最好的。
5.你以为vue3就这些nonono
相当于新推出的组合式API最让我感兴趣的是最新的vite构建工具。不同于vuecli 它是一个基于ES模块的快速开发工具。
Vue CLI 是构建在 Webpack 之上的因此开发服务器和构建功能和性能都将是 Webpack 的超集。 Vite 概述 与 Vue CLI 类似Vite 也是一个提供基本项目脚手架和开发服务器的构建工具。 然而Vite 并不是基于 Webpack 的它有自己的开发服务器利用浏览器中的原生 ES 模块。 这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。
这不是在开玩笑我有做一个对比就仅仅算项目原生的启动时间vite的项目速度远远快于vuecli的项目这真的是一种飞跃
vue官方也有做出相关评价vite在很多方面的进步在于打破传统大胆采用新技术。并且说到不会再采用webpack老外直接哭死。
下一次继续vue3总结
