Vue 3

[imfenghuang]

template-explorer
SFC Playground

1. diff 算法

1. 预处理前置节点
   1. 处理新节点和旧节点前面相同的部分，更新（patch）这些节点
2. 预处理后置节点
   1. 处理新节点和旧节点后面相同的部分，更新（patch）这些节点
3. 处理仅有新增节点情况
   1. 如果此时剩下旧节点为空，但新节点还有剩余，则挂载（mount）这些节点
4. 处理仅有卸载节点情况
   1. 如果此时剩下新节点为空，但旧节点还有剩余，则卸载（unmount）这些节点
5. 处理其他情况（新增/卸载/移动）
   1. 剩余的节点，我们称之为新/旧子序列；
   2. 新旧子序列中，如果 key 相同，则认为节点相同，直接进行更新（patch）即可；
   3. 新建一个 map，key 为 新节点的 key，值为这个 key 在新节点的索引；
   4. 遍历旧子序列：
      1. 移除（unmount）不在新子序列中的节点
      2. 更新（patch）相同的节点
      3. 并找出是否有需要移动的节点
         1. 新建一个标记变量 moved = false，表示是否需要移动；
         2. 新建一个变量记录上次求值的 newIndex，即旧子序列中节点在新子序列中的索引；
         3. 新建一个数组变量 newIndexToOldIndexMap ，长度是新子序列的长度，并且每一项为0，0是一个特殊值，如果遍历之后仍有元素的值是0，说明这个新节点没有对应的旧节点，后面直接挂载即可
         4. newIndexToOldIndexMap 遍历之后，值更新为新子序列中的元素在旧子序列中的索引
   5. 如果存在移动的情况，则计算并获取最长递增子序列
      1. increaseingNewIndexSequence = moved ?getSequence(newIndexToOldIndexMap) : []
   6. 倒序遍历新子序列
      2. 倒序遍历，方便我们把最后更新的子节点左右锚点；
      3. 将 newIndexToOldIndexMap 中值为0的节点进行挂载；
      4. 判断是否存在需要移动的情况，如果存在则看节点的索引是不是在最长递增子序列中，如果在，则倒序最长递增子序列（跳过移动，执行 j --，j 是最长递增子序列的长度），否则把它移动到锚点前面

2. 是不是模板编译的时候自动加上了 .value？

并不是，模板编译之后，render 函数访问时，加上了 _ctx，_ctx 表示组件实例对象。组件通过 setup 函数返回的结果是 setupResult，在这里会对 setupResult 进行一层响应式处理，并返回给组件实例的 setupState 属性，所以访问 render 函数中的 _ctx.xxx 其实就是访问 instance.setupState.xxx。而响应式处理时，判断到是 ref 时，会进行解包操作，返回 .value 的值，即

<template>
  <div>{{ msg }}</div>
</template>

/**
 * msg -> _ctx.msg -> instance.setupState.msg.value
 */