想必Vue3.0发布了这个事情，大家也都知道了。
我也是从朋友圈的转发中得知这件事的。博客平台、微信官方账号和我的朋友圈基本上都有这样一条消息，可见Vue3.0是多么令人期待，因为React 16发布的时候，我并没有看到大家对它如此渴望。让我有点震惊的是，Vue有130万用户，真的有点惊人。
Vue 3.0来了，我们该怎么办？
学习，赶紧学习，动不了就学！假装我不知道。我是一只快乐的鸵鸟。不知道Vue更新了。继续钓鱼。去争取下半年的KPI吧！升级和重组手头的Vue项目。Vue3.0有什么更新？
我总结一下，只有两个重要的更新。
一个是Composition API，一个是全面支持Typescript。
团队还会发布一个Vue 2.7的版本，给2.x用户一些关于3.0版本中删除的方法的警告，帮助用户顺利升级。Nuxt3好像还在路上，不过目前市面上的各大组件库好像还没来得及修改升级Vue3.0。
外围插件如Vue-Router、Vuex、VSCode插件Vetur等。一切都有条不紊。
Vue3.0具体更新了什么？
下面是一个代码片段，介绍Vue3.0有哪些新的变化。Vue2.x对应一些Vue3.0的写法。
应用的配置项目。
Config是一个包含Vue应用程序全局配置的对象。在安装应用程序之前，您可以修改下面列出的属性。
工具类型:boolean默认值:true使用方法:app.config.devtools = true
是否开启vue-devtools工具的检测，在开发环境默认为真，在生产环境默认为假。
ErrorHandler类型:函数默认值:undefined使用方法:app . config . error handler = = > {//info是Vue在某个生命周期出现错误的信息}
为组件渲染函数和观察程序中未捕获的错误分配处理程序。
global properties type:[key:string]:任意默认值:undefined如何使用:app . config . global properties . name = ' thirteen ' app . component { console . log/' thirteen ' } })
如果组件中还有name属性，则组件中的属性权限更高。
还有一个重要的知识点。在Vue2.x中，我们将全局属性或方法定义如下:
Vue.prototype.$md5 = => {}
在Vue3.0中，我们可以这样定义它:
const app = vue . create appapp . config . global properties . $ MD5 = = > { }
Performance Type: boolean默认值:false用法:app.config.performance = true
将其设置为true以在浏览器devtool性能/时间线面板中启用组件初始化、编译、渲染和补丁性能跟踪。仅适用于开发模式和支持Performance.mark API的浏览器。
应用程序API
全局变化的动作都在createApp创建的应用实例中，如下图:
从“vue”const app = create app导入{ createApp }
然后应用程序下的这些属性:
Component:第一个参数字符串表示组件名称，第二个参数函数或对象返回值:只传递一个参数，返回组件。通过第二个参数，它返回应用程序实例如何使用:import { create app } from ' vue ' constapp = create app//register a options object app . component//检索已注册的组件const hisan component = app . component。
Configdirective自定义指令变化不大，还是以前的那些，如下:app.directive {}、// mounted {}、//更新前{}、//更新后{}、//卸载前{}、//卸载后{})
全局API大部分没变，大多用的是老的2.x编写方式。
组合API
组合API解决什么问题？使用传统的Vue2.x配置方式编写组件时，代码量会随着业务的日益复杂而增加。因为相关业务的代码需要根据option的配置写到特定的区域，后续的维护非常复杂，代码的复用性不高。你会经常发现一个页面组件，写了三四百行。
有没有似曾相识的感觉？没错，这就是老模式的弊端。憋了这么久，一个都不剩~ ~而作文API解决了这个头疼的问题。它为我们提供了如下几个功能:
reactivewatcheffectcutedreftorefhooksreactive
从“vue”导入{ reactive，computed }导出默认{ setup { const state = reactive function increment { state . a++ } return { state，increment } }}
Reactive相当于Vue 2.x的Vue.observable API，reactive处理的函数可以变成响应式数据，类似于之前写模板页面时定义的data属性的值。
手表效果
从' vue '导入{ reactive，computed，watchEffect }导出默认{ setup { Const state = reactive Const double = computed = > state . a * 3)函数增量{ state . count++ } Const wa = watch effect = > {//哪个ref/reactive对象。值，哪个控制台。日志被监控})//可以通过wa.stop停止监控返回{state，increment} }}
WatchEffect叫副作用。它立即执行一个传入的函数，相应地跟踪它的依赖性，并在其依赖性改变时重新运行该函数。
计算
从' vue '导入{ reactive，computed }导出默认{ setup { const state = reactive const double = computed = > state . a * 3)函数增量{ state.a++ }返回{ double，state，increment } }}
这样更直观。Vue2.x中存在computed，但现在使用的形式已经改变。需要计算的属性通过上面的表单返回。
和参考文献
ToRefs提供了一种将reactive的值作为ref对待的方法，即将responsive对象作为普通对象对待。
钩住
对应于2.x版本的生命周期挂钩
Vue3.0在组合API中增加了两个额外的钩子，即onRenderTracked和onRenderTriggered。两个钩子函数都接收一个DebuggerEvent:
export default { onrendertriggered { debugger//检查哪个依赖项导致组件被重新呈现}。}
Vue 3来了。我们要做什么？
前面也开玩笑说了三件事，要么装不知道，要么学的快，已经学过Vue 3的朋友可以在自己的项目中使用，进行优化升级。这样年终总结就可以加上最重要的一条:带领团队成员完成项目的重构，包括逻辑重构+语法升级，全面适应Vue 3！包装效率提高xx倍！页面响应速度提高了xx！
不仅如此，对于学生党或者还在找工作的人来说，在准备面试的时候可能需要准备更多的内容。走吧。
最后，我想了想我能做什么。一开始装鸵鸟不行，后来不学习也不行，因为我上半年写了一个Vue的商城项目，开放到GitHub网站。页面效果如下:
Newbee-mall在GitHub和国内代码云中创建了代码库。如果有人访问GitHub比较慢，建议在Gitee上查看项目，两个库会及时跟上更新。
GitHub中的new bee-mall:https://GitHub . com/new bee-ltd/newbee-mall-vue-appnew bee-mall在Gitee中:file/tupian/20220910/ new bee-mall-vue-app从预告中可以看到，new bee-mall-vue-app并不是一个基础的demo，而是一个功能比较齐全的Vue.js商城的实用系统。自从开源以来，有很多朋友来找我，问我要不要适应Vue3，修改项目的源代码。
在这里你可以放心，我一直回答我会升级到Vue3，代码还是全部开源的。希望大家都能点一颗星。你越热情，我就越有动力把项目重构到Vue3版本！所以，我个人一直在等待vue . js 3.0版本的正式发布。之后我会抽时间在Vue3再写一遍这个VUE.js实战商城项目。你可以为新的蜜蜂购物中心项目订购一颗星星。明星越多，我就越有精力更新。哈哈哈哈哈。
这样大家都有Vue3的实战经验了！
除转载/出处外，均为作者原创作品。欢迎转载，但未经作者同意必须保留此声明，并在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。
作者:我十三岁。
原文链接:file/tupian/20220910/p
