Vue3基础(十er)___customRef

ref

ref生成的响应式数据，当想改变的时候，需要.value

<template >
  <div class="container">
    <p>strNum {{strNum}}</p>
    <button @click="changeStrNum">改变 strNum</button>
  </div>
</template>
<script>
import { ref, customRef } from "vue";
export default {
  setup() {
    let strNum = ref({ age: 19 });
    const changeStrNum = () => {
      strNum.value.age++;
    };
    return { changeStrNum, strNum };
  }
};
</script>
<style  scoped>
</style>

customRef

customRef可以生成一个ref变量，传入一个回调函数，返回对象，有get、set属性，使用响应的方法来追踪数据、更新页面。

<template >
  <div class="container">
    <p>myNum {{myNum}}</p>
    <button @click="changeMyNum">改变 myNum</button>
  </div>
</template>
<script>
import { ref, customRef } from "vue";
function myRef(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        console.log("获取值",value)
        return value;
      },
      set(newValue) {
        value = newValue;
        console.log("被重新赋值哦",newValue);
        trigger();
      }
    };
  });
}
export default {
  setup() {
    let myNum = myRef("0");
    const changeMyNum=()=>{
      myNum.value ='123456'
    }
    return { myNum,changeMyNum };
  }
};
</script>
<style  scoped>
</style>

页面渲染的时候调用myNum的get方法。
点击按钮：

先set然后再get。
看一下数据结构

所以我们可以使用sustomRef来自己定义ref的get、set做处理。
优化：

<template >
  <div class="container">
    <p>myNum {{myNum}}</p>
    <button @click="changeMyNum">改变 myNum</button>
  </div>
</template>
<script>
import { ref, customRef } from "vue";
function myRef(value) {
  let timeOut = null;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        console.log("获取值", value);
        return value;
      },
      set(newValue) {
        if (!timeOut) {
          timeOut = setTimeout(() => {
            value = newValue;
            console.log("被重新赋值哦", newValue);
            trigger();
            timeOut = null;
          }, 1000);
        }
      }
    };
  });
}
export default {
  setup() {
    let myNum = myRef("0");
    console.log(myNum, "myNum");
    const changeMyNum = () => {
      myNum.value = "123456";
    };
    return { myNum, changeMyNum };
  }
};
</script>
<style  scoped>
</style>

防止按钮短时间内多次点击。