乐趣区

关于vue.js:美团前端必会vue面试题合集

jiezi

delete 和 Vue.delete 删除数组的区别

  • delete 只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。
  • Vue.delete 间接删除了数组 扭转了数组的键值。

Vue3 有理解过吗？能说说跟 vue2 的区别吗？

1. 哪些变动

从上图中，咱们能够概览 Vue3 的新个性，如下：

  • 速度更快
  • 体积缩小
  • 更易保护
  • 更靠近原生
  • 更易使用

1.1 速度更快

vue3相比vue2

  • 重写了虚构 Dom 实现
  • 编译模板的优化
  • 更高效的组件初始化
  • undate性能进步 1.3~2 倍
  • SSR速度进步了 2~3 倍

1.2 体积更小

通过 webpack 的tree-shaking性能，能够将无用模块“剪辑”，仅打包须要的

可能tree-shaking，有两大益处：

  • 对开发人员，可能对 vue 实现更多其余的性能，而不用担心整体体积过大
  • 对使用者，打包进去的包体积变小了

vue能够开发出更多其余的性能，而不用担心 vue 打包进去的整体体积过多

1.3 更易保护

compositon Api

  • 可与现有的 Options API 一起应用
  • 灵便的逻辑组合与复用
  • Vue3模块能够和其余框架搭配应用

更好的 Typescript 反对

VUE3是基于 typescipt 编写的，能够享受到主动的类型定义提醒

1.4 编译器重写

1.5 更靠近原生

能够自定义渲染 API

1.6 更易使用

响应式 Api 裸露进去

轻松辨认组件从新渲染起因

2. Vue3 新增个性

Vue 3 中须要关注的一些新性能包含：

  • framents
  • Teleport
  • composition Api
  • createRenderer

2.1 framents

在 Vue3.x 中，组件当初反对有多个根节点

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

2.2 Teleport

Teleport 是一种可能将咱们的模板挪动到 DOM 中 Vue app 之外的其余地位的技术，就有点像哆啦 A 梦的“任意门”

在 vue2 中，像 modals,toast 等这样的元素，如果咱们嵌套在 Vue 的某个组件外部，那么解决嵌套组件的定位、z-index 和款式就会变得很艰难

通过Teleport，咱们能够在组件的逻辑地位写模板代码，而后在 Vue 利用范畴之外渲染它

<button @click="showToast" class="btn"> 关上 toast</button>
<!-- to 属性就是指标地位 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg"> 我是一个 Toast 文案 </div>
    </div>
</teleport>

2.3 createRenderer

通过createRenderer，咱们可能构建自定义渲染器，咱们可能将 vue 的开发模型扩大到其余平台

咱们能够将其生成在 canvas 画布上

对于createRenderer，咱们理解下根本应用，就不开展讲述了

import {createRenderer} from '@vue/runtime-core'

const {render, createApp} = createRenderer({
  patchProp,
  insert,
  remove,
  createElement,
  // ...
})

export {render, createApp}

export * from '@vue/runtime-core'

2.4 composition Api

composition Api，也就是组合式api，通过这种模式，咱们可能更加容易保护咱们的代码，将雷同性能的变量进行一个集中式的治理

对于 compositon api 的应用，这里以下图开展

简略应用:

export default {setup() {const count = ref(0)
        const double = computed(() => count.value * 2)
        function increment() {count.value++}
        onMounted(() => console.log('component mounted!'))
        return {
            count,
            double,
            increment
        }
    }
}

3. 非兼容变更

3.1 Global API

  • 全局 Vue API 已更改为应用应用程序实例
  • 全局和外部 API 曾经被重构为可 tree-shakable

3.2 模板指令

  • 组件上 v-model 用法已更改
  • <template v-for>和 非 v-for节点上 key 用法已更改
  • 在同一元素上应用的 v-if 和 v-for 优先级已更改
  • v-bind="object" 当初排序敏感
  • v-for 中的 ref 不再注册 ref 数组

3.3 组件

  • 只能应用一般函数创立性能组件
  • functional 属性在单文件组件 (SFC)
  • 异步组件当初须要 defineAsyncComponent 办法来创立

