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>
防止按钮短时间内多次点击。