vue3 的 Refs

vue3 的 Refs

ref

接受一个内部值，并返回一个 响应可变的 ref 对象，ref 对象具有指向内部值的属性 value

import { ref } from 'vue';

setup(){
  const state = ref(true);
  console.log('state', state); // RefImpl {..., value: true}
  return {
    state,
  }
}

类型声明

// 已知泛型类型
const state = ref<Boolean>(true); // const state: Ref<boolean>

// 泛型类型未知
function useState<State extends string>(initial: State) {
  const state = ref(initial) as Ref<State>; // const state: Ref<State>
  return state
}

const state = useState('mapState'); // const state: Ref<'string'>

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身
即 val = isRef(val) ? val.value : val

function useFoo(x: number | Ref<number>){
  const wrapped = ref(x)  // const wrapped: Ref<number>
  const unwrapped = unref(x);  // const unwrapped: number
}

toRef

可以用来为源响应对象创建一个新的 ref 引用，可以与源响应对象相互作用，响应式链接

interface ReactiveProps<T> {
  foo: T,
  bar: T
}

setup(){
  const state: ReactiveProps<number> = reactive({
    foo: 1,
    boo: 1
  })

  const fooRef = toRef(state, 'foo'); // const fooRef: Ref<number>
  const booRef = ref(state.boo); // const booRef: Ref<number>

  fooRef.vlaue++;
  booRef.value++;
}

当将要 props 传递给复合函数时， toRef 很有用：

import { toRef } from 'vue';
export default defineComponent {
  setup(props){
    const propsRef = toRef(props, '...');
    // 但是发现 propsRef中的值是只读的，不可以改变
  }
}

toRefs

将响应式对象转换为普通对象，其中结果对象的每个属性值都对应原始对象的属性的 ref；
toRefs 常用于响应式对象的解构；
toRefs 只会为响应式对象中的属性生成 ref, 如果要为特定的属性生成 ref, 则药使用 toRef

const state = reactive({
  foo: 1,
  boo: 1
})

const stateRef = toRefs(state);  // const stateRef: ToRefs<{ foo: number, boo: number }>
console.log(stateRef);  // { foo: ObjectRefImpl, boo: ObjectRefImpl };

const { foo, boo } = stateRef;

foo.value++;
boo.value++;

console.log(state); //  { foo: 2, boo: 2 };

isRef

检查值是否为一个 ref 对象。

const max = reactive({
  value: 10
})

const min = ref(0)

console.log(isRef(max))   // false
console.log(isRef(min))  // true