关于vue.js:社招前端经典vue面试题附答案

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

体验

能够从localStorage中获取作为状态初始值：

const store = createStore({
  state () {
    return {
      count: localStorage.getItem('count')
    }
  }
})

业务代码中，提交批改状态同时保留最新值：虽说实现了，然而每次还要手动刷新localStorage不太优雅

store.commit('increment')
localStorage.setItem('count', store.state.count)

答复范例

vuex只是在内存保留状态，刷新之后就会失落，如果要长久化就要存起来
localStorage就很适合，提交mutation的时候同时存入localStorage，store中把值取出作为state的初始值即可。
这里有两个问题，不是所有状态都须要长久化；如果须要保留的状态很多，编写的代码就不够优雅，每个提交的中央都要独自做保留解决。这里就能够利用vuex提供的subscribe办法做一个对立的解决。甚至能够封装一个vuex插件以便复用。
相似的插件有vuex-persist、vuex-persistedstate，外部的实现就是通过订阅mutation变动做对立解决，通过插件的选项管制哪些须要长久化

原理

能够看一下vuex-persist (opens new window)外部的确是利用subscribe实现的

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？

1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

Vue应用了Object.defineProperty实现双向数据绑定
在初始化实例时对属性执行 getter/setter 转化
属性必须在data对象上存在能力让Vue将它转换为响应式的（这也就造成了Vue无奈检测到对象属性的增加或删除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下来咱们看看框架自身是如何实现的呢?

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 的性能所调用的办法

Vue为什么没有相似于React中shouldComponentUpdate的生命周期？

考点: Vue的变动侦测原理

前置常识: 依赖收集、虚构DOM、响应式零碎

根本原因是Vue与React的变动侦测形式有所不同

React是pull的形式侦测变动,当React晓得发生变化后,会应用Virtual Dom Diff进行差别检测,然而很多组件实际上是必定不会发生变化的,这个时候须要用shouldComponentUpdate进行手动操作来缩小diff,从而进步程序整体的性能.

Vue是pull+push的形式侦测变动的,在一开始就晓得那个组件产生了变动,因而在push的阶段并不需要手动管制diff,而组件外部采纳的diff形式实际上是能够引入相似于shouldComponentUpdate相干生命周期的,然而通常正当大小的组件不会有适量的diff,手动优化的价值无限,因而目前Vue并没有思考引入shouldComponentUpdate这种手动优化的生命周期.

vue 中应用了哪些设计模式

1.工厂模式 – 传入参数即可创立实例

虚构 DOM 依据参数的不同返回根底标签的 Vnode 和组件 Vnode

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

vuex 和 vue-router 的插件注册办法 install 判断如果零碎存在实例就间接返回掉

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

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

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

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

组件通信

组件通信的形式如下：

（1） props / $emit

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

1. 父组件向子组件传值

props只能是父组件向子组件进行传值，props使得父子组件之间造成了一个单向上行绑定。子组件的数据会随着父组件不断更新。
props 能够显示定义一个或一个以上的数据，对于接管的数据，能够是各种数据类型，同样也能够传递一个函数。
props属性名规定：若在props中应用驼峰模式，模板中须要应用短横线的模式

// 父组件
<template>
  <div id="father">
    <son :msg="msgData" :fn="myFunction"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  name: father,
  data() {
    msgData: "父组件数据";
  },
  methods: {
    myFunction() {
      console.log("vue");
    },
  },
  components: { son },
};
</script>

// 子组件
<template>
  <div id="son">
    <p>{{ msg }}</p>
    <button @click="fn">按钮</button>
  </div>
</template>
<script>
export default { name: "son", props: ["msg", "fn"] };
</script>

2. 子组件向父组件传值

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接管参数。

// 父组件
<template>
  <div class="section">
    <com-article
      :articles="articleList"
      @onEmitIndex="onEmitIndex"
    ></com-article>
    <p>{{ currentIndex }}</p>
  </div>
</template>

<script>
import comArticle from "./test/article.vue";
export default {
  name: "comArticle",
  components: { comArticle },
  data() {
    return { currentIndex: -1, articleList: ["红楼梦", "西游记", "三国演义"] };
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx;
    },
  },
};
</script>

//子组件
<template>
  <div>
    <div
      v-for="(item, index) in articles"
      :key="index"
      @click="emitIndex(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["articles"],
  methods: {
    emitIndex(index) {
      this.$emit("onEmitIndex", index); // 触发父组件的办法，并传递参数index
    },
  },
};
</script>

（2）eventBus事件总线（`$emit / $on`）

eventBus事件总线实用于父子组件、非父子组件等之间的通信，应用步骤如下： （1）创立事件核心治理组件之间的通信

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

（2）发送事件 假如有两个兄弟组件firstCom和secondCom：

<template>
  <div>
    <first-com></first-com>
    <second-com></second-com>
  </div>
</template>

<script>
import firstCom from "./firstCom.vue";
import secondCom from "./secondCom.vue";
export default { components: { firstCom, secondCom } };
</script>

