vue3.0 其他Composition API（下）

customRef

customRef:custom有自定义的意思，customRef就有自定义Ref的意思。作用：创建一个自定义的ref，并对其依赖跟踪和更新触发进行显式控制。
通过一个需求演示

整理代码

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

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let keyWord = ref("hello");//使用vue内置的ref函数
    return {
      keyWord,
    };
  },
};
</script>

<style>
</style>

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value) => {
      // customRef调用时必须传入一个函数
      return customRef(() => {
        return {
          get() {},
          set() {},
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello");
    return {
      keyWord,
    };
  },
};
</script>

<style>
</style>

先完成读的操作

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value) => {
      // customRef调用时必须传入一个函数
      return customRef(() => {
        return {
          get() {
            console.log(`读了${value}的数据`);
            return value;
          },
          set() {
            console.log("set");
          },
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello");
    return {
      keyWord,
    };
  },
};
</script>

再改一下set

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value) => {
      // customRef调用时必须传入一个函数
      return customRef(() => {
        return {
          get() {
            console.log(`读了${value}的值`);
            return value;
          },
          set(newval) {
            console.log(`修改了customRef容器${newval}的值`);
          },
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello");
    return {
      keyWord,
    };
  },
};
</script>

数据正常打印

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value) => {
      // customRef调用时必须传入一个函数
      // trigger 触发 track 追踪
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`读了${value}的值`);
            track(); // 追踪
            return value;
          },
          set(newval) {
            console.log(`修改了customRef容器${newval}的值`);
            value = newval;
            // vue重新解析模板
            trigger();
          },
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello");
    return {
      keyWord,
    };
  },
};
</script>

customRef实现防抖

最后

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value) => {
      // customRef调用时必须传入一个函数
      // trigger 触发 track 追踪
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`读了${value}的值`);
            track(); // 追踪
            return value;
          },
          set(newval) {
            console.log(`修改了customRef容器${newval}的值`);
            setTimeout(() => {
              value = newval;
              // vue重新解析模板
              trigger();
            }, 1000);
          },
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello");
    return {
      keyWord,
    };
  },
};
</script>

防抖

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

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义ref
    const myRef = (value, delay) => {
      let timer;
      // customRef调用时必须传入一个函数
      // trigger 触发 track 追踪
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`读了${value}的值`);
            track(); // 追踪
            return value;
          },
          set(newval) {
            console.log(`修改了customRef容器${newval}的值`);
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newval;
              // vue重新解析模板
              trigger();
            }, delay);
          },
        };
      });
    };
    // let keyWord = ref("hello");// vue内置函数ref
    let keyWord = myRef("hello", 500);
    return {
      keyWord,
    };
  },
};
</script>