一个网站的成本,wordpress迁移数据库,东台网站设计,网页设计培训费用年前搞了一个V3的需求#xff0c;里面涉及了一些各种ref的使用#xff0c;今天顺便总结下V3中ref家族。 ref家族 ref()toReftoRefsisRef()unref()shallowReftriggerRefcustomRef总结 ref()
大家对于 ref 这个 API 肯定都不陌生。在 Vue3 中经常会用到它。它的作用是接收一个…年前搞了一个V3的需求里面涉及了一些各种ref的使用今天顺便总结下V3中ref家族。 ref家族 ref()toReftoRefsisRef()unref()shallowReftriggerRefcustomRef总结 ref()
大家对于 ref 这个 API 肯定都不陌生。在 Vue3 中经常会用到它。它的作用是接收一个值并返回一个响应式的对象。我们可以通过.value 属性来访问和修改这个值。在模板中我们可以省略.value例如在下面的代码中当点击按钮时页面中的 count 会响应式地更改。
templatediv{{ count }}button clickaddCount1/button/div
/templatescript langts setup
import { ref } from vue
const count ref(1)
const addCount () {count.value
}
/scripttoRef
toRef 可以根据一个响应式对象中的一个属性,创建一个响应式的 ref。同时这个 ref 和原对象中的属性保持同步,改变原对象属性的值这个 ref 会跟着改变,反之改变这个 ref 的值原对象属性值也会改变,它接收两个参数,一个是响应式对应,另一个则是属性值,例如下面代码
templatediv{{ count.a }}{{ a }}button clickaddCount1/button/div
/templatescript langts setup
import { ref, toRef } from vue
const count ref({a: 1,b: 2
})
const a toRef(count.value, a)
const addCount () {a.value
}
/script
toRefs
toRefs 它可以将一个响应式对象转成普通对象,而这个普通对象的每个属性都是响应式的 ref
templatediv{{ count.a }}{{ countAsRefs.a }}button clickaddCount1/button/div
/templatescript langts setup
import { reactive, toRefs } from vue
const count reactive({a: 1,b: 2
})
const countAsRefs toRefs(count)
const addCount () {countAsRefs.a.value
}/script
此时代码中的countAsRefs类型为
{a: Refnumber,b: Refnumber
}
它的属性 a 和 b 都是响应式的 ref 对象,同样的它们和原对象的 count 的属性也是保持同步的
根据它的特性我们通常用它来解构一个响应式对象而不会让其失去响应式
import { reactive, toRefs } from vue;
const count reactive({a: 1,b: 2,
});
const { a, b } toRefs(count);
此时的 a 和 b 都是一个响应式的 ref 对象,并和原对象的 a 和 b 属性保持同步
isRef()
isRef 顾名思义它是用来判断某个值是否是 ref,注意:它判断不了这个值是不是 reactive(可以使用 isReactive 判断)
import { reactive, isRef, ref } from vue;
const count ref(1);
const testObj reactive({a: 1,
});
console.log(isRef(count)); //true
console.log(isRef(testObj)); //false
unref()
其实它是一个语法糖
val isRef(val) ? val.value : val;如果是 ref 则返回它的内部值,否则则返回它本身。通过这个语法糖我们可以看出它可以对响应式对象解除响应式引用,比如我们只想获取一个响应式的值,但不想要它的响应式可以使用它解除引用。 例如
templatediv{{ unRefAsCount }}{{ count }}button clickaddCount1/button/div
/templatescript langts setup
import { unref, ref } from vue
const count ref(1)
let unRefAsCount unref(count)
const addCount () {count.value
}
/script
代码中的 unRefAsCount 是不具备响应式的
shallowRef
通过翻译我们可以看出它是浅层的 ref,什么是浅层的 ref 呢? 与 ref 不同的是只有.value 是响应式的,再深层的属性则不具备响应式
templatediv{{ shallowObj.a }}button clickaddCount 1/button/div
/templatescript langts setup
import { shallowRef } from vueconst shallowObj shallowRef({a: 1
})
const addCount () {//不会触发页面更新shallowObj.value.a
}
/script
但是如果我们将 addCount 改为修改整个.value 就会触发响应式了
const addCount () {let temp shallowObj.value.a;temp;shallowObj.value {a: temp,};
};
triggerRef
它可以让浅层的 ref 即 shallowRef 深层属性发生改变的时候强制触发更改,比如上面触发不了响应式的代码示例加入triggerRef后
templatediv{{ shallowObj.a }}button clickaddCount 1/button/div
/templatescript langts setup
import { shallowRef, triggerRef } from vueconst shallowObj shallowRef({a: 1
})const addCount () {shallowObj.value.a//加入triggerRef强制触发更改triggerRef(shallowObj)
}
/script此时页面效果触发了响应式
customRef
顾名思义它是自定义的 ref,我们可以通过 customRef 来显式的追踪某个值的响应式变化,它接收一个函数,这个函数接受 track 和 trigger 两个函数作为参数并返回一个带有 get 和 set 方法的对象。比如下面封装一个自定义的响应式对象 myRef,同时控制它只有值小于 4 才会触发响应式
templatediv{{ count }}button clickaddCount 1/button/div
/templatescript langts setup
import { customRef } from vue
const myRef (value: number) {const customValue customRef((track, trigger) {return {get() {//通知vue需要追踪后续内容的变化,这里可以自由控制track()return value},set(newValue) {console.log(newValue);//myRef.valuexxx的xxx值//加trigger则触发响应式,通知vue更新页面,这里可以自由控制是否加triggerif(value4) trigger()value newValue}}})return customValue
}const count myRef(0)
const addCount () {count.value
}
/script当 count 大于 4 的时候便失去了响应式
总结
ref(): 接收一个值并返回一个响应式的对象可以使用.value 属性来访问和修改这个值。toRef(obj, key):根据一个响应式对象中的一个属性创建一个响应式的 ref并且该 ref 和原对象中的属性保持同步。toRefs(obj): 将一个响应式对象转换成一个普通对象其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用shallowRef(value): 创建一个浅层的ref只有 value 属性是响应式的深层的属性不具备响应式。triggerRef(ref): 强制浅层的 ref发生改变时触发响应式。customRef(factory): 自定义 ref 对象可以显式地追踪某个值的响应式变化。