在firstCom组件中发送事件：

<template>
  <div>
    <button @click="add">加法</button>
  </div>
</template>

<script>
import { EventBus } from "./event-bus.js"; // 引入事件核心

export default {
  data() {
    return { num: 0 };
  },
  methods: {
    add() {
      EventBus.$emit("addition", { num: this.num++ });
    },
  },
};
</script>

（3）接管事件 在secondCom组件中发送事件：

<template>
  <div>求和: {{ count }}</div>
</template>

<script>
import { EventBus } from "./event-bus.js";
export default {
  data() {
    return { count: 0 };
  },
  mounted() {
    EventBus.$on("addition", (param) => {
      this.count = this.count + param.num;
    });
  },
};
</script>

在上述代码中，这就相当于将num值存贮在了事件总线中，在其余组件中能够间接拜访。事件总线就相当于一个桥梁，不必组件通过它来通信。

尽管看起来比较简单，然而这种办法也有不变之处，如果我的项目过大，应用这种形式进行通信，前期保护起来会很艰难。

（3）依赖注入（provide / inject）

这种形式就是Vue中的依赖注入，该办法用于父子组件之间的通信。当然这里所说的父子不肯定是真正的父子，也能够是祖孙组件，在层数很深的状况下，能够应用这种办法来进行传值。就不必一层一层的传递了。

provide / inject是Vue提供的两个钩子，和data、methods是同级的。并且provide的书写模式和data一样。

provide 钩子用来发送数据或办法
inject钩子用来接收数据或办法

在父组件中：

provide() { 
    return {     
        num: this.num  
    };
}

在子组件中：

inject: ['num']

还能够这样写，这样写就能够拜访父组件中的所有属性：

provide() {
 return {
    app: this
  };
}
data() {
 return {
    num: 1
  };
}

inject: ['app']
console.log(this.app.num)

留神： 依赖注入所提供的属性是非响应式的。

（3）ref / $refs

这种形式也是实现父子组件之间的通信。

ref：这个属性用在子组件上，它的援用就指向了子组件的实例。能够通过实例来拜访组件的数据和办法。

在子组件中：

export default {
  data () {
    return {
      name: 'JavaScript'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

在父组件中：

<template>
  <child ref="child"></component-a>
</template>
<script>
import child from "./child.vue";
export default {
  components: { child },
  mounted() {
    console.log(this.$refs.child.name); // JavaScript
    this.$refs.child.sayHello(); // hello
  },
};
</script>

（4）`$parent / $children`

应用$parent能够让组件拜访父组件的实例（拜访的是上一级父组件的属性和办法）
应用$children能够让组件拜访子组件的实例，然而，$children并不能保障程序，并且拜访的数据也不是响应式的。

在子组件中：

<template>
  <div>
    <span>{{ message }}</span>
    <p>获取父组件的值为: {{ parentVal }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: "Vue" };
  },
  computed: {
    parentVal() {
      return this.$parent.msg;
    },
  },
};
</script>

在父组件中：

// 父组件中
<template>
  <div class="hello_world">
    <div>{{ msg }}</div>
    <child></child>
    <button @click="change">点击扭转子组件值</button>
  </div>
</template>

<script>
import child from "./child.vue";
export default {
  components: { child },
  data() {
    return { msg: "Welcome" };
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = "JavaScript";
    },
  },
};
</script>

在下面的代码中，子组件获取到了父组件的parentVal值，父组件扭转了子组件中message的值。 须要留神：

通过$parent拜访到的是上一级父组件的实例，能够应用$root来拜访根组件的实例
在组件中应用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件#app上拿$parent失去的是new Vue()的实例，在这实例上再拿$parent失去的是undefined，而在最底层的子组件拿$children是个空数组
$children 的值是数组，而$parent是个对象

（5）`$attrs / $listeners`

思考一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给组件C传递数据，这种隔代的数据，该应用哪种形式呢？

如果是用props/$emit来一级一级的传递，的确能够实现，然而比较复杂；如果应用事件总线，在多人开发或者我的项目较大的时候，保护起来很麻烦；如果应用Vuex，确实也能够，然而如果仅仅是传递数据，那可能就有点节约了。

针对上述情况，Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

先来看一下inheritAttrs，它的默认值true，继承所有的父组件属性除props之外的所有属性；inheritAttrs：false 只继承class属性。

$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），个别用在子组件的子元素上
$listeners：该属性是一个对象，外面蕴含了作用在这个组件上的所有监听器，能够配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

A组件（APP.vue）：

<template>
  <div id="app">
    //此处监听了两个事件，能够在B组件或者C组件中间接触发
    <child1
      :p-child1="child1"
      :p-child2="child2"
      @test1="onTest1"
      @test2="onTest2"
    ></child1>
  </div>
</template>
<script>
import Child1 from "./Child1.vue";
export default {
  components: { Child1 },
  methods: {
    onTest1() {
      console.log("test1 running");
    },
    onTest2() {
      console.log("test2 running");
    },
  },
};
</script>

