VUE NOTE

4, 对于 Vue 源代码阅读方面有什么建议吗？

尤雨溪：我建议大家直接阅读 Vue 3 的源代码，不用再看 Vue 2 了。看 Vue 3 源代码的前提是看得懂 TypeScript，然后可以看看 HCY（霍春阳）写的源码分析。Vue 3 的源码要比 Vue 2 的源码要好学很多。Vue 3 在架构以及模块的耦合关系设计方面比 Vue 2 更好，可以一个模块一个模块看，这样比较容易理解。如果是刚上手，可以从 Reactivity 看起。因为 Reactivity 是整个 Vue 3 里面跟外部没有任何耦合的一个模块。

5、与 2.X 版本相比，Vue 3.0 在客户端渲染和性能更新方面有哪些改进？

尤雨溪：我们想在 Vue 3 里面做到，既保留手写 Virtual DOM，手写渲染函数这种用 JavaScript 表达逻辑的能力，又要有基于模板静态编译获得最好性能的能力。 事实上我们现在做到了，虽然基于模板静态分析生成的是 Virtual DOM 渲染的代码，但是在这个 Virtual DOM 生成的渲染结构中，我们只需要记录几个动态结点。那么当我们在运行时去 diff 的时候，不需要再一层一层的遍历。等于说把一个深度优先的遍历直接拍平成一个数组。数组里面是几个动态的节点，这些动态的节点是以唯一需要再分层的地方，大体上是这样的思路。 我们采用模板的这种语法，它最大的优势是可以很容易地被静态分析。如果用 JSX，或者手写渲染函数的时候，纯 JavaScript 动态性太强，而且没有类型信息，很多东西没有办法做真正的优化。所以在追求极度的灵活性和极度的性能之间总是有一些取舍。 因为 Vue 2 很多库也用了 Virtual DOM，所以我们要继续保留 Virtual DOM 的能力，这意味着我们不可能走没有 Virtual DOM 这种纯编译的路线。虽然一开始是想折衷，但是我们发现，可以既保留这个能力，同时性能也不差。 我觉得 Vue 3 是做了一个比较好的平衡。

0 elementui

v-if 必须加到 el-popconfirm 外面,否则 点击无效

<span v-if="!row.comboName && (!row.payStatus || row.payStatus == 15)">
            <el-popconfirm
              key=""
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="removeProject(row)"
            >
              <el-tag slot="reference" class="m-5 pointer el-icon-delete">删除</el-tag>
            </el-popconfirm>
          </span>
          ```