vue3.0提前了解系列----一些高級的用法和api

大家好，首先先道個歉。有三個api還不太清楚是怎么回事。所以這次分享少分享三個API  事后等我搞清楚了我在增加上

欠三個api:

shallowReactive

shallowReadonly

shallowRef

 

這三個記錄下，下面開始正題：

customRef

這個api是用來顯式控制其依賴項跟蹤和更新觸發，這么說可能有人不理解，說簡單點吧，就是你可以控制你視圖更新時間，以及動態控制你動態處理設置值（比如后面增加一段話）

<p> 自定義ref : {{ testCustom }} </p>
<button @click = "getRef">
  獲取ref值
</button>
<button @click = "setRef">
  設置ref值
</button>




import { customRef } from 'vue'
setup () {
    // 顯式控制其依賴項跟蹤和更新觸發
    function customRefTest(value) {
      return customRef((track, trigger) => {
        return {
          get() {
            track()
            return value
          },
          set (newValue) {
            value = newValue + '自定義ref'
            setTimeout(() => {
              trigger()
            }, 10000)
          }
        }
      })
    }
    const testCustom = customRefTest(0)
    const getRef = () => {
      console.log(testCustom.value)
    }
    const setRef = () => {
      testCustom.value = '設置ref值'
    }
}

順便貼一下官網的demo，一個節流的輸入框雙向數據綁定

<template>
  <div>
    <input v-model="text" />
    {{ text }}
  </div>
</template>
<script>
import { customRef } from 'vue'
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')
    }
  }
}
</script>
<style scoped>
  
</style>

markrow

標記對象，使其永遠不會轉換為代理。返回對象本身

{{ a }}
<button @click = "setFoo">
   設置foo值
</button>




import { markRaw, reactive, isReactive } from 'vue'
const foo = markRaw({
   a: 10
})
const state = reactive(foo)
console.log(isReactive(state)) // false
const setFoo = () => {
   state.a++
   console.log(foo)
}

注意，說明一下這里我點擊這個button，視圖是不會改變的，始終顯示10。但是js中直接輸出是最新的值

toRaw

返回一個代理對象（包含只讀代理對象）的原對象，可用於臨時讀取，而不會觸發代理訪問和跟蹤的一個開銷。引用vue官網原話：返回反應或只讀代理的原始對象。這是一個轉義填充，可用於臨時讀取，而不會引起代理訪問/跟蹤開銷或寫入而不會觸發更改。不建議保留對原始對象的持久引用。小心使用。

import { markRaw, reactive, toRaw }
const foo = markRaw({
  a: 10
})
const state = reactive(foo)
const toRawTest = reactive(fooTest)
const setShallowReactive = () => {
  console.log('toraw測試' + (toRaw(toRawTest) === fooTest)) // true
  console.log('toraw測試2' + (toRaw(state) === foo)) // true
}

 

render函數 && jsx

基本和vue2沒什么太大區別，都是一樣的用法，只不過不需要使用render函數，但是需要從vue中導入一個h

import { h, ref } from 'vue'
export default {
  setup() {
    const msg = ref(1)

    return () =>h('h1', [msg.value])
  }
}

 

至此，compositionapi所有用法已經基本可以告一段落，下一次為大家分享內容大概為：Fragments、Suspense以及Multiple v-models、和Portals組件，都是一些小用法的改變，請期待吧