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(); // 如果用户有权限，继续导航
  }
});

在Vue 3中，如何正确使用`setup`函数来初始化数据？

在 Vue 3 中，使用 `setup` 函数初始化数据通常涉及以下几个步骤：

1. 定义响应式数据：你可以通过 `ref`、`reactive` 或 `defineReactive` 这些函数创建响应式的变量。例如：

import { ref } from 'vue';

const count = ref(0); // 使用 ref 创建一个计数器

2. 使用 `setup` 函数：这个函数返回一个包含所有组件相关设置的对象。在这个对象中，你可以把响应式数据作为属性添加进来：

export default {
  setup() {
    return {
      count,
    };
  },
};

3. 更新数据：在组件内修改响应式数据会自动触发视图更新，不需要显式调用 `this.$set` 等方法。例如：

count.value++; // 直接修改值即可

4. 钩子函数：`setup` 可以接收一些生命周期钩子函数作为参数，比如 `onMounted`、`onUnmounted` 等，这些在函数式组件中对应于 `created` 和 `beforeDestroy` 等。

注意，`setup` 函数在每次组件实例创建时都会运行，如果需要在数据变化后再执行某些操作，应该使用自定义事件或者异步函数来处理。