关于vue.js:vue面试经常会问的那些题

为什么要应用异步组件

1. 节俭打包出的后果，异步组件离开打包，采纳 jsonp 的形式进行加载，无效解决文件过大的问题。
2. 外围就是包组件定义变成一个函数，依赖import() 语法，能够实现文件的宰割加载。

components:{AddCustomerSchedule:(resolve)=>import("../components/AddCustomer") // require([]) 
}

原理

export function (Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string): VNode | Array<VNode> | void { 
    // async component 
    let asyncFactory 
    if (isUndef(Ctor.cid)) { 
        asyncFactory = Ctor 
        Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回 undefiend 
        // 第二次渲染时 Ctor 不为 undefined 
        if (Ctor === undefined) { 
            return createAsyncPlaceholder( // 渲染占位符 空虚构节点 
                asyncFactory, 
                data, 
                context, 
                children, 
                tag 
            ) 
        } 
    } 
}
function resolveAsyncComponent (factory: Function, baseCtor: Class<Component>): Class<Component> | void {if (isDef(factory.resolved)) { 
        // 3. 在次渲染时能够拿到获取的最新组件 
        return factory.resolved 
    }
    const resolve = once((res: Object | Class<Component>) => {factory.resolved = ensureCtor(res, baseCtor) 
        if (!sync) {forceRender(true) //2. 强制更新视图从新渲染 
        } else {owners.length = 0} 
    })
    const reject = once(reason => {if (isDef(factory.errorComp)) {factory.error = true forceRender(true) 
        } 
    })
    const res = factory(resolve, reject)// 1. 将 resolve 办法和 reject 办法传入，用户调用 resolve 办法后 
    sync = false 
    return factory.resolved 
}

diff 算法

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

了解：

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

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

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

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

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 则实用于须要十分频繁切换条件的场景。

参考：前端 vue 面试题具体解答

对 keep-alive 的了解，它是如何实现的，具体缓存的是什么？

如果须要在组件切换的时候，保留一些组件的状态避免屡次渲染，就能够应用 keep-alive 组件包裹须要保留的组件。

（1）keep-alive

keep-alive 有以下三个属性：

• include 字符串或正则表达式，只有名称匹配的组件会被匹配；
• exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
• max 数字，最多能够缓存多少组件实例。

留神：keep-alive 包裹动静组件时，会缓存不流动的组件实例。

次要流程

1. 判断组件 name，不在 include 或者在 exclude 中，间接返回 vnode，阐明该组件不被缓存。
2. 获取组件实例 key，如果有获取实例的 key，否则从新生成。
3. key 生成规定，cid +”∶∶”+ tag，仅靠 cid 是不够的，因为雷同的构造函数能够注册为不同的本地组件。
4. 如果缓存对象内存在，则间接从缓存对象中获取组件实例给 vnode，不存在则增加到缓存对象中。5. 最大缓存数量，当缓存组件数量超过 max 值时，革除 keys 数组内第一个组件。

（2）keep-alive 的实现

const patternTypes: Array<Function> = [String, RegExp, Array] // 接管：字符串，正则，数组

