更新数据更改的 UI

Posted 2023-03-21

技术标签:

【中文标题】更新数据更改的 UI【英文标题】：Update UI on Data change 【发布时间】：2021-08-14 02:53:01 【问题描述】：

（我主要使用 Vue.js，所以很多例子都与它相关）

我正在学习构建 Web 应用程序，最耗时的事情是 UI 组件和它们应该表示的数据的同步，即显示给用户的内容与存储在内存中的内容之间的一致性（本地）。

例如，假设我有以下组件树：

<body>
    <form/>
    <task-bar/>
    <component-1>
    <component-2>
</body>

这里的父组件是body，它有四个子组件，分别是form、task-bar、component-1和component-2。

我们有一个对象列表，例如：

[

   id: 1,
   title: "X"
,

    id: 2,
    title: "Y"

]

任务栏列出组件标题。

Component-1 显示通过单选按钮在 Component-2 中选择的对象。

现在，我想在表单中添加一个对象到列表中或编辑/删除 Component-2 中选定的组件。

在 Vue.js 中，我会将列表从父组件传递给其子组件，但是，默认情况下，父组件和兄弟组件不会对子组件和兄弟组件的数据进行反应。因此，兄弟对列表的更改会在所有组件之间创建不连贯的状态。

我阅读了两种解决方法，首先是使用事件，孩子做一些事情并通知（这是我以前在 Java Swing 中所做的，一种观察者模式），但是在一些事件之后变得非常麻烦，此外，它很难调试，您可能会在不同的组件中重复事件代码。

第二种方式是使用全局状态，例如 Vuex 中实现的 Flux 模式。然而，这会将所有组件耦合到特定项目的 Vuex 并使其不那么可移植。

我的问题是，这是两种独特的做事方式吗？我做错了吗？

【问题讨论】：

【参考方案1】：

您还可以执行以下操作之一：

使用一个变量就像它是一个全局状态。你在 Vue 的文档中有一个这样的例子：https://vuejs.org/v2/guide/state-management.html 在您的组件中，使用 $parent.doSomething()，其中 doSomething() 是您父组件的方法。

但就个人而言，我喜欢 vuex :)

【讨论】：

以上是关于更新数据更改的 UI的主要内容，如果未能解决你的问题，请参考以下文章