2023年最新50道Vue全套vue2+vue3面试题带答案汇总

目录

• 此文章不断更新，欢迎大家在评论区补充
  • 1.什么是MVVM?
  • 2.什么是MVC？
  • 3.讲一下MVVM 和 MVC的区别
  • 4.vue3和vue2不同点
    • 1. 响应式系统的重构，使用proxy替换Object.defineProperty属性，优势：
    • 2. 新增组合式API(Composition API)，更好的逻辑重用和代码组织:
    • 3. 重构虚拟 DOM, diff算法
    • 4. 生命周期更名
    • 5. 新的内置组件: Fragment，Teleport，Suspense
    • 6. 移除:
  • 5.vue2.x的响应式原理
  • 6. vue3.0的响应式原理
  • 7.Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？
  • 8.Vue3.0 编译做了哪些优化？
    • • 生成 Block tree
      • slot 编译优化
      • diff算法优化
  • 9.VUE2 第一次加载页面会触发哪几个钩子函数？
  • 10.Vue3 的优势
  • 11.Vue3 新特性有哪些？
  • 12.vue3 组合式API生命周期钩子函数有变化吗？
  • 13.Options API 是什么？
  • 14.Composition API 是什么？
  • 15.Composition API 与 Options API 有什么区别？
  • 16.watch 和 watchEffect 的区别？
  • 17.Vue2中双向数据绑定是如何实现的？
  • 18.vue2的生命周期
    • • • beforeDestroy:
        • destroyed:
  • 19.vue2生命周期的作用：
  • 20.vue2 如何升级到 vue3 ?
  • 21.v-if 和 v-for 的优先级哪个高？
  • 22.script setup 是什么？
  • 23.vue3常用API有哪些
  • 24.Vue3中的Teleport是什么？它的作用是什么？
  • 25.Vue3中的Suspense是什么？它的作用是什么？
  • 26.什么是响应式系统？ Vue3中的响应式系统有哪些更新？
  • 27.Vue3 Composition API是什么？它的作用是什么？
  • 28.3.Vue3 生命周期
  • 29.如何看待composition API 和options API
  • 30.解释一下ref toRef和toRefs？
  • 31.为何需要toRef toRefs
  • 32.setup中如何获取组件实例？
  • 33.Composition API和React Hooks的对比
  • 34.Vue3中的事件修饰符有哪些？
  • 35.Vue3中如何实现动态组件？
  • 36.Object.defineProperty 和 Proxy 的区别
  • 37.Vue3中的指令有哪些？
  • 38.为什么vue3需要对引入的组件使用markRaw？
  • 39. Vue3如何进行状态管理？
    • • 安装依赖包
      • 创建 Pinia Store
      • 在main.js中引入pinia
      • 在需要使用的组件中引入store：
  • 40.为何VUE3使用组合式API？
  • 41.组合式API的优点？
  • 42.解释一下Vue 3中的 setup
  • 43.provide与inject
  • 44.shallowReactive 与 shallowRef
  • 45.readonly 与 shallowReadonly
  • 46.vue3中的父传子，子传父
  • 47.ref 和 reactive 区别?
  • 48.vue3响应式数据的判断？
  • 49.如何理解toRef
  • 50.vue3有哪些新的组件？
  • 51.待继续补充
    • • 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

此文章不断更新，欢迎大家在评论区补充

1.什么是MVVM?

M - Model 数据：它是与应用程序的业务逻辑相关的数据的封装载体
V - View 视图：它专注于界面的显示和渲染
VM - ViewModel 视图-数据：它是View和Model的粘合体，负责View和Model的交互和协作
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法，get set 方法。
MVVM最标志的特性是数据绑定，核心理念是通过申明式的数据绑定实现View层和其它层的分离。完全解耦View层这种理念，也是的Web前端的测试用例编写变得简单。
MVVM 最重要的一个特征就是数据双向绑定, 而 React 是单向数据流, 状态驱动视图, 它没有纯粹意义上的 VM, 它有的只是用属性和状态去映射视图, 很明显不是 MVVM. 顶多也就是 MVVM 中的 V 层.对于 Vue从技术上讲，Vue.js 主要关注 MVVM 模式的 ViewModel 层, 它通过双向数据绑定连接视图和模型, 它更像是 MVVM 但并未完全按照 MVVM 去实现, 只是借鉴了 MVVM 中的一些思想.
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

2.什么是MVC？

• M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。
• V - View 视图，显示数据的页面，一般为html。
• C - Controller 控制器： 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。
MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

3.讲一下MVVM 和 MVC的区别

