vue3 生命周期 路由守卫 组合式api token

1.Vue3生命周期钩子函数

BeforeCreate:在组件实例被创建之前执行。此时组件的数据、计算属性等还未初始化，无法访问到这些属性。

Created:在组件实例被创建之后执行。此时组件的数据已经初始化完成，可以访问到这些属性。可以在这个阶段进行一些初始化工作，如发送请求、获取数据等。

BeforeMount:在组件挂载到DOM之前执行。此时组件的模板已经编译成渲染函数，但尚未将虚拟DOM渲染到实际的DOM中。

Mounted:在组件挂载到DOM之后执行。此时组件已经被渲染到页面上，并且可以访问到组件的DOM元素。可以在这个阶段进行一些DOM操作、绑定事件监听器等。

BeforeUpdate:在组件更新之前执行。当组件的数据发生变化时，会触发重新渲染，但尚未将新的虚拟DOM渲染到实际的DOM中。可以在这个阶段进行一些准备工作。

Update:在组件更新之后执行。此时新的虚拟DOM已经渲染到实际的DOM中，并且页面上的内容已经更新。可以在这个阶段进行一些DOM操作、调用第三方库等。

BeforeUnmount: 组件卸载之前执行的函数:在组件卸载之前执行。可以用来清理定时器、取消订阅等操作。

Unmounted: 组件卸载完成后执行的函数:在组件卸载之后执行。可以用来进行一些清理工作，如解绑事件监听器、释放资源等。

2.Vue3 组合式API

setup

setup函数是组合式 API 的入口点，它会在组件实例创建之前被调用。在setup函数中，可以定义组件的状态、计算属性、方法等，并返回这些值以供组件使用。

ref

ref函数用于创建一个包装器对象，将普通的数据类型转换为响应式的数据。通过 ref 创建的对象，可以通过 .value 属性来访问和修改其值。当修改 ref 对象的值时，Vue 会自动追踪并更新相关的视图。

reactive

reactive 函数用于创建一个响应式的对象。可以将普通的 JavaScript 对象传入 reactive 函数中，它会返回一个与原对象具有相同属性的响应式代理对象。当代理对象的属性发生变化时，Vue 会自动追踪并更新相关的视图。

shallowRef

如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换。

shalowRef的特点

shallowRef可以创建一个跟踪自身.value变化的 ref，但不会使其值也变成响应式的

与ref不同，shallowRef修改深层属性时，并不会更新视图

shalow即浅的意思，shallowRef只有整个数据变更时才刷新视图。

或者在修改了数据之后，调用triggerRef方法，主动触发视图刷新

使用ref方法会递归遍历对象的所有属性，使所有属性都具备响应性，所以，当对象很复杂且庞大时，过多的监听会导致性能上的损耗。

ShallowRef 只对第一层属性进行响应式转换，因此在处理大型对象时可能会比 Ref 更具性能优势。

Ref 适用于需要对整个对象进行深度响应式转换的场景，而 ShallowRef 则适用于只需要关注对象的第一层属性变化的场景。

shallowReactive

如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 。

computed

computed 函数用于创建一个计算属性。可以将一个函数传入 computed函数中，它会返回一个响应式的计算属性对象。当计算属性依赖的响应式数据发生变化时，Vue 会自动重新计算计算属性的值。

watch

watch函数用于监听一个或多个响应式数据的变化，并在数据变化时执行相应的回调函数。可以通过 watch 函数来处理异步操作、副作用等。

watchEffect

watch需要明确监听哪个属性，watchEffect会根据其中的属性，自动监听其变化

watcheffect初始化时，一定会执行一次，收集要监听的数据，watch只有你设置了初始化监听才会监听

watchEffect有点像computed

computed注重的是计算出来的值，必须要有返回值。

watchEffect更注重的是过程，不需要写返回值

toRefs

toRefs：将 Vue 3 中的对象转换为具有响应式能力的 ref 对象集合

