vue3 中的自定義ref

# 自定義ref 可以在響應式的邏輯過程中添加邏輯

 

import { customRef } from '@vue/reactivity'
export default {
  name: 'Demo',
  setup(){
    function myRef(value){
    return customRef((track,trigger)=>{
       return {
         get(){
            track()
            return value
         },
         set(newValue){
          setTimeout(()=>{
          value = newValue
          trigger()
          },500)
         }
       }

      })
    }
    let keyword = myRef('hello')
  return {
    keyword
  }
  }
}

　　# 防抖 ，可以通過每次開啟定時器之前先清除之前的定時器

<script>
import { customRef } from '@vue/reactivity'
export default {
  name: 'Demo',
  setup(){
    function myRef(value){
      let timer
    return customRef((track,trigger)=>{
       return {
         get(){
            track()  # 追蹤數據
            return value
         },
         set(newValue){
           clearTimeout(timer)
          timer = setTimeout(()=>{
          value = newValue
          trigger()  # 重新解析模板
          },500)
         }
       }

      })
    }
    let keyword = myRef('hello')
  return {
    keyword
  }
  }
}