前端面试题[pinia与vuex、路由守卫、vue3生命周期钩子函数、vue3双向数据绑定、vue3组件传值、provide和indect]_pinia面试

一、pinia与vuex的区别

Pinia和Vuex都是Vue.js状态管理库，但它们在实现方法和设计理念上有所不同。

Pinia是一个新近发布的状态管理库，它旨在提供更简单、更优雅的方式来处理Vue.js应用程序的状态管理。

Pinia的重点在于使用Vue 3的Composition API，以及提供更好的类型支持和更好的测试体验。

Pinia的架构更加分散式，没有全局存储，而是针对每个组件实例创建自己的状态存储。

Vuex是一个比较成熟、广为人知的状态管理库，它被广泛使用在Vue.js应用程序中。

Vuex提供了一个中央存储管理应用程序状态的机制，并提供了一系列API来管理该状态。

它的架构是集中式的，所有的状态都存储在一个全局对象中，组件通过Vuex提供的API来访问状态。

因此，Pinia和Vuex在实现方法和设计理念上有所不同，开发人员可以根据应用程序的需要来选择合适的状态管理库。

Pinia是Vue 3的状态管理库，使用Composition API构建，提供了更好的类型推断和响应式数据管理。

Vuex是Vue 2的状态管理库，使用对象和选项API构建，提供了类似于Flux架构的状态管理模式。

Pinia相较于Vuex更加轻量级，具有更好的性能和灵活性，并且可以与任何Vue 3应用程序一起使用。

二、路由守卫有哪几种,钩子函数分别是什么,有几个参数.

在Vue.js中，路由守卫有三种类型：全局守卫、路由独享守卫和组件内守卫。

1.全局守卫：在全局注册，影响整个应用。

• beforeEach(to, from, next)：在路由切换之前触发，to和from分别表示即将进入的和离开的路由对象，next是一个必须被调用的函数，用于切换路由。
• afterEach(to, from)：在路由切换之后触发，to和from分别表示进入的和离开的路由对象。

2.路由独享守卫：只在某个路由配置中生效。

• beforeEnter(to, from, next)：在当前路由配置的beforeEnter属性中定义，与全局beforeEach相同。

3.组件内守卫：在某个组件内生效，对该组件内的路由切换进行管理。

• beforeRouteEnter(to, from, next)：在组件被激活之前触发，to和from分别表示即将进入的和离开的路由对象，next是一个必须被调用的函数，用于切换路由。
• beforeRouteUpdate(to, from, next)：在组件被复用时触发，to和from分别表示当前路由对象和上一个路由对象，next是一个必须被调用的函数，用于切换路由。
• beforeRouteLeave(to, from, next)：在离开当前路由配置时触发，to和from分别表示即将进入的和离开的路由对象，next是一个必须被调用的函数，用于切换路由。

以上所有钩子函数都有三个参数：to、from和next。其中，to表示即将进入的路由对象；from表示当前离开的路由对象；next是一个必须被调用的函数，用于进行路由切换。

1. beforeRouteEnter: 在进入该路由前，可以进行一些异步操作，比如获取数据等。

2. beforeRouteUpdate: 在路由更新（参数发生变化）时触发。

3. beforeRouteLeave: 在离开当前路由时，可以进行一些确认操作，比如提示用户保存未保存的数据等。

4. beforeEach: 在每个路由进入之前触发，可以进行一些全局的拦截、权限验证等操作。

5. afterEach: 在每个路由离开之后触发，可以进行一些全局的收尾操作，比如清除全局状态等。

路由守卫有三种:全局前置守卫、路由独享守卫和组件内守卫。

它们对应的钩子函数分别是beforeEach、beforeRouteEnter和beforeRouteUpdate/beforeRouteLeave、afterEach。

这些钩子函数都有两个参数，to和from。其中beforeEach还有一个next函数作为参数。

三、写出vue3的所有生命周期钩子函数

一、setup()
Vue3在组合式 API中去掉了在Vue3中的beforeCreate、created两个生命周期，使用setup()来顶替这两个生命周期。
二、onBeforeMount()
注册一个钩子，在组件被挂载之前被调用。
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
三、onMounted()
注册一个回调函数，在组件挂载完成后执行。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用。当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。

• 注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的语法上下文中。

• onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。

 四、onBeforeUpdate()
注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
五、onUpdated()
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。
如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

六、onBeforeUnmount()
注册一个钩子，在组件实例被卸载之前调用。
当这个钩子被调用时，组件实例依然还保有全部的功能。
七、onUnmounted()
注册一个回调函数，在组件实例被卸载之后调用。

