面试vue的常见底层源码分析
人生旅途中，简单就是快乐，淡泊就是幸福。携一份风轻云淡，谱写生命的画卷，微笑着去拥抱阳光的灿烂。怀揣着美好，依偎着温暖，从从容容，简简单单，淡泊着，快乐着，让幸福伴随永远！早安！
你是怎么理解vue的diff算法
源码分析：必要性，lifecycle.js-mountComponent()
组件中可能存在很多个data中的key使用
源码分析2：执行方式，patch.js-patchVnode()
pathVnode是diff发生的地方，整体策略：慎独优先，同级比较
源码分析3：高效性，path.js-updateChildren()
测试代码
<html><head><title> vue源码</title><script src ="../../dist/vue.js"></script></head><body><div id =id ="demo"><h1>虚拟DOM</h1><P>{{foo}}</P></div><script>//创建实例const app =new Vue({el：'#demo",data:{foo:"foo"},mounted(){setTimeout(()=>{this.foo ='foooo'}1000,)}})}})</script></body></html>
diff算法是虚拟DOM技术的产物：通过新旧虚拟DOM做对比(diff),将变化的地方更新在真实DOM上，另外，也需要DIiff高效的执行过程，从而降低时间复杂度为o(n)
vue2.x中为了降低watcher粒度，每个组件只有一个watcher与之对应，只有引入diff才能找到发生变化的地方，
vue中diff执行的时刻是组件实例执行其更新函数时，它会对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程为patch
diff过程整体遵循深度优先，同层比较的策略，两个节点之间会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用的方式遍历查找，查找结束在按情况处理剩下的节点，借助key通常可以非常精确找到相同节点，因此整个patch过程非常有效。
2，vue中key的作用和工作原理？
源码答案src\core\vdom\patch.js-updateChildren()
<html><head><title> key的作用及原理</title><script src ="../../dist/vue.js"></script></head><body><div id =id ="demo"><p v-for="item in items" :key ="item">{{item}}</p></div><script>//创建实例const app =new Vue({el：“#demo"data:{items:['a','b','c','d','e']},mounted(){setTimeout(){在c的前面插入this.items.splice(2,0,'f')},2000)}})</script></body></html>
key的作用主要为了高效的更新虚拟DOM,其原理是vue在path过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加有效，减少DOM操作量，提高性能。
2，另外，若不设置key还可能在列表更新时引发一些隐患的bug
3.vue中会替换相同标签元素的过渡切换时，也会使用key属性，其目的也是为了让vue 可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。