Vue相关面试题总结

created跟mounted生命周期方法有什么区别

created的时候dom未进行渲染，不能做dom相关的操作
mounted的时候dom已经渲染完成了

vue的 nextTick是如何实现的

1、执行时机会在dom更新完成之后调用

2、先把所有的回调任务都加到callbacks数组中，然后定义一个flushCallbacks方法遍历数组执行回调函数，最后判断浏览器支持Promise -> new MutationObserver(flushCallbacks) -> setImmediate -> setTimeout 找出一个方法来执行flushCallbacks函数，

3、MutationObserver是一个监听到DOM更新后，调用回调函数的API,主要目的是在当前同步代码执行完毕之后，执行我们传入的回调函数

父子组件挂载生命周期顺序

先执行最内层的生命周期，后执行最外面的生命周期

vue2中数组和对象数据观察时有什么特殊处理

对象是递归遍历每一个key加数据劫持，数组是通过重写其中会改变原数组内容的一些函数，例如push pop splice等等操作函数

vue2和3中数据观察的区别

vue2用的是Object.defineProperty定义每一个key的get以及set方法，在get中收集依赖
在set中通知Watcher更新
vue3则是通过系统自带的Proxy做一个拦截，实现同样的效果，也是定义get跟set方法

const dinner = ["test1", "test2"];

const handler = {
  get(target, prop, receiver) {
    //   track(target, prop)
    return Reflect.get(...arguments);
  },
  set(target, key, value, receiver) {
    // trigger(target, key)
    return Reflect.set(...arguments);
  },
};

const proxy = new Proxy(dinner, handler);
console.log(proxy[0]);
proxy[1] = "test3";
console.log(proxy[1]);

vue兄弟节点通信

eventbus

产生事件：
this.$root.$emit('change-color')

接受事件：
this.$root.$on('change-color', () => {
    this.colored = !this.colored
})

import Vue from 'vue'
export default new Vue()   
import bus from './eventBus'; //这里bus != this.$root,但是都可以用来传递事件两者事件不通

虚拟dom解决了什么问题

首先是正常的一个真实dom拥有的属性非常多，还拥有很多dom操作的方法
其次数据更新的时候如果整个画面重新渲染会带来很大的性能开销，非常慢，而且很多没变化的部分都属于无用功，还不能保存数据更新前的状态
用新数据生成的虚拟dom跟上次旧的虚拟dom做对比，只更新发生变化的部分
diff算法也是消耗性能的，所以如果我们知道要修改那个dom，直接手动操作应该是最快的，这样做是为了让我们更关注数据的变化，而不需要关心dom操作

vue的diff和react的diff

相同点：

都不做跨层比较，只做同层比较,如果某一节点不同就会销毁当前的，创建一个新的

不同点：

Vue进行diff算法的时候一边比较，一边用新的虚拟dom去更新真实dom
Vue认定相同节点，判断key、标签、data都要相同
3.Vue对比是从两端到中间做对比，两两进行比较，每次对比完指针往中间移动
React是从左往右进行对比，如果同样把集合最后一个节点移动到第一个，react会把前面节点依次后移，vue会把最后一个节点放在最前面
通过key值查找新旧节点中相同可以复用的节点，因此当同类型节点内容不同但是key前后之后可能导致更新失败的问题

对于同样的abcd -> dabc ,vue会直接把d拿到第一个， react会把a,b,c摞到最后一个，d不动；（拿节点旧Index与当前处理到的index进行对比，小于的进行移动，大于index不操作）

两篇参考文章：

React中diff算法

谈谈React中Diff算法的策略及实现

Vue跟react对比

两者的模板渲染、两者的虚拟 dom、diff 差异（vue2、vue3、react 16）、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理；vue 关于 Proxy 与 Object.defineProperty 的区别；两者的批量更新，还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容：新发布的 vue3 有什么特性、最后总结，谈谈两者的如今的生态

computed怎么实现的

computed引入其他computed的属性是怎么实现的

watch怎么实现的

初始化了一个Watcher,读取了一遍数据，这个时候观察者就会记录自己依赖了哪些变量，变化的时候回调用回调函数
假如传入deep,表示深度观察，get的时候如果deep是true,就会读一遍所有的属性，调用get方法的时候就会将Watcher添加到每一个变量的dep中去

Vue.prototype.$watch = function (expOrFn,cb,options) {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    return function unwatchFn () {
      watcher.teardown()
    }
  }

`$on`跟`$emit`原理

用vm._events[event] = [fn1,fn2],然后$emit去查找vm._events
有没有这个事件，有就遍历调用同时绑定this

handler.apply(context, args)

$off: vm._events[event] = null

$once: 调用完一次就调用$off关闭事件

Vue.directive自定义指令

1、用法
//定义
Vue.directive('color', {
  //  el 被绑定元素的元素
  // obj 传递的参数
  bind: function (el, obj) {
    // el.style.color = 'blue'
    el.style.color = obj.value
  }
})
//使用
11111111111

作用，比如可以用来自动聚焦，定义按钮防连点等
存储如下：

this.options.directives ={ 
color: {bind: ƒ}
}
{
    'v-focus':{
        name : 'focus' ,  // 指令的名称
        value : '',       // 指令的值
        arg:'',           // 指令的参数
        modifiers:{},     // 指令的修饰符
        def:{
            inserted:fn
        }
    }
}

keep-alive

用法：

组件可接收三个属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

原理：实际上是把满足规则的组件缓存下来

如果命中缓存就在移除之后放到最后一个
如果没有命中缓存就将当前vnode缓存下来
如果超过max就把第一个移除

为什么要删除第一个缓存组件并且为什么命中缓存了还要调整组件key的顺序？

LRU策略，最近最少使用，把最常用的放在最后，超过限制移除第一个

this.cache = Object.create(null)
this.cache = {
    'key1':'组件1',
    'key2':'组件2',
    // ...
}

经验总结：

keep-alive包裹的组件只会执行一次created、mounted，再次激活就是调用activated
总结用起来很麻烦，有很多缓存不刷新的坑，还不如用强缓存