B组件（Child1.vue）：

<template>
  <div class="child-1">
    <p>props: {{ pChild1 }}</p>
    <p>$attrs: {{ $attrs }}</p>
    <child2 v-bind="$attrs" v-on="$listeners"></child2>
  </div>
</template>
<script>
import Child2 from "./Child2.vue";
export default {
  props: ["pChild1"],
  components: { Child2 },
  inheritAttrs: false,
  mounted() {
    this.$emit("test1"); // 触发APP.vue中的test1办法
  },
};
</script>

C 组件 (Child2.vue)：

<template>
  <div class="child-2">
    <p>props: {{ pChild2 }}</p>
    <p>$attrs: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  props: ["pChild2"],
  inheritAttrs: false,
  mounted() {
    this.$emit("test2"); // 触发APP.vue中的test2办法
  },
};
</script>

在上述代码中：

C组件中能间接触发test的起因在于 B组件调用C组件时应用 v-on 绑定了$listeners 属性
在B组件中通过v-bind 绑定$attrs属性，C组件能够间接获取到A组件中传递下来的props（除了B组件中props申明的）

（6）总结

（1）父子组件间通信

子组件通过 props 属性来承受父组件的数据，而后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来取得子组件，子组件通过 $parent 取得父组件，这样也能够实现通信。
应用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不管子组件有多深，只有调用了 inject 那么就能够注入 provide中的数据。

（2）兄弟组件间通信

应用 eventBus 的办法，它的实质是通过创立一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现音讯的传递。
通过 $parent/$refs 来获取到兄弟组件，也能够进行通信。

（3）任意组件之间

应用 eventBus ，其实就是创立一个事件核心，相当于中转站，能够用它来传递事件和接管事件。

如果业务逻辑简单，很多组件之间须要同时解决一些公共的数据，这个时候采纳下面这一些办法可能不利于我的项目的保护。这个时候能够应用 vuex ，vuex 的思维就是将这一些公共的数据抽离进去，将它作为一个全局的变量来治理，而后其余组件就能够对这个公共数据进行读写操作，这样达到理解耦的目标。

理解nextTick吗？

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

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

Vue的性能优化有哪些

（1）编码阶段

尽量减少data中的数据，data中的数据都会减少getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果须要应用v-for给每项元素绑定事件时应用事件代理
SPA 页面采纳keep-alive缓存组件
在更多的状况下，应用v-if代替v-show
key保障惟一
应用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动静加载
图片懒加载

（2）SEO优化

预渲染
服务端渲染SSR

（3）打包优化

压缩代码
Tree Shaking/Scope Hoisting
应用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

（4）用户体验

骨架屏
PWA
还能够应用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

什么是 mixin ？

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

Vue.mixin的应用场景和原理

在日常的开发中，咱们常常会遇到在不同的组件中常常会须要用到一些雷同或者类似的代码，这些代码的性能绝对独立，能够通过 Vue 的 mixin 性能抽离公共的业务逻辑，原理相似“对象的继承”，当组件初始化时会调用 mergeOptions 办法进行合并，采纳策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以失当的形式进行“合并”；如果混入的数据和自身组件的数据抵触，会以组件的数据为准
mixin有很多缺点如：命名抵触、依赖问题、数据起源问题

根本应用

<script>
    // Vue.options
    Vue.mixin({ // 如果他是对象 每个组件都用mixin里的对象进行合并
        data(){
            return {a: 1,b: 2}
        }
    });
    // Vue.extend
    Vue.component('my',{ // 组件必须是函数 Vue.extend  => render(xxx)
        data(){
            return {x:1}
        }
    }) 
    // 没有 new 没有实例  _init()
    // const vm = this
    new Vue({
        el:'#app',
        data(){ // 根能够不是函数 
            return {c:3}
        }
    })
</script>

相干源码

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) {
    // strats合并策略
    if (strats[k]) {
      options[k] = strats[k](parent[k], child[k]);
    } else {
      // 默认策略
      options[k] = child[k] ? child[k] : parent[k];
    }
  }
  return options;
}

你有对 Vue 我的项目进行哪些优化？

（1）代码层面的优化

v-if 和 v-show 辨别应用场景
computed 和 watch 辨别应用场景
v-for 遍历必须为 item 增加 key，且防止同时应用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化有限列表性能
服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

Webpack 对图片进行压缩
缩小 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建后果输入剖析
Vue 我的项目的编译优化

（3）根底的 Web 技术的优化

开启 gzip 压缩
浏览器缓存
CDN 的应用
应用 Chrome Performance 查找性能瓶颈

nextTick在哪里应用？原理是？

nextTick 中的回调是在下次 DOM 更新循环完结之后执行提早回调，用于取得更新后的 DOM
在批改数据之后立刻应用这个办法，获取更新后的 DOM
次要思路就是采纳微工作优先的形式调用异步办法去执行 nextTick 包装的办法

