先推荐两个vscode插件

Volar

首先推荐Volar，使用vscode开发Vue项目的小伙伴肯定都认识Vetur这个神级插件，有了它可以让我们得开发如鱼得水。那么Volar可以理解为Vue3版本的Vetur，代码高亮，语法提示，基本上Vetur有的它都有。

特色功能

当然作为新的插件出山，肯定有它独有的功能。

多个根节点编辑器不会报错

Vue3是允许我们有多个根节点的，但是我们如果使用Vetur就会报错，不会影响运行，但是看起来就很烦。所以当我们转向Volar那么就不会出现这个问题了。

?编辑器分隔

即便Vue的组件化开发，可以将单文件的代码长度大幅缩短，但还是动辄几百行甚是上千行。那么我们切换template，script和style的时候就要频繁上下翻，虽然有的插件可以直接定位到css，但是你回不去啊！所以这个功能简直是太人性化了。

安装完Volar以后，打开一个.vue文件，看vscode的右上角，有这么一个图标，点一下。

它就会自动给你分隔成三个页面，分别对应template，script和style，这样就太舒服了有没有。

?Vue 3 Snippets

推荐的第二个插件叫做Vue 3 Snippets，同样的，他也有自己的Vue2版本。它是干什么的呢，可以看一下下面这张图，我只输入了“v3”，它有很多提示，我们就先选择v3computed，选中回车即可。

?然后它就给自动给我们写了如下代码

?是不是超级省事，摸鱼的时间又增加了！还有更多有趣的使用方式，小伙伴们自行探索吧。

创建Vue3项目

那么正式开始学习我们的Vue3，先从创建项目开始。

使用 vue-cli 创建

输入下面的命令然后选择配置项进行安装即可，这里注意vue-cli的版本一定要在4.5.0以上

使用 Vite 创建

都说Vue3.0和Vite2更配，各种优化，各种快，但都不属于本文的内容，本文的目的我们只需要知道它特别好用，怎么用就行了。我这里是多选择了TS，每行都有注释，一目了然。

?创建完以后我们先来看看入口文件main.ts

然后看看根组件app.vue?

Composition API

接下来到了重头戏，Vue3的招牌特性，Composition API

关于Composition API这里有大佬做的动画演示，极力推荐。

那个忙了一夜的Vue3动画很好，就是太短了

Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。

顺便提一句，Vue3兼容大部分Vue2语法，所以在Vue3中书写Vue2语法是没有问题的（废除的除外），但是既然我们已经升级Vue3了，不建议混合使用，除非一些大型特殊项目需要兼容两个版本。

setup

setup是组合Composition API中的入口函数，也是第一个要使用的函数。

setup只在初始化时执行一次，所有的Composition API函数都在此使用。

?可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)

此可以推断出setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props。

返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名,?setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。

setup函数如果返回对象, 对象中的?属性?或?方法?,?模板?中可以直接使用

注意：setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板中就不可以使用return中返回对象的数据了。

setup的参数(props,context)`

props: 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性

context：上下文对象，可以通过es6语法解构?setup(props, {attrs, slots, emit})

attrs: 获取当前组件标签上所有没有通过props接收的属性的对象, 相当于?this.$attrs
slots: 包含所有传入的插槽内容的对象, 相当于?this.$slots
emit: 用来分发自定义事件的函数, 相当于?this.$emit
演示attrs和props

//父组件
<template>
??<child?:msg="msg"?msg2='哈哈哈'?/>
</template>
<script?lang='ts'>
import?{?defineComponent,?ref?}?from?'vue';
//?引入子组件
import?Child?from?'./components/Child.vue';
export?default?defineComponent({
??name:?'App',
??components:?{
????Child,
??},
??setup()?{
????const?msg?=?ref('hello,vue3');
????return?{
??????msg,
????};
??},
});
</script>

//子组件
<template>
??<h2>子组件</h2>
??<h3>msg:{{?msg?}}</h3>
</template>

<script?lang='ts'>
import?{?defineComponent?}?from?'vue';
export?default?defineComponent({
??name:?'Child',
??props:?['msg'],
??setup(props,?{attrs,?slots,?emit})?{
????console.log('props:',?props);//msg:?"hello,vue3"
????console.log('attrs:',?attrs);//msg2:?"哈哈哈"
????return?{};
??},
});
</script>

演示emit

//父组件
<template>
??<child?@show="show"?/>
</template>

<script?lang='ts'>
??setup()?{
????const?show?=?()?=>?{
??????console.log('name:',?'hzw');
????};
????return?{
??????show,
????};
??},
</script>

//子组件
<template>
??<button?@click='emitFn'>事件分发</button>
</template>
<script?lang='ts'>
import?{?defineComponent?}?from?'vue';

export?default?defineComponent({
??name:?'Child',
??setup(props,?{?emit?})?{
????const?emitFn?=?()?=>?{
??????emit('show');
????};
????return?{
??????emitFn,
????};
??},
});
</script>
复制代码