我为什么使用 Vue：Vue 常见面试题整理

谈谈你对 Vue 的理解？

根据官方说法，Vue 是一套用于构建用户界面的渐进式框架。Vue 的设计受到了 MVVM 的启发。Vue 的两个核心是数据驱动和组件系统。

但我为什么使用 Vue，有以下几个原因：

  • Vue 对于前端初学者比较友好。一个 Vue 文件的结构和原生 HTML 保持了高度相似，分为静态页面，用于放置 html 标签，和 script，用于处理用户操作和业务逻辑，最后是 style 样式，用于书写 CSS 代码，这种写法可以让初学者感到习惯。

  • 其次，Vue 提供了许多 JS 定制化的操作，比如 v-bind 和事件监听的 @ 符号，开发者可以直接使用，从而减少一些重复代码的书写。

  • 最后，就是 Vue 提供一套高效的响应式的系统用于更新 DOM，可以让开发者专注于处理业务而非技术实现。

什么是 MVVM，可以介绍一下吗？

MVVM，即 Model–View–ViewModel，是一种软件架构模式。

  • Model

    即模型，是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

  • View

    即视图，是用户在屏幕上看到的结构、布局和外观（UI）。

  • ViewModel

    即视图模型，是暴露公共属性和命令的视图的抽象。用于把 Model 和 View 关联起来。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 的修改同步回 Model 。

MVVM

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue 是如何实现数据双向绑定的？

Vue 实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式。具体实现就是整合 Observer，Compiler 和 Watcher 三者。

  • Observer

    观察者。Vue 通过 Observer 对数据对象的所有属性进行监听，当把一个普通对象传给 Vue 实例的 data 选项时，Observer 将遍历它的所有属性，并为其添加 getter 和 setter。getter 将收集此属性所有的订阅者，setter 将在属性发生变动的时候，重新为此属性赋值，并通知订阅者调用其对应的更新函数。

    在 Vue 2 中是通过 ES5 的 Object.defineProperty() 方法实现。

    在 Vue 3 中是通过 ES6 的 new Proxy() 实现的。

  • Compiler

    模板编译器。它的作用是对每个元素节点的指令 v- 和模板语法 {{}} 进行扫描，替换对应的真实数据，或绑定相应的事件函数。

  • Watcher

    发布者/订阅者。Watcher 作为连接 Observer 和 Compiler 的桥梁，能够订阅并收到每个属性变动的通知，然后执行相应的回调函数。Compiler 在编译时通过 Watcher 绑定对应的数据更新回调函数，Observer 在监听到数据变化时执行此回调。在 Observer 中，Watcher 就是订阅者，在 Compiler 中，Watcher 就是发布者。

v-model 的原理？

v-model 是 vue 的一个语法糖，它用于监听数据的改变并将数据更新。以 input 元素为例：

<el-input v-model="foo" />

其实就等价于

<el-input :value="foo" @input="foo = $event" />

如何在组件中实现 v-model ？

在 Vue 2 组件中实现 v-model，只需定义 model 属性即可。

export default {
  model: {
    prop: "value", // 属性
    event: "input", // 事件
  },
}

在 Vue 3 组合式 API 实现 v-model，需要定义 modelValue 参数，和 emits 方法。

defineProps({
  modelValue: { type: String, default: "" },
})

const emits = defineEmits(["update:modelValue"])

function onInput(val) {
  emits("update:modelValue", val)
}

当数据改变时，Vue 是如何更新 DOM 的？（Diff 算法和虚拟 DOM）

当我们修改了某个数据时，如果直接重新渲染到真实 DOM，开销是很大的。Vue 为了减少开销和提高性能采用了 Diff 算法。当数据发生改变时，Observer 会通知所有 Watcher，Watcher 就会调用 patch() 方法（Diff 的具体实现），把变化的内容更新到真实的 DOM，俗称打补丁。

Diff 算法会对新旧节点进行同层级比较，当两个新旧节点是相同节点的时候，再去比较他们的子节点（如果是文本则直接更新文本内容），逐层比较然后找到最小差异部分，进行 DOM 更新。如果不是相同节点，则删除之前的内容，重新渲染。

逐层比较

patch() 方法先根据真实 DOM 生成一颗虚拟 DOM，保存到变量 oldVnode，当某个数据改变后会生成一个新的 Vnode，然后 Vnode 和 oldVnode 进行对比，发现有不一样的地方就直接修改在真实 DOM 上，最后再返回新节点作为下次更新的 oldVnode。

