Vue3中组合式API和选项式API区别

 1. 代码组织方式

- 选项式API（Options API）

- 代码是按照选项（Options）来分组的，如 data 、 methods 、 computed 、 watch 等。例如：

 

export default {

    data() {

        return {

            message: 'Hello, Vue!'

        };

    },

    methods: {

        sayHello() {

            console.log(this.message);

        }

    },

    computed: {

        reversedMessage() {

            return this.message.split('').reverse().join('');

        }

    },

    watch: {

        message(newValue, oldValue) {

            console.log(`Message changed from ${oldValue} to ${newValue}`);

        }

    }

};

- 这种方式在组件较小时比较清晰，但当组件逻辑变得复杂，涉及多个功能和数据交互时，代码可能会分散在不同的选项中，导致阅读和维护成本增加。不同功能的代码可能会相互干扰，例如， data 中的数据和 methods 中的方法之间的关联可能不那么直观。

- 组合式API（Composition API）

- 代码是围绕逻辑关注点来组织的。通过 setup 函数，将相关的响应式数据、方法、计算属性和副作用等组合在一起。例如：

 

import { ref, computed, watchEffect } from 'vue';

export default {

    setup() {

        const message = ref('Hello, Vue!');

        const sayHello = () => {

            console.log(message.value);

        };

        const reversedMessage = computed(() => {

            return message.value.split('').reverse().join('');

        });

        watchEffect(() => {

            console.log(`Message is ${message.value}`);

        });

        return {

            message,

            sayHello,

            reversedMessage

        };

    }

};

 

 

- 这种方式使得代码更具逻辑性，开发者可以将与某个功能相关的所有代码放在一起，便于理解和维护。例如，如果要实现一个用户登录功能，所有与登录相关的数据获取、验证、状态管理等代码都可以封装在一个组合函数中。

2. 响应式数据处理

- 选项式API

- 响应式数据主要通过 data 函数来定义。Vue会自动将 data 函数返回的对象中的属性转换为响应式。例如：

 

data() {

    return {

        count: 0

    };

}

 

 

- 在方法中访问响应式数据需要通过 this 关键字，如 this.count 。这种方式在嵌套函数或回调函数中可能会出现 this 指向问题，需要额外注意。

- 组合式API

- 主要使用 ref 和 reactive 函数来创建响应式数据。 ref 用于创建基本类型（如 string 、 number 等）的响应式数据， reactive 用于创建复杂对象（如 {} 或 [] ）的响应式数据。例如：

 

const count = ref(0);

const user = reactive({

    name: 'John',

    age: 30

});

 

 

- 访问 ref 数据需要通过 .value 属性（如 count.value ）， reactive 数据可以直接访问属性（如 user.name ）。这种方式在处理复杂逻辑和函数嵌套时更直观，并且避免了 this 指向问题。

3. 代码复用性

- 选项式API

- 复用代码通常通过混入（Mixins）来实现。但混入可能会导致命名冲突、数据来源不明确等问题。例如，当多个混入都定义了相同名字的方法或数据时，很难确定最终组件中使用的是哪个混入的内容。

- 组合式API

- 可以通过自定义组合函数来实现代码复用。这些组合函数可以将响应式数据、方法等逻辑封装在一起，然后在不同组件中轻松导入和使用。例如，定义一个组合函数来获取和处理用户信息，然后在多个需要用户信息的组件中复用这个函数，这样的复用方式更加清晰和可控。

4. 类型推导（与TypeScript一起使用时）

- 选项式API

- 与TypeScript结合时，对组件选项（如 data 、 methods 等）进行类型推导相对复杂。需要为每个选项分别定义类型，并且在复杂组件中，类型定义可能会变得冗长和难以维护。

- 组合式API

- 与TypeScript配合更好，提供了更自然的类型推导。例如， ref 和 reactive 函数在定义响应式数据时可以直接指定类型，使得类型检查更加准确和方便。这有助于在开发过程中更早地发现类型错误，提高代码质量。