Vue3.0语法重点API整理一

一、Vue3.0项目搭建

1、使用脚手架Vite
npm init vite vue3.0-demo --template vue

2、通过脚手架vue-cli进行搭建
（1）首先查看电脑中vue-cli的版本，查看版本号：vue -V
（2）如果是旧版本的（1.x或2.x），需要先卸载旧的版本： npm uninstall vue-cli -g
（3）安装新的版本：npm install -g @vue/cli
（4）创建项目：vue create <文件名称>
（5）根据项目所需选择自己所需的配置

二、为什么升级Vue3.0

使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有数据都是定义在data中，方法定义在methods中的，并且使用this来调用对应的数据和方法，当一个组件的代码超过几百行时，这时增加或者修改某个需求， 就要在 data、methods、computed 以及 mounted 中进行反复的跳转，甚至一个功能还有会依赖其他功能，全搅合在一起。如图所示：

当我们业务复杂了就会大量出现上面的情况， 随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：

Vue2.x 版本给出的解决方案就是 Mixin, 但是使用 Mixin 也会遇到让人苦恼的问题：

• 命名冲突问题
• 不清楚暴露出来的变量的作用
• 逻辑重用到其他 component 经常遇到问题

如果可以按照逻辑进行分割，将上面这张图变成下边这张图，是不是就清晰很多了呢, 这样的代码可读性和可维护性都会更高，所以，Vue3.x 就推出了Composition API主要就是为了解决上面的问题，将零散分布的逻辑组合在一起来维护，并且还可以将单独的功能逻辑拆分成单独的文件 。

三、Setup

setup函数是 Composition API（组合API）的入口

运行结果：

setup 执行时机是在 beforeCreate 之前执行的
1、使用方法：
使用setup的时候，需要接收两个参数：
（1）props：组件传入的属性
（2）context
setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。 错误代码示例， 这段代码会让 props 不再支持响应式：

export default defineComponent ({
    setup(