什么是虚拟 DOM ？

虚拟 DOM（Virtual DOM）就是将真实 DOM 的主要数据抽取出来，并以对象的形式表达。

比如真实 DOM 如下：

<div id="id" class="cls">
  <h1>123</h1>
</div>

对应的虚拟 DOM 就是（伪代码）：

{
  tag: 'div',
  sel: 'div#id.cls',
  children: [
    { tag: 'h1', text: '123' }
  ]
}

Vue 中的 key 有什么用？

  • 在 Vue 中，key 被用来作为 VNode 的唯一标识。

  • key 主要用在 Vue 的虚拟 DOM Diff 算法，在新旧节点对比时作为识别 VNode 的一个线索。然后找到正确的位置插入或更新节点。如果新旧节点中提供了 key，能更快速地进行比较及复用。反之，Vue 会尽可能复用相同类型元素。

    <ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

  • 手动改变 key 值，可以强制 DOM 进行重新渲染。

    <transition>
  <span :key="text">{{ text }}</span>
</transition>

Vue 3 对 diff 算法进行了哪些优化

在 Vue 2 中，每当数据发生变化时，Vue 会创建一个新的虚拟 DOM 树，并对整个虚拟 DOM 树进行递归比较，即使其中大部分内容是静态的，最后再找到不同的节点，然后进行更新。

Vue 3 引入了静态标记的概念，通过静态标记，Vue 3 可以将模板中的静态内容和动态内容区分开来。这样，在更新过程中，Vue 3 只会关注动态部分的比较，而对于静态内容，它将跳过比较的步骤，从而避免了不必要的比较，提高了性能和效率。

Vue 实例的生命周期钩子都有哪些？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue 2 有以下钩子：

  • beforeCreate

    实例初始化之前，$el 和 data 都为 undefined。

  • created

    实例创建完成，data 已经绑定。

  • beforeMount

    将 <template> 和 data 生成虚拟 DOM 节点，可以访问到 $el，但还没有渲染到 html 上。

  • mounted

    实例挂载完成，渲染到 html 页面中。

  • beforeUpdate

    data 更新之前，虚拟 DOM 重新渲染之前。

  • updated

    由于 data 更新导致的虚拟 DOM 重新渲染之后。

  • activated

    keep-alive 专用，实例被激活时调用。

  • deactivated

    keep-alive 专用，实例被移除时调用。

  • beforeDestroy

    实例销毁之前（实例仍然可用）。

  • destroyed

    实例销毁之后。所有的事件监听器会被移除，所有的子实例也会被销毁，但 DOM 节点依旧存在。该钩子在服务器端渲染期间不被调用。

第一次页面加载会触发这四个钩子：

  • beforeCreate

  • created

  • beforeMount

  • mounted

Vue 3 组合式 API 有以下钩子：

  • onBeforeMount()

    在组件被挂载之前被调用。

  • onMounted()

    在组件挂载完成后执行。

  • onBeforeUpdate()

    在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

  • onUpdated()

    在组件因为响应式状态变更而更新其 DOM 树之后调用。

  • onBeforeUnmount()

    在组件实例被卸载之前调用。

  • onUnmounted()

    在组件实例被卸载之后调用。相当于 Vue 2 的 destroyed。

  • onErrorCaptured()

    在捕获了后代组件传递的错误时调用。

  • onRenderTracked()

    当组件渲染过程中追踪到响应式依赖时调用。只在开发环境生效。

  • onRenderTriggered()

    当响应式依赖的变更触发了组件渲染时调用。只在开发环境生效。

  • onActivated()

    keep-alive 专用，当组件被插入到 DOM 中时调用。

  • onDeactivated()

    keep-alive 专用，当组件从 DOM 中被移除时调用。

  • onServerPrefetch()

    在组件实例在服务器上被渲染之前调用。只在 SSR 模式下生效。

$nextTick 的使用场景和原理

  • $nextTick 是什么？

    在下次 DOM 更新循环结束之后执行的一个方法。

    export default {
  data() {
    return {
      message: "Hello Vue!",
    }
  },
  methods: {
    example() {
      // 修改数据
      this.message = "changed"
      // DOM 尚未更新
      this.$nextTick(() => {
        // DOM 现在更新了
        console.log("DOM 现在更新了")
      })
    },
  },
}

  • $nextTick 的使用场景

    在修改数据之后使用这个方法，用于获取更新后的 DOM。

  • 使用 $nextTick 的原理

    在下次循环结束之后，Vue 会自动触发一个 update 事件，在这个事件中会调用所有的 $nextTick 回调。

