11个钩子函数vue_vue3.0钩子函数

Vue 3.0引入了一些新的钩子函数，这些钩子函数可以在不同的生命周期阶段执行特定的代码逻辑。下面我将逐一介绍这11个钩子函数，并给出相应的示例代码。

1. `setup`：在组件创建之前执行的函数。它可以用来设置组件的初始状态、订阅事件或执行其他一次性的操作。示例代码如下：

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      console.log('Component mounted');
    });
    return {
      count,
    };
  },
};

2. `beforeCreate`：在组件实例创建之前执行的函数。在这个阶段，组件的数据和方法还未初始化，无法访问到组件实例。示例代码如下：

export default {
  beforeCreate() {
    console.log('Component before created');
  },
};

3. `created`：在组件实例创建完成后执行的函数。在这个阶段，组件的数据和方法已经初始化，可以进行一些初始化的操作，如数据请求等。示例代码如下：

export default {
  created() {
    console.log('Component created');
  },
};

4. `beforeMount`：在组件挂载到DOM之前执行的函数。在这个阶段，组件的模板已经编译完成，但尚未渲染到页面上。示例代码如下：

export default {
  beforeMount() {
    console.log('Component before mounted');
  },
};

5. `mounted`：在组件挂载到DOM后执行的函数。在这个阶段，组件已经渲染到页面上，可以进行DOM操作或初始化第三方插件等。示例代码如下：

export default {
  mounted() {
    console.log('Component mounted');
  },
};

6. `beforeUpdate`：在组件更新之前执行的函数。在这个阶段，组件的数据发生变化，但尚未更新到DOM上。示例代码如下：

export default {
  beforeUpdate() {
    console.log('Component before updated');
  },
};

7. `updated`：在组件更新完成后执行的函数。在这个阶段，组件的数据已经更新到DOM上，可以进行一些更新后的操作。示例代码如下：

export default {
  updated() {
    console.log('Component updated');
  },
};

8. `beforeUnmount`：在组件卸载之前执行的函数。在这个阶段，组件将要被销毁，可以进行一些清理工作，如取消订阅、清除定时器等。示例代码如下：

export default {
  beforeUnmount() {
    console.log('Component before unmounted');
  },
};

9. `unmounted`：在组件卸载后执行的函数。在这个阶段，组件已经被销毁，可以进行一些销毁后的操作。示例代码如下：

export default {
  unmounted() {
    console.log('Component unmounted');
  },
};

10. `errorCaptured`：捕获组件内部错误的函数。在这个阶段，如果组件内部发生错误，可以在这里进行捕获和处理。示例代码如下：

export default {
  errorCaptured(error, vm, info) {
    console.error('Component error captured:', error);
    console.error('Component instance:', vm);
    console.error('Error info:', info);
  },
};

11. `renderTracked`：在组件渲染期间追踪响应式依赖的函数。在这个阶段，可以追踪组件内部响应式数据的变化。示例代码如下：

export default {
  renderTracked() {
    console.log('Component render tracked');
  },
};

这些钩子函数可以帮助我们在不同的生命周期阶段执行特定的代码逻辑，从而实现更精细的控制和操作。在实际开发中，根据需求选择合适的钩子函数来完成相应的任务，可以提高代码的可维护性和可扩展性。