1、虚拟dom和diff算法

虚拟dom（Virtual DOM）最先是由facebook团队提出的，最先运用在react中，之后在vue2.0版本中引入了虚拟DOM的概念。

原理：按照真实的dom树克隆一棵虚拟树，当我们通过js进行操作之后，比较虚拟树和真实树的差异，通过diff算法来计算出最小的变更，渲染器会将虚拟DOM转换为对应平台的真实DOM（根据vnode描述的信息如tag、props、children来创建DOM元素，根据规则为对应的元素添加属性和事件，处理vnode下的children）。

优点：

节约开销，提升性能。为跨平台开发提供了极大的便利，开发者写的同一套代码（有些需要针对不同平台做区分），通过不同的渲染规则，就可以生成不同平台的代码。

// diff 函数，对比两棵树
function diff (oldTree, newTree) {
  var index = 0 // 当前节点的标志
  var patches = {} // 用来记录每个节点差异的对象
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}
// 对两棵树进行深度优先遍历
function dfsWalk (oldNode, newNode, index, patches) {
  // 对比oldNode和newNode的不同，记录下来
  patches[index] = [...]
  diffChildren(oldNode.children, newNode.children, index, patches)
}
// 遍历子节点
function diffChildren (oldChildren, newChildren, index, patches) {
  var leftNode = null
  var currentNodeIndex = index
  oldChildren.forEach(function (child, i) {
    var newChild = newChildren[i]
    currentNodeIndex = (leftNode && leftNode.count) // 计算节点的标识
      ? currentNodeIndex + leftNode.count + 1
      : currentNodeIndex + 1
    dfsWalk(child, newChild, currentNodeIndex, patches) // 深度遍历子节点
    leftNode = child
  })
}

diff痛点：

• vue2中的虚拟dom是进行全量的对比，在运行时会对所有节点生成一个虚拟节点树，当页面数据发生变更后，会遍历判断virtual dom所有节点（包括一些不会变化的节点）有没有发生变化，不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VNode 更新缓慢。
• Vue3动静结合 PatchFlag：这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag，对于不参与更新的元素，做静态标记并提示在渲染时直接复用。

2、call、apply、bind的异同

同：

call、apply、bind三个方法都可以用来改变函数的this指向。

异：

1、fn.call (newThis,params)

        call函数的第一个参数是this的新指向&