export default {
  name: 'keep-alive',
  abstract: true, // 形象组件，是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在父组件链中。props: {
    include: patternTypes, // 匹配的组件，缓存
    exclude: patternTypes, // 不去匹配的组件，不缓存
    max: [String, Number], // 缓存组件的最大实例数量, 因为缓存的是组件实例（vnode），数量过多的时候，会占用过多的内存，能够用 max 指定下限
  },

  created() {
    // 用于初始化缓存虚构 DOM 数组和 vnode 的 key
    this.cache = Object.create(null)
    this.keys = []},

  destroyed() {
    // 销毁缓存 cache 的组件实例
    for (const key in this.cache) {pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted() {// prune 削减精简[v.]
    // 去监控 include 和 exclude 的扭转，依据最新的 include 和 exclude 的内容，来实时削减缓存的组件的内容
    this.$watch('include', (val) => {pruneCache(this, (name) => matches(val, name))
    })
    this.$watch('exclude', (val) => {pruneCache(this, (name) => !matches(val, name))
    })
  },
}

render 函数：

1. 会在 keep-alive 组件外部去写本人的内容，所以能够去获取默认 slot 的内容，而后依据这个去获取组件
2. keep-alive 只对第一个组件无效，所以获取第一个子组件。
3. 和 keep-alive 搭配应用的个别有：动静组件 和 router-view

render () {
  //
  function getFirstComponentChild (children: ?Array<VNode>): ?VNode {if (Array.isArray(children)) {for (let i = 0; i < children.length; i++) {const c = children[i]
    if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {return c}
  }
  }
  }
  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))
    ) {
      // 如果不匹配以后组件的名字和 include 以及 exclude
      // 那么间接返回组件的实例
      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

    if (cache[key]) {
      // LRU 缓存策略执行
      vnode.componentInstance = cache[key].componentInstance // 组件首次渲染的时候 componentInstance 为 undefined

      // make current key freshest
      remove(keys, key)
      keys.push(key)
      // 依据 LRU 缓存策略执行，将 key 从原来的地位移除，而后将这个 key 值放到最初面
    } else {
      // 在缓存列表外面没有的话，则退出，同时判断以后退出之后，是否超过了 max 所设定的范畴，如果是，则去除
      // 应用工夫距离最长的一个
      cache[key] = vnode
      keys.push(key)
      // prune oldest entry
      if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)
      }
    }
    // 将组件的 keepAlive 属性设置为 true
    vnode.data.keepAlive = true // 作用：判断是否要执行组件的 created、mounted 生命周期函数
  }
  return vnode || (slot && slot[0])
}

keep-alive 具体是通过 cache 数组缓存所有组件的 vnode 实例。当 cache 内原有组件被应用时会将该组件 key 从 keys 数组中删除，而后 push 到 keys 数组最初，以便革除最不罕用组件。

实现步骤：

1. 获取 keep-alive 下第一个子组件的实例对象，通过他去获取这个组件的组件名
2. 通过以后组件名去匹配原来 include 和 exclude，判断以后组件是否须要缓存，不须要缓存，间接返回以后组件的实例 vNode
3. 须要缓存，判断他以后是否在缓存数组外面：
4. 存在，则将他原来地位上的 key 给移除，同时将这个组件的 key 放到数组最初面（LRU）

• 不存在，将组件 key 放入数组，而后判断以后 key 数组是否超过 max 所设置的范畴，超过，那么削减未应用工夫最长的一个组件的 key
• 最初将这个组件的 keepAlive 设置为 true

（3）keep-alive 自身的创立过程和 patch 过程

缓存渲染的时候，会依据 vnode.componentInstance（首次渲染 vnode.componentInstance 为 undefined）和 keepAlive 属性判断不会执行组件的 created、mounted 等钩子函数，而是对缓存的组件执行 patch 过程∶ 间接把缓存的 DOM 对象直接插入到指标元素中，实现了数据更新的状况下的渲染过程。

首次渲染

• 组件的首次渲染∶判断组件的 abstract 属性，才往父组件外面挂载 DOM

// core/instance/lifecycle
function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) { // 判断组件的 abstract 属性，才往父组件外面挂载 DOM
    while (parent.$options.abstract && parent.$parent) {parent = parent.$parent}
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

• 判断以后 keepAlive 和 componentInstance 是否存在来判断是否要执行组件 prepatch 还是执行创立 componentlnstance

// core/vdom/create-component
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) { // componentInstance 在首次是 undefined!!!
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode) // prepatch 函数执行的是组件更新的过程
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

prepatch 操作就不会在执行组件的 mounted 和 created 生命周期函数，而是间接将 DOM 插入

（4）LRU（least recently used）缓存策略

LRU 缓存策略∶ 从内存中找出最久未应用的数据并置换新的数据。
LRU（Least rencently used）算法依据数据的历史拜访记录来进行淘汰数据，其核心思想是 “ 如果数据最近被拜访过，那么未来被拜访的几率也更高 ”。最常见的实现是应用一个链表保留缓存数据，具体算法实现如下∶

• 新数据插入到链表头部
• 每当缓存命中（即缓存数据被拜访），则将数据移到链表头部
• 链表满的时候，将链表尾部的数据抛弃。

组件通信

组件通信的形式如下：

