Vue基础面试题（一）

1.Vue的基本原理

• Vue.js的核心原理在于其响应式的数据绑定机制，当创建一个Vue实例时，Vue会遍历每个属性，用Object.defineProperty转化为getter和setter。这样使得Vue可以追踪属性的变化，在属性被修改和访问时通知变化。
• 每个组件也都有相应的watcher实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2.双向数据绑定的原理

• Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。（再加上响应式数据的绑定原理）

3.使用 Object.defineProperty() 来进行数据劫持有什么缺点？

• 通过数组下标修改数组数据以及为对象添加新的属性这些操作无法拦截。
• Vue3中使用Proxy对对象进行代理，实现数据劫持。它可以完美的监听到任何方式的数据改变。

4.MVVM、MVC、MVP的区别

这三者都是框架模式，设计目的都是为了解决Model和View的维护和耦合问题

• MVC通过分离Model、View和Controller的方式来组织代码结构。模式较早主要是应用在后端，在前端的早期也有应用。优点是分层清晰，缺点是数据流混乱，难维护。
• MVP模式是MVC的进化，使用Presenter层作为中间层负责MV通信，解决了两者耦合问题。但Presenter层过于臃肿会导致维护问题。
• MVVM模式中，Model和View并无直接关联，是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。这种模式在前端领域有着广泛的应用，实现了Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作。

5.Computed 和 Watch 的区别

• 计算属性可以从组件数据中派生出新的数据，可以简化模板中的复杂表达式，有返回值，支持缓存（只有依赖的数据发生改变才会重新进行计算），不支持异步操作，如果一个属性依赖于其它属性，一般会使用computed。
• watch主要是监听数据的变化（数据必须是data中声明的数据或者父组件传递过来的数据），它没有返回值，不支持缓存（数据变化时，就会执行相应的操作），支持异步监听，可以设置immediate，deep（用在复杂的数据类型中）等选项，当数据变化时执行异步或开销较大的操作时使用watch。

6.Computed 和 Methods 的区别

• computed方法是带缓存的，数据发生改变时才会重新进行计算，而methods里的函数每次调用都会执行。
• computed 适用于根据已有数据衍生新的数据，Methods 适用于处理事件和复杂逻辑的场景。

7.slot是什么？有什么作用？原理是什么？

• 作用：让父组件可以向子组件指定位置插入html结构，是组件通信的一种方式。适用于父组件=>子组件
• 默认插槽：父组件中传递相关内容，子组件中定义插槽占坑。
• 具名插槽：给插槽起一个名字。
• 作用域插槽：数据在定义插槽的自身，但根据数据生成的结构需要由使用者来决定。

8.如何保存页面的当前的状态

• 将状态存储在LocalStorage/SessionStorage
• 路由传值
• 单页面渲染
• 使用Vue的keep-alive

9.常见的事件修饰符及其作用

• stop：阻止事件冒泡（点击子元素时，父元素和子元素同时发生点击事件）–从里往外
• prevent：阻止默认行为（点击默认自动跳转到对应链接）
• capture：存在capture从外到里捕获，剩下的从内到外输出。
• self：只会触发自己范围内的事件，不包含子元素。
• once：只触发一次回调

10.v-if、v-show、v-html 的原理

• v-if使用时会调用addifCondition方法，根据条件决定是否生成虚拟节点，如果为false，生成节点时就会忽略对应节点。在实际渲染的过程中就没有虚拟DOM和实际DOM，就不会渲染到页面上。
• v-show是无论条件是否满足，都会生成对应的虚拟节点并渲染实际的DOM节点。只是在渲染的过程中通过display属性来控制节点的显示与隐藏。
• v-html：首先清除目标元素下的所有子节点，然后使用v-html的值作为新的HTML内容，然后通过内部方法调用来设置元素的innerHTML属性。

11. v-if和v-show的区别

• v-show隐藏是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。
• v-if DOM编译和卸载的过程， v-show是基于css的。
• v-if消耗搞，适用于不频繁切换元素显示，业务复杂。v-show消耗低，适用于频繁切换。

12. data为什么是一个函数而不是对象

• Vue规定data必须是一个函数，这个函数必须返回一个新的对象。每次创建实例的时候就会调用data函数来生成新的数据对象，确保每个实例都有自己独立的数据副本，避免数据共享和相互污染的问题（防止一个实例变化影响其他实例），使得组件更好维护。

13.对keep-alive的理解，它是如何实现的，具体缓存的是什么？

• keep-alive是Vue中的一个内置缓存组件，避免组件内的数据被重复渲染，提高性能和用户体验。适用于需要频繁切换的动态组件和路由组件。

14.$nextTick 原理及作用

• $nextTick是vue提供的一个方法，主要用于DOM更新完成后执行回调函数，他解决了DOM更新和数据变化的不同步问题。
• 常用于需要在数据变化后立即操作DOM的场景，避免因 Vue 的异步更新机制导致的状态不同步问题。

15.Vue中封装的数组方法有哪些，其如何实现页面更新

在 Vue 中，对于对象的响应式处理是通过 Object.defineProperty 来实现的，但是这种方式并不能直接监听到数组内部变化、长度变化以及截取操作等。为了让 Vue 能够监听到数组的这些变化，Vue 对数组进行了特殊处理。

• 重写数组方法：push、pop、shift、unshift、splice、sort 和 reverse。
• 使用__proto__或者prototype：Vue 将数组的原型指向了一个特殊的对象，该对象包含了重写后的数组变异方法，这样就能够确保当调用这些方法时，能够触发数据更新。