滴滴面试题（二）

一.当v-for中key相同时，vue如何判断，如何渲染

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。
当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

总而言之，key的作用主要是为了高效的更新虚拟DOM 。

为什么不用index作为key呢，是因为，如果在一个v-for list里面，删除中间的一个item，这个时候这个item后面所有的index都会变化，那么diff就会计算出后面的item的key-index映射都发生了变化，就会全部重新渲染，大大影响了性能。而且这也会导致一些bug，比如当删除了item2的时候，再选中item3就会变成选中item4。
二.instanceof 判断数组及

或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。再如：function test(){};var a=new test();alert(a instanceof test)会返回true
原型链
https://www.jianshu.com/p/0710d73fa3ea
三.baseurl 和 publicPath 的区别
axios.defaults.baseURL = 'http://xxxi.com/'; baseURL用于调用后端接口
Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
四.data 生命中，写箭头函数有什么问题
箭头函数的作用域是和父级绑定一起的，function this是谁调用指向谁的
data: () => {} this指向undefined的时候，是会赋值给vm._data，但是他会相当于一个全局的，只要你不刷新页面他就会缓存你的data。
如果我们使用data() {}this指向Vm实例，所以他会随着实例更新。
五.elemen-ui的一件换肤如何实现
本方法就是最常见的换肤方式，本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫 day-theme ，一套叫 night-theme ，night-theme 主题都在一个 .night-theme 的命名空间下，我们动态的在 body 上 add .night-theme ; remove .night-theme。
修改代码如下

  document.body.dataset.theme = 'default-theme'

六.$set原理
1、如果是在开发环境，且target未定义（为null、undefined）或target为基础数据类型（string、boolean、number、symbol）时，抛出告警；

2、如果target为数组且key为有效的数组key时，将数组的长度设置为target.length和key中的最大的那一个，然后调用数组的splice方法（vue中重写的splice方法）添加元素；

3、如果属性key存在于target对象中且key不是Object.prototype上的属性时，表明这是在修改target对象属性key的值（不管target对象是否是响应式的，只要key存在于target对象中，就执行这一步逻辑），此时就直接将value直接赋值给target[key]；

4、判断target，当target为vue实例或根数据data对象时，在开发环境下抛错；

5、当一个数据为响应式时，vue会给该数据添加一个ob属性，因此可以通过判断target对象是否存在ob属性来判断target是否是响应式数据，当target是非响应式数据时，我们就按照普通对象添加属性的方式来处理；当target对象是响应式数据时，我们将target的属性key也设置为响应式并手动触发通知其属性值的更新；

七.实现双向绑定的多种方式
手动绑定
比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成
以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些： - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。 - angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。 - 在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作
3、前端数据劫持(Hijacking)
第三种方法则是avalon等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。

八.class多继承，如何查找继承哪个父类

参考

https://www.jianshu.com/p/0710d73fa3ea

9.如何修改vue源码，能监听到array index 变化
在Object.defineProperty 加入writable: true 属性，监听 value属性

function def (obj, key) {
  Object.defineProperty(obj, key, {
    writable: true,
    enumerable: true,
    configurable: true,
    value: function(...args) {
      console.log('key', key);
      console.log('args', args); 
    }
  });
}
 
// 重写的数组方法
let obj = {
  push() {}
}
 
// 数组方法的绑定
def(obj, 'push');
 
obj.push([1, 2], 7, 'hello!');