“MVVM与MVC的区别有：1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。”
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
具体的演变流程：传统MVC ——> MVP ——> MVVM

4.vue3和vue2不同点

1. 响应式系统的重构，使用proxy替换Object.defineProperty属性，优势：

- Proxy可直接监听 对象添加/删除属性;

- Proxy直接监听 数组的变化

- Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

2. 新增组合式API(Composition API)，更好的逻辑重用和代码组织:

- setup配置

- ref与reactive

- watch与watchEffect

- provide与inject

3. 重构虚拟 DOM, diff算法

4. 生命周期更名

Vue3.0提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate ===> setup()

created      ===> setup()

beforeMount  ===> onBeforeMount

mounted      ===> onMounted

beforeUpdate ===> onBeforeUpdate

updated      ===> onUpdated

beforeUnmount===> onBeforeUnmount

unmounted    ===> onUnmounted

5. 新的内置组件: Fragment，Teleport，Suspense

6. 移除:

- 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes

- 移除v-on.native修饰符,

- 移除过滤器（filter）

- 不再建议使用mixins, 组合式函数本身就是更好的mixin代替品

5.vue2.x的响应式原理

• 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

• 存在问题:

1.新增属性、删除属性, 界面不会更新。

2.直接通过下标修改数组, 界面不会自动更新。

补充：vue2中$set可以解决这些问题。

6. vue3.0的响应式原理

• 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、添加、删除等。

• 通过Reflect（反射）: 对源对象的属性进行操作。

new Proxy(data, {

    // 拦截读取属性值

    get (target, prop) {

        return Reflect.get(target, prop)

    },

    // 拦截设置属性值或添加新属性

    set (target, prop, value) {

        return Reflect.set(target, prop, value)

    },

    // 拦截删除属性

    deleteProperty (target, prop) {

        return Reflect.deleteProperty(target, prop)

    }

})

proxy.name = 'tom' 

7.Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？

a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。

Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。
这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在Vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的，这是defineProperty的局限性。
b. Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
c. 响应式是惰性的

在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

8.Vue3.0 编译做了哪些优化？

生成 Block tree

Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的，单个组件内部 需要遍历该组件的整个 vnode 树。
在2.0里，渲染效率的快慢与组件大小成正相关：组件越大，渲染效率越慢。并且，对于一些静态节点，又无数据更新，这些遍历都是性能浪费。
Vue.js 3.0 做到了通过编译阶段对静态模板的分析，编译生成了 Block tree。
Block tree是一个将模版基于动态节点指令切割的嵌套区块，每个 区块内部的节点结构是固定的，每个区块只需要追踪自身包含的动态节点。
所以，在3.0里，渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。

slot 编译优化

Vue.js 2.x 中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。
Vue.js 3.0 优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。
动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。

diff算法优化

9.VUE2 第一次加载页面会触发哪几个钩子函数？

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩
子函数

10.Vue3 的优势

性能更好

体积更小

更好地 ts 支持

更好的代码组织

更好的逻辑抽离

更多新的功能

11.Vue3 新特性有哪些？

1、性能提升

响应式性能提升，由原来的 Object.defineProperty 改为基于ES6的 Proxy ，使其速度更快，消除警告。

重写了 Vdom ，突破了 Vdom 的性能瓶颈。

进行模板编译优化。

更加高效的组件初始化。

2、更好的支持 typeScript

有更好的类型推断，使得 Vue3 把 typeScript 支持得非常好。

3、新增Composition API

Composition API 是 vue3 新增的功能，比 mixin 更强大。它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强。

4、新增组件

Fragment 不再限制 template 只有一个根几点。

Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。

Supense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。

5、Tree-shaking：支持摇树优化

摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快。

6、Custom Renderer API： 自定义渲染器

实现 DOM 的方式进行 WebGL 编程。

12.vue3 组合式API生命周期钩子函数有变化吗？

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内。

值得注意的是组合式API中的钩子函数，通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子，需要注册，并且只能在 setup 期间同步使用，因为它们依赖于内部的全局状态来定位当前组件实例。

13.Options API 是什么？

vue2 中我们把一个 vue 文件中 data、methods、props、mounted、computed 等定义属性和方法，共同处理页面逻辑，这种方式叫做 Options API。

这种方式开发的复杂组件，同一个功能的往往需要在不同 vue 配置项中定义属性和方法，代码比较分散。如果功能比较复杂，维护代码的时候往往会很难分清每个方法对应的功能，增加了代码维护成本。所以 vue3 舍弃了 Options API ，换用 Composition API。

14.Composition API 是什么？

