当前位置：首页 > news >正文

补充前端面试题（二）

news 文章来源：https://blog.csdn.net/m0_62877814/article/details/129034212 2024/11/24 3:33:20

#$set

数据变化视图不更新问题, 当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为 Object.defineProperty()限制，监听不到变化。

解决方式：this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么 value)

$set 的实现原理

如果目标是数组，直接使用数组的 splice 方法触发相应式；

如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

补充延伸：vue 源码里缓存了 array 的原型链，然后重写了这几个方法，触发这几个方法的时候会 observer 数据，意思是使用这些方法不用再进行额外的操作，视图自动进行更新。推荐使用 splice 方法会比较好自定义,因为 splice 可以在数组的任何位置进行删除/添加操作, 总共提供了 7 个方法都可实现响应式： splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

格式： $set(对象，属性名，值)

Vue 组件之间的通信方式

父向子通信: 在子组件的标签上通过自定义属性传递父组件的数据,子组件的内部通过 props 接收父向子传递的数据

子向父通信: 在子组件的标签上自定义事件,自定义事件的值是父组件的方法,在子组件内部通过 this.$emit()方法触发事件，第一个参数为自定义事件,第二个参数可以传递子组件的内部数据,此时父组件中的方法就可以执行了,

兄弟组件通信: 可以采取 eventbus 实现数据传递,但是这种方式我们在开发中基本不用,多组件共享数据都是用的 vuex

后代组件通信: 可以采取依赖注入的方式,在祖先组件中通过 provide 提供数据,在后代组件中通过 inject 接收数据

无关联关系组件通信: 在开发中我们都是使用 vuex

组件间通信的方案

整理vue中 8 种常规的通信方案

父子

props +$emit

v-model

.sync

使用 ref

兄弟

EventBus

祖先后代

$parent 或$root

attrs 与 listeners

Provide 与 Inject

Vuex

vue 的 mixin 的理解

mixin 是什么

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

#Vue 中的 mixin

mixin，中文：混入。它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

举例：

组件 A 和组件 B 中的 methods 有相同的函数，如何做优化？

mixin 本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

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

最核心的原因是性能，展开来说如下。

因为 Proxy 代理的直接是整个对象，例如对象中有 100 个属性，用 defineProperty 劫持至少需要循环 100 次，而 proxy 至少一次搞定。

defineProperty 对数组中存在大量元素的劫持操作性能不好，所以 Vue2 并没有直接使用 defineProperty 对数组进行劫持，而是提供了额外的方法来处理数组的响应式，例如 $set，其实换成 proxy 就不存在这个问题了，当然 $set 方法也就没有必要存在了。

Vue2 中，劫持数据的操作在实例创建完成就已经进行完毕了，所以对对象后续新增的属性是劫持不到的，也就意味着后续新增的属性是不具备响应式能力的，所以 Vue 不得不提供了 $set 方法。而换成 proxy 就不存在这个问题了，因为它劫持的整个对象，后续添加的属性也是属于这个对象的，那么 $set 也就没有必要了（干掉 $set 方法本身也是性能的一个体现）。

动态给 vue 的 data 添加一个新的属性时会发生什么？怎样解决？

Vue2 中，劫持数据的操作在实例创建完成就已经进行完毕了，所以对对象后续新增的属性是劫持不到的，也就意味着后续新增的属性是不具备响应式能力的，可以通过 this.$set 或 Vue.set 来解决，语法是 Vue.set(对象, 属性, 值)。

Vue3 响应式的原理换成了 proxy 就不存在这个问题了，因为它劫持的是整个对象，而后续添加的属性也是属于这个对象的。

解决方案

Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新，可采取下面三种解决方案：

Vue.set()

Object.assign()

$forcecUpdated()

Vue 中的$nextTick

$nextTick 是干什么的？

答：页面的 DOM 还未渲染，这时候也没办法操作 DOM，如果想要操作 DOM，需要使用 nextTick 来解决这个问题

实现原理：nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout 的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

使用场景：

1、在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的 DOM 结构的时候，这个操作就需要方法在的回调函数中。 2、在 vue 生命周期中，如果在 created()钩子进行 DOM 操作，也一定要放在的回调函数中。

使用方法：

this.$nextTick(()=>{// 获取数据的操作...})