【vue进阶之旅】vue3.0的时代

vue进阶系列包括以下内容：

一、前言

二、创建vue3项目

三、setup、reactive、ref、toRefs函数的实际运用

四、computed、watch的运用

五、生命周期的钩子函数对比及使用

一、前言

镜头一：

2021年10月23日，vue的作者尤雨溪在前端早早聊上讲解vue3的生态和展望，提醒大家还没学习vue3的抓紧学习，并透露vue3将在年底进行更新。

镜头二：

2022年1月7日，我的leader叫我有空看一下vue3相关的技术，公司的项目也要跟着技术的更新进行升级换代。

镜头三：

2022年1月20日，vue的作者尤雨溪正式发表文章：vue3将在2022年2月7日成为新的默认版本

前端技术日新月异，这上面的信息都告诉了我们？？？

想必很多人的内心是：

刚好这个春节，我已经放假了。那么将有充足的时间进行vue3的学习和内容的输出，后续会持续更新vue3相关的文章。一方面是为了巩固自己，另一方面，希望可以帮助到想要学习vue3的前端工程师。

废话少说：

二、vue3项目的搭建

创建vue3项目，脚手架的版本必须在4.5以上，使用命令 vue create 项目名（vue3-study） 即可创建项目。

这里我们选择手动创建，选择对应需要的东西，让免得后面还要再次引入。上下键移动选择，空格选中，之后回车即可。选择vue3的版本，接下里的步骤我就不详细讲了，都是一些配置选择。

创建好项目之后，切换到对应的项目目录，把项目跑起来，熟悉vue2的小伙伴，估计很熟悉吧。

把地址粘贴到浏览器查看效果

当我们进入公司已经拿到项目代码的情况，想要知道公司的项目使用的是vue2还是vue3，千万不要问，不然别人会认定你是个菜鸡，不专业。我们打开项目查看package.json即可。版本号是^3.0.0，而vue2的项目一般在2.6左右。左边是项目目录，和vue是一样的。

main.js:在vue3中,改变全局vue行为的API现在被移动到了由新的createdapp方法所创建的vue应用实例上(创建vue实例)，在入口文件main.js采用的是链式写法。并在引入vue的时候引入的是createapp，而不是直接引入vue。(按需加载)

route:采用了按需加载，写法上没有太大的变化。

store:采用了按需加载，写法上没有太大的变化。

app.vue

home.vue

三、setup、reactive、ref、toRefs函数的实际运用

①setup和reactive

1.setup：新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。 setup 选项是一个接收 props 和 context 的函数，我们将在之后进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

把home里面的原本内容干掉，按需加载reactive,在setup里面定义响应式数据对象，然后把对象return出去，template使用的时候直接属于对象里面的属性，不用再用对象去点属性。

查看页面

tips: 在setup函数中无法访问到this。

页面效果：

②ref： 带 ref 的响应式变量

页面效果：

ref使用对象：

页面效果：

reactive和ref结合使用：

页面效果：

ref和reactive的异同： ref：基本数据类型 reactive:复杂数据类型

reactive:复杂数据类型，对基本类型不生效。控制台变化了，页面却没有变化。

当我们使用方式和响应式数据式，是return一个对象出去，如果我们直接把state放在对象里面，页面是读不了state的属性的，我们需要利用es6的展开运算符，但是展开运算符...state会导致响应式数据特性取消掉，所有我们需要加上toRefs把相应式数据的特性找回来。

页面不会显示

页面数据非响应式（看页面和控制台）

通过toRefs把数据转化为响应式

在vue2中，我们的方法都写在一个methods里面，那么vue3我们也可以这样做，将多个方法定义在一个对象中，然后将这个方法对象return出去。

多个方法分别return出去:

将多个方法写在一个对象中，统一return出去：

四、computed、watch的运用

computed:按需引入，直接在state里面使用

watch:按需引入，监听数字为多少，判断奇偶数

清除监听：把wahat赋值给一个stop函数，调用这个stop函数，即可清除监听，当数据小于等于5时，页面上的type属性（即奇偶数不再变化）

vue3中watch的多个监听、深度监听、立即监听：

五、生命周期的钩子函数对比及使用

生命周期的钩子函数钩子函数的使用方法在前面的例子中已经展示了，下面是新旧生命周期的钩子函数的对比图

这篇好文章是转载于：学新通技术网