Composition API 是 vue3 新增的，所以 vue2 没有。在 Composition API 中，根据代码逻辑功能来组织的，一个功能所定义的所有 API 都会放到一起，这样即使功能复杂，代码量增大，都可以一下子定位到某个功能的所有代码，代码维护方便。它的最大特点就是：高内聚，低耦合。

15.Composition API 与 Options API 有什么区别？

vue3 仍然支持 options API，但我们更推荐使用 Composition API。优劣比较：

更好的可编程性。

更优的代码组织。

更好的逻辑抽象能力。

对 tree-shaking 友好，代码也更容易压缩。

没有 this

16.watch 和 watchEffect 的区别？

watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：

watch 需要传入监听的数据源，而 watchEffect 可以自动手机数据源作为依赖。

watch 可以访问倒改变之前和之后的值，watchEffect 只能获取改变后的值。

watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。

17.Vue2中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法，get set 方法。
简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

18.vue2的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
beforeCreate: vue元素的挂载元素el和数据都为undefined，还未初始化；
created：vue实例的数据对象data有了，el还没有；
beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.message还未替换；
mounted：vue实例挂载完成，data.message成功渲染。
更新前后：data变化时会触发beforeUpdate和updated方法；
销毁前后：beforeDestory和destoryed，

beforeDestroy:

• 在实例销毁之前调用。
• 在这个阶段，实例仍然是完全可用的。
• 允许开发者在组件销毁之前执行一些清理工作

 beforeDestroy() {
    // 在组件销毁前执行的逻辑

    // 示例1: 清理定时器
    // 在 `beforeDestroy` 钩子中调用 `cleanupTasks` 方法，用于清理定时器等任务，以防止在组件销毁后出现内存泄漏。
    this.cleanupTasks();

    // 控制台输出调试
    console.log('Component is about to be destroyed.');
  }

destroyed:

• 在实例销毁之后调用。
• 在这个阶段，实例的所有指令都已解绑，所有的事件监听器都已移除，所有的子组件实例也都被销毁。
• 允许开发者在组件已经解绑定所有东西之后执行最终的清理工作

destroyed() {
    // 在组件销毁后执行的逻辑

    // 示例1: 释放资源
    // 在 `destroyed` 钩子中调用 `releaseResources` 方法，用于释放资源等最终清理工作。
    this.releaseResources();

    // 控制台输出调试
    console.log('Component has been destroyed.');
  },

19.vue2生命周期的作用：

他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。
生命周期钩子的一些使用方法：
beforeCreate：loading事件，在加载实例时触发。
created：初始化完成事件，异步请求。
mounted：挂载元素，获取dom节点
uptaded：对数据统一处理
beforeDestory：确认事件停止。
nextTick：更新数据后立即操作dom。

20.vue2 如何升级到 vue3 ?

如果是把之前的 vue2 项目升级到 vue3 ，先卸载旧版本的 vue-cli，安装最新版本。安装完成之后，检查 vue 的版本。然后需要注意，把项目中 vue3 发生改变或被废弃的特性需要进行修改。如：

$children 被 vue3 移除，使用 $children 的需要替换为 $ref。

filters 被移除，更改为 computed 。

$destory 被移除，需要删除掉。

插槽的新变化。

Vuex 使用发生改变。

vue-router 使用发生改变等等。

21.v-if 和 v-for 的优先级哪个高？

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

在 vue2 中 v-for 和 v-if 同时出现时，可放在一个标签内
在 vue3 中这样写会报错，就是因为 v-if 的优先级更高，写到一个标签渲染的情况下会导致报错

22.script setup 是什么？

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。使用 script setup 语法糖的特点：

属性和方法无需返回，可以直接使用。

引入组件的时候，会自动注册，无需通过 components 手动注册。

使用 defineProps 接收父组件传递的值。

useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件。

默认不会对外暴露任何属性，如果有需要可使用 defineExpose 。

23.vue3常用API有哪些

vue3支持webpack5的tree-shaking，因此现在所有api都需要导入后再使用：

ref：

常用：ref()、isRef()、unRef()、toRef()、toRefs()、shallowRef()

注：toRef()、toRefs()用在解构时仍希望数据为响应式时使用

reactive：

常用：reactive()、isReactive()、shallowReactive()、isProxy()、toRaw()
readonly：只读，不可修改
computed：

//写法1：接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象
const a = computed(()=>{})
//写法2：接受一个具有get、set函数的对象，用来创建可写的ref对象
const b = computed({
 get: () =>{},
 set: (newValue) => {},
})

watch：

