- 第一题
答: 不是响应式数据 可通过 Vue.set(this.dog, 'name', 'Trump); 或者this.$set(this.dog,'name,'Trump'); 把新成员设置为响应数据 原理: 该方法通过Object.definePropery 方法重写了目标对象对应key的get 和set方法 而vue的数据响应式原理也是基于此api实现的
- 第二题 答: diff算法
- 主要通过 从新旧两个vnode数组的前后取出开始节点 结束节点;
- 然后分别查看节点是否存在, 如果不存在则移动对应节点索引 并获取新的节点值;
- 分别对这些新旧节点进行两两对比 新开始节点和旧开始节点、新结束阶段和旧结束节点、 新开始节点和旧结束节点、 新结束节点和旧开始节点;如果满足someVnode 都需要执行patchNode再次比较节点 且重新移动对应节点索引 取对应节点变量的新值; 如果是交叉对比的节点变量 还需要将旧节点对应的dom进行位置移动;
- 对于不符合以上两个条件的值 则尝试从老的节点数据索引中取出新的开始节点对应的节点位置; 如果未在老的节点中未获取到索引 则新的开始节点为新节点 则创建该开始节点 并将其插入到旧的开始节点dom的前面 如果 存在则对比该节点是否与开始节点somevnode 如果是 则执行 patchNode 然后将老节点数组中对应的节点清掉,然后移动老节点到老的开始节点前面; 如果不存在 则直接通过新的开始节点创建dom然后将该dom移动到老的节点dom前面 而后将新的开始节点索引后移 并获取新的开始节点变量值;
- 循环执行 按照if逻辑分支 执行2|3|4 逻辑知道 不满足新的开始索引小于等于新的结束索引 和旧的结束索引小于等于旧的结束索引;
- 循环结束后, 如果 还有多余的老的节点 则删掉这些节点;
- 如果还有多余的新的节点 则在老的开始节点和老的结束阶段 创建多的新的节点dom并插入到老的开始节点和老的结束节点之间;
[第三题]