Vue 3 组合式 API (Composition API) Hooks 详细文档

Vue 3 的组合式 API (Composition API) 引入了 Hooks，它是一种将组件逻辑封装成可复用函数的机制，提高了代码的可读性、可维护性和可复用性。

以下是一些常用的 Composition API Hooks：

1. setup(props, context)

• 作用: 组件的入口点，用于初始化组件状态、计算属性、监听器等。
• 参数:
  • props: 接收父组件传递的 props 对象。
  • context: 提供了组件实例的一些属性和方法，例如 attrs、slots、emit 等。
• 返回值:
  • 一个对象，包含要暴露给模板的数据、计算属性、方法等。
  • 一个渲染函数，用于自定义渲染逻辑。

示例：

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

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

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

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

2. ref(value)

• 作用: 创建一个响应式的数据引用。
• 参数: value: 初始值。
• 返回值: 一个 ref 对象，包含一个 .value 属性，用于访问和修改响应式数据。

示例：

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

export default {
  setup() {
    const name = ref('Vue.js');

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

3. reactive(object)

• 作用: 将一个 JavaScript 对象转换为响应式对象。
• 参数: object: 要转换的对象。
• 返回值: 一个响应式代理对象，可以直接访问和修改对象的属性，触发视图更新。

示例：

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'John Doe',
      age: 30,
    });

    return {
      user,
    };
  },
};
</script>

4. computed(getter)

• 作用: 创建计算属性。
• 参数: getter: 一个函数，用于计算属性的值。
• 返回值: 一个 computed 对象，包含一个 .value 属性，用于访问计算属性的值。

示例：

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

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed(() => {
      return `{firstName.value}{lastName.value}`;
    });

    return {
      fullName,
    };
  },
};
</script>

5. watch(source, callback, options)

• 作用: 监听响应式数据的变化。
• 参数:
  • source: 要监听的数据源，可以是 ref 对象、响应式对象、计算属性或 getter 函数。
  • callback: 当数据源发生变化时执行的回调函数，接收新值和旧值作为参数。
  • options: 可选参数，例如 deep、immediate 等。

示例：

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

export default {
  setup() {
    const name = ref('Vue.js');

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

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

6. watchEffect(callback, options)

• 作用: 类似于 watch，但会自动收集回调函数中使用的响应式依赖，并在依赖发生变化时执行回调函数。
• 参数:
  • callback: 要执行的回调函数。
  • options: 可选参数，例如 flush 等。

示例：

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

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

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

    return {
      count,
    };
  },
};
</script>

7. onMounted(callback)、onUpdated(callback)、onUnmounted(callback)

• 作用: 分别在组件挂载、更新、卸载时执行回调函数。
• 参数: callback: 要执行的回调函数。

示例：

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

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

    onUpdated(() => {
      console.log('Component updated');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  },
};
</script>

8. provide(key, value)、inject(key)

• 作用: 用于在组件之间共享数据。
• provide 用于提供数据，inject 用于注入数据。
• 参数:
  • key: 数据的键名。
  • value: 数据的值。

示例：

// 父组件
<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('theme', 'dark');
  },
};
</script>

// 子组件
<script>
import { inject } from 'vue';

export default {
  setup() {
    const theme = inject('theme');

    return {
      theme,
    };
  },
};
</script>

9. defineProps、defineEmits

• 作用: 在 <script setup> 语法糖中定义 props 和 emits。
• defineProps 用于定义 props，defineEmits 用于定义 emits。

示例：

<script setup>
const props = defineProps({
  name: String,
});

const emit = defineEmits(['update:name']);

const changeName = () => {
  emit('update:name', 'New Name');
};
</script>

以上是一些常用的 Composition API Hooks，它们可以帮助你更有效地组织和管理组件逻辑，提高代码的可读性、可维护性和可复用性。

建议:

• 查阅 Vue 3 官方文档，了解更多关于 Composition API 和 Hooks 的内容。
• 练习使用不同的 Hooks，并尝试将它们应用到你的项目中。
• 探索社区中开发的第三方 Hooks 库，它们可以提供更多功能和便利。