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 将数组的原型指向了一个特殊的对象，该对象包含了重写后的数组变异方法，这样就能够确保当调用这些方法时，能够触发数据更新。