nextTick 办法次要是应用了宏工作和微工作,定义了一个异步办法.屡次调用 nextTick 会将办法存入队列中，通过这个异步办法清空以后队列。所以这个 nextTick 办法就是异步办法

依据执行环境别离尝试采纳

先采纳Promise
Promise不反对，再采纳MutationObserver
MutationObserver不反对，再采纳setImmediate
如果以上都不行则采纳setTimeout
最初执行flushCallbacks，把callbacks外面的数据顺次执行

答复范例

nextTick 中的回调是在下次 DOM 更新循环完结之后执行提早回调，用于取得更新后的 DOM
Vue有个异步更新策略，意思是如果数据变动，Vue不会立即更新DOM，而是开启一个队列，把组件更新函数保留在队列中，在同一事件循环中产生的所有数据变更会异步的批量更新。这一策略导致咱们对数据的批改不会立即体现在DOM上，此时如果想要获取更新后的DOM状态，就须要应用nextTick
开发时，有两个场景咱们会用到nextTick
created中想要获取DOM时

响应式数据变动后获取DOM更新后的状态，比方心愿获取列表更新后的高度
nextTick签名如下：function nextTick(callback?: () => void): Promise<void>

所以咱们只须要在传入的回调函数中拜访最新DOM状态即可，或者咱们能够await nextTick()办法返回的Promise之后做这件事

在Vue外部，nextTick之所以可能让咱们看到DOM更新后的后果，是因为咱们传入的callback会被增加到队列刷新函数(flushSchedulerQueue)的前面，这样等队列外部的更新函数都执行结束，所有DOM操作也就完结了，callback天然可能获取到最新的DOM值

根本应用

const vm = new Vue({
    el: '#app',
    data() {
        return { a: 1 }
    }
}); 

// vm.$nextTick(() => {// [nextTick回调函数fn,外部更新flushSchedulerQueue]
//     console.log(vm.$el.innerHTML)
// })

// 是将内容保护到一个数组里，最终依照程序程序。 第一次会开启一个异步工作

vm.a = 'test'; // 批改了数据后并不会马上更新视图
vm.$nextTick(() => {// [nextTick回调函数fn,外部更新flushSchedulerQueue]
    console.log(vm.$el.innerHTML)
})

// nextTick中的办法会被放到 更新页面watcher的前面去

相干代码如下

// src/core/utils/nextTick
let callbacks = [];
let pending = false;
function flushCallbacks() {
  pending = false; //把标记还原为false
  // 顺次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[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();
  }
}

数据更新的时候外部会调用nextTick

// src/core/observer/scheduler.js

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true

      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 把更新办法放到数组中保护[nextTick回调函数,更新函数flushSchedulerQueue]
      /**
       * vm.a = 'test'; // 批改了数据后并不会马上更新视图
        vm.$nextTick(() => {// [fn,更新]
            console.log(vm.$el.innerHTML)
        })
       */
      nextTick(flushSchedulerQueue)
    }
  }
}

Vue路由hash模式和history模式

1. hash模式

晚期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简略，location.hash 的值就是 URL中 # 前面的内容。比方上面这个网站，它的 location.hash 的值为 '#search'

https://interview2.poetries.top#search

hash 路由模式的实现次要是基于上面几个个性

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 局部不会被发送；
hash 值的扭转，都会在浏览器的拜访历史中减少一个记录。因而咱们能通过浏览器的回退、后退按钮管制 hash 的切换；
能够通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会产生扭转；或者应用 JavaScript 来对 loaction.hash 进行赋值，扭转 URL 的 hash 值；
咱们能够应用 hashchange 事件来监听 hash 值的变动，从而对页面进行跳转（渲染）

window.addEventListener("hashchange", funcRef, false);

每一次扭转 hash（window.location.hash），都会在浏览器的拜访历史中减少一个记录利用 hash 的以上特点，就能够来实现前端路由“更新视图但不从新申请页面”的性能了

特点：兼容性好然而不美观

2. history模式

history采纳HTML5的新个性；且提供了两个新办法： pushState()， replaceState()能够对浏览器历史记录栈进行批改，以及popState事件的监听到状态变更

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

这两个办法有个独特的特点：当调用他们批改浏览器历史记录栈后，尽管以后 URL 扭转了，但浏览器不会刷新页面，这就为单页利用前端路由“更新视图但不从新申请页面”提供了根底。

history 路由模式的实现次要基于存在上面几个个性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变动；
咱们能够应用 popstate 事件来监听 url 的变动，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时咱们须要手动触发页面跳转（渲染）。

特点：尽管好看，然而刷新会呈现 404 须要后端进行配置

vue 中应用了哪些设计模式

1.工厂模式 – 传入参数即可创立实例

虚构 DOM 依据参数的不同返回根底标签的 Vnode 和组件 Vnode

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

vuex 和 vue-router 的插件注册办法 install 判断如果零碎存在实例就间接返回掉

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

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

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

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

