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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十九天，点击查看活动详情

前言

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

而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的。