问题标签 [virtual-dom]

我正在开发一个基于 vue.js 的中型 Web 应用程序。我一直面临着几个主要与 vue 实例生命周期相关的虚拟 DOM 问题。

以下代码片段（jsFiddle 也可在此处获得）演示了其中一些问题。test-component vue 组件接收一个属性值并使用该值更新其内部状态。

每当数据集更改（通过排序或新数据）时，属性都会更新，但内部状态不会。通过运行代码片段并单击按钮很容易看到这一点。

我了解数据组件属性是一个函数，看起来它仅在创建组件时才被调用。这种解释是怎么回事。问题是我不知道如何实现预期的行为，即：每当数据源更改时，所有子组件的内部状态都会更新。

1. 
   组件“刷新”时是否会触发生命周期回调？我想要一个仅刷新组件的回调。我需要单独观察道具变化吗？那将是丑陋的。
2. 当道具改变时，有没有一种干净的方法来更新内部状态？
3. 是否可以销毁所有子组件并强制重新创建它们？我知道这不是最好的选择，但它可以解决我所有的数据绑定问题:)
4. vue 如何决定何时发布或重用组件？在我的示例中，当数据集大小从 4 变为 3 时，组件会消失，但前 3 个项目的内部状态不会改变，因此前三个项目正在被回收。

将所有状态转移到 vuex 将是一个可能的解决方案，但某些组件是通用的，我不希望它们包含有关 vuex 存储详细信息的知识。实际上，我对大多数组件都使用 vuex，但对于真正通用的组件，我认为这不是一个好的选择。

我正在阅读这篇关于制作自己的 VirtualDOM 的 Medium 文章并理解它，直到我遇到这个 JSfiddle，特别是第 14 行，它说$el.appendChild.bind($el);。看起来他正在尝试appendChild不带任何参数（仅使用 $el 作为this值）！我很混乱。有人可以解释吗？

这是代码：

我的 React 应用程序调用第三方服务来加载需要通过指定的 CSS 选择器注入 DOM 的内容。它可以在页面上的任何位置。我怎样才能通过指定的选择器将此内容注入 React 应用程序以确保 Virtual DOM 得到更新并保持不变？

成像，这是我想注入 React 应用程序的第三方响应对象：

我对 React 世界有些陌生，但我熟悉动态更新应用程序时的虚拟 DOM 挑战。我希望 React 在前端进行更新以注入此内容 - 当 React 应用程序的所有组件都已更新时。

请注意，我可以修改应用程序，但我需要让它工作。

如果有状态的反应组件当时在 VDOM中C的位置PVT

然后

重新渲染后C，VDOM 会在V'哪里？T+1

例如，在这个true小提琴中，当父道具从变为时，第一个有状态组件的状态被“转移”到第二个有状态组件false。切换回来时，第二个组件的状态也会丢失。这怎么解释？记录这种行为的规则是否在某处可用？这里描述的不是很准确。

我尝试通过 redux 使用异步数据使用 reactjs 为 div 设置动画，但我不清楚何时可以引用 state 上的虚拟 dom loaded。

就我而言，我有一个带有 id 的 div header，我想在填充数据时向下推容器。

如果我尝试在 componentDidMount 中得到比我得到的结果Cannot read property 'style' of undefined，因为 componentDidMount 仍然具有对加载容器的引用

在这种情况下，我该如何处理状态？

之间我找到了解决方案，但不确定是否是正确的解决方法

我目前正在使用 React (react-handsontable) 的“Handsontable”包装器。

我遇到的主要问题是能够挂钩到<select>由包装器创建的字段以更改我的应用程序状态。

我需要连接到 DOM（不是虚拟 DOM）上的输入并onchange更改我的组件状态。

我怎样才能做到这一点。

我假设是虚拟 DOM，并且 React 会通过 diff'ing 来处理它。但是我有一个招聘人员说 ref 会影响实际的 DOM，我看不出这是怎么回事。我认为他们只是弄错了。

“测试”是我的 vue 数据中的一个对象数组

问题是，如果我更改“数组”中某个元素的值，而日志显示该值已更改，它不会在页面上更新。另一方面，如果我更改“数字”的值，则页面上的“数字”和“数组”值都会更新。

如何让我的页面响应“数组”更新？
这是 JsFiddle：https ://jsfiddle.net/zcbh4esr/

我在组件中嵌套了单击事件处理程序：

_{（这篇文章底部的完整的最小示例。）}

该组件用作包含组件内的“列表项”。当我单击(Delete)它时，它会按预期触发onDeleteClick，这会对父组件进行回调，从而导致组件从父组件中删除。正如预期的那样，点击事件然后开始冒泡。但是，它会“向上”冒泡到父列表中的下一个组件。毕竟，删除处理程序已经删除了原始目标。

如果我e.stopPropagation()在处理程序的顶部添加一个，onDeleteClick它一切正常，但我只是想了解为什么单击事件被传递到一个完全不同的组件，只是为了确保那里没有任何其他确凿的证据.

我目前的理论是，挂起的事件队列以某种方式被索引到虚拟 DOM 中，如果您在事件处理程序期间改变虚拟 DOM，冒泡事件可能会传递到虚拟 DOM 中的错误组件。我本来希望冒泡事件根本不会触发，而不是在完全不同的组件上触发。

这是怎么回事？还有其他见解吗？这是一个有缺陷的设计吗？如果是，有什么替代方案的建议吗？

这是一个显示问题的最小示例：https ://codepen.io/mgalgs/pen/dRJJyB

这是固定版本：https ://codepen.io/mgalgs/pen/KqZBKp

“修复”的完整差异是：

我有一个使用 jQuery 的客户端 JS 库（称为 lib.js）。该库使用 ajax 触发 API，并根据收到的 json 响应呈现 html。

由于 SEO 问题，我想创建另一个基于 nodejs 的 API，它完成 lib.js 所做的所有客户端工作，并在服务器端创建 html 并用这个 html 响应。问题是我也想在服务器端使用相同的客户端库（lib.js），以便对 lib.js 所做的任何更改也会影响我的后端 API 的 html 响应。

所以，基本上我希望在服务器上执行客户端 JS，而不会对客户端 JS 库做太多更改。

我浏览了 jquery 和 jsdom 的节点模块，但找不到解决此解决方案的决定性方法。有没有更好的节点模块来做到这一点？有没有针对这个问题的好文章？