2024前端Vue面试题

1.Vue2.0 双向绑定的原理与缺陷

Vue响应式指的是：组件的data发生变化，立刻触发视图的更新

原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。 通过原生js提供的监听数据的API，当数据发生变化的时候，在回调函数中修改dom

核心API：Object.defineProperty

Object.defineProperty API的使用 作用: 用来定义对象属性

特点： 默认情况下定义的数据的属性不能修改 描述属性和存取属性不能同时使用，使用会报错

响应式原理： 获取属性值会触发getter方法 设置属性值会触发setter方法 在setter方法中调用修改dom的方法

Object.defineProperty的缺点

1. 一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出

2. 不能监听对象的新增属性和删除属性

3. 无法正确的监听数组的方法，当监听的下标对应的数据发生改变时

2.Vue3.0 实现数据双向绑定的方法

Vue3.0 是通过Proxy实现的数据双向绑定，Proxy是ES6中新增的一个特性，实现的过程是在目标对象之前设置了一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

用法： ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。 var proxy = new Proxy(target, handler) target: 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler: 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

`Object.defineProperty` 的问题：在Vue中，`Object.defineProperty`无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。目前只针对以上方法做了hack处理，所以数组属性是检测不到的，有局限性Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里，是通过递归以及遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。

Proxy的两个优点：可以劫持整个对象，并返回一个新对象，有13种劫持

3.vue 的 keep-alive

``作用：缓存组件，提升性能，避免重复加载一些不需要经常变动且内容较多的组件。

``的使用方法：使用``标签对需要缓存的组件进行包裹，默认情况下被``标签包裹的组件都会进行缓存，区分被包裹的组件是否缓存有两种方法，第一种是给keepalive 添加属性，组件名称指的是具体组件添加的name，不是路由里面的name。include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)。exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)。第二种也是最常用的一种是，和路由配合使用：在路由中添加meta属性。 使用keepalive导致组件不重新加载，也就不会重新执行生命周期的函数，如果要解决这个问题，就需要两个属性进入时触发：activated 退出时触发：deactivated

``适用的场景：首页展示固定数据的组件，比如banner九宫格

4.Vue 中 $nextTick 作用与原理

Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。

$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。

$nextTick的原理：$nextTick本质是返回一个Promise

应用场景：在钩子函数created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中

5.v-if 和 v-show区别

作用: 都是控制元素隐藏和显示的指令

区别：

v-show: 控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏

v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示

应用： v-show: 适合使用在切换频繁显示/隐藏的元素上 v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上

6.Vue 列表为什么加 key

为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。

key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了

7.vue-router 实现懒加载的方法

vue-router 实现懒加载的方法有两种：

ES6的impot方式: component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),

VUE中的异步组件进行懒加载方式: component: resolve=>(require(['../views/About'],resolve))

vue-router 实现懒加载的作用：性能优化，不用到该路由，不加载该组件。

8.vue钩子函数

钩子函数用来描述一个组件从引入到退出的全过程中的某个过程，整个过程称为生命周期。

钩子函数按照组件生命周期的过程分为，挂载阶段=>更新阶段=>销毁阶段。

每个阶段对应的钩子函数

挂载阶段：beforeCreate、created、beforeMounted、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

每个阶段特点与适合做什么

created：实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组常用于简单的ajax请求，页面的初始化

beforeMount：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

mounted：实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问常用于获取VNode信息和操作，ajax请求

beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作避免在这个钩子函数中操作数据，可能陷入死循环

beforeDestroy：实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例，常用于销毁定时器、解绑全局事件、销毁插件对象等操作

父子组件钩子函数在三个阶段的代码执行顺序

挂载：父亲created> 子created > 子mounted> 父亲mounted>

更新：父亲beforeUpdate > 子beforeUpdated > 子updated > 父亲updated

销毁：父亲beforeDestroy> 子beforeDestroy > 子destroyed> 父destroyed

9.Vue的响应式原理

Vue的响应式原理基于Object.defineProperty方法，通过getter和setter来观察和响应数据的变化。当一个普通的JavaScript对象被用作Vue实例的data对象时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty将它们转化为getter和setter。

当属性被访问时，getter函数会被调用，这个函数可以用来实时计算属性的值。而在属性被修改时，setter函数会被调用，这个函数可以用来监听属性的变化，并触发相应的更新操作。

当一个属性被访问时，getter函数会返回属性的当前值。如果这个值与上一次的值不同，那么Vue就会知道属性值已经改变，并触发相应的更新操作。

当一个属性被修改时，setter函数会被调用，并传入一个新的值作为参数。在setter函数中，可以监听到属性的变化，并触发相应的更新操作。

通过这种方式，Vue可以自动追踪依赖关系，并在数据发生变化时自动更新视图。这就是Vue的响应式原理。

10.Vue的组件通信方式

Vue的组件通信方式有多种，包括props、emit/on、vuex、ref/parent/children、attrs/listeners和provide/inject等。

1. props：父组件通过props的方式向子组件传递数据，子组件通过props接收数据。
2. emit/on：子组件通过emit触发事件，父组件通过on监听事件，实现子组件向父组件传递数据。
3. vuex&#