为什么 Vue 组件中的 data 必须是函数？

因为在 Vue 中组件是可以被复用的，组件复用其实就是创建多个 Vue 实例，实例之间共享 prototype.data 属性，当 data 的值引用的是同一个对象时，改变其中一个就会影响其他组件，造成互相污染，而改用函数的形式将数据 return 出去，则每次复用都是崭新的对象。

这里我们举个例子：

function Component() {}

Component.prototype.data = {
  name: "vue",
  language: "javascript",
}

const A = new Component()
const B = new Component()

A.data.language = "typescript"

console.log(A.data) // { name: 'vue', language: 'typescript' }
console.log(B.data) // { name: 'vue', language: 'typescript' }

此时，A 和 B 的 data 都指向了同一个内存地址，language 都变成了 'typescript'。

我们改成函数式的写法，就不会有这样的问题了。

function Component() {
  this.data = this.data()
}

Component.prototype.data = function () {
  return { name: "vue", language: "javascript" }
}

const A = new Component()
const B = new Component()

A.data.language = "typescript"

console.log(A.data) // { name: 'vue', language: 'typescript' }
console.log(B.data) // { name: 'vue', language: 'javascript' }

所以组件的 data 选项必须是一个函数，该函数返回一个独立的拷贝，这样就不会出现数据相互污染的问题。

组件之间是如何进行通信？

  • 父子组件通信

    • 通过 props 传参

    • 通过 $emit 触发

    • 通过 $refs 调用子组件方法

  • 兄弟组件通信

    • 状态管理 vuex

    • 事件总线 EventBus

      // event-bus.js
import Vue from "vue"
export default new Vue()

      // 组件 A
import Bus from "event-bus.js"

export default {
  methods: {
    handleClick(val) {
      Bus.$emit("functionName", val)
    },
  },
}

      // 组件 B
import Bus from "event-bus.js"

export default {
  created() {
    Bus.$on("functionName", val => {
      console.log(val)
    })
  },
}

    • localStorage、sessionStorage 或 Cookies

Vue 项目中做过哪些性能优化？

  • UI 库按需加载，减小打包体积，以 ElementUI 为例：

    // main.js
import { Button, Select } from "element-ui"

Vue.use(Button)
Vue.use(Select)

  • 路由按需加载

    // router.js
export default new VueRouter({
  routes: [
    { path: "/", component: () => import("@/components/Home") },
    { path: "/about", component: () => import("@/components/About") },
  ],
})

  • 组件销毁后把同时销毁全局变量和移除事件监听和清除定时器，防止内存泄漏

    beforeDestroy() {
  clearInterval(this.timer)
  window.removeEventListener('resize', this.handleResize)
},

  • 合理使用 v-if 和 v-show 使用

Vue 和 React 的区别？

看这里

Vue 3.x 带来了哪些新的特性和性能方面的提升？

  1. 引入了 Composition API（组合式 API）。允许开发者更灵活地组织和重用组件逻辑。它使用函数而不是选项对象来组织组件的代码，使得代码更具可读性和维护性。

  2. 多根组件。可以直接在 template 中使用多个根级别的元素，而不需要额外的包装元素。这样更方便地组织组件的结构。

  3. 引入了 Teleport（传送）。可以将组件的内容渲染到指定 DOM 节点的新特性。一般用于创建全局弹窗和对话框等组件。

  4. 响应式系统升级。从 defineProperty 升级到 ES2015 原生的 Proxy，不需要初始化遍历所有属性，就可以监听新增和删除的属性。

  5. 编译优化。重写了虚拟 DOM，提升了渲染速度。diff 时静态节点会被直接跳过。

  6. 源码体积优化。移除了一些非必要的特性，如 filter，一些新增的模块也将会被按需引入，减小了打包体积。

  7. 打包优化。更强的 Tree Shaking，可以过滤不使用的模块，没有使用到的组件，比如过渡（transition）组件，则打包时不会包含它。

