其他 Api 使用 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 其他 Api 使用 >[info] ## isRef ~~~ 1.檢查值是否為一個 ref 對象。返回值是一個boolean 類型 ~~~ >[info] ## unref ~~~ 1.如果參數是一個 ref，則返回內部值，否則返回參數本身。這是 val = isRef(val) ? val.value : val 的語法糖函數。 function useFoo(x: number | Ref<number>) { const unwrapped = unref(x) // unwrapped 現在一定是數字類型 } ~~~ >[info] ## toRef ~~~ 1.可以用來為源響應式對象上的某個 property 新創建一個 ref。然后，ref 可以被傳遞，它會保持對其源 property 的響應式連接,簡單的說將一個對象的中的一個屬性變成ref對象，并且會相互影響 2.官方的案例說明 const state = reactive({ foo: 1, bar: 2 }) const fooRef = toRef(state, 'foo') fooRef.value++ console.log(state.foo) // 2 state.foo++ console.log(fooRef.value) // 3 3.注意說明如果是直接使用ref 那么會拷貝了一份新的數據值單獨操作, 更新時相互不影響舉個例子 const state = reactive({ foo: 1, bar: 2 }) // 如果執行foo2.value++ foo和state中的數據不會更新 const foo2 = ref(state.foo) 4.下面案例還發現"const t = toRef(obj,'t') // t.value => undefined" 即使源 property 不存在，toRef 也會返回一個可用的 ref ('在使用可選 prop 時特別有用，可選 prop 并不會被 toRefs 處理') ~~~ >[danger] ##### 案例 ~~~ 1.點擊后頁面和的打印的顯示都是100，說明無論是普通對象還是ref對象還是reactive返回的proxy對象，他們通過toRef 取出源響應式對象上的某個 property 都會互相關聯作用 ~~~ ~~~ <template> <div> {{t}}--{{val}} -- {{age}} <button @click="change">測試</button> </div> </template> <script lang="ts"> import { toRef ,reactive, ref} from 'vue' export default { setup() { const count = ref(0) const obj:{name:string,age:number,t?:any} = reactive({ age:18, name:"w" }) const comObj = { age:18 } const t = toRef(obj,'t') // t.value => undefined const val = toRef(count, 'value') const age = toRef(comObj,'age') const change = ()=>{ t.value = 100 val.value = 100 age.value = 100 console.log(obj.t,count.value,comObj.age) } return { t,val,age,change } } } </script> ~~~ >[info] ## toRefs ~~~ 1.'toRef' 是將對象的指定屬性中指定值轉換ref對象，'toRefs' 把一個響應式對象轉換成普通對象，該普通對象的每個 property 都是一個 ref，其余特點和toRef 一樣都是會和源相互關聯 const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* stateAsRefs 的類型: { foo: Ref<number>, bar: Ref<number> } */ // ref 和原始 property 已經“鏈接”起來了 state.foo++ console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value++ console.log(state.foo) // 3 2.關于使用場景在解構的時候reactive 被包裹的對象解構后使用的單個屬性變成非響應式，可以利用toRefs 或者當從合成函數返回響應式對象時，toRefs 非常有用，這樣消費組件就可以在不丟失響應式的情況下對返回的對象進行分解使用 ~~~ >[danger] ##### 案例一 ~~~ <template> <div>  {{age}} <button @click="change">測試</button> </div> </template> <script lang="ts"> import { toRefs ,reactive} from 'vue' export default { setup() { const obj:{name:string,age:number,t?:any} = reactive({ age:18, name:"w" }) const toRefsObj = toRefs(obj) const change = ()=>{ obj.age ++ // toRefsObj.age.value ++ } return { ...toRefsObj, change } } } </script> ~~~ >[danger] ##### 案例二 ~~~ function useFeatureX() { const state = reactive({ foo: 1, bar: 2 }) // 操作 state 的邏輯 // 返回時轉換為ref return toRefs(state) } export default { setup() { // 可以在不失去響應性的情況下解構 const { foo, bar } = useFeatureX() return { foo, bar } } } ~~~ >[info] ## customRef -- 自定義ref ~~~ 1.創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函數，該函數接收 track 和 trigger 函數作為參數，并且應該返回一個帶有 get 和 set 的對象。簡單說創建一個自己可以控制的 'ref' ~~~ >[danger] ##### 官網的防抖函數案例 ~~~ <input v-model="text" /> ~~~ ~~~ function useDebouncedRef(value, delay = 200) { let timeout return customRef((track, trigger) => { return { get() { track() return value }, set(newValue) { clearTimeout(timeout) timeout = setTimeout(() => { value = newValue trigger() }, delay) } } }) } export default { setup() { return { text: useDebouncedRef('hello') } } } ~~~ >[info] ## shallowRef ~~~ 1.創建一個跟蹤自身 .value 變化的 ref，但不會使其值也變成響應式的 const foo = shallowRef({}) // 改變 ref 的值是響應式的 foo.value = {} // 但是這個值不會被轉換。 isReactive(foo.value) // false ~~~ >[danger] ##### 案例 ~~~ <template> <div> {{count}} <button @click="change">測試</button> </div> </template> <script lang="ts"> import { shallowRef,reactive } from 'vue' export default { setup() { let count = shallowRef<any>(0) const change = ()=>{ count.value ="w" console.log(count) // ref 對象 count = {} console.log(count) // 普通空對象如果是ref 聲明此時是proxy對象 } return { count, change } } } </script> ~~~ >[info] ## truggerRef ~~~ 1.手動執行與 shallowRef 關聯的任何副作用。 const shallow = shallowRef({ greet: 'Hello, world' }) // 第一次運行時記錄一次 "Hello, world" watchEffect(() => { console.log(shallow.value.greet) }) // 這不會觸發副作用，因為 ref 是淺層的 shallow.value.greet = 'Hello, universe' // 記錄 "Hello, universe" triggerRef(shallow) ~~~ >[danger] ##### 案例 ~~~ 1.下面案例" shallow.value.greet='zz'" 直接使用視圖不會更新的因為使用了shallowRef，此時的ref對象是淺層的，但是如果直接不深層改動而是直接改動整value屬性的值"shallow.value ={greet:'zz'} " 視圖會更改，此時非要" shallow.value.greet='zz'" 這種形式也更改需要使用'triggerRef' 配合 ~~~ ~~~ <template> <div> {{shallow.greet}} <button @click="change">測試</button> </div> </template> <script lang="ts"> import { shallowRef,reactive,triggerRef } from 'vue' export default { setup() { const shallow = shallowRef({ greet: 'Hello, world' }) console.log(shallow); const change = ()=>{ // shallow.value ={greet:'zz'} shallow.value.greet='zz' console.log(shallow); // triggerRef(shallow) 手動執行與 shallowRef 關聯的任何副作用 } return { shallow, change } } } </script> ~~~ >[danger] ##### 更多 [看不動了標記一下](https://v3.cn.vuejs.org/api/basic-reactivity.html#readonly)