智一面gtalent-【吐血总结】前端面试题（3）

21 谈一下对 vuex 的个人理解

vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。（无法持久化、内部核心原理是通过创造一个全局实例 new Vue）

主要包括以下几个模块：

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

22 Vuex 页面刷新数据丢失怎么解决

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件

推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中

23 Vuex 为什么要分模块并且加命名空间

「模块」:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

「命名空间」：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

24 使用过 Vue SSR 吗？说说 SSR

SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。

「优点：」

SSR 有着更好的 SEO、并且首屏加载速度更快

「缺点：」 开发条件会受到限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。

服务器会有更大的负载需求

25 vue 中使用了哪些设计模式

1.工厂模式 - 传入参数即可创建实例

虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode

2.单例模式 - 整个程序有且仅有一个实例

vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

3.发布-订阅模式 (vue 事件机制)

4.观察者模式 (响应式数据原理)

5.装饰模式: (@装饰器的用法)

6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

...其他模式欢迎补充

26 你都做过哪些 Vue 的性能优化

❝

这里只列举针对 Vue 的性能优化 整个项目的性能优化是一个大工程 可以另写一篇性能优化的文章 哈哈

❞

• 对象层级不要过深，否则性能就会差
• 不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
• 大数据列表和表格性能优化-虚拟列表/虚拟表格
• 防止内部泄漏，组件销毁后把全局变量和事件销毁
• 图片懒加载
• 路由懒加载
• 第三方插件的按需引入
• 适当采用 keep-alive 缓存组件
• 防抖、节流运用
• 服务端渲染 SSR or 预渲染

---

困难

27 Vue.mixin 的使用场景和原理

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

相关代码如下：

export default function initMixin(Vue){

  Vue.mixin = function (mixin) {

    //   合并对象

      this.options=mergeOptions(this.options,mixin)

  };

}

};


// src/util/index.js

// 定义生命周期

export const LIFECYCLE_HOOKS = [

  "beforeCreate",

  "created",

  "beforeMount",

  "mounted",

  "beforeUpdate",

  "updated",

  "beforeDestroy",

  "destroyed",

];


// 合并策略

const strats = {};

// mixin核心方法

export function mergeOptions(parent, child) {

  const options = {};

  // 遍历父亲

  for (let k in parent) {

    mergeFiled(k);

  }

  // 父亲没有 儿子有

  for (let k in child) {

    if (!parent.hasOwnProperty(k)) {

      mergeFiled(k);

    }

  }


  //真正合并字段方法

  function mergeFiled(k) {

    if (strats[k]) {

      options[k] = strats[k](parent[k], child[k] "k] = strats[k");

    } else {

      // 默认策略

      options[k] = child[k] ? child[k] : parent[k];

    }

  }

  return options;

}

28 nextTick 使用场景和原理

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

相关代码如下：

let callbacks = [];

let pending = false;

function flushCallbacks() {

  pending = false; //把标志还原为false

  // 依次执行回调

  for (let i = 0; i < callbacks.length; i++) {

    callbacks[i]( "i");

  }

}

let timerFunc; //定义异步方法  采用优雅降级

if (typeof Promise !== "undefined") {

  // 如果支持promise

  const p = Promise.resolve();

  timerFunc = () => {

    p.then(flushCallbacks);

  };

} else if (typeof MutationObserver !== "undefined") {

  // MutationObserver 主要是监听dom变化 也是一个异步方法

  let counter = 1;

  const observer = new MutationObserver(flushCallbacks);

  const textNode = document.createTextNode(String(counter));

  observer.observe(textNode, {

    characterData: true,

  });

  timerFunc = () => {

    counter = (counter + 1) % 2;

    textNode.data = String(counter);

  };

} else if (typeof setImmediate !== "undefined") {

  // 如果前面都不支持 判断setImmediate

  timerFunc = () => {

    setImmediate(flushCallbacks);

  };

} else {

  // 最后降级采用setTimeout

  timerFunc = () => {

    setTimeout(flushCallbacks, 0);

  };

}


export function nextTick(cb) {

  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组

  callbacks.push(cb);

  if (!pending) {

    // 如果多次调用nextTick  只会执行一次异步 等异步队列清空之后再把标志变为false

    pending = true;

    timerFunc();

  }

}

29 keep-alive 使用场景和原理

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

