2025面试题（vue+javascript+css）

Vue2

1.Vue2的生命周期概念

Vue2的生命周期是指Vue实例从开始创建、初始化、编译模板、挂载DOM、渲染、更新、到最终销毁的一系列过程。在这个过程中，Vue会提供一系列的钩子函数（或称为生命周期钩子）。

2. Vue2 的主要生命周期钩子详细说明

Vue2 的生命周期钩子主要可以分为以下几个阶段：

• ‌创建阶段‌：beforeCreate、created

  beforeCreate‌：在实例初始化之后，此时组件的props、methods、data、computed、watchd，DOM结构没初始化，什么也做不了。
  ‌created‌：在实例创建完成后被立即调用，可以访问到组件的数据和方法，但DOM尚未挂载。

• ‌挂载阶段‌：beforeMount、mounted

  ‌beforeMount‌：在挂载开始之前调用，虚拟DOM已经创建完成，但尚未挂载到页面上。
  ‌mounted‌：挂载到实例上去之后调用该钩子。此时组件的模板已经被渲染成真实的DOM

• ‌更新阶段‌：beforeUpdate、updated
  ‌
  beforeUpdate‌：在数据更新之前被调用，发生在虚拟DOM打补丁之前。此时可以访问到更新前的数据，但DOM尚未重新渲染。
  ‌updated‌：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后被调用。此时可以访问到更新后的数据，并且DOM已经被重新渲染。

• ‌销毁阶段‌：beforeDestroy、destroyed

  beforeDestroy‌：在实例销毁之前调用。此时实例仍然完全可用，但所有的指令、事件监听器和子实例都将被移除。
  destroyed‌：在实例销毁后被调用。此时实例的所有指令都已解绑，所有的事件监听器都被移除，所有的子实例也都被销毁。

1）第一次页面加载会触发哪几个钩子？

会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

2）虚拟DOM 生成在哪个周期完成的？DOM 渲染在 哪个周期中就已经完成了？

beforeMount, mounted

3.Vue2实现数据双向绑定的原理

在 Vue 2 中，数据双向绑定是通过其响应式系统实现的，这个系统基于 Vue 的核心概念——响应式数据。以下是 Vue 2 实现数据双向绑定的原理和工作流程：

数据劫持（Data Observation）

Vue2 使用Object.defineProperty方法对对象的属性进行劫持，将其转换为 getter/setter。这样，当数据被访问或修改时，就可以触发相应的逻辑来处理依赖收集和更新通知。

发布-订阅模式（Publish-Subscribe Pattern）

发布-订阅模式是一种消息传递模式，允许发送者（发布者）和接收者（订阅者）松散耦合。在 Vue2 中，这个模式被用来管理数据和视图之间的同步。

1. ‌发布者（Data）‌：
   data 中的属性就是发布者。当它们的值发生变化时，会发布一个更新通知。

2. ‌订阅者（Watcher）‌：
   Watcher 是订阅者，它们订阅了 data 中的属性。当属性发布更新通知时，Watcher 会收到通知并更新视图

4.Vue2的父子组件常用的传值方法

1）通过props传值：

2）通过ref传值：this.$refs.childComponent.XXXX

子组件向父组件传值

this.$emit(\'方法名\'，\'数据\')

5.Vue2中key起到什么作用？

在 Vue 中，key是一个特殊的属性，主要用于协助 Vue 的虚拟 DOM（Virtual DOM）算法高效地更新实际 DOM。它的核心作用可以概括为：

唯一标识节点：为每个节点提供一个唯一的身份标识
优化 Diff 算法：帮助 Vue 准确判断两个节点是否为同一节点(如for循环遍历绑定key)
维持状态：在节点更新时保留组件状态

6.data 为什么是一个函数 不是方法？

vue组件可能会有很多个实例 ，每次创建组件实例时，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染

7.什么是MVVM？

MVVM模式是Model-View-ViewModel的缩写，是一种用于构建用户界面的设计模式。它通过将应用程序分为模型（Model）、视图（View）和视图模型（ViewModel）三个核心组件，实现了UI与业务逻辑的分离。

1. ‌模型（Model）‌：负责业务逻辑和数据，处理数据的CRUD操作。
2. ‌视图（View）‌：是用户界面的表示层，负责显示数据和收集用户输入。
3. ‌视图模型（ViewModel）‌：作为模型和视图之间的桥梁，处理业务逻辑，将模型数据转换为视图可显示的格式，并通知视图更新。

8.Vue2中 watch 和computer区别

1. computed是计算属性；watch是监听，监听data中的数据变化。
2. computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；（比如加入购物车）watch不支持缓存，当对应属性发生变化的时候，响应执行。
3. computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
4. computed第一次加载时就监听；watch默认第一次加载时不监听。