const obj = reactive( {a:{b:1}} )
const e = ref('e')
const f = ref('f')
watch( obj, (newValue,oldValue) => {})
watch( ()=>obj.a.b, (newValue,oldValue) => {}) //监听对象里的某个属性，必须用getter返回，即必须写成()=>obj.a.b的形式（直接写成obj.a.b会报错）
watch( ()=>_.cloneDeep(obj), (newValue,oldValue) => {}) //深拷贝过后,监听的newValue,oldValue才会是前后值不一样,否则newValue,oldValue打印值一样
watch( [e,f], (newValue,oldValue) => {})//vue3新增的写法，可同时监听多个ref数据，写成数组形式
const stop = watch(obj,()=>{}) 
stop()  //停止监听

watchEffect：立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数（写在watchEffect里的数据会被收集为其依赖，当这些依赖改变时才会触发watchEffect）

const stop = watchEffect(() =>{},{flush:'post'})   //对写在回调函数里的所有数据监听
stop()  //停止监听

24.Vue3中的Teleport是什么？它的作用是什么？

Vue3中的Teleport 是控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级。

25.Vue3中的Suspense是什么？它的作用是什么？

Vue3中的Suspense是Vue3中新增的一个组件，它的作用是实现延迟加载和错误处理。在组件中加入Suspense，可以让异步组件可以渲染出加载状态，并且如果异步组件加载时出现错误，也能够处理这些错误。

26.什么是响应式系统？ Vue3中的响应式系统有哪些更新？

响应式系统允许在状态发生变化时更新视图。Vue3中的响应式系统更新包括Proxy、Reflect和WeakMap等。

27.Vue3 Composition API是什么？它的作用是什么？

Vue3 Composition API是Vue3中的一个新特性，它的作用是将组件中的逻辑分解成可复用的可组合函数。通过使用Composition API，可以更好地组织代码和管理状态。

28.3.Vue3 生命周期

1. Options API生命周期

2. Composition API生命周期

29.如何看待composition API 和options API

1. Composition API 更好的代码组织，更好的逻辑复用，更好的类型推到
2. 小型项目，业务逻辑简单，用Options API
3. 中大型项目，业务逻辑复杂的，用Composition API
4. Composition API 是为了解决复杂业务逻辑而设计的
5. 类似React Hooks

30.解释一下ref toRef和toRefs？

1. ref
   1. 生成值类型的响应式数据
   2. 可用于模板和reactive
   3. 通过.value修改值
2. toRef
   1. 针对一个响应式对象（reactive封装）的prop
   2. 创建一个ref，具有响应式
   3. 两者保持引用关系
3. toRefs，避免模板中导出都是state
   1. 将响应式对象（reactive封装）转换成普通对象
   2. 对象的每个prop都是对应的ref
   3. 两者保持引用关系
4. 最佳使用方式
   1. 用reactive做对象的响应式，用ref做值类型的响应式
   2. setup中返回toRefs(state)，或者toRef(state, 'prop')
   3. ref的变量命名都用xxxRef
   4. 合成函数返回响应式对象时，用toRefs

31.为何需要toRef toRefs

1. 初衷：不丢失响应式的情况下，把对象数据进行分解和扩散
2. 前提：针对的事响应式对象，不是普通对象
3. 注意：不创造响应式，而是延续响应式

32.setup中如何获取组件实例？

1. setup和其他Composition API中都没有this
2. 在Options API中仍然可以使用this
3. Composition API中可以使用getCurrentInstance方法获取

33.Composition API和React Hooks的对比

1. 前者setup(生命周期create)只会被调用一次，后者函数会被多次调用
2. 前者无需useMemo，useCallback，因为setup只调用一次
3. 前者无需考虑调用顺序，后者需要保证hooks的顺序一致

34.Vue3中的事件修饰符有哪些？

Vue3中的事件修饰符与Vue2基本相同，包括stop、prevent、capture和self等。

35.Vue3中如何实现动态组件？

Vue3中使用 元素和 v-bind:is 属性来实现动态组件。例如， 。

36.Object.defineProperty 和 Proxy 的区别

Object.defineProperty 和 Proxy 的区别如下:

1.Proxy 可以直接监听对象而非属性；
2.Proxy 可以直接监听数组的变化；
3.Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty 只能遍历对象属性直接修改

37.Vue3中的指令有哪些？

Vue3中的指令包括v-if、v-for、v-bind、v-on、v-html、v-model、v-show、v-slot、v-text等。

38.为什么vue3需要对引入的组件使用markRaw？

