简答题

linh0801
272 阅读2分钟
  1. 当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。
let vm = new Vue({
 el: '#el'
 data: {
  o: 'object',
  dog: {}
 },
 method: {
  clickHandler () {
   // 该 name 属性是否是响应式的
   this.dog.name = 'Trump'
  }
 }
})

答：不是响应式数据。通过this.$set(this.dog, 'name', 'Trump'). 内部原理： set 方法内部是通过 Object.defineProperty(obj, key, {}) 这个方法对新属性进行getter/setter 数据拦截，实现响应式

  1. 请简述 Diff 算法的执行过程

    diff 算法比较是基于两棵Dom 树同级节点上进行比较的，首先会对新老节点的开始节点和结束节点设置标记索引的，遍历的过程中移动索引，修改新老节点的开始和结束节点 对开始和结束节点进行比较的时候，总共有四种情况：

    1. 旧的开始节点/ 新的开始节点 （oldStartNode / newStartNode）
    2. 旧的结束节点/ 新的结束节点 （oldEndNode / newEndNode）
    3. 旧的开始节点/ 新的结束节点 （oldStartNode / newEndNode）
    4. 旧的结束节点/ 新的开始节点 （oldEndNode / newStartNode）

    接下来依次对这4种情况做分析：

    • 如果 oldStartVnode 和 newStartVnode 是 sameVnode (key 和 sel 相同)

      • 调用 patchVnode() 对比和更新节点
      • 把旧开始和新开始索引往后移动 oldStartIdx++ / oldEndIdx++

    • 如果 oldEndVnode 和 newEndVnode 是 sameVnode (key 和 sel 相同)

      • 调用 patchVnode() 对比和更新节点
      • 把旧开始和新开始索引往后移动 oldStartIdx-- / oldEndIdx--

    • oldStartVnode / newEndVnode (旧开始节点 / 新结束节点) 相同

    • 调用 patchVnode() 对比和更新节点

      • 把 oldStartVnode 对应的 DOM 元素，移动到右边
      • 更新索引

    • oldEndVnode / newStartVnode (旧结束节点 / 新开始节点) 相同

      • 调用 patchVnode() 对比和更新节点
      • 把 oldEndVnode 对应的 DOM 元素，移动到左边
      • 更新索引 若不是以上4种情况：

    • 遍历新节点，使用新节点newStartNode的key 到老节点数组中找到相同节点

    • 若是没有找到，说明newStartNode 是新的节点

      • 创建新节点的DOM，插入到DOM 树中

    • 若是找到了，判断新节点和找到的老节点的 sel 选择器是否相同

      • 不同说明被修改过了，重新创建Dom元素，插入到DOM 树中

      • 相同则把老节点中对应的移动到左边去

循环结束：

  • 当老节点的所有子节点先遍历完 (oldStartIdx > oldEndIdx)，循环结束
    • 如果老节点的数组先遍历完(oldStartIdx > oldEndIdx)，说明新节点有剩余，把剩余节点批量 插入到右边
  • 新节点的所有子节点先遍历完 (newStartIdx > newEndIdx)，循环结束
    • 如果新节点的数组先遍历完(newStartIdx > newEndIdx)，说明老节点有剩余，把剩余节点批 量删除
avatar
文章
阅读
粉丝