VUE3问题

1.ref和reactive的区别是什么？

1. ref可以存储原始类型，而reactive不能。
2. ref需要通过<ref>.value访问数据，而reactive()可以直接用作常规对象。
3. 可以重新分配一个全新的对象给ref的value属性，而reactive()不能。
4. ref类型为Ref<T>，而reactive返回的反应类型为原始类型本身。
5. watch默认只观察ref的value，而对reactive则执行深度监听。
6. ref默认会用reactive 对象类型的原始值进行深层响应转换。

使用习惯：虽然没有规则规定要在何时使用ref或者reactive，亦或是混合使用。这些完全取决于开发者的编程习惯。但是为了保持代码的一致性和可读性，我倾向于使用ref而非reactive。

2.computed是什么？

类型：{ [key: string]: Function | { get: Function, set: Function } }

1. 使用场景

computed用来监控自己定义的变量，这个变量受多个数据影响，实现在页面上进行双向数据绑定展示出结果或者用作其他处理（该变量不在data里面声明，直接在computed里面定义）

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，(一个数据受多个数据影响)。
举例：购物车里面的商品列表和总金额之间的关系，购物车商品数量发生改变，总金额也都应该发生变化。这个时候用computed进行双向数据绑定就是最佳的选择。

2. watch和computed区别

computed:

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步
watch：

不支持缓存，数据变，直接会触发相应的操作
watch支持异步
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响

3.watch是什么？

watch:是vue中常用的侦听器（监听器），用来监听数据的变化

watch监听简单案例（监听一个）

<template>
  <div>
    <div>
      <input type="text" v-model="something">
    </div>
  </div>
</template>
<script>
  export default {
    name: "AboutView",
    components: {},
    data() {
      return {
         something: ""
      }
    },
    watch: {
        //方法1
       "something"(newVal, oldVal) {
          console.log(`新值：${newVal}`);
          console.log(`旧值：${oldVal}`);
          console.log("hellow  world");
      }
        //方法2
        "something": {
            handler(newVal, oldVal) {
              console.log(`新的值: ${newVal}`);
              console.log(`旧的值: ${oldVal}`);
              console.log("hellow  world");
            }
          }
        }
      }
 
</script>

watch监听复杂单一案例（例：监听对象中的某一项）

<template>
  <div>
    <div>
      <input type="text" v-model="obj.something">
    </div>
  </div>
</template>
<script>
  export default {
    name: "AboutView",
    components: {},
    data() {
      return {
         obj: {
           something: ""
        }
      }
    },
    watch: {
        "obj.something": {
            handler(newVal, oldVal) {
              console.log(`新的值: ${newVal}`);
              console.log(`旧的值: ${oldVal}`);
              console.log("hellow  world");
            }
          }
        }
      }
 
</script>

4.onMounted()方法是什么，什么时候会被调用？

在 Vue 3 中，mounted 钩子被重命名为 onMounted，它仍然是一个生命周期钩子函数，用于在组件挂载到 DOM 上之后执行一些操作。

下面是关于 onMounted 钩子的一些细节：

onMounted 钩子是通过 setup函数来使用的，它必须在组件实例创建之前调用，并返回一个对象，该对象包含组件实例中需要使用的数据、方法和生命周期钩子等。

onMounted 钩子中的函数会在组件挂载到 DOM 上之后执行，与 Vue 2 的 mounted 钩子相同，因此在该钩子中可以访问到组件的 DOM 元素。

在 setup 函数中，我们可以使用 ref 函数来创建一个响应式的变量，并将其初始化为 null，然后在 onMounted钩子中将其赋值为组件的 DOM 元素，从而访问到组件的 DOM 元素。

与 Vue 2 的 mounted 钩子不同，Vue 3 的 onMounted 钩子中的函数没有 this上下文，因此无法直接访问组件实例中的数据和方法。如果需要访问组件实例中的数据和方法，可以使用
getCurrentInstance 函数获取当前组件实例，并通过 ctx 参数来访问组件实例中的数据和方法。

onMounted 钩子只会被调用一次，因此如果需要在组件被重新渲染时执行一些操作，可以使用 watch 监听数据变化或者使用计算属性。

如果在 onMounted 钩子中进行了一些异步操作，需要注意在组件销毁时取消这些操作，以避免内存泄漏。

<script setup> 中，onMounted的执行时机
在 <script setup> 中使用 onMounted 时，它的执行时机是在组件实例创建后，模板渲染完成前。这意味着在 onMounted 中可以访问组件的 props、data 和 computed 等属性，但是不能访问模板中的 DOM 元素，因为它们还没有被渲染出来。

具体来说，<script setup> 中的代码会在以下情况下执行：

组件实例创建时，即 beforeCreate 和 created 生命周期之间；
组件的 props 和 data 初始化完成后；
组件的 template 编译成渲染函数之前。

因此，如果在 onMounted 中需要访问 DOM 元素，可以使用 nextTick 或 watchEffect 等方法来等待模板渲染完成后再执行相关操作。

5.页面跳转的方式。

router.push('/login')

6.useRoute和useRouter的区别

useRoute()、useRouter()本质是两个函数，是用于获取路由相关信息。

useRoute()：用于返回当前路由信息对象用于接收路由参数。

useRouter()：用于返回当前路由实例，常用于实现路由跳转。使用方法先引入且需要调用两个函数才可以得到相关信息。

7.pinia是什么怎么理解

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia 的成功可以归功于他管理存储数据的独特功能，例如：可扩展性、存储模块组织、状态变化分组、多存储创建等。

Pinia 的优点：

Pinia 被 vue 纳入正规编制，肯定是有原因的，那 pinia 有啥优点呢，主要是一下几点：

pinia 符合直觉，易于学习。
pinia 是轻量级状态管理工具，大小只有1KB.
pinia 模块化设计，方便拆分。
pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
支持多个 store。
支持 Vue devtools、SSR、webpack 代码拆分。

8.pinia定义的属性和方法如何在组件里使用

特性

1.像定义components一样定义store

2.支持ts

3.去除mutations，只有state，getters，actions（支持同步异步）

4.轻量级（1kb）

5.vuex是要有主入口进行统一导入，pinia可以分模块导入

pina简单使用

导入pinia（createPinia）

定义store（defineStore）

使用store数据（useMainStore）

不用store.state.count 直接就store.count

9.pinia怎么实现的本地缓存

一、使用 vuex-persistedstate 插件：
vuex-persistedstate 是一个 Vue.js 和 Vuex 插件，可以将 Vuex 状态持久化到本地存储中。由于 Pinia 基于 Vue 3，因此需要使用 vuex-persistedstate@next 版本。

使用方法如下：

安装插件：
npm install vuex-persistedstate@next
在 Pinia 实例化时使用插件：

import createPersistedState from 'vuex-persistedstate';

const pinia = createPinia();

pinia.use(createPersistedState({
  // 配置项
}));

配置项可以设置以下选项：

key：存储在本地存储中的键名，默认为 ‘vuex’。
storage：指定要使用的本地存储，默认为 window.localStorage。
reducer：自定义状态转换函数。
filter：一个函数，用于选择要缓存的 state 子属性。
restoreState：一个函数，用于还原本地存储中的状态。
例如，将 Pinia 的状态存储在 sessionStorage 中：

import createPersistedState from 'vuex-persistedstate';

const pinia = createPinia();

pinia.use(createPersistedState({
  storage: window.sessionStorage,
  key: 'pinia',
}));