一个组件在以下情况下被视为已卸载：其所有子组件都已经被卸载、所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
 

四、vue3双向数据绑定原理

Vue3中的双向数据绑定原理和Vue2有所不同。Vue3使用了Proxy对象来实现双向数据绑定，而不是Vue2中使用的Object.defineProperty。

具体地说，当页面中的数据发生变化时，会触发Proxy对象的set方法，从而修改源数据；当源数据发生变化时，会触发Proxy对象的get方法，从而重新渲染页面。

下面是一个简单的示例：

1.创建一个Vue实例，并在data中定义一个变量message：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
})

2.将message绑定到页面上的一个input元素：

<input v-model="message" />

3.输入框中的值发生变化时，会触发Proxy对象的set方法，从而更新message的值：

const data = {
  message: 'Hello Vue3!'
}
 
const proxy = new Proxy(data, {
  set(target, key, value) {
    if (target[key] !== value) {
      target[key] = value
      // 更新页面
    }
    return true
  }
})

4.当message的值发生变化时，会触发Proxy对象的get方法，从而重新渲染页面：

const data = {
  message: 'Hello Vue3!'
}
 
const proxy = new Proxy(data, {
  get(target, key) {
    console.log('get', target, key)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log('set', target, key, value)
    if (target[key] !== value) {
      target[key] = value
      // 重新渲染页面
    }
    return true
  }
})

通过Proxy对象的get和set方法实现双向数据绑定，这也是Vue3中双向数据绑定的原理。

Vue3使用Proxy对象实现双向数据绑定，当数据变化时会自动更新相关的视图，而当视图被修改时也会自动更新对应的数据。

通过拦截属性的读取、赋值、删除等操作来实现响应式更新，从而实现高效的双向绑定效果。

五、vue3+TypeScript如何父传子,子传父,代码例子

以下是一个简单的示例，展示如何在Vue 3中使用TypeScript实现父传子，子传父。

父组件：App.vue

<template>
  <ChildComponent :num="count" @add="increment" />
</template>
 
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default defineComponent({
  name: 'App',
  components: { ChildComponent },
  setup() {
    const state = reactive({
      count: 0,
    });
 
    const increment = () => {
      state.count++;
    };
 
    return {
      ...state,
      increment,
    };
  },
});
</script>

子组件：ChildComponent.vue

<template>
  <div>
    <button @click="add">Add</button>
    <p>{{ num }}</p>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, PropType, emit } from 'vue';
 
export default defineComponent({
  name: 'ChildComponent',
  props: {
    num: {
      type: Number,
      required: true,
    },
  },
  setup(props, { emit }) {
    const add = () => {
      emit('add');
    };
 
    return {
      add,
    };
  },
});
</script>

在这个示例中，父组件通过props将count传递给子组件，并在子组件中显示它。子组件通过@add事件触发increment函数来让父组件增加count的值。

Vue3结合TypeScript可以很方便实现父组件向子组件传递数据，以及子组件向父组件传递事件。

通过使用@Prop和@Emit装饰器来定义数据的传递和事件的触发，可以避免数据类型不符等问题。同时，通过使用泛型约束，可以进一步增强代码的类型安全。

六、provide,inject怎么使用?

"provide"和"inject"是Vue.js中的依赖注入机制。在Vue.js中，组件是通过属性传递数据的方式进行通信的。但是，如果组件之间存在复杂的依赖关系，则需要使用依赖注入来解决。

"provide"用于提供一个对象，在当前组件和其子组件中可用。例如，我们可以在父组件中提供一个对象：

provide: {
  message: 'Hello, Vue!'
}

然后，在子组件中可以通过"inject"来注入该对象：

inject: ['message']

这样，子组件就可以访问父组件提供的"message"属性了。

另外，我们还可以通过"provide"提供一个方法或者组件实例等，然后在子组件中通过"inject"来注入并使用它们。例如：

provide: {
  getData: this.getData,
  myComponent: this
}
 
...
 
inject: ['getData', 'myComponent']

注入的"getData"可以直接调用父组件提供的方法，而"myComponent"则可以访问父组件的实例方法和属性。

Provide和inject都可以用来在Vue组件中注入依赖项。

provide是在父组件中提供依赖项，inject是在子组件中注入依赖项。

例如，可以在父组件中使用provide提供一个计数器，然后在子组件中使用inject注入这个计数器来进行计数操作。