23 直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了

  前言 

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

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

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

问题引发自 VueComponent 响应式处理 里面有一段内容, 直接在 console 中使用 dom 的 api 更新了最基层的 div 节点的 textContent, 然后 之后 再点击 按钮 发现响应式更新不生效了 

 测试用例

测试用例如下, 一个简单的 按钮事件的触发  

问题的调试

模板如下, 这里我们主要关注的是 el-card 下面的 文本内容 

在 vue 中会被创建一个 #text 节点 

渲染之后 html 如下 

从页面 dom 中我们是看不到这个 #text 节点, 因此 假设我们直接去更新了 div.el-card__body 的 textContent, 之后 你会发现 之后无论如何点击 按钮, 内容都不会再更新了 

使用 js 的 api 更新了 div.el-card__body 的 textContent, 之后无论如何 点击按钮, 都不会再更新了 

 

这是因为 在实际的 dom 结构中 div.el-card__body 下面还有一层 #text 的子节点 

我们这里直接 document.getElementsByClassName("el-card__body")[0].textContent = "nihao" 操作了之后, 是新建了一个 #text 节点然后挂载 div.el-card__body 上面 

调整的方式更新为 使用 div.el-card__body 下面的 #text 节点来更新即可 

document.getElementsByClassName("el-card__body")[0].childNodes[0].textContent = "nihao"

 

完