vue3 组合式API

ref

ref()接收一个值，返回一个响应式、可更改的ref对象

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

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

 

toRef

不使用toRef，举例如下：

import { reactive } from 'vue'
let data = reactive({
  name: 'Sasa',
  age: 16
})
let age2 = data.age
data.age++
console.log(age2) // 16
console.log(data.age) // 17

直接获取响应式对象中的属性，会使新属性失去响应性

下面使用toRef重写例子：

import { reactive, toRef } from 'vue'
let data = reactive({
  name: 'Sasa',
  age: 16
})
let age = toRef(data, 'age')
data.age++
console.log(age.value) // 17
console.log(data.age) // 17

使用toRef获取响应式对象中一个属性，会创建一个对应的ref，与响应式对象中的源属性，保持同步

 

toRefs

toRef是基于响应式对象中的一个属性，toRefs是对整个响应式对象。使用toRefs将一个响应式对象转为一个普通对象，普通对象的每个属性都是使用toRef创建的ref，指向源属性

使用 toRefs 可以将 reactive 类型 装换为 ref 单个值类型，并且解构不会丢失响应式

import { reactive, toRefs } from 'vue'

let data = reactive({
  name: 'Sasa',
  age: 16
})
let dataRefs = toRefs(data)
data.age++
console.log(dataRefs.age.value) // 17
console.log(data.age) // 17

比如操作props，因为props是响应式的，他不能使用ES6解构，会消除prop的响应性。当父组件下次更改值的时候，子组件无法响应

import { toRefs } from 'vue'

const props = defineProps({
  msg: {
    type: String
  }
})
let { msg } = toRefs(props)

总结：不管使用toRef还是toRefs创建的新属性，都是和源属性保持着关联

 

computed

接收一个getter函数，返回一个只读的响应式ref对象，通过.value 暴露返回值

也可以接收一个带有get和set函数的对象来创建一个可写的ref对象

• 创建一个只读的计算属性ref

import { computed, ref } from 'vue'

const count = ref(1)
const getCount = computed(() => count.value)
console.log(getCount.value) // 1
getCount.value++ // 修改：Write operation failed: computed value is readonly

• 创建一个可写的计算属性ref：

import { computed, ref } from 'vue'

const count = ref(1)
const getCount = computed({
  get: () => count.value,
  set: (val) => {
    count.value = val
  }
})
console.log(getCount.value) // 1
getCount.value = 2 // 可以修改
console.log(getCount.value) // 2