Vue3的Composition API

Vue3的Composition API（Vue3与Vue2的区别）

Vue 3 引入了 Composition API(组合式API)，这是一种新的编写组件逻辑的方式，旨在解决 Options API 在某些场景下的局限性。Composition API 提供了更灵活和强大的代码组织方式，特别适合处理复杂组件的逻辑复用和代码组织。

Composition API 的核心概念

1. setup 函数：

- setup 是 Composition API 的入口函数，它在组件实例创建之前执行。

- setup 接收两个参数：
	props：组件的 props。
	context：包含 attrs、slots、emit 等属性的上下文对象。

- setup 函数返回一个对象，该对象的属性和方法可以在模板中直接使用。

export default {
  props: {
    title: String,
  },
  setup(props, context) {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

2. ref 和 reactive：

- ref：用于创建一个响应式的数据引用，通常用于基本类型（如字符串、数字等）。

- reactive：用于创建一个响应式的对象，适用于复杂数据结构。

import { ref, reactive } from 'vue';

setup() {
  const count = ref(0); // 基本类型
  const state = reactive({ name: 'Vue', age: 3 }); // 对象

  return { count, state };
}

3. computed：

用于创建计算属性，类似于 Options API 中的 computed。

import { ref, computed } from 'vue';

setup() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  return { count, doubleCount };
}

4. watch 和 watchEffect：

- watch：用于监听响应式数据的变化，类似于 Options API 中的 watch。

- watchEffect：自动追踪其依赖，并在依赖变化时重新执行。

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

setup() {
  const count = ref(0);

  watch(count, (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  });

  watchEffect(() => {
    console.log(`count is now ${count.value}`);
  });

  return { count };
}

5. 生命周期钩子：

Composition API 提供了与 Options API 对应的生命周期钩子函数，如 onMounted、onUpdated、onUnmounted 等。

import { onMounted, onUnmounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Component mounted');
  });

  onUnmounted(() => {
    console.log('Component unmounted');
  });
}

6. provide 和 inject：

用于跨组件层级传递数据，类似于 Vue 2 中的 provide/inject

import { provide, inject } from 'vue';

// 父组件
setup() {
  provide('theme', 'dark');
}

// 子组件
setup() {
  const theme = inject('theme', 'light'); // 默认值为 'light'
  return { theme };
}

Composition API 的优势

1. 更好的逻辑复用：

   通过自定义 Hook（类似于 React 的 Hook），可以轻松复用逻辑代码。

   例如，可以将数据获取、事件监听等逻辑提取到独立的函数中。

   // useFetch.js
   import { ref } from 'vue';
   
   export function useFetch(url) {
     const data = ref(null);
     const error = ref(null);
   
     fetch(url)
       .then((res) => res.json())
       .then((json) => (data.value = json))
       .catch((err) => (error.value = err));
   
     return { data, error };
   }
   
   // 组件中使用
   setup() {
     const { data, error } = useFetch('https://api.example.com/data');
     return { data, error };
   }
   

2. 更灵活的代码组织：

   可以将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。

3. 更好的 TypeScript 支持：

   Composition API 的设计更符合 TypeScript 的类型推断机制，提供了更好的类型支持。

与 Options API 的关系

Composition API 并不是为了取代 Options API，而是为了提供一种更灵活的选择。

对于简单的组件，Options API 仍然是一个很好的选择。

对于复杂的组件或需要逻辑复用的场景，Composition API 更具优势。

示例：一个简单的计数器组件:

总结:
Composition API 是 Vue 3 的核心特性之一，它提供了更灵活和强大的方式来组织组件逻辑。通过 setup 函数、ref、reactive、computed、watch 等工具，开发者可以更高效地编写和维护复杂的 Vue 组件。