…其余模式欢送补充

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 重写。

Vue为什么须要虚构DOM？优缺点有哪些

因为在浏览器中操作 DOM是很低廉的。频繁的操作 DOM，会产生肯定的性能问题。这就是虚构 Dom 的产生起因。Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM 实质就是用一个原生的 JS 对象去形容一个 DOM 节点，是对实在 DOM 的一层形象

长处：

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

毛病:

无奈进行极致优化：尽管虚构 DOM + 正当的优化，足以应答绝大部分利用的性能需求，但在一些性能要求极高的利用中虚构 DOM 无奈进行针对性的极致优化。
首次渲染大量DOM时，因为多了一层虚构 DOM 的计算，会比 innerHTML 插入慢。

虚构 DOM 实现原理？

虚构 DOM 的实现原理次要包含以下 3 局部：

用 JavaScript 对象模仿实在 DOM 树，对实在 DOM 进行形象；
diff 算法 — 比拟两棵虚构 DOM 树的差别；
pach 算法 — 将两个虚构 DOM 对象的差别利用到真正的 DOM 树。

说说你对虚构 DOM 的了解？答复范例

思路

vdom是什么
引入vdom的益处
vdom如何生成，又如何成为dom
在后续的diff中的作用

答复范例

虚构dom顾名思义就是虚构的dom对象，它自身就是一个 JavaScript 对象，只不过它是通过不同的属性去形容一个视图构造
通过引入vdom咱们能够取得如下益处：
将实在元素节点形象成 VNode，无效缩小间接操作 dom 次数，从而进步程序性能
- 间接操作 dom 是有限度的，比方：diff、clone 等操作，一个实在元素上有许多的内容，如果间接对其进行 diff 操作，会去额定 diff 一些没有必要的内容；同样的，如果须要进行 clone 那么须要将其全部内容进行复制，这也是没必要的。然而，如果将这些操作转移到 JavaScript 对象上，那么就会变得简略了
- 操作 dom 是比拟低廉的操作，频繁的dom操作容易引起页面的重绘和回流，然而通过形象 VNode 进行两头解决，能够无效缩小间接操作dom的次数，从而缩小页面重绘和回流

不便实现跨平台
- 同一 VNode 节点能够渲染成不同平台上的对应的内容，比方：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android)变为对应的控件、能够实现 SSR 、渲染到 WebGL 中等等
- Vue3 中容许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染
vdom如何生成？在vue中咱们经常会为组件编写模板 – template，这个模板会被编译器 – compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚构dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。

挂载过程完结后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件从新render，此时就会生成新的vdom，和上一次的渲染后果diff就能失去变动的中央，从而转换为最小量的dom操作，高效更新视图

为什么要用vdom？案例解析

当初有一个场景，实现以下需要:

[    
  { name: "张三", age: "20", address: "北京"},    
  { name: "李四", age: "21", address: "武汉"},    
  { name: "王五", age: "22", address: "杭州"},
]

