vue3 ref 和reactive的区别
时间: 2023-12-27 18:24:38 浏览: 33
Vue 3中的ref和reactive都是用于创建响应式数据的API,但它们有一些区别。
1. ref:
ref是Vue 3中的一个函数,它接收一个参数并返回一个包装后的响应式对象。ref主要用于创建单个基本类型值的响应式数据。
```javascript
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 输出:0
count.value = 1
console.log(count.value) // 输出:1
```
2. reactive:
reactive是Vue 3中的另一个函数,它接收一个普通对象并返回一个包装后的响应式对象。reactive可以用于创建任何JavaScript对象,包括数组和函数。
```javascript
import { reactive } from 'vue'
const state = reactive({
count: 0,
name: 'John',
list: [1, 2, 3],
increment() {
this.count++
}
})
console.log(state.count) // 输出:0
console.log(state.name) // 输出:'John'
console.log(state.list) // 输出:[1, 2, 3]
state.increment()
console.log(state.count) // 输出:1
```
总结:
ref适用于创建单个基本类型值的响应式数据,而reactive适用于创建任何JavaScript对象的响应式数据,包括数组和函数。