简单题

1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如果把新增成员设置成响应式数据，它的内部原理是什么。

• 动态给data增加的成员不是响应式数据

• 使用Vue的实例化时，是将data数据通过Object.defineProperty，设置对象数据的的属性的getter和setter，而新添加的属性或者对象，是没有getter和setter属性的，所有不是响应式数据

• 通过Vue.set可添加新成员，内部原理是：

  • set方法内部调用defineReactive方法，将新成员通过Objecet.definePropery设置getter 和 setter
  • 然后在getter，收集依赖
  • 在setter中发送通知

2、请简述 Diff 算法的执行过程

• 同级比较，再比较子节点
• 先判断一方有子节点，一方没有子节点的情况，如果新的children没有子节点，将旧节点移除
• 如果都有子节点，则开始递归比较子节点
• 传统的Diff比较式是依次比较两棵树上的每一个节点，这样时间复杂度是O(n^3)
• Vue和Snabbdom中的Diff算法基于Dom一般很少跨层级移动特点进行优化，只进行同层级比较
• 在比较时，先比较key和sel是否相同
• 如果不相同删除之前内容，重新渲染
• 如果是同一个节点，再判断新的节点是否有text，如果有并且和旧的text不同，直接更新文本内容
• 如果新的节点有children，则开始使用diff进行同层级比较节点变化