vue 组件传值只能有单向数据流,即子组件只能通过事件来通知父组件的数据改变。
对于高度复杂组件,多层嵌套与多个平行,事件无法处理。
考虑以下情况:任意组件要能在任意时刻获取任意其他组件的实时数据。
组件数据交互,必然使用 vuex。
1.0 节流更新
组件改动会同步到 state,state 的改动也会同步到组件,并通过判等节流防止死循环。
1.0 缺点
实现复杂,需要监听本地和监听 state,分别判等赋值实现同步。每多一个数据,就要多一对对应操作。
2.0 读写分离
组件挂载后提交组件 this 指针到 state,用于读取,state 的其他数据会同步到组件,用于写入。并且注意写入 state 后不应立刻读取,应该把该数值传参到需要立即读取的地方,以避免脏读。
2.0 优点
简单直观,没有侵入性
2.0 缺点
只是需要一些注意:
- 不要直接改动 this 的数据,应该是用作只读的。
- 写入之后需要立刻读取的情况,应该直接传值而不要再从组件 this 里读取,因为可能未完成监听同步造成脏读。