vue中涉及到的钩子函数有哪些？

Vue 中涉及到的钩子函数有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

相关问题

Vue3中页面被切回时需要处理代码应该在那个钩子函数中实现？

在 Vue3 中，如果你希望在页面从其他路由切回当前页面时执行特定的处理代码，你可以考虑使用 `beforeRouteUpdate` 或 `beforeEach` 生命周轮回调。这两个钩子会在组件已经被渲染过一次，并且新的导航路径与当前组件匹配时触发。

1. `beforeRouteUpdate`：当组件已经存在于 DOM 中，但是由于用户点击了相同的链接（例如通过 `<router-link>`），导致组件的 props 或者 $route 有更新时，这个钩子会被调用。适合处理依赖当前状态的数据更新。

setup() {
  onBeforeRouteUpdate(to, from, next) {
    // 更新依赖于当前路由的局部状态
    if (from.path === '/my-page') {
      yourUpdatedLogic();
      next(); // 继续路由更新过程
    } else {
      next(false); // 如果不需要更新DOM，阻止默认更新
    }
  }
}

2. `beforeEach`：如果需要在整个路由切换过程中执行代码，不论是否涉及组件的更新，都可以放在这个钩子中。这通常用于做权限检查、登录验证等。

router.beforeEach((to, from, next) => {
  if (shouldCheckPermission()) {
    // 执行权限检查
    checkPermission().then(next).catch(() => {
      // 权限不足时跳转到登录页或错误提示
      next('/login');
    });
  } else {
    next(); // 如果用户有权限，继续导航
  }
});

你这是VUE2的写法，VUE3的写法是怎样的？

在Vue3中，由于采用了更严格的模式和更深层次的响应式系统，一些语法和API与Vue2有所不同。关于Vue3的组件写法，特别是涉及到模板、数据绑定和组件交互：

1. **setup()函数**：Vue3引入了新的 `setup()` 函数替换原有的 `<script>` 标签中的单文件组件编写方式。它返回一个函数，用于初始化组件的实例和声明依赖。示例如下：

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  setup(props, context) {
    const data = reactive({ message: 'Hello Vue 3!' });
    function handleClick() {
      data.message = 'Clicked!';
    }
    return { data, handleClick };
  }
});

这里，`reactive`是来自`@vue/reactivity`库，用来创建响应式的数据对象。

2. **Props与Slots**：props的定义和使用基本保持一致，但在模板里，需要使用`<template #default>...</template>`来指定slot的内容。

3. **自定义钩子**：Vue3推荐使用自定义钩子（如beforeCreate、created、mounted等），而不是直接在生命周期函数内操作DOM。

4. **ref和onUpdate**：使用`ref`代替`$refs`来获取DOM元素，`onUpdate`属性则用于在组件实例更新时触发回调。

5. **避免深度监听**：Vue3移除了Vue2中的`watch`深监听机制，改用`unref`配合`shallowRef`或`reactive`。