Flux 單向資料流

2022-06-19 22:30:23 字數 613 閱讀 5363

flux 的核心就是乙個簡單的約定:檢視層元件不允許直接修改應用狀態,只能觸發 action。應用的狀態必須獨立出來放到 store 裡面統一管理,通過偵聽 action 來執行具體的狀態操作。

所謂的單向資料流,就是當使用者進行操作的時候,會從元件發出乙個 action,這個 action 流到 store 裡面,觸發 store 對狀態進行改動,然後 store 又觸發元件基於新的狀態重新渲染。

這樣做的好處:

1. 檢視元件變得很薄,只包含了渲染邏輯和觸發 action 這兩個職責,即所謂 "dumb components"。

2. 要理解乙個 store 可能發生的狀態變化,只需要看它所註冊的 actions **就可以。

3. 任何狀態的變化都必須通過 action 觸發,而 action 又必須通過 dispatcher 走,所以整個應用的每一次狀態變化都會從同乙個地方流過。其實 flux 和傳統 mvc 最不一樣的就在這裡了。react 在宣傳的時候一直強調的一點就是 「理解你的應用的狀態變化是很困難的 (managing state changing over time is hard)」,flux 的意義就在於強制讓所有的狀態變化都必須留下一筆記錄,這樣就可以利用這個來做各種 debug 工具、歷史回滾等等。

單向資料流

props是單向繫結的,當父元件的屬性變化時,將傳導給子元件,但是不會反過來 而且不允許子元件直接修改父元件中的資料,報錯 解決方式 方式1 如果子元件想把它作為區域性資料來使用,可以將資料存入另乙個變數中再操作,不影響父元件中的資料 方式2 如果子元件想修改資料並且同步更新到父元件,兩個方法 a....

單向資料流

doctype html html lang en head meta charset utf 8 title vue title script src bower components vue dist vue.js script head body div id box aaa aaa div ...

單向資料流

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態,從而導致你的應用的資料流向難以理解。額外的,每次父級元件發生變更時,子元件中所有的 prop 都將會重新整理為最新的值。這意味...