vue3常用响应式对象的api,你全用过了吗

下面是关于Vue3常用响应式对象的API的完整攻略。

Vue3常用响应式对象的API

ref

ref 是 Vue3 中创建响应式数据的函数。可以用来包装基本类型的数据，例如数字、字符串等。ref 函数返回一个具有 value 属性的对象，该属性的值为传入的初始值，并且它是响应式的。

示例1：

import { ref, reactive } from 'vue'

const count = ref(0)

console.log(count.value) // 0

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

示例中我们创建了一个计数器 count，初始值为 0，然后使用 console.log(count.value) 打印出其值，并使用 ++ 操作符让计数器加 1，再次使用 console.log(count.value) 打印出计数器的值，此时计数器值应为 1。

reactive

reactive 是 Vue3 中创建响应式对象的函数，可以用来包装对象，它会将对象属性包装为响应式的，响应式的代价是性能开销较大。当对象被修改时，Vue3 会自动追踪这些更改，并通知所有依赖于该对象的组件进行重新渲染。

示例2：

const obj = reactive({
  name: 'jack',
  age: 18
})

console.log(obj.name) // 'jack'

obj.age++
console.log(obj.age) // 19

示例中我们创建了一个名为 obj 的响应式对象，包含两个属性 name 和 age。我们使用 console.log(obj.name) 打印出 name 属性的值，然后使用 ++ 操作符让 age 属性加 1，再次使用 console.log(obj.age) 打印出 age 属性的值，此时 age 属性应为 19。

toRefs

toRefs 是 Vue3 中将响应式对象转换为普通对象的函数。在使用 reactive 函数创建响应式对象之后，你可以使用 toRefs 将响应式对象上的属性转换为普通的响应式变量。

示例3：

const reactiveObj = reactive({
  name: 'tom',
  age: 20
})

const refsObj = toRefs(reactiveObj)

console.log(refsObj.name.value) // 'tom'
console.log(refsObj.age.value) // 20

示例中我们先创建了一个响应式对象 reactiveObj，该对象包含了 name 和 age 两个属性。接着我们调用了 toRefs 函数来将 reactiveObj 转换为普通对象 refsObj，最后我们使用 refsObj.name.value 来访问其名称为 name 的属性。

computed

computed 是 Vue3 中创建计算属性的函数。computed 函数可以接收一个函数作为参数，返回一个响应式对象。当计算属性所依赖的响应式变量发生变化时，计算属性会重新计算其值，并且该值也是响应式的。

示例4：

const reactiveObj = reactive({
  firstName: '张',
  lastName: '三'
})

const computedFullName = computed(() => reactiveObj.firstName + reactiveObj.lastName)

console.log(computedFullName.value) // '张三'

reactiveObj.firstName = '李'

console.log(computedFullName.value) // '李三'

示例中我们创建了一个名为 reactiveObj 的响应式对象，包含两个属性 firstName 和 lastName。接着我们使用 computed 函数创建了一个名为 computedFullName 的计算属性，其值为 reactiveObj.firstName + reactiveObj.lastName。我们使用 console.log(computedFullName.value) 来打印计算属性的值，然后修改 reactiveObj.firstName 属性的值，再次使用 console.log(computedFullName.value) 打印计算属性的值，此时计算属性的值应为 '李三'。