VUE2升级Vue3总结1

weAllThinking

已于 2024-03-21 10:49:47 修改

阅读量415

点赞数 8

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2024-03-08 17:56:09 首次发布

本文链接：https://blog.csdn.net/qq_42259940/article/details/136568420

版权

本文总结了Vue2升级到Vue3的主要变化，包括更强的性能、Composition API、setup函数、TypeScript支持的提升。重点讨论了composition API如何解决逻辑复用问题，mixin的替代方案，以及v-deep、Vue.prototype、slot、.sync、事件处理、自定义指令等的调整。还提到了Vue3中不再支持的一些特性，如.set、.delete、children等，并介绍了新的响应式API，如reactive、toRefs、ref、toRaw等。

摘要由CSDN通过智能技术生成

为什么选择vue3

更强的性能，更好的 tree shaking
Composition API + setup
更好地支持 TypeScript
其composition API很好的解决了逻辑复用的问题，同时解决mixin的短板。

v-deep 替换deep()
Vue.prototype替换为app.config.globalProperties
slot 调整为 v-slot(简写 #slotName)
.sync 替换为 v-model:value
删除 on，on，on，off 和 $once 实例方法，vue3.x不再支持
删除 set()set() set()delete() 方法，vue3.x不再支持
删除 .native使用，vue会自动添加到根元素，vue3.x不再支持
删除children，vue3.x不再支持。如果访问子组件实例，建议使用refs。
自定义指令调整移除之前的bind、inserted、update等，新增或者替换生命周期如created、beforeMount、updated等
指令：
bind—beforeMounted
inserted----mounted
update、componentUpdate------beforeUpdate、updated
unbind------bforeUnMount、unmounted

不同点：
Vue.config.productionTip作用是是否产生集成环境的各种提示，设置为ture表示生产环境，不再产生提示，减少体积和提示带来的开销。app.config.productionTip = true

/deep/ >>>deep -&g