Vue 组合 API

组合 API

使用 Composition API，逻辑是使用导入的 Vue 函数编写的，而不是使用我们习惯的 Options API 中的 Vue 实例结构。

这就是如何使用 Composition 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属性使 Composition API 的使用更加容易。例如，通过使用setup属性、变量和函数可以直接在内部使用<template>。

10号线,ref和computed必须先导入才能使用。在Options API中，我们不需要导入任何东西来声明反应变量或使用计算属性。

12号线,ref用于将 'typewriters' 属性声明为响应式，并以 '10' 作为初始值。

将“typewriters”属性声明为反应性意味着该行{{ typewriters }}在里面<template>当“typewriters”属性值更改时，将自动重新渲染以显示更新的值。使用 Option API，如果数据属性需要在构建应用程序时变为响应式，则无需将它们显式声明为响应式。

声明的“remove()”函数14号线如果示例是用选项 API 编写的，则将在 Vue 属性“methods”下声明。

“storageComment”计算属性20号线如果示例是用选项 API 编写的，则将在 Vue 属性“计算”下声明。

选项 API

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

本教程选择 Options API 是因为它具有易于识别的结构，并且对于初学者来说更容易上手。

例如，Options API 中的结构具有数据属性、方法和计算属性，所有这些属性都放置在 Vue 实例的不同部分，并且清晰分开。

下面是上面用 Options 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>