vue3 Hooks

南雨北斗
146 阅读4分钟

在 Vue 3 中，Hooks 是一种非常有用的特性，它能让我们在组件逻辑复用等方面更加方便和灵活。以下是关于 Vue 3 Hooks 的详细介绍：

1. 什么是 Vue 3 Hooks

  • Vue 3 Hooks 本质上是函数，它们可以封装和复用组件中的逻辑，类似于 React 中的 Hooks 概念，但也有着 Vue 自身的特点和使用方式。通过使用 Hooks，我们可以把原本分散在不同组件选项（如setup、methods等）中的相关逻辑提取出来，组合成独立的、可复用的单元，让代码结构更加清晰，易于维护和测试。

2. 常用的内置 Hooks

  • ref Hook：

    • 作用：用于创建一个响应式的数据引用。它接受一个内部值作为参数，并返回一个响应式的、可更改的对象。这个对象有一个.value属性用来访问或修改内部的值。

    • 示例：

import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 访问值，输出0
count.value++; // 修改值

  • reactive Hook：

    • 作用：用来创建一个响应式的对象。传入一个普通的 JavaScript 对象，reactive会将其转换为响应式对象，其内部的属性值发生变化时，会自动触发相关的更新操作。

    • 示例：

import { reactive } from 'vue';
const state = reactive({
  name: 'Alice',
  age: 25
});
state.age++; // 修改响应式对象的属性值，会触发相关更新

  • computed Hook：

    • 作用：基于响应式的数据创建计算属性。它接收一个函数作为参数，该函数内部使用响应式数据进行计算，并返回计算结果。计算属性会根据其依赖的响应式数据的变化自动重新计算。

    • 示例：

import { ref, computed } from 'vue';
const num1 = ref(5);
const num2 = ref(3);
const sum = computed(() => num1.value + num2.value);
console.log(sum.value); // 输出8
num1.value++; // 改变依赖数据，sum会自动重新计算

  • watch Hook：

    • 作用：用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。可以用来执行副作用操作，比如根据数据变化发起 API 请求、更新 DOM 等。

    • 示例：

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`);
});
count.value++; // 触发watch回调，控制台会输出相应信息

3. 自定义 Hooks

  • 除了使用内置的 Hooks，我们还可以创建自定义的 Hooks 来满足特定的业务逻辑复用需求。自定义 Hooks 其实就是普通的 JavaScript 函数，不过在函数内部通常会使用到 Vue 的各种响应式相关的 API（比如ref、reactive等）。

  • 示例：假设我们经常需要在多个组件中获取用户当前在线状态，我们可以创建一个自定义 Hook 如下：

import { ref, onMounted, onUnmounted } from 'vue';

function useOnlineStatus() {
  const isOnline = ref<boolean>(navigator.onLine);

  const updateOnlineStatus = () => {
    isOnline.value = navigator.onLine;
  };

  onMounted(() => {
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
  });

  onUnmounted(() => {
    window.removeEventListener('online', updateOnlineStatus);
    window.removeEventListener('offline', updateOnlineStatus);
  });

  return isOnline;
}

export default useOnlineStatus;

然后在组件中就可以这样使用：

import useOnlineStatus from './useOnlineStatus';

export default {
  setup() {
    const onlineStatus = useOnlineStatus();
    return {
      onlineStatus
    };
  }
};

4. Hooks 的优势

  • 逻辑复用性高：能把通用的逻辑提取出来，方便在多个组件中使用，避免了重复编写相似代码，提高了开发效率。
  • 使组件代码更清晰：原本可能分散在组件各处的逻辑通过 Hooks 整合，组件的setup函数等地方的代码结构变得更加简洁明了，易于阅读和理解后续的维护工作。
  • 灵活组合：可以根据业务需求灵活地组合不同的 Hooks，就像搭积木一样构建出组件的逻辑部分，满足复杂多变的功能要求。

5. 注意事项

  • 响应式数据的使用规范：在 Hooks 中使用响应式数据（如ref返回的值）时，要注意通过其.value属性来正确访问和修改，避免出现数据更新不及时等问题。

  • 依赖管理：像computed、watch等涉及依赖响应式数据的 Hooks，要确保依赖关系设置准确，不然可能导致计算结果错误或者回调触发不符合预期的情况。

  • 执行顺序和生命周期：在自定义 Hooks 中如果涉及到像onMounted、onUnmounted等生命周期相关的操作，要清楚它们的执行顺序以及和组件生命周期的配合，确保不会出现资源未正确释放或者过早执行等异常情况。

总之，Vue 3 Hooks 为我们开发 Vue 应用提供了强大的逻辑复用和代码组织的能力，熟练掌握它们可以提升开发的效率和质量。

avatar
文章
阅读
粉丝