-
ref:简单的认为是vue2中data中数据的另一种写法,包装了一个响应式的数据对象
-
reactive:创建一个响应式的数据对象
-
ref 和reactive的区别:
(1)可以简单地把 ref(obj) 理解为这个样子 reactive({value: obj})
(2)基本类型值(String 、Nmuber 、Boolean 等)或单值对象(类似像 {count: 3} 这样只有一个属性值的对象)使用 ref
(3)引用类型值(Object 、Array)使用 reactive -
toref:将对象中的某个值转化为响应式数据,接受两个参数(obj对象,对象的属性名),例如
<script>
// 1. 导入 toRef
import {toRef} from 'vue'
export default {
setup() {
const obj = {count: 3}
// 2. 将 obj 对象中属性count的值转化为响应式数据
const state = toRef(obj, 'count')
// 3. 将toRef包装过的数据对象返回供template使用
return {state}
}
}
</script>
- ref 和 toref的区别:
(1) ref 是对传入数据的拷贝;toRef 是对传入数据的引用
(2)ref 的值改变会更新视图;toRef 的值改变不会更新视图 - torefs: 和toref类似,将传入的对象里所有的属性的值都转化为响应式数据对象,该函数支持一个参数,即 obj 对象
setup() {
const obj = {
name: 'css',
age: 22,
gender: 0
}
// 2. 将 obj 对象中属性count的值转化为响应式数据
const state = toRefs(obj)