Vue3 入门指北（一）组件 API 风格

作者：Augus

2022 年 9 月 27 日
天津
本文字数：764 字
阅读完需：约 3 分钟

前言

前端技术的更替可谓是日新月异，可能一不小心你可能就跟不上前端这飞快的发展速度了。所以说，面对这样的局面，我们要时刻保持着一个学习的心态，对新技术具有探索的精神，不要让自己被淘汰了。

而 Vue3 以及早早的成为默认版本，而他的生态也趋近成熟。是时候系统的学习一下子了，看看他给我们带来了什么东西。

组件 API 风格

在 Vue3 中组件的写法可以分为两种风格：选项式 API 和组合式 API。

选项式 API (Options API)

选项式顾名思义就是通过多个选项来描述一个组件的逻辑。就像data、methods和mounted等等。在选项内部，可以通过this访问到当前组件实例。

<script>export default {  // data() 返回的属性将会成为响应式的状态  // 通过 this 可以访问到 data中的数据  data() {    return {      num: 0    }  },  methods: {    add() {      this.num++    }  },  mounted() {    console.log(`初始化： ${this.num}.`)  }}</script>
<template>  <button @click="add">计数: {{ num }}</button>-</template>

复制代码

组合式 API (Composition API)

在组合式 API 中，所有的选项都是通过从vue 中导入到组件中的。可以和<script setup>配合使用，在这里声明的顶层变量以及导入函数等可以直接在 template 中使用。

<script setup>import { ref, onMounted } from 'vue'
// 响应式状态const num = ref(0)
function add() {  num.value++}
onMounted(() => {  console.log(`初始化： ${this.num}.`)})</script>
<template>  <button @click="add">计数: {{ num }}</button></template>

复制代码

如何选择

这两种方式，在绝大多数的场景下都能使用。值得注意的一点是，选项式 API 是在组合式 API 的基础上实现的，选项式的方式更加灵活，抒写更加自由一些，对于组件逻辑的抽离更加方便，所以在觉大多数场景下，还是建议组合式 API 的。

发布于: 刚刚阅读数: 3

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景