前言

这是最近的碰到的那个 和响应式相关的问题特定的操作之后响应式对象不“响应“了 引起的一系列的文章

主要记录的是 vue 的相关实现机制

呵呵 理解本文需要 vue 的使用基础, js 的使用基础

v-if 测试用例

测试用例如下, 主要是一个if的使用

这里我们仅仅跟进到HelloWorld 这个VueComponent 的render的地方就够了

render 出来的VNode 树是页面上的dom树的一个逻辑镜像

vue 会维护VNode 树和 dom树的一致, 这个是在上面经常看到的patch, patchVNode 中去实现的

这里HelloWorld的VueComponent 对应的render如下

根据counter来判断是否需要渲染 el-card, 进而调整 VNode 的结构

然后vue 会维护VNode 树和 dom树的一致, 这个是在上面经常看到的patch, patchVNode 中去实现的

v-show 测试用例

测试用例如下,一个简单的v-show 的使用

这里HelloWorld的VueComponent 对应的render如下

v-show 这里的实现是增加了一个directives的配置

更新具体dom的style的地方在这里,在原有的样式和 none 之间来回切换

v-for 测试用例

测试用例如下,一个简单的v-for 的使用

这里HelloWorld的VueComponent 对应的render如下

这里 _vm._1 对应的是vue里面的一个renderList 的一个函数,遍历给定的列表基于传入的回调渲染子节点

这里 vue的renderList 的实现如下

基于传入的render 函数, 遍历list, 传入当前元素,最终响应一个列表回去

完