响应性Api基础-Vue3学习日记(四)

本文学习下vue3.x中的响应性api的知识

基础api

reactive

reactive返回的是对象的响应式副本,是一个proxy对象,在vue中建议我们直接使用响应式proxy,避免依赖原始对象。

const obj = reactive({a:123456})

readonly

只读属性,这个很好理解,在类中就有这样的概念。

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 用于响应性追踪
  console.log(copy.count)
})

// 变更 original 会触发依赖于副本的侦听器
original.count++

// 变更副本将失败并导致警告
copy.count++ // 警告!

Refs

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

很明显看到如果需要修改ref对象的值需要通过.value要进行。这一点和reactive是不用的,其次在书写方面vue建议我们ref定义基础类型,而reactive定义引用类型。

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref

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

const fooRef = toRef(state, 'foo')

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

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

toRefs

将响应式对象(reactive)转换为普通对象(ref),其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

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

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

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

computed

接受一个 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

在默认的computed中是不能修改值的会报错,如果需要修改的话就可以使用以下方法

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