>[success] # 計算屬性 -- computed ~~~ 1.基本規則和'option Api' 計算屬性規則類似，返回值是一個ref 對象 ~~~ >[danger] ##### 案例 ~~~ 1.下面案例返回是一個不變的響應式ref 對象，因此進行改寫會報錯 ~~~ ~~~ const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 錯誤 ~~~ >[danger] ##### 案例 ~~~ 1.和 'option Api' 一樣可以定義getter 和setter，傳入的是一個對象 ~~~ ~~~ const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0 ~~~ >[success] # watchEffect ~~~ 1.'watchEffect ' 是一個新的api，需要將這個單詞拆解來看'watch' 和'effect' ,'effect'全稱叫side effect，副作用。 關于副作用可以看這個'http://www.hmoore.net/cyyspring/more/1979438#_31'，或者思考一下你在watch里面 進行異步請求，這個請求是隨時的不可控的這個就是一種副作用,所以可以理解成'watchEffect'的意思就是在觀察 （watch）到變化后執行一些操作（effect） 2.哪能解決什么問題接口請求就是一個 side effect，假設我們現在用一個用戶ID去查詢用戶的詳情信息， 然后我們監聽了這個用戶ID， 當用戶ID 改變的時候我們就會去發起一次請求，這很簡單，用watch 就可以做到。 但是如果在請求數據的過程中，我們的用戶ID發生了多次變化，那么我們就會發起多次請求，而最后一次返回的 數據將會覆蓋掉我們之前返回的所有用戶詳情。這不僅會導致資源浪費，還無法保證 watch 回調執行的順序。而 使用 watchEffect 我們就可以做到 3.使用起來他傳入的是一個函數，這個函數可以響應式追蹤依賴，具體來看'watchEffect' 能做什么 3.1.watchEffect 不需要指定監聽的屬性，他會自動的收集依賴， 只要我們回調中引用到了 響應式的屬性， 那么當這些屬性變更的時候，這個回調都會執行 3.2.'watchEffect ' 和'watch' 不同就是可以監聽到內部所有的屬性變化這點和'computed'類似，既然要可以收集 內部變化，所以'watchEffect ' 會默認初始時就會執行第一次, 從而可以收集需要監視的數據 4.調用返回值以停止偵聽 5.傳入'watchEffect ' 函數可以接收一個 onInvalidate 函數作入參，用來注冊清理失效時的回調，失效回調會被觸發 條件： 5.1.副作用即將重新執行時 5.2.偵聽器被停止 (如果在 setup() 或生命周期鉤子函數中使用了 watchEffect，則在組件卸載時) 6.觸發時機在'update' 生命周期之前當然你可以通過配置更改 watchEffect( () => { /* ... */ }, { flush: 'post'// post 是之后 默認是pre， sync，這將強制效果始終同步觸發 } ) ~~~ >[danger] ##### 簡單案例 ~~~ 1.下面案例運行后控制臺打印1，即使'watchEffect' 里面沒有任何指定的屬性依然會執行，這也和上面的3.2點 解釋符合，需要先立即執行收集內部需要被簡單的數據 ~~~ ~~~ <template> <div> </div> </template> <script lang="ts"> import {ref, watchEffect} from 'vue' export default { setup() { const stop = watchEffect(()=>{ console.log(1) }) return { } } } </script> ~~~ >[danger] ##### 簡單案例 ~~~ 1.下面代碼執行結果先打印'1 0 "w" ' 在一秒后打印 '8 1 10 "z" ',因為'watchEffect' 是立即執行因此先打印 一次，在第一次立即執行的時候收集了需要監聽的響應屬性，在定時器1s后執行改變了監聽的響應數據， 因此'watchEffect' 被觸發 -- 簡單的說'watchEffect'回調里完成了自動收集響應依賴 ~~~ ~~~ <template> <div> </div> </template> <script lang="ts"> import {ref, watchEffect} from 'vue' export default { setup() { const count = ref(0) const str = ref('w') const stop = watchEffect(()=>{ console.log(1,count.value,str.value) count.value = 100 }) setTimeout(()=>{ count.value = 10 str.value = "z" },1000) return { count } } } </script> ~~~ >[danger] ##### 調用返回值以停止偵聽 ~~~ 1.在一些情況下，也可以顯式調用返回值以停止偵聽,下面案例只打印了'1 0 "w" ' 在一秒后并沒有打印 '8 1 10 "z" ' 原因手動調用了停止響應式監聽 ~~~ ~~~ <template> <div> </div> </template> <script lang="ts"> import {ref, watchEffect} from 'vue' export default { setup() { const count = ref(0) const str = ref('w') const stop = watchEffect(()=>{ console.log(1,count.value,str.value) count.value = 100 }) // 停止了響應式監聽 stop() setTimeout(()=>{ count.value = 10 str.value = "z" },1000) return { count } } } </script> ~~~ >[danger] ##### 解釋第五條清除副作用 ~~~ 1.下面'onInvalidate '在沒有放開下面兩條注釋條件任意一個的時候'onInvalidate ' 不會執行，但是 放開其中任意一個條件'onInvalidate ' 都將會執行 2.說明'onInvalidate ' 會在觸發監聽屬性改變前執行即，如果放開下面1s后執行的注釋控制臺打印的結果： 1 0 "w" 執行回調 1 10 "z" 所以這個'onInvalidate ' 觸發跟你放的順序無關和上面'5.1' '5.2' 條件有關 ~~~ ~~~ <template> <div> </div> </template> <script lang="ts"> import {ref, watchEffect} from 'vue' export default { setup() { const count = ref(0) const str = ref('w') const stop = watchEffect((onInvalidate )=>{ console.log(1,count.value,str.value) onInvalidate(()=>{ console.log('執行回調') }) }) // 停止了響應式監聽 --偵聽器被停止觸發回調 // stop() // ---------------------- // setTimeout(()=>{ // 副作用即將重新執行時 // count.value = 10 // str.value = "z" // },1000) return { count } } } </script> ~~~ >[danger] ##### 偵聽器調試 ~~~ 1.onTrack 和 onTrigger 只能在開發模式下工作。 onTrack 和 onTrigger 選項可用于調試偵聽器的行為。 onTrack 將在響應式 property 或 ref 作為依賴項被追蹤時被調用。 onTrigger 將在依賴項變更導致副作用被觸發時被調用。 這兩個回調都將接收到一個包含有關所依賴項信息的調試器事件。建議在以下回調中編寫 debugger 語句來檢查依賴關系： ~~~ ~~~ watchEffect( () => { /* 副作用 */ }, { onTrigger(e) { debugger } } ) ~~~ >[success] ## watch ~~~ 1.與watch配置功能一致 2.監視指定的一個或多個響應式數據, 一旦數據變化, 就自動執行監視回調 3.默認初始時不執行回調, 但可以通過配置immediate為true, 來指定初始時立即執行第一次 4.通過配置deep為true, 來指定深度監視 5.watch 與 watchEffect 在手動停止，副作用無效 (將 onInvalidate 作為第三個參數傳遞給回調)，flush timing 和 debugging 方面有相同的行為 ~~~ >[danger] ##### 案例 ~~~ 1.如果是ref 定義監聽直接監聽屬性即可，如果是reactive 包裹的需要用返回的是getter 函數指定監聽 ~~~ ~~~ // 偵聽一個 getter const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } ) // 直接偵聽ref const count = ref(0) watch(count, (count, prevCount) => { /* ... */ }) ~~~ >[danger] ##### 監聽一組 ~~~ 1.下面案例打印結果?["新的count", "新str"] ?["老count", "老str"]，當然你也可以二次結構將值取出了例如 watch([count,str],([newCount,newStr],[oldCount,oldStr])=>{}) ~~~ ~~~ <template> <div> </div> </template> <script lang="ts"> import {ref, watch} from 'vue' export default { setup() { const count = ref('老count') const str = ref('老str') watch([count,str],(newVaul,oldVaul)=>{ console.log(newVaul,oldVaul) }) setTimeout(()=>{ count.value = '新的count' str.value = "新str" },1000) return { count } } } </script> ~~~ >[danger] ##### watch 與 watchEffect ~~~ const stop = watch([count,str],(newVaul,oldVaul,onInvalidate)=>{ console.log(newVaul,oldVaul) onInvalidate(()=>{ }) },{ onTrigger(e){} }) stop() ~~~ >[success] # 總結watch 與 watchEffect 不同 ~~~ 1.watch函數 1.1.監視指定的一個或多個響應式數據, 一旦數據變化, 就自動執行監視回調 1.2.默認初始時不執行回調, 但可以通過配置immediate為true, 來指定初始時立即執行第一次 1.3.通過配置deep為true, 來指定深度監視 2.watchEffect函數 2.1.不用直接指定要監視的數據, 回調函數中使用的哪些響應式數據就監視哪些響應式數據 2.2.默認初始時就會執行第一次, 從而可以收集需要監視的數據 2.3.監視數據發生變化時回調 ~~~