为什么 Vue 3.x 采用了 Proxy 抛弃了 Object.defineProperty() ？

  • Proxy 可以代理任何对象，包括数组，而 Vue 2 中是通过重写数组的以下七种方法实现的。

    • push()（将一个或多个元素添加到数组的末尾，并返回该数组的新长度）

    • pop()（移除并返回数组的最后一个元素）

    • unshift()（将一个或多个元素添加到数组的开头，并返回该数组的新长度）

    • shift()（移除并返回数组的第一个元素）

    • splice()（删除数组中的一个或多个元素，并将其返回）

    • sort()（对数组进行排序）

    • reverse()（对数组进行反转）

  • Proxy 可以直接监听整个对象而非属性，而 Object.defineProperty() 只能先遍历对象属性再去进行监听。相比之下 Proxy 更加简洁，更加高效，更加安全。

  • Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的。

    const cat = {
  name: "Tom",
}

const myCat = new Proxy(cat, {
  get(target, property) {
    console.log(`我的 ${property} 被读取了`)
    return property in target ? target[property] : undefined
  },
  set(target, property, value) {
    console.log(`我的 ${property} 被设置成了 ${value}`)
    target[property] = value
    return true
  },
})

myCat.name // expected output: 我被读取了：name
myCat.name = "Kitty" // expected output: 我的 name 被设置成了 Kitty

  • Object.defineProperty() 的本质是在一个对象上定义一个新属性，或者修改一个现有属性。

    const cat = {
  name: "Tom",
}

Object.defineProperty(cat, "name", {
  get() {
    console.log(`我被读取了`)
  },
  set(value) {
    console.log(`我被设置成了 ${value}`)
  },
})

cat.name // expected output: 我被读取了
cat.name = "Kitty" // expected output: 我被设置成了 Kitty

  • 而 Proxy 天生用于代理一个对象，它有 13 种基本操作的拦截方法，是 Object.defineProperty() 不具备的。

    • apply()（拦截函数的调用）

    • construct()（拦截构造函数的调用）

    • defineProperty()（拦截属性的定义）

    • deleteProperty()（拦截属性的删除）

    • get()（拦截对象属性的读取）

    • getOwnPropertyDescriptor()（拦截对象属性的描述）

    • getPrototypeOf()（拦截对象的原型）

    • has()（拦截对象属性的检查）

    • isExtensible()（拦截对象是否可扩展的检查）

    • ownKeys()（拦截对象的属性列表）

    • preventExtensions()（拦截对象是否可扩展的设置）

    • set()（拦截对象属性的设置）

    • setPrototypeOf()（拦截对象的原型的设置）

Composition API（组合式 API）与 Options API（选项式 API）有什么区别？

  • Options API 会将组件中的同一逻辑相关的代码拆分到不同选项，比如 data、props、methods 等，而使用 Composition API 较为灵活，开发者可以将同一个逻辑的相关代码放在一起。

  • Composition API 通过 Vue 3.x 新增的 setup 选项进行使用，该选项会在组件创建之前执行，第一个参数 props，第二个参数 context，return 的所有内容都会暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

  • Composition API 上的生命周期钩子与 Options API 基本相同，但需要添加前缀 on，比如 onMounted、onUpdated 等。

v-for 和 v-if 可以同时使用吗

可以同时使用，但不推荐，具体原因参考官方说明。

在 Vue 3 中，当 v-if 和 v-for 同时存在于一个节点上时，v-if 比 v-for 的优先级更高，此时 v-if 无法访问 v-for 中的对象。

当确实需要条件遍历渲染的话，有以下几个方法：

  • fitler
<li v-for="todo in todos.filter(todo => !todo.isDone)">{{ todo.name }}</li>

使用数组的 filter 的方法可以提前对不需要的数据进行过滤，根源上解决这个问题。

  • 使用 v-show
<li v-for="todo in todos" v-show="!todo.isDone">{{ todo.name }}</li>

v-show 和 v-if 都可以用于隐藏某个元素，但 v-if 用于决定是否渲染，而 v-show 则使用 display 属性决定是否显示。此时可以避免 v-if 和 v-for 同时使用造成的的渲染问题。

  • 添加额外的标签
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

添加额外的标签，根据层级的不同，可以自己决定 v-if 和 v-for 的优先级，这种方法更加灵活也更容易理解，但会有更深的代码结构。

参考资料：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,133评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,682评论 3赞 390
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,784评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,508评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,603评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,607评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,604评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,359评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,805评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,959评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,588评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2赞 367
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2赞 352