vue面试题1

VUE1

1.那你能讲一讲MVVM吗?

MVVM是 Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

2.简单说一下Vue2.x响应式数据原理

Vue在初始化数据时,会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅).

3.那你知道Vue3.x响应式数据原理吗?

Vue3.x改用Proxy替代 Object.defineProperty,因为Proxy可以直接监听对和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器瓜商主点持续的性能优化。

4.Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢?

判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理，这样就实现了深度观测。

5.监测数组的时候可能触发多次get/set，那么如何防止触发多次呢?

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等,只有满足以上两个条件之一时，才有可能执行trigger。

6.再说一下vue2.x中如何监测数组变化

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写;指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

7.nextTick如何使用？

nextTick是将回调函数延迟在下一次DOM更新数据过后进行调用。简单的理解就是：当数据更新之后，DOM进行渲染之后将会自动进行执行该函数。

8.说一下Vue的生命周期

1. beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data, methods、computed以及watch 上的数据和方法都不能被访问。

2. created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做―些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。

3. beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

4. mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到-Dom节点，使用$refs属性对Dom进行操作。

5. beforeupdate发生在更新之前，也就是响应式数据发生更新,虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

6. updated发生在更新完成之后，当前阶段组件 Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

7. beforeDestroy 发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

8. destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

9.你的接口请求，一般放在哪个生命周期中?

接口请求―般放在mounted中,但需要注意的是服务端渲染时不支持mounted ,需要放到created 中。

10.再说一下Computed和Watch

1. computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

2. Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep: true选项，这样便会对对象中的每―项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

11.说一下v-if和v-show的区别

1. 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display) ,切换当前DOM的显示和隐藏。

12.组件中的data为什么是一个函数?

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

13.说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value、 input 方法的语法糖。可以通过model属性的prop 和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

14.Vue事件绑定原理说一下

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

15.Vue2.x和Vue3,x渲染器的diff算法分别说一下

diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图，所以 diff 算法本质上就是比较两个js对象的差异

1. 同级比较，再比较子节点

2. 先判断—方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)

3. 比较都有子节点的情况(核心diff)

4. 递归比较子节点

   Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children 的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比 React的.Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

   Vue3在创建VNode时就确定其类型，以及在 mount/patch的过程中采用位运算来判断一个VNode 的类型，在这个基础之上再配合核心的Diff 算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)

16.再说下虚拟Dom以及key属性的作用

用js生成的Dom，key：key的作用是尽可能的复用DOM元素。

17.keep-alive了解吗

在Vue中，<keep-alive>是一个抽象组件，用于缓存并保留组件的状态，以便在组件切换时重新渲染。它提供了一种简单的方式来优化组件的性能和响应性。

当一个组件被包裹在<keep-alive>标签中时，它将被缓存并保留在内存中，而不是被销毁。这意味着组件的状态、数据和DOM结构都会被保留，即使组件在切换时不再处于活动状态。

下面是一些关于<keep-alive>的详解：

1. 使用方式：

   html

   Copy

   <keep-alive>
     <component-to-cache></component-to-cache>
   </keep-alive>

   在上述示例中，<component-to-cache>是要缓存的组件。

2. 生命周期钩子：

   当组件被包裹在<keep-alive>中时，它的生命周期钩子会发生变化。常见的钩子函数包括：

   • activated：组件被激活时调用。

   • deactivated：组件被停用时调用。

   这些钩子函数可以用来执行与组件状态相关的操作，例如数据的初始化和清理。

3. 缓存策略：

   <keep-alive>可以通过不同的属性来配置缓存策略。常用的属性包括：

   • include：指定要缓存的组件名称列表，只有在列表中的组件才会被缓存。

   • exclude：指定不需要缓存的组件名称列表，这些组件将被排除在缓存之外。

   • max：指定最大缓存组件的数量，当超过指定数量时，最早缓存的组件将被销毁。

   通过这些属性，可以根据需要对组件的缓存进行灵活的控制。

4. 访问缓存的组件：

   可以通过<keep-alive>的$refs属性来访问缓存的组件实例。例如：

   javascript

   Copy

   this.$refs.componentRef // 访问缓存的组件实例

   这允许你在需要时与缓存的组件进行交互。

使用<keep-alive>可以有效地提高组件的性能，特别是在组件经常切换或包含复杂状态的情况下。缓存组件可以减少不必要的重新渲染和重新计算，提高应用的响应速度和用户体验。

18.带有子组件和父组件的vue更新过程

1. 加载渲染过程：父beforeCreate> 父created > 父beforeMount > 子beforeCreate > 子created >子beforeMount > 子mounted > 父mounted

2. 子组件更新：父beforeUpdate > 子beforeUpdate > 子updated > 父updated

3. 销毁过程：父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

19.Vue2.x组件通信有哪些方式?

1. 父子组件通信：父>子props；子>父$on.$emit。获取父子组件实例$parent、$children。Ref 获取实例的方式调用组件的属性或者方法。

2. Vuex通信

20.SSR了解吗?

1. SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

2. SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持 beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js 的运行环境。还有就是服务器会有更大的负载需求。

21.你都做过哪些Vue的性能优化，编码阶段

1. 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher

2. v-if 和v-for不能连用

3. 如果需要使用v-for给每项元素绑定事件时使用事件代理。

4. key保持唯一性

5. 防抖，节流

6. 第三方模块按需导入

7. 使用懒加载

8. 图片懒加载

22.hash路由和 history路由实现原理说一下

1. location.hash 的值实际就是URL中#后面的东西。

2. history 实际采用了HTML5中提供的API来实现，主要有 history.pushState()和history.replaceState().

3.