ref
接受一个值并返回一个响应式且可变的ref对象。ref对象具有.value指向内部值的单个属式。
const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1
如果将一个对象分配为ref的值，则该reactive方法会使该对象具有高度的响应式。
- 模板访问
当ref作为渲染上下文（从中返回的对象setup()）的属式返回并在模板中进行访问时，它会自动展开为内部值。无需.value在模板中附加：
<template> <div>{{ count }}</div> </template> <script> export default { setup() { return { count: ref(0) } } } </script>
响应式对象中的访问
当ref被访问或作为响应对象的属式进行更改时，它会自动展开为内部值，因此其行为类似于普通属式：
const count = ref(0) const state = reactive({ count }) console.log(state.count) // 0 state.count = 1 console.log(count.value) // 1 请注意，ref内部值可以被覆盖/替换： const otherCount = ref(2) state.count = otherCount console.log(state.count) // 2 console.log(count.value) // 1
isRef
检查值是否是ref的引用对象。
const unwrapped = isRef(foo) ? foo.value : foo
toRefs
将响应对象转换为普通对象，其中结果对象上的每个属式都是指向原始对象中相应属式的ref；常用于reactive解构/扩展时使用。
const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* Type of stateAsRefs: { foo: Ref<number>, bar: Ref<number> } */ // The ref and the original property is "linked" state.foo++ console.log(stateAsRefs.foo) // 2 stateAsRefs.foo.value++ console.log(state.foo) // 3
toRefs 从组合函数返回反应对象时，此函数很有用，以便使用组件可以对返回的对象进行解构/扩展而不会失去响应式：
function useFeatureX() { const state = reactive({ foo: 1, bar: 2 }) // logic operating on state // convert to refs when returning return toRefs(state) } export default { setup() { // can destructure without losing reactivity const { foo, bar } = useFeatureX() return { foo, bar } } }
computed
使用getter函数，并为getter返回的值返回一个不变的响应式ref对象。
const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // error
或者，它可以使用具有get和set功能的对象来创建可读写的ref对象。
const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0
readonly
接受一个对象（响应式或普通）或ref并返回对原始对象的只读（和响应式）代理。可以理解为代理。
const original = reactive({ count: 0 }) const copy = readonly(original) watch(() => { // works for reactivity tracking console.log(copy.count) }) // mutating original will trigger watchers relying on the copy original.count++ // mutating the copy will fail and result in a warning copy.count++ // warning!
最近：
请各位帅哥美女多多支持帅编，回复“ 1” 即可加入前端技术交流群，回复“ 2” 即可领取500G前端干货