3.4 渲染函数

  • 渲染函数 API 扭转
  • $scopedSlots property 已删除，所有插槽都通过 $slots 作为函数裸露
  • 自定义指令 API 已更改为与组件生命周期统一

  • 一些转换 class 被重命名了：

    • v-enter -> v-enter-from
    • v-leave -> v-leave-from
  • 组件 watch 选项和实例办法 $watch不再反对点分隔字符串门路，请改用计算函数作为参数
  • 在 Vue 2.x 中，利用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板 / 渲染选项，则最终编译为模板)。VUE3.x 当初应用应用程序容器的 innerHTML。

3.5 其余小扭转

  • destroyed 生命周期选项被重命名为 unmounted
  • beforeDestroy 生命周期选项被重命名为 beforeUnmount
  • [prop default工厂函数不再有权拜访 this 是上下文
  • 自定义指令 API 已更改为与组件生命周期统一
  • data 应始终申明为函数
  • 来自 mixin 的 data 选项当初可简略地合并
  • attribute 强制策略已更改
  • 一些过渡 class 被重命名
  • 组建 watch 选项和实例办法 $watch不再反对以点分隔的字符串门路。请改用计算属性函数作为参数。
  • <template> 没有非凡指令的标记 (v-if/else-if/else、v-for 或 v-slot) 当初被视为一般元素，并将生成原生的 <template> 元素，而不是渲染其外部内容。
  • 在Vue 2.x 中，利用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板 / 渲染选项，则最终编译为模板)。Vue 3.x 当初应用利用容器的 innerHTML，这意味着容器自身不再被视为模板的一部分。

3.6 移除 API

  • keyCode 反对作为 v-on 的修饰符
  • $on，$off和$once 实例办法
  • 过滤filter
  • 内联模板 attribute
  • $destroy 实例办法。用户不应再手动治理单个Vue 组件的生命周期。

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

在 Vue 中，对响应式解决利用的是 Object.defineProperty 对数据进行拦挡，而这个办法并不能监听到数组外部变动，数组长度变动，数组的截取变动等，所以须要对这些操作进行 hack，让 Vue 能监听到其中的变动。那 Vue 是如何实现让这些数组办法实现元素的实时更新的呢，上面是 Vue 中对这些办法的封装：

// 缓存数组原型
const arrayProto = Array.prototype;
// 实现 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto);
// 须要进行性能拓展的办法
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse"
];

/** * Intercept mutating methods and emit events */
methodsToPatch.forEach(function(method) {
  // 缓存原生数组办法
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator(...args) {
    // 执行并缓存原生数组性能
    const result = original.apply(this, args);
    // 响应式解决
    const ob = this.__ob__;
    let inserted;
    switch (method) {
    // push、unshift 会新增索引，所以要手动 observer
      case "push":
      case "unshift":
        inserted = args;
        break;
      // splice 办法，如果传入了第三个参数，也会有索引退出，也要手动 observer。case "splice":
        inserted = args.slice(2);
        break;
    }
    // 
    if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听
    // notify change
    ob.dep.notify();// 告诉依赖更新
    // 返回原生数组办法的执行后果
    return result;
  });
});

简略来说就是，重写了数组中的那些原生办法，首先获取到这个数组的__ob__，也就是它的 Observer 对象，如果有新的值，就调用 observeArray 持续对新的值察看变动（也就是通过 target__proto__ == arrayMethods 来扭转了数组实例的型），而后手动调用 notify，告诉渲染 watcher，执行 update。

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

slot 又名插槽，是 Vue 的内容散发机制，组件外部的模板引擎应用 slot 元素作为承载散发内容的进口。插槽 slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot 又分三类，默认插槽，具名插槽和作用域插槽。

  • 默认插槽：又名匿名查抄，当 slot 没有指定 name 属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
  • 具名插槽：带有具体名字的插槽，也就是带有 name 属性的 slot，一个组件能够呈现多个具名插槽。
  • 作用域插槽：默认插槽、具名插槽的一个变体，能够是匿名插槽，也能够是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，能够将子组件外部的数据传递给父组件，让父组件依据子组件的传递过去的数据决定如何渲染该插槽。

