黑白色空间

0%

vue-data-read-write-seperate|vue组件的数据之读写分离

vue 组件传值只能有单向数据流,即子组件只能通过事件来通知父组件的数据改变。

对于高度复杂组件,多层嵌套与多个平行,事件无法处理。

考虑以下情况:任意组件要能在任意时刻获取任意其他组件的实时数据。

组件数据交互,必然使用 vuex。

1.0 节流更新

组件改动会同步到 state,state 的改动也会同步到组件,并通过判等节流防止死循环。

1.0 缺点

实现复杂,需要监听本地和监听 state,分别判等赋值实现同步。每多一个数据,就要多一对对应操作。

2.0 读写分离

组件挂载后提交组件 this 指针到 state,用于读取,state 的其他数据会同步到组件,用于写入。并且注意写入 state 后不应立刻读取,应该把该数值传参到需要立即读取的地方,以避免脏读。

2.0 优点

简单直观,没有侵入性

2.0 缺点

只是需要一些注意:

  • 不要直接改动 this 的数据,应该是用作只读的。
  • 写入之后需要立刻读取的情况,应该直接传值而不要再从组件 this 里读取,因为可能未完成监听同步造成脏读。