toRefs 接收一个响应式对象作为参数，并返回该响应式对象各个属性对应的引用对象。例如，如果将一个响应式对象的属性传递给一个子组件时，可以使用 toRefs 确保子组件更新属性时会响应到原始对象的变化。

在使用到解构赋值时，如果用到reactive,是无法实现响应式效果的

toRefs可以将reactive解构出来的变量转换成ref

onMounted、onUpdated、onUnmounted：用于定义组件的生命周期钩子函数。

provide、inject：用于父子组件之间的依赖注入。

getCurrentInstance：获取当前组件实例的引用。

3.路由守卫

前置守卫 ==> 判断用户是否登录

to：表示要跳转的目标页面对象 从哪来

from：表示从哪个页面跳转的页面对象 到哪去

next： 执行下一步

next() 相当于 next(true ) 进行管道中的下一个钩子。

next(false) 中断当前的导航。

next(errow) 参数是一个Error实例，则导航会被终止且该错误会被传给router.onError()注册过的回调。

全局前置守卫

// 前置路由守卫
router.beforeEach((to, from, next) => {
// 在路由切换之前被调用
// 可以进行身份验证、权限控制等操作
// 如果需要进入下一个钩子，调用 next() 方法
    其他判断条件……
​
    if(localStorage.getItem('token')) {
        next()
    } else {
        alert('没有权限') // 或跳转页面
    }
​
})

全局解析守卫

router.beforeResolve((to, from, next) => {
  // 在路由解析之前被调用
  // 可以进行全局的数据加载、权限验证等操作
​
  // 如果需要进入下一个钩子，调用 next() 方法
    if(localStorage.getItem('token')) {
        next()
    } else {
        alert('没有权限') // 或跳转页面
    }
    // 在beforeResolve守卫函数中，可以根据需要进行全局的数据加载、权限验证等操作。如果需要进入下一个钩子，必须调用 next() 方法。你也可以选择传递一个路径或者 false 终止导航。
    // 注意，在Vue3中，全局解析守卫的写法有所不同，可以使用 router.beforeEach 方法来实现类似的功能。
})

全局后置钩子

路由后置守卫afterEach 路由后置守卫会在路由切换之后被调用。 无法阻止导航，只能用来进行一些日志记录、统计等操作。 不需要调用next()方法。

router.afterEach((to, from) => {
  // 在路由切换之后被调用
  // 可以进行一些日志记录、统计等操作
​
});

路由独享的守卫

路由独享守卫只有前置没有后置 只有进入这个路由里面才会走守卫的代码

const routes = [
  {
    path: '/home',
    component: Home,
    beforeEnter: (to, from, next) => {
        // 判断是否需要授权
        if(to.meta.isAuth) { 
            if(判断条件) {
                // 继续下一步
                next()
            } else {
                alert('无权查看')
            }
        } else {
            // 放行 继续下一步  
            next()
        }
    },
  },
]

或者将beforeEnter放在要守卫的vue文件里面也可以实现

组件内守卫

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

4.Token的作用

Token验证的基本流程

1.服务端收到请求，去验证用户名与密码

2.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

3.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

4.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

5.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

Token（令牌）通常用于身份验证和授权的目的。它是一个字符串或者一段加密的数据，用于标识用户的身份和权限，Token是客户端和服务端统一的一个唯一标识。

常见的使用场景

身份验证：当用户登录成功后，服务器会生成一个Token并返回给客户端。客户端将该Token保存在本地，每次向服务器发送请求时，都需要携带这个Token作为身份验证凭证。服务器通过验证Token的有效性来确认用户的身份，并根据用户的权限进行相应的操作

授权访问：除了身份验证外，Token还可以用于授权访问。服务器可以根据Token中包含的信息，如用户角色、权限等，来判断用户是否有权访问某个资源或执行某个操作。

防止CSRF攻击：Token也可以用于防止跨站请求伪造（CSRF）攻击。服务器在返回Token时，将其存储在Cookie中或者通过其他方式与用户关联起来。当用户提交表单或者发送请求时，需要同时发送Token，服务器会验证Token的有效性，以确保请求是合法的