实现原理：当子组件 vm 实例化时，获取到父组件传入的 slot 标签的内容，寄存在 vm.$slot 中，默认插槽为 vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到 slot 标签，应用$slot 中的内容进行替换，此时能够为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

受古代 JavaScript 的限度，Vue 无奈检测到对象属性的增加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在能力让 Vue 将它转换为响应式的。然而 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象增加响应式属性，那框架自身是如何实现的呢？

咱们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {// 批改数组的长度, 防止索引 > 数组长度导致 splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的 splice 变异办法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 曾经存在，间接批改属性值  
  if (key in target && !(key in Object.prototype)) {target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 自身就不是响应式数据, 间接赋值
  if (!ob) {target[key] = val
    return val
  }
  // 对属性进行响应式解决
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

咱们浏览以上源码可知，vm.$set 的实现原理是：

  • 如果指标是数组，间接应用数组的 splice 办法触发相应式；
  • 如果指标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式解决，则是通过调用 defineReactive 办法进行响应式解决（defineReactive 办法就是 Vue 在初始化对象时，给对象属性采纳 Object.defineProperty 动静增加 getter 和 setter 的性能所调用的办法）

谈谈对 keep-alive 的理解

keep-alive 能够实现组件的缓存，当组件切换时不会对以后组件进行卸载。罕用的 2 个属性 include/exclude，2 个生命周期 activated， deactivated

参考 前端进阶面试题具体解答

vue 如何监听对象或者数组某个属性的变动

当在我的项目中间接设置数组的某一项的值，或者间接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为 Object.defineProperty()限度，监听不到变动。

解决形式：

  • this.$set(你要扭转的数组 / 对象，你要扭转的地位 /key，你要改成什么 value)
this.$set(this.arr, 0, "OBKoro1"); // 扭转数组 this.$set(this.obj, "c", "OBKoro1"); // 扭转对象
  • 调用以下几个数组的办法
splice()、push()、pop()、shift()、unshift()、sort()、reverse()

vue 源码里缓存了 array 的原型链，而后重写了这几个办法，触发这几个办法的时候会 observer 数据，意思是应用这些办法不必再进行额定的操作，视图主动进行更新。举荐应用 splice 办法会比拟好自定义, 因为 splice 能够在数组的任何地位进行删除 / 增加操作

vm.$set 的实现原理是：

  • 如果指标是数组，间接应用数组的 splice 办法触发相应式；
  • 如果指标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式解决，则是通过调用 defineReactive 办法进行响应式解决（defineReactive 办法就是 Vue 在初始化对象时，给对象属性采纳 Object.defineProperty 动静增加 getter 和 setter 的性能所调用的办法）

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

  • .stop：等同于 JavaScript 中的 event.stopPropagation()，避免事件冒泡；
  • .prevent：等同于 JavaScript 中的 event.preventDefault()，避免执行预设的行为（如果事件可勾销，则勾销该事件，而不进行事件的进一步流传）；
  • .capture：与事件冒泡的方向相同，事件捕捉由外到内；
  • .self：只会触发本人范畴内的事件，不蕴含子元素；
  • .once：只会触发一次。

Vue 组件间通信有哪几种形式？

​ Vue 组件间通信是面试常考的知识点之一，这题有点相似于凋谢题，你答复出越多办法当然越加分，表明你对 Vue 把握的越纯熟。Vue 组件间通信只有指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，上面咱们别离介绍每种通信形式且会阐明此种办法可实用于哪类组件间通信。

（1）props / $emit 实用 父子组件通信

这种办法是 Vue 组件的根底，置信大部分同学耳闻能详，所以此处就不举例开展介绍。

（2）ref 与 $parent / $children 实用 父子组件通信

  • ref：如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例
  • $parent / $children：拜访父 / 子实例

（3）EventBus（$emit / $on） 实用于 父子、隔代、兄弟组件通信

这种办法通过一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件。

（4）$attrs/$listeners 实用于 隔代组件通信

  • $attrs：蕴含了父作用域中不被 prop 所辨认 (且获取) 的个性绑定 (class 和 style 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v-bind="$attrs" 传入外部组件。通常配合 inheritAttrs 选项一起应用。
  • $listeners：蕴含了父作用域中的 (不含 .native 润饰器的) v-on 事件监听器。它能够通过 v-on="$listeners" 传入外部组件

（5）provide / inject 实用于 隔代组件通信

先人组件中通过 provider 来提供变量，而后在子孙组件中通过 inject 来注入变量。provide / inject API 次要解决了跨级组件间的通信问题，不过它的应用场景，次要是子组件获取下级组件的状态，跨级组件间建设了一种被动提供与依赖注入的关系。

（6）Vuex 实用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
  • 扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

简述 mixin、extends 的笼罩逻辑

（1）mixin 和 extends mixin 和 extends 均是用于合并、拓展组件的，两者均通过 mergeOptions 办法实现合并。

  • mixins 接管一个混入对象的数组，其中混入对象能够像失常的实例对象一样蕴含实例选项，这些选项会被合并到最终的选项中。Mixin 钩子依照传入程序顺次调用，并在调用组件本身的钩子之前被调用。

  • extends 次要是为了便于扩大单文件组件，接管一个对象或构造函数。

    （2）mergeOptions 的执行过程

  • 规范化选项（normalizeProps、normalizelnject、normalizeDirectives)
  • 对未合并的选项，进行判断
if (!child._base) {if (child.extends) {parent = mergeOptions(parent, child.extends, vm);
  }
  if (child.mixins) {for (let i = 0, l = child.mixins.length; i < l; i++) {parent = mergeOptions(parent, child.mixins[i], vm);
    }
  }
}
  • 合并解决。依据一个通用 Vue 实例所蕴含的选项进行分类逐个判断合并，如 props、data、methods、watch、computed、生命周期等，将合并后果存储在新定义的 options 对象里。
  • 返回合并后果 options。

mixin 和 mixins 区别

mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。

Vue.mixin({beforeCreate() {// ... 逻辑        // 这种形式会影响到每个组件的 beforeCreate 钩子函数},
});

尽管文档不倡议在利用中间接应用 mixin，然而如果不滥用的话也是很有帮忙的，比方能够全局混入封装好的 ajax 或者一些工具函数等等。

mixins 应该是最常应用的扩大组件的形式了。如果多个组件中有雷同的业务逻辑，就能够将这些逻辑剥离进去，通过 mixins 混入代码，比方上拉下拉加载数据这种逻辑等等。
另外须要留神的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。

computed 的实现原理

computed 实质是一个惰性求值的观察者。

computed 外部实现了一个惰性的 watcher, 也就是 computed watcher,computed watcher 不会立即求值, 同时持有一个 dep 实例。

其外部通过 this.dirty 属性标记计算属性是否须要从新求值。

当 computed 的依赖状态产生扭转时, 就会告诉这个惰性的 watcher,

computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

有的话, 会从新计算, 而后比照新旧值, 如果变动了, 会从新渲染。(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 从新渲染，实质上是一种优化。)

没有的话, 仅仅把 this.dirty = true。(当计算属性依赖于其余数据时，属性并不会立刻从新计算，只有之后其余中央须要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）个性。)

MVC 和 MVVM 区别

MVC

MVC 全名是 Model View Controller，是模型 (model)-视图(view)-控制器(controller) 的缩写，一种软件设计榜样

  • Model（模型）：是应用程序中用于解决应用程序数据逻辑的局部。通常模型对象负责在数据库中存取数据
  • View（视图）：是应用程序中解决数据显示的局部。通常视图是根据模型数据创立的
  • Controller（控制器）：是应用程序中解决用户交互的局部。通常控制器负责从视图读取数据，管制用户输出，并向模型发送数据

MVC 的思维：一句话形容就是 Controller 负责将 Model 的数据用 View 显示进去，换句话说就是在 Controller 外面把 Model 的数据赋值给 View。

MVVM

MVVM 新增了 VM 类

  • ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，行将后端传递的数据转化成所看到的页面。实现的形式是：数据绑定。二是将【视图】转化成【模型】，行将所看到的页面转化成后端的数据。实现的形式是：DOM 事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的主动同步，也就是当 Model 的属性扭转时，咱们不必再本人手动操作 Dom 元素，来扭转 View 的显示，而是扭转属性后该属性对应 View 层显示会主动扭转（对应 Vue 数据驱动的思维）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不必再用选择器操作 DOM 元素。因为在 MVVM 中，View 不晓得 Model 的存在，Model 和 ViewModel 也察看不到 View，这种低耦合模式进步代码的可重用性

留神：Vue 并没有齐全遵循 MVVM 的思维 这一点官网本人也有阐明

那么问题来了 为什么官网要说 Vue 没有齐全遵循 MVVM 思维呢？

  • 严格的 MVVM 要求 View 不能和 Model 间接通信，而 Vue 提供了 $refs 这个属性，让 Model 能够间接操作 View，违反了这一规定，所以说 Vue 没有齐全遵循 MVVM。

keep-alive 应用场景和原理

keep-alive 是 Vue 内置的一个组件，能够实现组件缓存，当组件切换时不会对以后组件进行卸载。

  • 罕用的两个属性 include/exclude，容许组件有条件的进行缓存。
  • 两个生命周期 activated/deactivated，用来得悉以后组件是否处于沉闷状态。
  • keep-alive 的中还使用了 LRU(最近起码应用) 算法，抉择最近最久未应用的组件予以淘汰。

理解 nextTick 吗？

异步办法，异步渲染最初一步，与 JS 事件循环分割严密。次要应用了宏工作微工作（setTimeout、promise那些），定义了一个异步办法，屡次调用 nextTick 会将办法存入队列，通过异步办法清空以后队列。

v-show 与 v-if 有什么区别？

v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简略得多——不论初始条件是什么，元素总是会被渲染，并且只是简略地基于 CSS 的“display”属性进行切换。

所以，v-if 实用于在运行时很少扭转条件，不须要频繁切换条件的场景；v-show 则实用于须要十分频繁切换条件的场景。

Vue 的基本原理

当一个 Vue 实例创立时，Vue 会遍历 data 中的属性，用 Object.defineProperty（vue3.0 应用 proxy）将它们转为 getter/setter，并且在外部追踪相干依赖，在属性被拜访和批改时告诉变动。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会告诉 watcher 从新计算，从而以致它关联的组件得以更新。

子组件能够间接扭转父组件的数据吗？

子组件不能够间接扭转父组件的数据。这样做次要是为了保护父子组件的单向数据流。每次父级组件产生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中收回正告。

Vue 提倡单向数据流，即父级 props 的更新会流向子组件，然而反过来则不行。这是为了避免意外的扭转父组件状态，使得利用的数据流变得难以了解，导致数据流凌乱。如果毁坏了单向数据流，当利用简单时，debug 的老本会十分高。

只能通过 $emit 派发一个自定义事件，父组件接管到后，由父组件批改。

什么是 mixin？

  • Mixin 使咱们可能为 Vue 组件编写可插拔和可重用的性能。
  • 如果心愿在多个组件之间重用一组组件选项，例如生命周期 hook、办法等，则能够将其编写为 mixin，并在组件中简略的援用它。
  • 而后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

Vue3.x 响应式数据原理

Vue3.x改用 Proxy 代替 Object.defineProperty。因为Proxy 能够间接监听对象和数组的变动，并且有多达 13 种拦挡办法。并且作为新规范将受到浏览器厂商重点继续的性能优化。

proxy 根本用法

// proxy 默认只会代理第一层对象，只有取值再次是对象的时候再次代理，不是一上来就代理，进步性能。不像 vue2.x 递归遍历每个对象属性
let handler = {set(target, key, value) {return Reflect.set(target, key, value);
    },
    get(target, key) {if (typeof target[key] == 'object' && target[key] !== null) {return new Proxy(target[key], handler); // 懒代理，只有取值再次是对象的时候再次代理，进步性能
        }
        return Reflect.get(target, key);
    }
}
let obj = {school: { name: 'poetry', age: 20} };
let proxy = new Proxy(obj, handler);

// 返回对象的代理
proxy.school
退出移动版