乐趣区

关于前端:校招前端一面常见vue面试题持续更新中

jiezi

父子组件生命周期调用程序（简略）

渲染程序：先父后子，实现程序：先子后父

更新程序：父更新导致子更新，子更新实现后父

销毁程序：先父后子，实现程序：先子后父

过滤器的作用，如何实现一个过滤器

依据过滤器的名称，过滤器是用来过滤数据的，在 Vue 中应用 filters 来过滤数据，filters不会批改数据，而是过滤数据，扭转用户看到的输入（计算属性 computed，办法 methods 都是通过批改数据来解决数据格式的输入显示）。

应用场景：

  • 须要格式化数据的状况，比方须要解决工夫、价格等数据格式的输入 / 显示。
  • 比方后端返回一个 年月日的日期字符串 ，前端须要展现为 多少天前 的数据格式，此时就能够用fliters 过滤器来解决数据。

过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在 插值表达式 {{}} 和 v-bind 表达式 中，而后放在操作符“|”前面进行批示。

例如，在显示金额，给商品价格增加单位：

<li> 商品价格：{{item.price | filterPrice}}</li>

 filters: {filterPrice (price) {return price ? ('￥' + price) : '--'
    }
  }

Vue 的基本原理

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

diff 算法

工夫复杂度： 个树的齐全 diff 算法是一个工夫复杂度为 O(n*3），vue 进行优化转化成 O(n)。

了解：

  • 最小量更新， key 很重要。这个能够是这个节点的惟一标识，通知 diff 算法，在更改前后它们是同一个 DOM 节点

    • 扩大 v-for 为什么要有 key，没有 key 会暴力复用，举例子的话轻易说一个比方挪动节点或者减少节点（批改 DOM），加 key 只会挪动缩小操作 DOM。
  • 只有是同一个虚构节点才会进行精细化比拟，否则就是暴力删除旧的，插入新的。
  • 只进行同层比拟，不会进行跨层比拟。

diff 算法的优化策略：四种命中查找，四个指针

  1. 旧前与新前（先比结尾，后插入和删除节点的这种状况）
  2. 旧后与新后（比结尾，前插入或删除的状况）
  3. 旧前与新后（头与尾比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧后之后）
  4. 旧后与新前（尾与头比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧前之前）

diff 算法

<details open=””><summary>答案 </summary>
<p>
</p><p> 工夫复杂度： 个树的齐全 diff 算法是一个工夫复杂度为 O(n*3），vue 进行优化转化成 O(n)。</p>
<p> 了解：</p>
<ul>
<li>
<p> 最小量更新， key 很重要。这个能够是这个节点的惟一标识，通知 diff 算法，在更改前后它们是同一个 DOM 节点 </p>
<ul>
<li> 扩大 v-for 为什么要有 key，没有 key 会暴力复用，举例子的话轻易说一个比方挪动节点或者减少节点（批改 DOM），加 key 只会挪动缩小操作 DOM。</li>
</ul>
</li>
<li>
<p> 只有是同一个虚构节点才会进行精细化比拟，否则就是暴力删除旧的，插入新的。</p>
</li>
<li>
<p> 只进行同层比拟，不会进行跨层比拟。</p>
</li>
</ul>
<p>diff 算法的优化策略：四种命中查找，四个指针 </p>
<ol>
<li>
<p> 旧前与新前（先比结尾，后插入和删除节点的这种状况）</p>
</li>
<li>
<p> 旧后与新后（比结尾，前插入或删除的状况）</p>
</li>
<li>
<p> 旧前与新后（头与尾比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧后之后）</p>
</li>
<li>
<p> 旧后与新前（尾与头比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧前之前）</p>
</li>
</ol>
<p></p>
</details>

— 问完下面这些如果都能很分明的话，根本 O 了 —

以下的这些简略的概念，你必定也是没有问题的啦😉

生命周期钩子是如何实现的

Vue 的生命周期钩子外围实现是利用公布订阅模式先把用户传入的的生命周期钩子订阅好（外部采纳数组的形式存储）而后在创立组件实例的过程中会一次执行对应的钩子办法（公布）

相干代码如下

export function callHook(vm, hook) {
  // 顺次执行生命周期对应的办法
  const handlers = vm.$options[hook];
  if (handlers) {for (let i = 0; i < handlers.length; i++) {handlers[i].call(vm); // 生命周期外面的 this 指向以后实例
    }
  }
}

// 调用的时候
Vue.prototype._init = function (options) {
  const vm = this;
  vm.$options = mergeOptions(vm.constructor.options, options);
  callHook(vm, "beforeCreate"); // 初始化数据之前
  // 初始化状态
  initState(vm);
  callHook(vm, "created"); // 初始化数据之后
  if (vm.$options.el) {vm.$mount(vm.$options.el);
  }
};

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

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。这样使得咱们能够不便地跟踪每一个状态的变动。

Proxy 与 Object.defineProperty 优劣比照

Proxy 的劣势如下:

  • Proxy 能够间接监听对象而非属性；
  • Proxy 能够间接监听数组的变动；
  • Proxy 有多达 13 种拦挡办法, 不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
  • Proxy 返回的是一个新对象, 咱们能够只操作新的对象达到目标, 而 Object.defineProperty 只能遍历对象属性间接批改；

Proxy 作为新规范将受到浏览器厂商重点继续的性能优化，也就是传说中的新规范的性能红利；

Object.defineProperty 的劣势如下:

  • 兼容性好，反对 IE9，而 Proxy 的存在浏览器兼容性问题, 而且无奈用 polyfill 磨平，因而 Vue 的作者才申明须要等到下个大版本 (3.0) 能力用 Proxy 重写。

父组件能够监听到子组件的生命周期吗

比方有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑解决，能够通过以下写法实现：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {this.$emit("mounted");
}

以上须要手动通过 $emit 触发父组件的事件，更简略的形式能够在父组件援用子组件时通过 @hook 来监听即可，如下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {console.log('父组件监听到 mounted 钩子函数 ...');
},

//  Child.vue
mounted(){console.log('子组件触发 mounted 钩子函数 ...');
},    

// 以上输入程序为：// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

当然 @hook 办法不仅仅是能够监听 mounted，其它的生命周期事件，例如：created，updated 等都能够监听

Vue.js 的 template 编译

简而言之，就是先转化成 AST 树，再失去的 render 函数返回 VNode（Vue 的虚构 DOM 节点），具体步骤如下：

首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的形象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创立编译器的。另外 compile 还负责合并 option。

而后，AST 会通过 generate（将 AST 语法树转化成 render funtion 字符串的过程）失去 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚构 DOM 节点，外面有（标签名、子节点、文本等等）

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

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

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

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

template 和 jsx 的有什么别离？

对于 runtime 来说，只须要保障组件存在 render 函数即可，而有了预编译之后，只须要保障构建过程中生成 render 函数就能够。在 webpack 中，应用 vue-loader 编译.vue 文件，外部依赖的 vue-template-compiler 模块，在 webpack 构建过程中，将 template 预编译成 render 函数。与 react 相似，在增加了 jsx 的语法糖解析器 babel-plugin-transform-vue-jsx 之后，就能够间接手写 render 函数。

所以，template 和 jsx 的都是 render 的一种表现形式，不同的是：JSX 绝对于 template 而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。

Vue 中的 key 到底有什么用？

key 是给每一个 vnode 的惟一 id, 依附 key, 咱们的 diff 操作能够更精确、更疾速 (对于简略列表页渲染来说 diff 节点也更快, 但会产生一些暗藏的副作用, 比方可能不会产生过渡成果, 或者在某些节点有绑定数据（表单）状态，会呈现状态错位。)

diff 算法的过程中, 先会进行新旧节点的首尾穿插比照, 当无奈匹配的时候会用新节点的 key 与旧节点进行比对, 从而找到相应旧节点.

更精确 : 因为带 key 就不是就地复用了, 在 sameNode 函数 a.key === b.key 比照中能够防止就地复用的状况。所以会更加精确, 如果不加 key, 会导致之前节点的状态被保留下来, 会产生一系列的 bug。

更疾速 : key 的唯一性能够被 Map 数据结构充分利用, 相比于遍历查找的工夫复杂度 O(n),Map 的工夫复杂度仅仅为 O(1), 源码如下:

function createKeyToOldIdx(children, beginIdx, endIdx) {
  let i, key;
  const map = {};
  for (i = beginIdx; i <= endIdx; ++i) {key = children[i].key;
    if (isDef(key)) map[key] = i;
  }
  return map;
}

Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 代替 Object.defineProperty。因为 Proxy 能够间接监听对象和数组的变动，并且有多达 13 种拦挡办法。

相干代码如下

import {mutableHandlers} from "./baseHandlers"; // 代理相干逻辑
import {isObject} from "./util"; // 工具办法

export function reactive(target) {
  // 依据不同参数创立不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {if (!isObject(target)) {return target;}
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {return function get(target, key, receiver) {
    // 对获取的值进行喷射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回以后对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {return function set(target, key, value, receiver) {const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {console.log("属性值被批改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 当获取属性时调用此办法
  set, // 当批改属性时调用此办法
};

vue-router 路由钩子函数是什么 执行程序是什么

路由钩子的执行流程, 钩子函数品种有: 全局守卫、路由守卫、组件守卫

残缺的导航解析流程:

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创立好的组件实例会作为回调函数的参数传入。

Vue 中如何检测数组变动

前言

Vue 不能检测到以下数组的变动：

  • 当你利用索引间接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  • 当你批改数组的长度时，例如：vm.items.length = newLength

Vue 提供了以下操作方法

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

剖析

数组思考性能起因没有用 defineProperty 对数组的每一项进行拦挡，而是抉择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）办法进行重写(AOP 切片思维)

所以在 Vue 中批改数组的索引和长度是无奈监控到的。须要通过以上 7 种变异办法批改数组才会触发数组对应的 watcher 进行更新

  • 用函数劫持的形式，重写了数组办法，具体呢就是更改了数组的原型，更改成本人的，用户调数组的一些办法的时候，走的就是本人的办法，而后告诉视图去更新
  • 数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象能力进行观测，观测过的也不会进行观测）

原理

Vue 将 data 中的数组，进行了原型链重写。指向了本人定义的数组原型办法，这样当调用数组api 时，能够告诉依赖更新，如果数组中蕴含着援用类型。会对数组中的援用类型再次进行监控。

手写简版剖析

let oldArray = Object.create(Array.prototype);
['shift', 'unshift', 'push', 'pop', 'reverse','sort'].forEach(method => {oldArray[method] = function() { // 这里能够触发页面更新逻辑
        console.log('method', method)
        Array.prototype[method].call(this,...arguments);
    }
});
let arr = [1,2,3];
arr.__proto__ = oldArray;
arr.unshift(4);

源码剖析

// 拿到数组原型拷贝一份
const arrayProto = Array.prototype 
// 而后将 arrayMethods 继承自数组原型
// 这里是面向切片编程思维（AOP）-- 不毁坏封装的前提下，动静的扩大性能
export const arrayMethods = Object.create(arrayProto) 
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']

methodsToPatch.forEach(function (method) { // 重写原型办法 
    const original = arrayProto[method] // 调用原数组的办法 

    def(arrayMethods, method, function mutator (...args) { 
        // 这里保留原型办法的执行后果
        const result = original.apply(this, args) 
        // 这句话是要害
        // this 代表的就是数据自身 比方数据是{a:[1,2,3]} 那么咱们应用 a.push(4)  this 就是 a  ob 就是 a.__ob__ 这个属性就是上段代码减少的 代表的是该数据曾经被响应式察看过了指向 Observer 实例
        const ob = this.__ob__ 

        // 这里的标记就是代表数组有新增操作
        let inserted
        switch (method) { 
            case 'push': 
            case 'unshift': 
                inserted = args 
                break 
            case 'splice': 
                inserted = args.slice(2) 
                break 
        }
        // 如果有新增的元素 inserted 是一个数组 调用 Observer 实例的 observeArray 对数组每一项进行观测
        if (inserted) ob.observeArray(inserted) 

        ob.dep.notify() // 当调用数组办法后，手动告诉视图更新 

        return result 
    }) 
})

this.observeArray(value) // 进行深度监控

vue3：改用 proxy，可间接监听对象数组的变动

action 与 mutation 的区别

  • mutation 是同步更新， $watch 严格模式下会报错
  • action 是异步操作，能够获取数据后调用 mutation 提交最终数据

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（懒计算）个性。)

v-if 和 v-show 的区别

v-if 在编译过程中会被转化成三元表达式, 条件不满足时不渲染此节点。

v-show 会被编译成指令，条件不满足时管制款式将对应节点暗藏（display:none）

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

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

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

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

退出移动版