01.组合式api&选项式api

在 Vue.js (opens new window) 中，组合式 API（Composition API）和选项式 API（Options API）是两种不同的编程范式，用于定义组件逻辑。

Vue2的API风格是选项式的，Vue3的API设计是组合式的。

Option API

动图来源：大帅老猿（掘金）

data：数据 methods：方法 computed：计算属性 watch：侦听器

每一个配置项都装固定的功能，逻辑是分散的

• 对于简单的组件，选项式 API 提供了直观且易于理解的方式。
• 组件的各个部分（如数据、方法、计算属性等）被明确地分隔开，便于初学者理解和维护

若想新增或者修改一个需求，就需要分别修改：data、methods、computed，当功能较多时不便于维护和复用。

如下图，增加方法时，逻辑是分散插入的

示例：

<script>
export default {
  data() {
    return {
      message: 'Hello, Options API!',
    };
  },
  methods: {
    greet() {
      alert(this.message);
    },
  },
};
</script>

Composition API

组合式 API 是 Vue 3 引入的新特性

它允许用函数的方式组合代码，让相关功能的逻辑组织在一起

主要用于在大型组件中提高代码逻辑的可复用性。

Vue3 使用组合式 API 的地方为 setup。

示例：

<script>
import {ref} from 'vue';
export default {
  setup() {
    const name = ref('Composition Api');
    const showName = () => console.log('Hello ${name.value}');

    const status = ref(false);
    const toggle = () => status.value = true;

    onMounted(() => {
      showName();
    });

    return { name, status, toggle };
  },
};
</script>

有关name的逻辑都写在一起

直观对比

Vue3是向下兼容的，官方推荐使用组合式API 也兼容选项式API

setup 组件

教程来源：菜鸟教程-Vue3

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

**注意：**在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

以下实例使用组合 API 定义一个计数器：

<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script> 
import {ref, onMounted} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

文字写于：广东