记一次 Vue2 迁移 Vue3 的实践总结

文章来源于@Elab团队，

vue2项目升级为vue3项目 vue项目怎么升级依赖版本

一、Vue3

Vue3中文文档[1]

2.x 全局 API3.x 实例 API (app) Vue.configapp.config Vue.config.productionTip无 Vue.config.ignoredElementsapp.config.isCustomElement Vue.directiveapp.directive Vue.mixinapp.mixin Vue.useapp.use Vue.prototypeapp.config.globalProperties

引入此配置选项的目的是支持原生自定义元素，因此重命名可以更好地传达它的功能，新选项还需要一个比旧的 string/RegExp 方法提供更多灵活性的函数：

在Vue 2中，Vue.prototype通常用于添加可在所有组件中访问的属性。

Vue 3中的等效项是config.globalProperties。在实例化应用程序内的组件时，将复制这些属性

2.0生命周期3.0生命周期 beforeCreate(组件创建之前)setup() created(组件创建完成)setup() beforeMount(组件挂载之前)onBeforeMount(组件挂载之前) mounted(组件挂载完成)onMounted(组件挂载完成) beforeUpdate(数据更新，虚拟DOM打补丁之前)onBeforeUpdate(数据更新，虚拟DOM打补丁之前) updated(数据更新，虚拟DOM渲染完成)onUpdated(数据更新，虚拟DOM渲染完成) beforeDestroy(组件销毁之前)onBeforeUnmount(组件销毁之前) destroyed(组件销毁之后)onUnmounted(组件销毁之后) activated(被 keep-alive 缓存的组件激活时调用)onActivated(被激活时执行) deactivated(被 keep-alive 缓存的组件停用时调用)onDeactivated(比如从 A 组件，切换到 B 组件，A 组件消失时执行) errorCaptured(当捕获一个来自子孙组件的错误时被调用)onErrorCaptured(当捕获一个来自子孙组件的异常时激活钩子函数)

注意点：

refreactive 入参基本类型引用类型 返回值响应式且可变的 ref 对象响应式代理（Proxy） 访问方式1.ref 对象拥有一个指向内部值的单一属性 .value

2.在dom和setup()的return中会自动解套

3.ref 作为 reactive 对象的 property 被访问或修改时，也将自动解套直接.访问即可

问题 & 注意点： 因为reactive是组合函数【 对象 】，所以必须始终保持对这个所返回对象的引用以保持响应性，不能解构该对象或者展开

例如：

const { a } = objReactive 或者 return { ...objReactive }

解决方法：

toRefs API

用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref【把对象转成了ref】。

watchEffect 的第一个参数—— effect 函数——自己也有参数：叫 onInvalidate ，也是一个函数，用于清除 effect 产生的副作用。

onInvalidate 被调用的时机很微妙：它只作用于异步函数，并且只有在如下两种情况下才会被调用：

主要作用是指定调度器，即何时运行副作用函数。

优点：很优秀

缺点：他的对手（React），更优秀

虽然好多地方神似React，但是我们也可以从中看出，他们的都源于比较成熟的编程范式——FP（Functional Programming）。

框架只是工具，解决问题才是终极目标；我们还是要把重点放在领悟框架的设计思想上；悟到了，才是真正掌握了解决问题的手段。（抄的）

uniapp vue2项目迁移vue3项目

uniapp vue2项目迁移vue3项目，必须适配的部分

v-model 的适配

Vue3 的 v-model 相对 Vue2 来说 ，有了较大的改变。可以使用多 model ,相应语法也有变化。 更多

事件返回

将之前的 this. emit('update:modelValue') ，vue3 中将省略这一步骤

自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

若需要更改 model 名称，作为组件内 model 选项的替代，现在我们可以将一个 argument 传递给 v-model：

插槽的适配

Vue3 将不支持 slot="xxx" 的用法 ，请使用 v-slot:xxx 用法。 更多

vue3.2 setup 之局部自定义指令

vue2 全局自定义指令

在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象上，使用Vue.directive('name',opt)。

inserted 是钩子函数，在绑定元素插入父节点时执行。

vue3 全局自定义指令

在 vue3 中，vue 实例通过createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app上。

在组件内部，使用 directives 引入的叫做局部自定义指令。

其实，在vue3.2中，自定义指令变得更加的简单，直接上例子。

看到了吗，重点是： 注册一个局部的自定义指令，需要以小写v开头 。

这里做最简单示例，实战中举一反三灵活应用到项目中才是真理。

看完，你的项目需求可能会更复杂，所以系统掌握vue3中指令基础知识才是重点。

一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）

eg：测试指令内生命周期函数执行

通过点击按钮，我们发现创建 input 元素的时候，会触发 created、beforeMount 和 mounted 三个钩子函数。

隐藏 input 元素的时候，会触发 beforeUnmount 和 unmounted 。

然而我们添加的 beforeUpdate 和 updated 函数并没有执行。

此时我们把 input 元素上的 v-if 修改成 v-show 就会执行上述两个方法了，具体的执行情况自行验证下。

从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：

钩子函数被赋予了以下参数：

binding 包含的属性具体的分别为：

自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。

eg：自定义指令动态参数

什么时候需要自定义指令？

参考资料： 传送门

vue2/vue3环境搭建

检查是否安装成功

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；

2）check-versions.js ==> 检查npm，node.js版本；

3）utils.js ==> 构建相关工具方法；

4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js ==> webpack基本配置；

6）webpack.dev.conf.js ==> webpack开发环境配置；

7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；

2）index.js ==> 项目配置文件；

3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1.解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

改完之后重启一下即可。

2.为了避免端口冲突，也可以修改port，打开目录同上

更改成功：

1. 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过

npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)

2.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

3.全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init

4.可以进行创建项目了

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

3.版本不同 安装方式也不同

vue-cli2: 命令 npm install -g vue-cli

vue-cli3: 命令 npm install -g @vue/cli

3.版本不同的创建项目方式不同

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

4.vue-cli2和vue-cli3 安装完后的 项目目录不一样

5.安装指定版本的vue

npm install -g @vue/ cli@3.12.1

vue-cli3.0项目目录结构

vue-cli2.0项目目录结构

vue-cli4.5.15 的vue2项目目录

vue升级到3.5的如何运行2.0的项目

vue3.x尚未发布,预计会在今年6月8号发布

vue-cli2.x升级vue-cli3.x之后

使用npm run serve 运行项目

需要注意的是，升级后打包时static文件夹不会自动复制到dist文件夹，需要把static文件夹复制到public文件夹(或者手动配置CopyWebpackPlugin

)才行