当面试官问你patch（）的实现过程时，还会不知道说什么吗吗？

前言

不得不说，随着越来越多的企业的前端框架选择vue之后，面试也变得越来越卷了，早在几年前，关于vue的面试题还只是v-model的使用、vue的生命周期、数据的变化是怎么检测到的等等一系列表面的问题，现在的情况却变成了，你没了解过vue的源码都不好意思说自己懂vue...

Diff算法

一说起diff算法，相信很多人都不陌生，对两个虚拟dom进行比较嘛，只将数据真正进行变化的地方更新在真实的dom上。其实vue对diff算法的实现就用到了我们的打补丁的 方式，也就是接下来提到的patch（），现在的面试经常会出现的一道面试题便是让我们手写一下patch（）的实现过程（简单实现），这时候很多人便会一脸懵，我没写过这个呀，没关系，其实patch（）呀，真没我们想的那么的高大上，也不是那么难以理解滴，废话少说，我们代码上见

patch的实现过程

function createElement(vnode){
  let tag = vnode.tag //目标元素
  let attrs = vnode.attr || {} //属性
  let children = vnode.children || [] //子节点
  if(!tag){
    return null
  }
  //创建对应dom
  let elem = document.createElement(tag)
  let attrName
  //给dom添加属性
  for(attrName in attrs){
    if(attrs.haOwnPr