带有 React 和 Vue 的语义 UI 和 jQuery

Question

我计划使用semantic UI 来构建前端，但也想使用React 或Vue 来构建组件。我想知道如何将基于 jQuery 的框架（如语义 UI）与基于虚拟 DOM 的框架（如 React 和 Vue）结合起来。我听到的三个建议是：

1. 使用自定义集成，例如 semantic react 或 vue ui。这些集成试图通过将 jQuery 逻辑转换为基于组件状态的逻辑来避免直接的 DOM 操作。它们是不完整的，总是与原始的不同步，因此需要不断的支持。

2. 使用 Vue 的 mounted 钩子，如
   export default { mounted() { // jQuery here }, ...}
   
   或 React 的 componentDidMount，如
   class App extends React.Component { componentDidMount() { // jQuery here } }
   
   附加基于 jQuery 的逻辑 在 DOM 元素的这些钩子中。这些选项似乎有效 在许多语义 UI 效果的情况下，例如 dimmer 或 transition 麻烦应该很少出现。但它违背了 虚拟 DOM 的概念，因为它直接作用于 DOM。

3. 完全避免使用 jQuery，在语义 UI 的情况下使用它的 CSS only implementation。然后通过使组件依赖于状态和仅状态来构建您需要的任何特定效果。这似乎是 React 和 Vue 的最佳实践，但在简单的 transition 或 dimmer 效果的情况下，它似乎有点像重新发明轮子。此外，这只是 1. 的变体，唯一的优势是您可以控制与语义 UI 的最新版本和功能同步。

我想问一下：您认为上述每种方法的优点和缺点是什么？还有哪些我没有提到的方法？

Answer 1

显然，Vue 和 jQuery 框架结合的难点在于 Vue 期望负责 DOM，jQuery 框架也是如此。您必须防止它们互相踩踏。

正确的做法是使用 Vue 作为您的框架，并使用语义 UI 作为实现细节。我认为让它反过来工作是不切实际的。

以正确的方式执行此操作的问题在于，您无法获得尽可能多的免费：您必须为要使用的语义 UI 的每个功能创建一个custom directive。这就是在 Vue 中允许你操作 DOM 的地方。

另请参阅Wrapper Component Example，它充实了您的第二个想法。