Vue 响应式工具

isRef（）

// 检查某个值是否为 ref 
const a = ref(0)
console.log(isRef(a));    // True

unref（）

// 这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
const a = unref(1)
const b = unref(ref(1))

console.log(a);  // 1
console.log(b);  // 1

toRef（）

// 基于响应式对象上的一个属性，创建一个对应的 ref。
const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

toRefs（）

// 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。
const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

isProxy（）

// isProxy检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
const a = reactive({})
const b = readonly({})
const c = shallowReactive({})
const d = shallowReadonly({})

console.log(isProxy(a));    // True
console.log(isProxy(b));    // True
console.log(isProxy(c));    // True
console.log(isProxy(d));    // True

isReactive（）

​// 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。
const a = reactive({})
const b = shallowReactive({})

console.log(isReactive(a));    // True
console.log(isReactive(b));    // True

isReadonly（）

// 检查传入的值是否为只读对象。
const a = readonly({})
console.log(isReadonly(a));    // True