一些关于Vue3的更改和调整-CSDN博客

本文链接：https://blog.csdn.net/qq_41107410/article/details/106132744

Vue3带来了重大更新，包括Composition API的引入，使得代码组织更为清晰。Vue Router、Vuex和directive的使用方式有所调整，而Tree-Shaking功能则有助于优化项目性能。Vue3与Vue2完全兼容，提供了平滑的过渡路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3中的变化

距离 Vue3.0 Bate 版 正式发布已经1个月了。

不过不需要担心学不动的问题，因为现在 vue3 是完全兼容 vue2 的，你可以在 Vue3 中继续使用 Vue2 ,甚至可以两者一起使用。还有很重要的一点，Vue2 还会再更新一个版本，让大家能完美过渡到 Vue3。

如果有兴趣的可以去哔哩哔哩搜一下尤大那天的直播，下面我总结一下这几天我的理解和遇到的问题。有不对的地方和新的差异可以在下面评论交流，谢谢。

Composition API

vue3 对用户来说最大的改变应该就是 Composition API 。

文档地址 (昨天更新了中文文档)

在 Vue2 中我们的 OptionAPI 的写法：

data () {
   
    return {
   
      ...
    }
  },
  methods: {
   
 	...
  },
  mounted () {
   
   ...
  },
   ...
   ...

这种写法的好处就是把程序的功能类型整合到了一起，你是什么类型就去哪个队伍中。但是随着 Vue 项目越来越大，维护起来就也越发麻烦，我们修改一个方法，需要在 data , methods , computed , watch 以及各个生命周期中反复跳跃，然后就出现了这种情况——明明只换了一块砖，我房子怎么塌了。

因此，Vue3 中进行了修改，大概就是下面这个样子。

setup() {
   
 	...   
    return {
    ... };
}

这…56个民族56朵花，56个兄弟姐妹是一家？是的，data , methods , computed ... 等等，我不管你是谁，是用来干嘛的，全给你写一起。啧啧啧，听起来就很粗暴的样子，那实际效果的话，直接上图吧。

在这里插入图片描述

相同的颜色块代表同一个功能，这样可以看到，在更新之后，一块区域就是一个功能，只要开发者不是一个喜欢挑战极限的多人运动员的话，维护起来真的不要太舒服。

下面介绍一下其中的调整：

生命周期调整

Options API	Composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured