前端面试-Vue2

1.MVC、MVVM

• MVC（Model-View-Controller）
  Controller负责将Model的数据用View显示出来

• MVVM（Model-View-ViewModel）
  （1）Model：模型层，负责处理业务逻辑以及和服务器端进行交互
  （2）View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
  （3）ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
  （4）ViewModel包含DOM Listeners和Data Bindings。

   	a. DOM Listeners: 实现了页面与数据的绑定，当数据发生改变时，会自动渲染页面。
   	b. Data Bindings：实现了数据与页面的绑定，当页面对数据进行操作时，dom和model也发生相应的改变。
   	c. vue实现：v-on事件绑定，通过事件操作数据时，v-model会发生相应的改变
  

• 区别
  MVVM实现了数据与页面的双向绑定，MVC只实现Model和View单向绑定。
  MVVM实现了页面业务逻辑和渲染之间的解耦，也实现了数据与视图的解耦，并且可以组件化开发。

2. Vuex
专门为vue提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。

• 核心模块
  （1）State：存储数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态。
  （2）Getter：允许组件从Store中获取数据，mapGetter辅助函数是将store中的getter映射到局部计算属性。
  （3）Mutations：唯一更改store中状态的方法，且必须是同步函数。（类似于事件，每个Mutation都有一个字符串的事件类型和一个回调函数）
  （4）Actions：用于提交mutation，而不是直接变更状态，可以包含任意异步操作。
  （5）Modules：允许将单一的Store拆分为多个store且同时保存在单一的状态数中。
• 工作流程
  （1）在vue组件里，通过dispatch来触发actions提交修改数据的操作
  （2）再通过actions的commit来触发mutations来修改数据
  （3）mutations接收到commit的请求，就会自动通过Mutate来修改state中的数据
  （4）最后由store触发每一个调用它的组件更新
• 优点
  js原生的数据对象写法，比起localStorage不需要做转换，使用方便。
  属于vue生态一环，能够触发响应式的渲染页面更新。
  限定了一种可预测的方式改变数据，避免大项目中，数据的不小心污染。
  减少了ajax请求次数
• 缺点
  刷新浏览器，Vuex中的state会重新变为初始值的状态，Vuex存储的值会丢失。
  解决方法：
  通过本地储存解决localStorage或sessionStorage存储
  通过插件vuex-persistedstate解决

3. vue-router

• 导航守卫
  （1）router.beforeEach：全局前置守卫，进入路由之前
  （2）router.beforeResolve：全局解析守卫，在导航被确认之前，同时再所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
  （3）router.afterEach：全局后置钩子，进入路由之后

• 路由模式
  （1）hash
  开发中默认的模式，地址栏URL后携带#，后面为路由。
  

  （2）history
  依赖 HTML5 History API和服务器配置。使用HTML5 history提供的pushState、replaceState两个API，用于浏览器记录历史浏览栈，并且在修改URL时不会触发页面刷新和后台数据请求。
  

4. 修饰符

• 表单修饰符
  .lazy：通过这个修饰符，转变为在change事件再同步
  .number：自动将用户的输入值转化为数值类型
  .trim：自动过滤用户输入的首尾空格
• 事件修饰符
  .stop：阻止事件向上冒泡
  .prevent：阻止事件默认行为
  .self：当在event.target是当前元素自身时触发处理函数
  .once：时间将会只触发一次
  .capture：阻止事件向下触发
• 键盘事件修饰符
  .enter
  .delete：捕获“删除”和“退格”键
  .tab
  .down
  …
• 鼠标按钮修饰符
  .left
  .right
  .middle
• v-bind修饰符
  .sync
  .prop
  .camel：渲染为驼峰命名

5. computed，watch，methods

• computed
  计算属性，依赖其他属性计算值，并且computed的值有缓存，每当它依赖的属性值发生改变时，下次重新获取computed会重新计算computed值。
• watch
  侦听属性，更多的是观察作用，类似于数据的监听回调，每当监听的数据发生改变时，就会执行回调进行后续操作。
  （1）handle：其值是一个回调函数。即监听到变化时应该执行的函数。
  （2）deep：其值是true或false，确认是否深度监听。
  （3）immediate：其值是true或false，确认是否以当前的初始值执行handle的函数。
• methods
  只要页面重新渲染，method调用总会执行该函数。
  计算属性一般用在模板渲染中，某个值是依赖了其他响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段业务逻辑。

6. slot（插槽）
父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责。

• 作用域插槽
  主要解决的是父组件在向子组件插槽传递模板内容时存在访问子组件数据的问题。
• 具名插槽
  solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。 这样可以将父组件模板中slot位置，和子组件 slot元素产生关联，便于插槽内容对应传递。

