ts项目实例_Vue3.0 项目实战，功能实现上与 2.x 有哪些不同？

最近尝试着用 Vue 3.0 版本整一个小项目，尝尝鲜。以往用的组件库是 View-Design，但现阶段暂时不支持 Vue 3.0，没办法，慢了一步的 View-Design，而自己又不想开发组件，那就只能转投 Ant-Design 怀抱了。

这篇文章并不会对 虚拟DOM的重构，或者诸如由 Object.defineProperty() 实现响应式对象的方式改为基于 Proxy 实现响应式对象的方式转变等内容进行讲述(这些内容可以去查看 Vue 3.0 的源码，后续我再整理发文章)，本篇主要记录此次开发中 Vue 3.0 相比 2.x 版本，在功能实现上有何不同，有哪些新特性，写法又有什么差异等。

Vue 3.0

Composition API

在 Vue 2.x 版本中，组件的实现逻辑，主要通过 created / mounted / beforeCreate 等配置项来完成，即所谓的配置式 API(Options API)，而 Vue 3.0 版本中引入了一个核心特性，就是 Composition API，即组合式 API。setup 函数作为一个新的组件选项，是 Composition API 的入口，该函数选项会在 beforeCreate 钩子之前就被调用。在 Vue 2.x 版本中若想用 Composition API，可安装 @vue/composition-api 使用。

Vue 2.x Options API

Vue 3.0 Composition API

加载组件

以往在 2.x 版本的开发中，加载组件常采用创建一个独立的 modules.js / modules.ts 文件来规范加载所需要的组件。即全局引入 Vue，再通过 Vue.component() 等形式调用全局 API 即可。但在 3.0 版本中，这些方式也将发生一些变化，主要在于初始化实例时，2.x 版本引入全局 Vue，通过 new 的方式创建，而 3.0 版本中只是引入了部分需要的 API 来创建实例，在独立的组件加载文件中，没有了全局 Vue 纽带，两者之间的实例是不一致的，也会导致无法加载的问题。另外在 2.x 版本中通过 Vue.prototype.xxx 形式绑定的全局变量或者方法，在 3.0 版本中也无效，3.0 版本主要通过 app.xxx() 的形式来调用全局 API，而原本 Vue.prototype 的形式可通过 app.config.globalProperties.xxx = () => {} 的方式来替代。

Vue 2.x 加载组件的独立文件

Vue 3.0 加载组件形式

Computed

2.x 版本中，computed 计算属性作为独立的配置项进行配置，而在 3.0 版本中则采用 import 的方式引入相应的 API 来实现，且支持手动修改。

Vue 2.x Computed 计算属性

Vue 3.0 Computed 计算属性，且支持手动修改

Watch

3.0 版本中的 watch 监听器的作用与 2.x 版本的是完全一致的，但是写法上有所区别。

Vue 2.x Watch 侦听器

Vue 3.0 Watch API

在 2.x 版本中，template 的内容必须有一个最外层的元素包裹着，但在 3.0 版本中就相对简单了，直接取消了必须包含在一个元素下的限制。

Vue 2.x template 内容必须在一个元素内包裹着

Vue 3.0 直接取消了该限制

生命周期

最后再说一下生命周期，生命周期的钩子函数名称变动不大，在 2.x 版本中原有的钩子名称中加上 on 前缀(注意驼峰式命名)，即 beforeMount 变为 onBeforeMount ... 另外不再有 beforeCreate 与 Created 钩子，其实也不能算没有了，就是改为 setup 函数了。Destroy 改为 Unmount 了，即 beforeDestroy 变为 onBeforeUnmount ... 这些生命周期的钩子注册函数只能在 setup 内使用，否则会抛出错误。

总结

自己的小项目才刚刚开始搞，用到的新特性不是很多，暂时就行记录这么多。现在只是简单熟悉下 Vue 3.0 版本与 2.x 版本之间功能实现 / 写法等方面的差异，出现的新特性，新功能等等，准备尝尝鲜，鼓捣下。(顺带一提：Vite 也简单的使用了一下，非常顺滑)。