（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 的思维就是将这一些公共的数据抽离进去，将它作为一个全局的变量来治理，而后其余组件就能够对这个公共数据进行读写操作，这样达到理解耦的目标。

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

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

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

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

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

Vue 模版编译原理晓得吗，能简略说一下吗？

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段：

• 生成 AST 树
• 优化
• codegen

首先解析模版，生成AST 语法树(一种用 JavaScript 对象的模式来形容整个模板)。应用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相干解决。

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变动，对应的 DOM 也不会变动。那么优化过程就是深度遍历 AST 树，依照相干条件对树节点进行标记。这些被标记的节点 (动态节点) 咱们就能够 跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最初一步是 将优化后的 AST 树转换为可执行的代码。

为什么 vue 组件中 data 必须是一个函数？

对象为援用类型，当复用组件时，因为数据对象都指向同一个 data 对象，当在一个组件中批改 data 时，其余重用的组件中的 data 会同时被批改；而应用返回对象的函数，因为每次返回的都是一个新对象（Object 的实例），援用地址不同，则不会呈现这个问题。

为什么 Vue 采纳异步渲染呢？

Vue 是组件级更新，如果不采纳异步更新，那么每次更新数据都会对以后组件进行从新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick。

dep.notify（） 告诉 watcher 进行更新， subs[i].update 顺次调用 watcher 的 update， queueWatcher 将 watcher 去重放入队列，nextTick（ flushSchedulerQueue）在下一 tick 中刷新 watcher 队列（异步）。

vue 和 react 的区别

=> 相同点：

1. 数据驱动页面，提供响应式的试图组件
2. 都有 virtual DOM, 组件化的开发，通过 props 参数进行父子之间组件传递数据，都实现了 webComponents 标准
3. 数据流动单向，都反对服务器的渲染 SSR
4. 都有反对 native 的办法，react 有 React native，vue 有 wexx

=> 不同点：

 1. 数据绑定：Vue 实现了双向的数据绑定，react 数据流动是单向的
 2. 数据渲染：大规模的数据渲染，react 更快
 3. 应用场景：React 配合 Redux 架构适宜大规模多人合作简单我的项目，Vue 适宜小快的我的项目
 4. 开发格调：react 举荐做法 jsx + inline style 把 html 和 css 都写在 js 了
      vue 是采纳 webpack + vue-loader 单文件组件格局，html, js, css 同一个文件

v-if 和 v -show 的区别

• 伎俩：v-if 是动静的向 DOM 树内增加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 款式属性管制显隐；
• 编译过程：v-if 切换有一个部分编译 / 卸载的过程，切换过程中适合地销毁和重建外部的事件监听和子组件；v-show 只是简略的基于 css 切换；
• 编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始部分编译; v-show 是在任何条件下，无论首次条件是否为真，都被编译，而后被缓存，而且 DOM 元素保留；
• 性能耗费：v-if 有更高的切换耗费；v-show 有更高的初始渲染耗费；
• 应用场景：v-if 适宜经营条件不大可能扭转；v-show 适宜频繁切换。

谈谈对 keep-alive 的理解

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

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;
}

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 这种手动优化的生命周期.

action 与 mutation 的区别

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

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

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

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

使用场景：

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

Vue 模版编译原理晓得吗，能简略说一下吗？

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段：

• 生成 AST 树
• 优化
• codegen

首先解析模版，生成AST 语法树(一种用 JavaScript 对象的模式来形容整个模板)。应用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相干解决。

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变动，对应的 DOM 也不会变动。那么优化过程就是深度遍历 AST 树，依照相干条件对树节点进行标记。这些被标记的节点 (动态节点) 咱们就能够 跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最初一步是 将优化后的 AST 树转换为可执行的代码。

v-model 的原理？

咱们在 vue 我的项目中次要应用 v-model 指令在表单 input、textarea、select 等元素上创立双向数据绑定，咱们晓得 v-model 实质上不过是语法糖，v-model 在外部为不同的输出元素应用不同的属性并抛出不同的事件：

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

以 input 表单元素为例：

<input v-model='something'>

相当于

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

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：<ModelChild v-model="message"></ModelChild>

子组件：<div>{{value}}</div>

props:{value: String},
methods: {test1(){this.$emit('input', '小红')
  },
},