• 常用的两个属性 include/exclude，允许组件有条件的进行缓存。
• 两个生命周期 activated/deactivated，用来得知当前组件是否处于活跃状态。
• keep-alive 的中还运用了 LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰。

相关代码如下：

export default {

  name: "keep-alive",

  abstract: true, //抽象组件


  props: {

    include: patternTypes, //要缓存的组件

    exclude: patternTypes, //要排除的组件

    max: [String, Number], //最大缓存数

  },


  created() {

    this.cache = Object.create(null); //缓存对象  {a:vNode,b:vNode}

    this.keys = []; //缓存组件的key集合 [a,b]

  },


  destroyed() {

    for (const key in this.cache) {

      pruneCacheEntry(this.cache, key, this.keys);

    }

  },


  mounted() {

    //动态监听include  exclude

    this.$watch("include", (val) => {

      pruneCache(this, (name) => matches(val, name));

    });

    this.$watch("exclude", (val) => {

      pruneCache(this, (name) => !matches(val, name));

    });

  },


  render() {

    const slot = this.$slots.default; //获取包裹的插槽默认值

    const vnode: VNode = getFirstComponentChild(slot); //获取第一个子组件

    const componentOptions: ?VNodeComponentOptions =

      vnode && vnode.componentOptions;

    if (componentOptions) {

      // check pattern

      const name: ?string = getComponentName(componentOptions);

      const { include, exclude } = this;

      // 不走缓存

      if (

        // not included  不包含

        (include && (!name || !matches(include, name))) ||

        // excluded  排除里面

        (exclude && name && matches(exclude, name))

      ) {

        //返回虚拟节点

        return vnode;

      }


      const { cache, keys } = this;

      const key: ?string =

        vnode.key == null

          ? // same constructor may get registered as different local components

            // so cid alone is not enough (#3269)

            componentOptions.Ctor.cid +

            (componentOptions.tag ? `::${componentOptions.tag}` : "")

          : vnode.key;

      if (cache[key]) {

        //通过key 找到缓存 获取实例

        vnode.componentInstance = cache[key].componentInstance;

        // make current key freshest

        remove(keys, key); //通过LRU算法把数组里面的key删掉

        keys.push(key); //把它放在数组末尾

      } else {

        cache[key] = vnode; //没找到就换存下来

        keys.push(key); //把它放在数组末尾

        // prune oldest entry  //如果超过最大值就把数组第0项删掉

        if (this.max && keys.length > parseInt(this.max)) {

          pruneCacheEntry(cache, keys[0], keys, this._vnode);

        }

      }


      vnode.data.keepAlive = true; //标记虚拟节点已经被缓存

    }

    // 返回虚拟节点

    return vnode || (slot && slot[0]);

  },

};

❝

扩展补充：LRU 算法是什么？

❞

lrusuanfa.png

LRU 的核心思想是如果数据最近被访问过，那么将来被访问的几率也更高，所以我们将命中缓存的组件 key 重新插入到 this.keys 的尾部，这样一来，this.keys 中越往头部的数据即将来被访问几率越低，所以当缓存数量达到最大值时，我们就删除将来被访问几率最低的数据，即 this.keys 中第一个缓存的组件。

30 Vue.set 方法原理

了解 Vue 响应式原理的同学都知道在两种情况下修改数据 Vue 是不会触发视图更新的

1.在实例创建之后添加新的属性到实例上（给响应式对象新增属性）

2.直接更改数组下标来修改数组的值

Vue.set 或者说是 $set 原理如下

因为响应式数据 我们给对象和数组本身都增加了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性 首先会把新的属性进行响应式跟踪 然后会触发对象__ob__的 dep 收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组

相关代码如下

export function set(target: Array | Object, key: any, val: any): any {

  // 如果是数组 调用我们重写的splice方法 (这样可以更新视图)

  if (Array.isArray(target) && isValidArrayIndex(key)) {

    target.length = Math.max(target.length, key);

    target.splice(key, 1, val);

    return val;

  }

  // 如果是对象本身的属性，则直接添加即可

  if (key in target && !(key in Object.prototype)) {

    target[key] = val;

    return val;

  }

  const ob = (target: any).__ob__;


  // 如果不是响应式的也不需要将其定义成响应式属性

  if (!ob) {

    target[key] = val;

    return val;

  }

  // 将属性定义成响应式的

  defineReactive(ob.value, key, val);

  // 通知视图更新

  ob.dep.notify();

  return val;

}