vue3中customRef的用法

北枳~

已于 2022-12-06 19:21:37 修改

阅读量327

点赞数

文章标签： vue.js javascript 前端

于 2022-12-06 19:18:44 首次发布

本文链接：https://blog.csdn.net/m0_59006402/article/details/128208599

版权

customRef的两个参数分别是用于追踪的 track 与用于触发响应的 trigger


<template>
  <input type="text" v-model="keyword" />
  <h3>{{ keyword }}</h3>
</template>
 
<script>
import { customRef } from "vue";
export default {
  setup() {
    function aaa(value) {
      console.log("value", value);
      return customRef((track, trigger) => {
        return {
          get() {
            console.log("拿到了");
            track(); //追踪数据
            return value;
          },
          set(newvalue) {
            console.log("newvalue", newvalue);
            value = newvalue;
            trigger(); //通知vue去重新解析模板
          },
        };
      });
    }
    let keyword = aaa("hello");
    return {
      keyword,
    };
  },
};
</script>
 
<style>
</style>