将该数据展现成一个表格，并且轻易批改一个信息，表格也跟着批改。用jQuery实现如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
  <button id="btn-change">扭转</button>

  <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
  <script>
    const data = [{
        name: "张三",
        age: "20",
        address: "北京"
      },
      {
        name: "李四",
        age: "21",
        address: "武汉"
      },
      {
        name: "王五",
        age: "22",
        address: "杭州"
      },
    ];
    //渲染函数
    function render(data) {
      const $container = $('#container');
      $container.html('');
      const $table = $('<table>');
      // 重绘一次
      $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'));
      data.forEach(item => {
        //每次进入都重绘
        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`))
      })
      $container.append($table);
    }

    $('#btn-change').click(function () {
      data[1].age = 30;
      data[2].address = '深圳';
      render(data);
    });
  </script>
</body>
</html>

这样点击按钮，会有相应的视图变动，然而你审查以下元素，每次改变之后，table标签都得从新创立，也就是说table上面的每一个栏目，不论是数据是否和原来一样，都得从新渲染，这并不是现实中的状况，当其中的一栏数据和原来一样，咱们心愿这一栏不要从新渲染，因为DOM重绘相当耗费浏览器性能。
因而咱们采纳JS对象模仿的办法，将DOM的比对操作放在JS层，缩小浏览器不必要的重绘，提高效率。
当然有人说虚构DOM并不比实在的DOM快，其实也是有情理的。当上述table中的每一条数据都扭转时，显然实在的DOM操作更快，因为虚构DOM还存在js中diff算法的比对过程。所以，上述性能劣势仅仅实用于大量数据的渲染并且扭转的数据只是一小部分的状况。

如下DOM构造:

<ul id="list">
    <li class="item">Item1</li>
    <li class="item">Item2</li>
</ul>

映射成虚构DOM就是这样:

{
  tag: "ul",
  attrs: {
    id: "list"
  },
  children: [
    {
      tag: "li",
      attrs: { className: "item" },
      children: ["Item1"]
    }, {
      tag: "li",
      attrs: { className: "item" },
      children: ["Item2"]
    }
  ]
}

应用snabbdom实现vdom

这是一个繁难的实现vdom性能的库，相比vue、react，对于vdom这块更加繁难，适宜咱们学习vdom。vdom外面有两个外围的api，一个是h函数，一个是patch函数，前者用来生成vdom对象，后者的性能在于做虚构dom的比对和将vdom挂载到实在DOM上

简略介绍一下这两个函数的用法:

h('标签名', {属性}, [子元素])
h('标签名', {属性}, [文本])
patch(container, vnode) // container为容器DOM元素
patch(vnode, newVnode)

当初咱们就来用snabbdom重写一下方才的例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">扭转</button>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
  <script>
    let snabbdom = window.snabbdom;

    // 定义patch
    let patch = snabbdom.init([
      snabbdom_class,
      snabbdom_props,
      snabbdom_style,
      snabbdom_eventlisteners
    ]);

    //定义h
    let h = snabbdom.h;

    const data = [{
        name: "张三",
        age: "20",
        address: "北京"
      },
      {
        name: "李四",
        age: "21",
        address: "武汉"
      },
      {
        name: "王五",
        age: "22",
        address: "杭州"
      },
    ];
    data.unshift({name: "姓名", age: "年龄", address: "地址"});

    let container = document.getElementById('container');
    let vnode;
    const render = (data) => {
      let newVnode = h('table', {}, data.map(item => { 
        let tds = [];
        for(let i in item) {
          if(item.hasOwnProperty(i)) {
            tds.push(h('td', {}, item[i] + ''));
          }
        }
        return h('tr', {}, tds);
      }));

      if(vnode) {
          patch(vnode, newVnode);
      } else {
          patch(container, newVnode);
      }
      vnode = newVnode;
    }

    render(data);

    let btnChnage = document.getElementById('btn-change');
    btnChnage.addEventListener('click', function() {
      data[1].age = 30;
      data[2].address = "深圳";
      //re-render
      render(data);
    })
  </script>
</body>
</html>

你会发现， 只有扭转的栏目才闪动，也就是进行重绘 ，数据没有扭转的栏目还是放弃原样，这样就大大节俭了浏览器从新渲染的开销

vue中应用h函数生成虚构DOM返回

const vm = new Vue({
  el: '#app',
  data: {
    user: {name:'poetry'}
  },
  render(h){
    // h()
    // h(App)
    // h('div',[])
    let vnode = h('div',{},'hello world');
    return vnode
  }
});

</details>

双向绑定的原理是什么

咱们都晓得 Vue 是数据双向绑定的框架，双向绑定由三个重要局部形成

数据层（Model）：利用的数据及业务逻辑
视图层（View）：利用的展现成果，各类UI组件
业务逻辑层（ViewModel）：框架封装的外围，它负责将数据与视图关联起来

而下面的这个分层的架构计划，能够用一个专业术语进行称说：MVVM这里的管制层的外围性能便是 “数据双向绑定” 。天然，咱们只需弄懂它是什么，便能够进一步理解数据绑定的原理

了解ViewModel

它的主要职责就是：

数据变动后更新视图
视图变动后更新数据

当然，它还有两个次要局部组成

监听器（Observer）：对所有数据的属性进行监听
解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,依据指令模板替换数据,以及绑定相应的更新函数

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

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

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

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

实现双向绑定

咱们还是以Vue为例，先来看看Vue中的双向绑定流程是什么的

new Vue()首先执行初始化，对data执行响应化解决，这个过程产生Observe中
同时对模板执行编译，找到其中动静绑定的数据，从data中获取并初始化视图，这个过程产生在Compile中
同时定义⼀个更新函数和Watcher，未来对应数据变动时Watcher会调用更新函数
因为data的某个key在⼀个视图中可能呈现屡次，所以每个key都须要⼀个管家Dep来治理多个Watcher
未来data中数据⼀旦发生变化，会首先找到对应的Dep，告诉所有Watcher执行更新函数

流程图如下：

先来一个构造函数：执行初始化，对data执行响应化解决

class Vue {  
  constructor(options) {  
    this.$options = options;  
    this.$data = options.data;  

    // 对data选项做响应式解决  
    observe(this.$data);  

    // 代理data到vm上  
    proxy(this);  

    // 执行编译  
    new Compile(options.el, this);  
  }  
}

对data选项执行响应化具体操作

function observe(obj) {  
  if (typeof obj !== "object" || obj == null) {  
    return;  
  }  
  new Observer(obj);  
}  

class Observer {  
  constructor(value) {  
    this.value = value;  
    this.walk(value);  
  }  
  walk(obj) {  
    Object.keys(obj).forEach((key) => {  
      defineReactive(obj, key, obj[key]);  
    });  
  }  
}

编译Compile

对每个元素节点的指令进行扫描跟解析,依据指令模板替换数据,以及绑定相应的更新函数

class Compile {  
  constructor(el, vm) {  
    this.$vm = vm;  
    this.$el = document.querySelector(el);  // 获取dom  
    if (this.$el) {  
      this.compile(this.$el);  
    }  
  }  
  compile(el) {  
    const childNodes = el.childNodes;   
    Array.from(childNodes).forEach((node) => { // 遍历子元素  
      if (this.isElement(node)) {   // 判断是否为节点  
        console.log("编译元素" + node.nodeName);  
      } else if (this.isInterpolation(node)) {  
        console.log("编译插值⽂本" + node.textContent);  // 判断是否为插值文本 {{}}  
      }  
      if (node.childNodes && node.childNodes.length > 0) {  // 判断是否有子元素  
        this.compile(node);  // 对子元素进行递归遍历  
      }  
    });  
  }  
  isElement(node) {  
    return node.nodeType == 1;  
  }  
  isInterpolation(node) {  
    return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);  
  }  
}

依赖收集

视图中会用到data中某key，这称为依赖。同⼀个key可能呈现屡次，每次都须要收集进去用⼀个Watcher来保护它们，此过程称为依赖收集多个Watcher须要⼀个Dep来治理，须要更新时由Dep统⼀告诉

实现思路

defineReactive时为每⼀个key创立⼀个Dep实例
初始化视图时读取某个key，例如name1，创立⼀个watcher1
因为触发name1的getter办法，便将watcher1增加到name1对应的Dep中
当name1更新，setter触发时，便可通过对应Dep告诉其治理所有Watcher更新

// 负责更新视图  
class Watcher {  
  constructor(vm, key, updater) {  
    this.vm = vm  
    this.key = key  
    this.updaterFn = updater  

    // 创立实例时，把以后实例指定到Dep.target动态属性上  
    Dep.target = this  
    // 读一下key，触发get  
    vm[key]  
    // 置空  
    Dep.target = null  
  }  

  // 将来执行dom更新函数，由dep调用的  
  update() {  
    this.updaterFn.call(this.vm, this.vm[this.key])  
  }  
}

申明Dep

class Dep {  
  constructor() {  
    this.deps = [];  // 依赖治理  
  }  
  addDep(dep) {  
    this.deps.push(dep);  
  }  
  notify() {   
    this.deps.forEach((dep) => dep.update());  
  }  
}

创立watcher时触发getter

class Watcher {  
  constructor(vm, key, updateFn) {  
    Dep.target = this;  
    this.vm[this.key];  
    Dep.target = null;  
  }  
}

依赖收集，创立Dep实例

function defineReactive(obj, key, val) {  
  this.observe(val);  
  const dep = new Dep();  
  Object.defineProperty(obj, key, {  
    get() {  
      Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例  
      return val;  
    },  
    set(newVal) {  
      if (newVal === val) return;  
      dep.notify(); // 告诉dep执行更新办法  
    },  
  });  
}

keep-alive 应用场景和原理

keep-alive 是 Vue 内置的一个组件， 能够实现组件缓存 ，当组件切换时不会对以后组件进行卸载。 个别联合路由和动静组件一起应用 ，用于缓存组件
提供 include 和 exclude 属性， 容许组件有条件的进行缓存 。两者都反对字符串或正则表达式，include 示意只有名称匹配的组件会被缓存，exclude 示意任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高
对应两个钩子函数 activated 和deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated
keep-alive 的中还使用了 LRU(最近起码应用) 算法，抉择最近最久未应用的组件予以淘汰

<keep-alive></keep-alive> 包裹动静组件时，会缓存不流动的组件实例,次要用于保留组件状态或防止从新渲染

比方有一个列表和一个详情，那么用户就会常常执行关上详情=>返回列表=>关上详情…这样的话列表和详情都是一个频率很高的页面，那么就能够对列表组件应用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中疾速渲染，而不是从新渲染

对于keep-alive的根本用法

<keep-alive>
  <component :is="view"></component>
</keep-alive>

应用includes和exclude：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (应用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (应用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先查看组件本身的 name 选项，如果 name 选项不可用，则匹配它的部分注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

应用场景

应用准则：当咱们在某些场景下不须要让页面从新加载时咱们能够应用keepalive

举个栗子:

当咱们从首页–>列表页–>商详页–>再返回，这时候列表页应该是须要keep-alive

从首页–>列表页–>商详页–>返回到列表页(须要缓存)–>返回到首页(须要缓存)–>再次进入列表页(不须要缓存)，这时候能够按需来管制页面的keep-alive

在路由中设置keepAlive属性判断是否须要缓存

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

应用<keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 须要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不须要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

思考题：缓存后如何获取数据

解决方案能够有以下两种：

beforeRouteEnter：每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子

// 留神：服务器端渲染期间avtived不被调用
activated(){
  this.getData() // 获取数据
},

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

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

相干代码

keep-alive是vue中内置的一个组件

源码地位：src/core/components/keep-alive.js

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); //获取第一个子组件
    // 获取该组件节点的componentOptions
    const componentOptions: ?VNodeComponentOptions =
      vnode && vnode.componentOptions;
    if (componentOptions) {
      // 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag
      const name: ?string = getComponentName(componentOptions);
      const { include, exclude } = this;
      // 不走缓存 如果name不在inlcude中或者存在于exlude中则示意不缓存，间接返回vnode
      if (
        // not included  不蕴含
        (include && (!name || !matches(include, name))) ||
        // excluded  排除外面
        (exclude && name && matches(exclude, name))
      ) {
        //返回虚构节点
        return vnode;
      }

      const { cache, keys } = this;
      // 获取组件的key值
      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;
      // 拿到key值后去this.cache对象中去寻找是否有该值，如果有则示意该组件有缓存，即命中缓存
      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]);
  },
};

能够看到该组件没有template，而是用了render，在组件渲染的时候会主动执行render函数

this.cache是一个对象，用来存储须要缓存的组件，它将以如下模式存储：

this.cache = {
  'key1':'组件1',
  'key2':'组件2',
  // ...
}

在组件销毁的时候执行pruneCacheEntry函数

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* 判断以后没有处于被渲染状态的组件，将其销毁*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

在mounted钩子函数中观测 include 和 exclude 的变动，如下：

mounted () {
  this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
  })
  this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
  })
}

如果include 或exclude 产生了变动，即示意定义须要缓存的组件的规定或者不须要缓存的组件的规定产生了变动，那么就执行pruneCache函数，函数如下

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规定进行匹配，如果匹配不上，则示意在新的缓存规定下该组件曾经不须要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可

对于keep-alive的最弱小缓存性能是在render函数中实现

首先获取组件的key值：

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

拿到key值后去this.cache对象中去寻找是否有该值，如果有则示意该组件有缓存，即命中缓存，如下：

/* 如果命中缓存，则间接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的程序，将其从原来的中央删掉并从新放在最初一个 */
    remove(keys, key)
    keys.push(key)
}

间接从缓存中拿 vnode 的组件实例，此时从新调整该组件key的程序，将其从原来的中央删掉并从新放在this.keys中最初一个

this.cache对象中没有该key值的状况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

computed 和 watch 的区别和使用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值产生扭转，下一次获取 computed 的值时才会从新计算 computed 的值；

watch： 更多的是「察看」的作用，相似于某些数据的监听回调，每当监听的数据变动时都会执行回调进行后续操作；

使用场景：

当咱们须要进行数值计算，并且依赖于其它数据时，应该应用 computed，因为能够利用 computed 的缓存个性，防止每次获取值时，都要从新计算；
当咱们须要在数据变动时执行异步或开销较大的操作时，应该应用 watch，应用 watch 选项容许咱们执行异步操作 ( 拜访一个 API )，限度咱们执行该操作的频率，并在咱们失去最终后果前，设置中间状态。这些都是计算属性无奈做到的。

关于vue.js:社招前端经典vue面试题附答案

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

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？

Vue为什么没有相似于React中shouldComponentUpdate的生命周期？

vue 中应用了哪些设计模式

组件通信

（1） props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

（2）eventBus事件总线（`$emit / $on`）

（3）依赖注入（provide / inject）

（3）ref / $refs

（4）`$parent / $children`

（5）`$attrs / $listeners`

（6）总结

理解nextTick吗？

Vue的性能优化有哪些

什么是 mixin ？

Vue.mixin的应用场景和原理

你有对 Vue 我的项目进行哪些优化？

nextTick在哪里应用？原理是？

Vue路由hash模式和history模式

vue 中应用了哪些设计模式

Proxy 与 Object.defineProperty 优劣比照

Vue为什么须要虚构DOM？优缺点有哪些

双向绑定的原理是什么

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

实现双向绑定

keep-alive 应用场景和原理

computed 和 watch 的区别和使用的场景？

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:社招前端经典vue面试题附答案

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

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ？你能说说如下代码的实现原理么？

Vue为什么没有相似于React中shouldComponentUpdate的生命周期？

vue 中应用了哪些设计模式

组件通信

（1） props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

（2）eventBus事件总线（$emit / $on）

（3）依赖注入（provide / inject）

（3）ref / $refs

（4）$parent / $children

（5）$attrs / $listeners

（6）总结

理解nextTick吗？

Vue的性能优化有哪些

什么是 mixin ？

Vue.mixin的应用场景和原理

你有对 Vue 我的项目进行哪些优化？

nextTick在哪里应用？原理是？

Vue路由hash模式和history模式

vue 中应用了哪些设计模式

Proxy 与 Object.defineProperty 优劣比照

Vue为什么须要虚构DOM？优缺点有哪些

双向绑定的原理是什么

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

实现双向绑定

keep-alive 应用场景和原理

computed 和 watch 的区别和使用的场景？

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？

（2）eventBus事件总线（`$emit / $on`）

（4）`$parent / $children`

（5）`$attrs / $listeners`

发表回复取消回复