Vue 组合式 API

组合式 API

使用组合式 API，逻辑是使用导入的 Vue 函数编写的，而不是使用我们从选项 API 中习惯的 Vue 实例结构。

以下是如何使用组合式 API 编写一个 Vue 应用程序，该应用程序使用按钮减少存储中的打字机数量。

<template>
  <h1>Example</h1>
  <img src="/img_typewriter.jpeg" alt="Typewriter">
  <p>Typewriters left in storage: {{ typeWriters }}</p>
  <button @click="remove">Remove one</button>
  <p style="font-style: italic;">"{{ storageComment }}"</p>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const typeWriters = ref(10);

  function remove(){
    if(typeWriters.value>0){
      typeWriters.value--;
    }
  }

  const storageComment = computed(
    function(){
      if(typeWriters.value > 5) {
        return "Many left"
      }
      else if(typeWriters.value > 0){
        return "Very few left"
      }
      else {
        return "No typewriters left"
      }
    }
  )
</script>

在第 9 行，上面的例子中，setup 属性使得使用组合式 API 变得更容易。例如，通过使用 setup 属性，变量和函数可以直接在 <template> 中使用。

在第 10 行，ref 和 computed 必须在使用之前导入。在选项 API 中，我们不需要导入任何东西来声明响应式变量或使用计算属性。

在第 12 行，ref 用于声明 'typewriters' 属性为响应式，初始值为 '10'。

声明 'typewriters' 属性为响应式意味着，当 'typewriters' 属性的值发生改变时，<template> 中的 {{ typewriters }} 行会自动重新渲染，以显示更新后的值。使用选项 API，数据属性在应用程序构建时会自动变为响应式，不需要显式声明为响应式。

在第 14 行声明的 'remove()' 函数，如果示例是用选项 API 编写的，则会声明在 Vue 属性 'methods' 下。

在第 20 行声明的 'storageComment' 计算属性，如果示例是用选项 API 编写的，则会声明在 Vue 属性 'computed' 下。

选项 API

选项 API 是本教程其他地方使用的 API。

本教程选择选项 API，因为它具有可识别的结构，并且被认为对于初学者更容易上手。

例如，选项 API 中的结构将数据属性、方法和计算属性都放置在 Vue 实例的不同部分，清晰地分开。

以下是使用选项 API 编写的上面示例

<template>
  <h1>Example</h1>
  <img src="/img_typewriter.jpeg" alt="Typewriter">
  <p>Typewriters left in storage: {{ typeWriters }}</p>
  <button @click="remove">Remove one</button>
  <p style="font-style: italic;">"{{ storageComment }}"</p>
</template>

<script>
export default {
  data() { 
    return {
      typeWriters: 10
    };
  },
  methods: {
    remove(){
      if(this.typeWriters>0){
        this.typeWriters--;
      }
    }
  },
  computed: {
    storageComment(){
      if(this.typeWriters > 5) {
        return "Many left"
      }
      else if(this.typeWriters > 0){
        return "Very few left"
      }
      else {
        return "No typewriters left"
      }
    }
  }
}
</script>