ref vs reactive

相同点

• 创建的数据都是响应式
• 都是 Composition API 的功能
• 都支持嵌套使用
• 都可以与 computed 和 watch 配合使用
• ref 和 reactive 解构会丢失响应式，得通过 toRefs 来解构保持响应式

相同点示例代码

创建响应式数据

import { ref, reactive } from 'vue';
const refValue = ref(0)
const reactiveObject = reactive({ name: 'huisnota' })

console.log('refValue:', refValue.value) // 0
console.log(`reactiveObject's name`, reactiveObject.name) // 'huisnota'

更新响应式数据

import { ref, reactive } from 'vue';
const refValue = ref(0)
const reactiveObject = reactive({ name: 'huisnota' })
refValue.value = 1
reactiveObject.name = 'Jack'

console.log('refValue:', refValue.value) // 1
console.log(`reactiveObject's name`, reactiveObject.name) // 'Jack'

解构丢失响应式

import { ref, reactive } from 'vue';
const reactiveObject = reactive({ name: 'huisnota' })
const refObject = ref({ name: 'Jack' })

let { name: refObjectName } = refObject.value
let { name: reactiveObjectName} = reactiveObject

console.log('refObjectName:', refObjectName) // 'huisnota'
console.log(`reactiveObjectName`, reactiveObjectName) // 'Jack'

// 丢失响应式
refObjectName = 'Sam'
reactiveObjectName = 'Sam'

console.log('refObjectName:', refObjectName) // 'huisnota'
console.log(`reactiveObjectName`, reactiveObjectName) // 'Jack'

toRefs解构保留响应式

import { ref, reactive, toRefs } from 'vue';
const reactiveObject = reactive({ name: 'huisnota' })
const refObject = ref({ name: 'Jack' })

const { name: refObjectName } = toRefs(refObject.value)
const { name: reactiveObjectName} = toRefs(reactiveObject)

console.log('refObjectName:', refObjectName) // 'huisnota'
console.log(`reactiveObjectName`, reactiveObjectName) // 'Jack'

// 保留响应式
refObjectName.value = 'Sam'
reactiveObjectName = 'Sam'

console.log('refObjectName:', refObjectName) // 'Sam'
console.log(`reactiveObjectName`, reactiveObjectName) // 'Sam'

不同点

• ref 通过 .value 访问或者修改， reactive 通过属性访问或者修改; ref 可以通过赋值替换整个值而不丢失响应式， reactive 赋值之后会丢失响应式
• ref 适合做简单值的管理，数字、字符串、布尔值等；reactive 适合复杂的对象和状态的管理。避免过度使用 ref, 有时候可以通过 reactive 来对一组的简单的值做优化管理，比如说参数查询

不相同点示例代码

修改值

import { ref, reactive } from 'vue';
const refValue = ref(0)
const obj = { name: 'huisnota' }
let reactiveObject = reactive(obj)

console.log('refValue:', refValue.value) // 0
console.log(`reactiveObject's name`, reactiveObject.name) // 'huisnota'

refValue.value = 1
reactiveObject.name = 'Jack'

console.log('refValue:', refValue.value) // 1
console.log(`reactiveObject's name`, reactiveObject.name) // 'Jack'

reactiveObject = { name: 'Sam'}
console.log(`reactiveObject's name`, reactiveObject.name) // 'Jack'

console.log(obj === reactiveObject) // false