ref和reactive

2023-01-11 107 阅读1分钟

引入

import { ref, reactive } from 'vue'

ref

ref可以接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。同时在ts中也可以限制传给ref的值的属性

代码如下：

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

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

//一个字符串类型的数组
const count = ref<string[]>([a])

reactive

reactive主要用于声明复杂类型响应式数据。如数组或者多个对象嵌套。
```
const obj = reactive({ count: 0 })
```

比较两者的区别：在vue3中可以使用ref 和reactive实现响应性，但对ref赋值是对ref的value属性进行赋值，而可以直接对reactive进行赋值。