1.简述vue中的diff算法过程
（1）当组件创建和更新时， vue 均会执行内部的 update 函数，该函数在内部调用 render 函数生成虚拟 dom 树，组件会指向新树，然后 vue 将新旧两树进行对比，找到差异点，最终更新到真实 dom
（2）对比差异的过程叫 diff , vue 在内部通过一个叫 patch 的函数完成该过程
（3）在对比时， vue 采用深度优先、逐层比较的方式进行比对。
（4）在判断两个节点是否相同时， vue 是通过虚拟节点的 key 和 tag 来进行判断的
（5）具体来说，首先对根节点进行对比，如果相同则将旧节点关联的真实 dom 的引用挂到新节点上，然后根据需要更新属性到真实 dom ，然后再对比其子节点数组；如果不相同，则按照新节点的信息递归创建所有真实 dom ，同时挂到对应虚拟节点上，然后移除掉旧的 dom 。
（6）在对比其子节点数组时， vue 对每个子节点数组使用了两个指针，分别指向头尾，然后不断向中间靠近进行对比，这样做的目的是尽量复用真实 dom ，尽量少的销毁和创建真实 dom 。如果发现相同，则进入和根节点一样的对比流程，如果发现不同，则移动真实 dom 到合适的位置。
这样一直递归的遍历下去，直到整棵树完成对比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
</style>
</head>
<body>
<div id="app">
<p key="1">88877</p>
<p key="2">9999</p>
<p key="3">{{ message }}</p>
</div>
<div id="container"></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
console.log(app)
</script>
2.diff时机
当组件创建时，以及依赖的属性或数据变化时，会运行一个函数，该函数会做两件事：
（1）运行＿render 生成一棵新的虚拟 dom 树( vnode tree )
（2）运行＿update ，传入虚拟 dom 树的根节点，对新旧两棵树进行对比，最终完成对真实 dom
核心代码如下：diff 就发生在＿update 函数的运行过程中，在__update函数中会执行patch函数，对dom树进行对比
function Vue (params){
var updateComponent=()=>{
this._update(this._ render())
}
new Watcher(updateComponent);
//其他代码
}
3._update 函数在干什么
（1)_update 函数接收到一个 vnode 参数，这就是新生成的虚拟 dom 树
(2)_update 函数通过当前组件的＿ vnode 属性，拿到旧的虚拟 dom 树, 给组件的＿ vnode 属性重新赋值，让它指向新树
（3）通过patch函数进行diff计算，patch函数接受两个参数，旧的虚拟dom树，新的虚拟dom树。
function update (vnode){
// vnode ：新虚拟dom树
// this._ vnode :旧虚拟dom树
const oldvnode=this._vnode
this._vnode = vnode ;
this._patch(oldvnode,vnode)
}
4.patch函数的工作原理：
1.会判断旧树是否存在：
1.1不存在：说明这是第一次加载组件，于是通过内部的 patch 函数，直接遍历新树，为每个节点生成真实 DOM ，挂载到每个节点的elm属性上
1.2存在：说明之前已经渲染过该组件，于是通过内部的 patch 函数，对新旧两棵树进行对比。
对比过程：
同层级对比两个虚拟节点的标签tag，标签类型、 key 值均相同，新树则使用旧树的真实dom元素。不相同根据虚拟节点提供的信息，创建真实 dom 元素，同时挂载到虚拟属性elm上。同层比较完，如有剩余的旧节点，则删除。
5.diff对比的特点：
- 只会在同层级进行对比, 不会跨层级比较
- 循环从两边向中间比较
6.vue中的diff算法对日常开发有什么影响？
input元素不加key时，在账号输入框输入“12232”时，切换到手机号登录，手机号输入框会显示：“12232”。原因是因为在diff对比的过程中，新dom树input元素的tag和key和旧dom树的input的tag和key一样，所以新dom树的input就会使用旧dom树的真实dom元素。
<div>
<span @click="accountlogin = true">账户登录</span>
<span @click="accountlogin = false">手机登录</span>
</div>
<div v-if="accountlogin">
<label>账号</label>
<input type="text" />
</div>
<div v-else>
<label>手机号</label>
<input type="text" />
</div>
input加上key后，在账号输入框输入“12232”时，切换到手机号登录，手机号输入框会显示空。
<div>
<span @click="accountlogin = true">账户登录</span>
<span @click="accountlogin = false">手机登录</span>
</div>
<div v-if="accountlogin">
<label>账号</label>
<input type="text" key="1"/>
</div>
<div v-else >
<label>手机号</label>
<input type="text" key="2"/>
</div>