7. vue3.x对比vue2.x

• 生命周期
  

• 响应式原理
  （1）Vue 2

   	使用Object.defineProperty()实现数据的响应式。
   	给对象新增一个属性，内部监听不到，新增的属性需要手动再次使用Object.defineProperty()进行监听。这就是为什么 vue 2.x中 检测不到对象属性的添加和删除的原因，内部提供的$set就是通过调用Object.defineProperty()去处理的。
   	对对象属性的操作，需要对对象进行深度遍历去对属性进行操作。
   	Vue 2之所以只能兼容到IE8就是因为defineProperty无法兼容IE8，其他浏览器也会存在轻微兼容问题。
   	缺点：
   	初始化时的递归遍历会造成性能损失；
   	通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多；
   	新增或删除对象属性无法拦截，需要通过 Vue.set 及 delete 这样的 API 才能生效；
   	对于ES6中新产生的Map、Set这些数据结构不支持。
  

  （2）Vue 3

   	Vue 3 中利用ES6的Proxy机制代理需要响应化的数据。可以同时支持对象和数组，动态属性增、删都可以拦截，新增数据结构均支持，对象嵌套属性运行时递归，用到时才代理，也不需要维护特别多的依赖关系，性能取得很大进步。
   	新增的属性，并不需要重新添加响应式处理，因为是对对象进行拦截操作，无论是对对象做什么样的操作都会走到Proxy的处理逻辑中。
   	proxy除了IE，其他浏览器都兼容。
   	使用：
   	const p = new Proxy(target, handler)
   	target：所要拦截的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
   	handler：一个对象，定义要拦截的行为
  

• Vue 3 Composition API（组合API）
  把之前Vue 2分散在data、生命周期、watch、computed、methods中的部分全部整合到一起放在setup中，这样的好处是我们可以把一些业务或者逻辑抽离出来，按需引入。
  

8. SPA（单页应用）
前端应用程序的架构模式，它通过在加载应用程序时只加载单个 HTML 页面，并通过使用 JavaScript 动态地更新页面内容，从而实现无刷新的用户体验。

• SPA与多页面的区别
  （1）页面加载方式

   	在多页面应用中，每个页面都是独立的HTML文件，每次导航时需要重新加载整个页面。
   	在SPA中，初始加载是只加载一个HTML页面，后续的导航通过JavaScript动态更新页面内容。
  

  （2）用户体验

   	SPA提供了流畅、快速的用户体验，页面切换无需等待重新加载，减少页面刷新的延迟。
   	多页面应用可能会有页面刷新的延迟，给用户带来较长的等待时间。
  

  （3）代码复用

   	SPA 通常采用组件化开发的方式，可在不同的页面中复用组件，提高代码的可维护性和可扩展性。
   	多页面应用的每个页面都是独立的，组件复用的机会较少。
  

  （4）路由管理

   	在多页面应用中，页面之间的导航和路由由服务器处理，每个页面对应一个不同的 URL。
   	 SPA 中，前端负责管理页面的导航和路由，通过前端路由库（如 React Router 或 Vue Router）来管理不同路径对应的组件。
  

  （5）SEO（搜索引擎优化）

   	多页面应用的每个页面都是独立的 HTML 文件，搜索引擎可以直接索引和抓取每个页面的内容，有利于搜索引擎优化。
   	SPA 的内容是通过 JavaScript 动态生成的，搜索引擎的爬虫可能无法正确地获取和索引页面的内容，需要采取额外的优化措施。
  

  （6）服务器负载

   	SPA 初始加载时获取 HTML、CSS 和 JavaScript 文件，后续的页面更新和数据获取通常通过 API 请求完成，减轻了服务器的负载。
   	多页面应用每次导航都需要从服务器获取整个页面的内容。
  

• 优点
  （1）用户体验
  （2）响应式交互
  （3）代码复用
  （4）服务器负载较低

• 缺点
  （1）首次加载时间较长：首次加载需要下载较大的Javascript文件
  （2）SEO（搜索引擎优化）问题：可能无法正确的获取和索引也面内容
  （3）内存占用：保持单个页面状态可能导致较高的内存占用
  （4）安全性：由于 SPA 通常使用 API 进行数据获取，因此需要特别注意安全性。

9. Vue性能优化

• 路由懒加载。有效拆分应用大小，访问时才异步加载。
• keep-alive缓存页面。避免重复创建组件实例，且能保留缓存组件状态。
• v-for遍历避免同时使用v-if。
• 长列表性能优化，可采用虚拟列表。
• 事件销毁。组件销毁后把全局变量和定时器销毁。
• 图片懒加载。
• 第三方插件按需引入。
• 子组件分割。较重的状态组件适合拆分。
• 服务端渲染。