傑森前端

理解

創建一個自己的ref處理額外邏輯

首先我們先用customRef模擬一下ref

使用一個func回傳customRef這個func

customRef裡面的callback中有兩個參數很重要

return中的get裡面必須要調用track 啟用追蹤

return中的set裡面必須調用trigger 觸發更新

這裡面有使用到閉包的概念可以看到value都是一直使用同一個變量

大概流程的理解就是

set的時候修改vlaue並且觸發trigger

trigger就會重新渲染template但是必須要先和get說這個東西要追蹤

<script >
import { customRef } from "vue"
export default {
  setup() {
    function myRef(value) {
      //追蹤 觸發
      return customRef((track, trigger) => {
        // 語法要求必須返回一個物件
        return {
          // 讀
          get() {
            console.log('讀')
            track() //讓get追蹤value數據的變化
            return value
          },
          // 改
          set(nV) {
            console.log('改')
            value = nV //閉包運用
            trigger() //重新解析template
          }
        }
      })
    }
    let keyWord = myRef('Hi')
    return {
      keyWord
    }
  }
}
</script>

<template>
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>

打造一個防抖的ref

<script >
import { customRef } from "vue"
export default {
  setup() {
    // myRef
    function myRef(value, delay) {
      let timer
      //追蹤 觸發
      return customRef((track, trigger) => {
        // 語法要求必須返回一個物件
        return {
          // 讀
          get() {
            console.log('讀')
            track() //讓get追蹤value數據的變化
            return value
          },
          // 改
          set(nV) {
            console.log('改')
            clearTimeout(timer)
            value = nV //閉包運用
            timer = setTimeout(() => {
              trigger() //重新解析template
            }, delay)
          }
        }
      })
    }
    let keyWord = myRef('Hi', 500)
    return {
      keyWord
    }
  }
}
</script>

<template>
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>