整理的一些 Vue3 知识点，初学者看完就能上手做项目
共 5205字，需浏览 11分钟
·
2021-10-10 16:14
点击上方关注 前端技术江湖，一起学习，天天进步
看完你就基本可以上手搞开发了，本文适合Vue初学者，或者Vue2迁移者，当然还是建议Vue3官网完全过一遍。不适合精通原理，源码的大佬们。
先推荐两个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以上
// 安装或者升级
npm install -g @vue/cli
//查看版本 保证 vue cli 版本在 4.5.0 以上
vue --version
// 创建项目
vue create my-project
//然后根据提示一步一步傻瓜式操作就行了
...
复制代码
使用 Vite 创建
都说Vue3.0和Vite2更配，各种优化，各种快，但都不属于本文的内容，本文的目的我们只需要知道它特别好用，怎么用就行了。我这里是多选择了TS，每行都有注释，一目了然。
// 初始化viete项目
npm init vite-app
// 进入项目文件夹
cd
// 安装依赖
npm install
//启动项目
npm run dev
复制代码
创建完以后我们先来看看入口文件main.ts
// 引入createApp函数,创建对应的应用,产生应用的实例对象
import { createApp } from 'vue';
// 引入app组件(所有组件的父级组件)
import App from './App.vue';
// 创建app应用返回对应的实例对象,调用mount方法进行挂载 挂载到#app节点上去
createApp(App).mount('#app');
复制代码
然后看看根组件app.vue
//Vue2组件中的html模板中必须要有一对根标签,Vue3组件的html模板中可以没有根标签
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
template>
<script lang="ts">
// 这里可以书写TS代码
// defineComponent函数,目的是定义一个组件 内部可以传入一个配置对象
import { defineComponent } from 'vue';
//引入子级组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
// 当前组件的名字
name: 'App',
// 注册组件
components: {
// 注册一个子级组件
HelloWorld,
},
});
script>
复制代码
Composition API
接下来到了重头戏，Vue3的招牌特性，Composition API
关于Composition API这里有大佬做的动画演示，极力推荐。
Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。
顺便提一句，Vue3兼容大部分Vue2语法，所以在Vue3中书写Vue2语法是没有问题的（废除的除外），但是既然我们已经升级Vue3了，不建议混合使用，除非一些大型特殊项目需要兼容两个版本。
setup
setup是组合Composition API中的入口函数，也是第一个要使用的函数。
setup只在初始化时执行一次，所有的Composition API函数都在此使用。
setup() {
console.log('我执行了') //我执行了
},
复制代码
可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)
beforeCreate() {
console.log('beforeCreate执行了');
},
setup() {
console.log('setup执行了');
return {};
},
//setup执行了
//beforeCreate执行了
复制代码
由此可以推断出setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props。
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名, setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。
setup函数如果返回对象, 对象中的 属性 或 方法 , 模板 中可以直接使用
//templete
{{number}}</div>
//JS
setup() {
const number = 18;
return {
number,
};
},
复制代码
注意：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
//父组件
<child :msg="msg" msg2='哈哈哈' />
</template>
//子组件
子组件
msg:{{ msg }}
复制代码
演示emit
//父组件
<child @show="show" />
</template>
//子组件
点我打开对话框
class="looklook">
看看我出现在了哪里
Close
复制代码
可以看到在子组件中的looklook元素跑到了body下面,而之前的位置默认出现了两行注释
Suspense(不确定的)
作用
它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验
语法
<template v-slot:default>
<AsyncComp />
template>
<template v-slot:fallback>
<h1>LOADING...h1>
template>
</Suspense>
复制代码
vue3中引入异步组件的方式
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
复制代码
代码演示
父组件
<Suspense>
<template v-slot:default>
<AsyncComp/>
template>
<template v-slot:fallback>
<h1>LOADING...h1>
template>
Suspense>
</template>
复制代码
子组件
<h2>AsyncComp22h2>
<p>{{msg}}p>
</template>
复制代码
子组件
<span @click="sonClick">msg: {{ props.msg }}span>
</template>
复制代码
子组件先不使用语法糖
<div>
我是子组件{{msg}}
div>
</template>
复制代码
子组件
<div>
我是子组件{{ msg }}
div>
<button @click="handleClick(1)">我是按钮1button>
<button @click="handleClick(2)">我是按钮2button>
</template>
复制代码
子组件1
<div>
我是子组件1
<h1>{{msg}}h1>
div>
</template>
复制代码
子组件2
<div>
我是子组件2
div>
<button @click='changeMsg'>点击修改msgbutton>
</template>
复制代码
演示
自定义指令
先看看Vue2自定义指令的钩子
bind：当指令绑定在对应元素时触发。只会触发一次。 inserted：当对应元素被插入到 DOM的父元素时触发。update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。 componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。 unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。
在 Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事
bind => beforeMount inserted => mounted beforeUpdate: 新的钩子，会在元素自身更新前触发 update => 移除！ componentUpdated => updated beforeUnmount: 新的钩子，当元素自身被卸载前触发 unbind => unmounted
过渡动画
这个没有什么大的改动，只是修改了两个class名字，正是因为没有什么大的改动，导致我曾经在这里栽了大跟头，写完了怎么都不对，后来查官网才知道。
以下是直接引用 官网的原文
v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。
特别注意的是v-enter改成了v-enter-form，v-leave改成了v-leave-from。
其他小知识
Vue3移除了filter
获取组件实例方法
getCurrentInstance()
这个方法可以获取到当前组件的实例，相当于Vue2中的this最后，毕竟是个人总结，难免会出现纰漏和错误，期待各路大神的补充和纠正。
我的开源项目:
https://juejin.cn/post/6963945204965441550"
参考资料
https://github.com/vuejs/rfcs/pull/210
作者：一尾流莺
https://juejin.cn/post/6977004323742220319
The End
欢迎自荐投稿到《前端技术江湖》，如果你觉得这篇内容对你挺有启发，记得点个 「在看」哦
点个『在看』支持下 