响应性基础
声明响应式状态
要为对象创建响应式状态,可以使用 reactive
方法:
import { reactive } from 'vue'
// 响应式状态
const state = reactive({
count: 0
})
reactive
返回一个响应式的对象状态,该响应式转换是“深度转换”,它会影响传递对象的所有嵌套 property。
当从组件中 data()
返回一个对象时,该对象会交由 reactive()
使其成为响应式对象,模板会被编译成能够使用这些响应式 property 的渲染函数;
创建独立的响应式值作为 refs
ref
返回一个可变的响应式对象,该对象作为一个响应式的引用维护着其内部的值,这就是 ref
名称的来源,该对象只包含一个名为 value
的 property:
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
Ref 解包
当在 template 模板中使用 ref 时,它会自动浅层次解包内部值,因此无须使用.value,但访问嵌套的 ref 时需要在模板中添加 .value;
访问响应式对象
当 ref
作为响应式对象的 property 被访问或更改时,为使其行为类似于普通 property,它会自动解包内部值:
const count = ref(0)
const state = reactive({
count
})
// 虽然此处的 count 是一个 ref 响应式对象,但在访问时仍能直接访问到其value,因为reactive自动对其进行了解包;
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1
如果将新的 ref 赋值给现有 ref 的 property,将会替换旧的 ref:
const otherCount = ref(2)
state.count = otherCount // 此处会直接替换旧的 ref 对象,而不是修改 ref 对象的value
console.log(state.count) // 2
console.log(count.value) // 1
Ref 解包仅发生在被响应式对象嵌套时,当从 Array
或原生集合类型如 Map
访问 ref 时,不会进行解包:
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)
响应式状态解构
当使用解构来获取响应式对象的一些 property 时,被获取的属性响应性将丢失;
import { reactive } from 'vue'
const book = reactive({
author: 'Vue Team',
year: '2020',
title: 'Vue 3 Guide',
description: 'You are reading this book right now ;)',
price: 'free'
})
let { author, title } = book
使用解析获取响应式对象的属性时,需要将响应式对象转换为一组 ref 返回,这些 ref 将保留与源对象的响应式关联:
import { reactive, toRefs } from 'vue'
const book = reactive({
author: 'Vue Team',
year: '2020',
title: 'Vue 3 Guide',
description: 'You are reading this book right now ;)',
price: 'free'
})
let { author, title } = toRefs(book) // toRefs将响应式对象转为普通对象,并将对象中每个属性都是指向原始对象相应属性的ref对象;
title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题,现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'
使用 readonly
防止更改响应式对象
如果想跟踪响应式对象 (ref
或 reactive
) 的变化,但也想防止在应用程序的某个位置更改它;例如,当有一个被 provide 的响应式对象时,不想让它在注入之后被改变。为此,可以基于原始对象创建一个只读的 proxy 对象:
import { reactive, readonly } from 'vue'
const original = reactive({ count: 0 })
const copy = readonly(original)
// 通过 original 修改 count,将会触发依赖 copy 的侦听器
original.count++
// 通过 copy 修改 count,将导致失败并出现警告
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."