Home Vue Vue3

# 1. customRef

App 为根组件 下面 Home 例子都被此组件引用

vue
// App.vue 
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
};
</script>
<style scoped>
</style>
    

  • 创建一个自定义的 ref, 并对齐依赖项跟踪和更新触发进行显示控制：

      

    • 它需要一个工厂函数，该函数接受 track 和 trigger 函数作为参数；
      • 

    • 并且应该返回一个带有 get 和 set 的对象
      • 

    

    • 



js
import { customRef } from "vue";
// 自定义 ref 需要使用 customRef 简单的 debounce (防抖)
export default function (value, delay) {
  let timer = null; // 全局声明 timer
  //customRef 里面需要传入的是一个函数并有两个参数
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 收集依赖
        return value;// 返回具体值
       },
      set(newValue) { 
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        },delay)
      }
    }
  })
}
vue
// Home.vue
<template>
  <div>
    <input v-model="info" />
    <h2>{{ info }}</h2> 
  </div>
</template>
<script>
import debounceRef from "./hook/debounceRef";
export default {
  setup() {
    const info = debounceRef("Hello World", 1000); // 传入 1000ms 作为延迟时间
    return {
      info,
    };
  },
};
</script>
<style scoped>
</style>
参考结果：延迟 1s 触发响应式～


setup_customRef