day06面试题总结_pinia与vuex 面试

1.Vuex和Pinia 的区别

Vuex是Vue.js官方提供的状态管理库，而Pinia是由Vue作者维护的另一个状态管理库。Vuex采用了集中式的架构，而Pinia采用了去中心化的架构。

在体积和复杂性上，vuex比pinia体积更大，更复杂，在使用上pinia比vuex更容易上手，而vuex更适合大型和复杂的项目。

pinia比vuex更兼容ts语法

由于架构的不同，Vuex和Pinia在代码风格和语法上也存在一些差异。Vuex使用了更传统的mutations和actions的方式来修改和处理状态，而Pinia更加倾向于直接操作状态。

2.路由守卫

1 全局守卫：

全局前置守卫：beforeEach 会多次触发，

全局解析守卫：beforeResolve 解析守卫

全局后置守卫：afterEach 把组件实例对象传入到组件beforeRouteEnter守卫的next回调中

2.路由守卫：

beforeEnter  路由内的独享守卫

3.组件内的守卫：

beforeRouteEnter 进入组件之前触发，只在进入组件时触发一次

beforeRouteUpdate 组件更新之前触发（动态参数变化查询字符串变化）进入组件后参数变化可多次触发

beforeRouteLeave 离开路由组件之前触发 只在离开组件时触发一次
参数：

1. to:目标路由的配置对象（到哪去）

2.  from:是跳转前的路由对象(从哪来)

3.  next//把当前跳转操作交给下一个路由守卫，如果不添加next，这个时候跳转就会停止掉

3.vue3的所有生命周期钩子函数

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数；

4.Vue3双向数据绑定原理

Vue3.0中的响应式采用了ES6中的Proxy方法，Proxy 对象用于定义基本操作的自定义行为。

proxy相当于在目标对象上设置了一层拦截，当外部想访问目标对象时，就会经过这个拦截，而这时proxy就可以对访问进行过滤或修改。当访问经过拦截时进行判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来。然后就可以用proxy进行修改等操作。

5.Vue3+ts如何父传子，子传父，写出代码

父传子：子组件：type Props = {title：string}  defineProps<Props>()

子传父：子组件：const emit = defineEmits<{

(e：‘xxx’,val:boolean):void

}>

父组件: emit('xxx',val)