纯干货，毕生所学已掏空~~

浮力：前端面试线上笔试真题

11 Vue 如何检测数组变化

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写(AOP 切片思想)

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

相关代码如：

// src/obserber/array.js

// 先保留数组原型

const arrayProto = Array.prototype;

// 然后将arrayMethods继承自数组原型

// 这里是面向切片编程思想（AOP）--不破坏封装的前提下，动态的扩展功能

export const arrayMethods = Object.create(arrayProto);

let methodsToPatch = [

  "push",

  "pop",

  "shift",

  "unshift",

  "splice",

  "reverse",

  "sort",

];

methodsToPatch.forEach((method) => {

  arrayMethods[method] = function (...args) {

    //   这里保留原型方法的执行结果

    const result = arrayProto[method].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);

      default:

        break;

    }

    // 如果有新增的元素 inserted是一个数组 调用Observer实例的observeArray对数组每一项进行观测

    if (inserted) ob.observeArray(inserted);

    // 之后咱们还可以在这里检测到数组改变了之后从而触发视图更新的操作--后续源码会揭晓

    return result;

  };

});

数组的观测原理详解 传送门[4]

12 vue3.0 用过吗 了解多少

  • 响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty
  • 组件选项声明方式 Vue3.x 使用 Composition API setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API 的入口。
  • 模板语法变化 slot 具名插槽语法 自定义指令 v-model 升级
  • 其它方面的更改 Suspense 支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。基于 treeshaking 优化，提供了更多的内置功能。

Vue3.0 新特性以及使用经验总结 传送门[5]

13 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, // 当修改属性时调用此方法

};

14 Vue 的父子组件生命周期钩子函数执行顺序

  • 加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted

  • 子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

  • 父组件更新过程

父 beforeUpdate->父 updated

  • 销毁过程

父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed

15 虚拟 DOM 是什么 有什么优缺点

由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产生一定的性能问题。这就是虚拟 Dom 的产生原因。Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM 本质就是用一个原生的 JS 对象去描述一个 DOM 节点，是对真实 DOM 的一层抽象。

「优点：」

  1. 保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
  2. 无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
  3. 跨平台：虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

「缺点:」

  1. 无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。
  2. 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。

16 v-model 原理

v-model 只是语法糖而已

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。
❝

注意:对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。

❞

在普通标签上：

 <input v-model="sth" />  //这一行等于下一行

 <input v-bind:value="sth" v-on:input="sth = $event.target.value" />

在组件上：

<currency-input v-model="price"></currentcy-input>

<!--上行代码是下行的语法糖

 <currency-input :value="price" @input="price = arguments[0]"></currency-input>

-->


<!-- 子组件定义 -->

Vue.component('currency-input', {

 template: `

  <span>

   <input

    ref="input"

    :value="value"

    @input="$emit('input', $event.target.value)"

   >

  </span>

 `,

 props: ['value'],

})

17 v-for 为什么要加 key

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速

「更准确」：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。

「更快速」：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

相关代码如下：

// 判断两个vnode的标签和key是否相同 如果相同 就可以认为是同一节点就地复用

function isSameVnode(oldVnode, newVnode) {

  return oldVnode.tag === newVnode.tag && oldVnode.key === newVnode.key;

}


// 根据key来创建老的儿子的index映射表  类似 {'a':0,'b':1} 代表key为'a'的节点在第一个位置 key为'b'的节点在第二个位置

function makeIndexByKey(children) {

  let map = {};

  children.forEach((item, index) => {

    map[item.key] = index;

  });

  return map;

}

// 生成的映射表

let map = makeIndexByKey(oldCh);

18 Vue 事件绑定原理

原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的 $on 实现的。如果要在组件上使用原生事件，需要加.native 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件。

、emit 是基于发布订阅模式的，维护一个事件中心，on 的时候将事件按名称存在事件中心里，称之为订阅者，然后 emit 将对应的事件进行发布，去执行事件中心里的对应的监听器

手写发布订阅原理 传送门[7]

19 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 的回调函数，创建好的组件实例会作为回调函数的参数传入。

20 vue-router 动态路由是什么 有什么问题

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {

  template: "<div>User</div>",

};


const router = new VueRouter({

  routes: [

    // 动态路径参数 以冒号开头

    { path: "/user/:id", component: User },

  ],

});
❝

问题:vue-router 组件复用导致路由参数失效怎么办？

❞

解决方法：

1.通过 watch 监听路由参数再发请求：

watch: { //通过watch来监听路由变化


 "$route": function(){

 this.getData(this.$route.params.xxx);

 }

}

2.用 :key 来阻止“复用”

<router-view :key="$route.fullPath" />