vue2中 is是通过组件名称切换的，vue3中setup是通过组件实例切换的。直接把组件实例放到reactive中代理，vue会发出警告。告知我们可以通过shallowRef 或者 markRaw 跳过proxy 代理。对组件实例进行响应式代理毫无意义，且浪费性能

markRaw：标记一个对象，使其不能成为一个响应式对象。
toRaw：将响应式对象（由 reactive定义的响应式）转换为普通对象。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

<template>
	<component :is="currentComponent"></component>
</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
let tabList = reactive([
	{name:'组件A',com:markRaw(A)},
	{name:'组件B',com:markRaw(B)},
]);

39. Vue3如何进行状态管理？

Pinna是vue的最新状态管理工具, 它允许跨组件或页面共享状态，实现和Vuex一样的数据共享，用来替代vuex，并且更加简洁和易于使用。Pinia 支持 Vue 3，并且与 Vue 2 也有很好的兼容性。

安装依赖包

npm install pinia

创建 Pinia Store

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

在main.js中引入pinia

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

在需要使用的组件中引入store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();

const { count, doubleCount } = counterStore;
const { increment } = counterStore;
</script>

40.为何VUE3使用组合式API？

由于vue2有局限性：

组件的逻辑膨胀导致组件的可读性变差；

无法跨组件重用代码；

vue2对TS的支持有限

41.组合式API的优点？

composition API是根据逻辑相关性组织代码的，提高可读性和维护性

代码量少，更好的重用逻辑代码

没有引入新的语法，只是单纯函数

异常灵活

工具语法提示友好，因为是单纯函数所以很容易实现语法提示、自动补偿

更好的Typescript支持

在复杂功能组件中可以实现根据特性组织代码，代码内聚性强

组件间代码复用

42.解释一下Vue 3中的 setup

setup函数接收两个参数，分别是 props 和 context。

1、props：值为对象，包含: 组件外部传递过来。切组件内部声明接收了的属性。需要注意的是，Vue3中的 props 是只读的，即在setup 函数中不能修改 props 的值。如果需要修改传递过来的数据，可以使用响应式对象或ref。

2、context：上下文对象。

attrs:值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。相当于this.$attrs

slots:收到的插槽内容，相当于this.$slots

emit:分发自定义事件的函数，相当于this.$emit

43.provide与inject

1、provide和inject是一对新的API，用于在父组件中提供数据，然后在子组件中注入数据。

2、provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

3、inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }
​
//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
    const info = inject("info")
    inject('info',"设置默认值")
    return {
        info
    }
  }
​
//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。

44.shallowReactive 与 shallowRef

1、shallowRef：只处理基本数据类型的响应式

2、shallowReactive：只处理对象最外层属性的响应式（浅响应式）

3、浅层作用的响应式数据处理：只处理第一层对象的数据，再往下嵌套的数据，操作数据是不起作用的

4、shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。

45.readonly 与 shallowReadonly

readonly与shallowReadonly都是让响应式数据只具备读的能力,后者是浅层次的只读,也就是只对数据对象第一层起作用,深层次的嵌套,当时用shallowReadonl()处理时,深层次数据支持被修改

1、readonly: 让一个响应式数据变为只读的 (深只读)，让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值的数据都不允许修改

2、接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理

3、shallowReadonly: 让一个响应式数据变为只读的 (浅只读)，接收一个响应式数据,经过shallowreadonly的处理,变成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改

4、让一个响应式数据变为只读能力(浅只读).

46.vue3中的父传子，子传父

1、父传子：

1、在父组件的子组件标签上通过：传到子组件的数据名=‘需要传递的数据’

2、子组件中通过props进行接收并在模板中使用

2、子传父：

1、子组件触发事件通过setup函数的第二个参数，context.emit来实现子传父

47.ref 和 reactive 区别?

1. 简单来说, ref通常用来定义基本类型数据, reactive用来定义对象（或者数组）类型数据

注: ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

2. 使用方面: ref 操作数据需要.value取值，template模板中不需要。

reactive都不需要.value取值
3. 数据传递方面:

解构赋值会使reactive丢失响应性, 而{ref(1), ref(2)}不会

4. 原理角度:

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

48.vue3响应式数据的判断？

isRef: 检查一个值是否为一个 ref 对象

isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

49.如何理解toRef

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

语法：const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

50.vue3有哪些新的组件？

1.Fragment
在Vue2中: 组件必须有一个根标签

在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

好处: 减少标签层级, 减小内存占用

2.Teleport
什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3.Suspense
等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default 与 fallback

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

51.待继续补充

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~