ref函数,接受一个初始值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 value属性,指向该初始值
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
unref函数,参数是ref,则返回参数的value,否则直接返回参数本身
const count = ref(2)
unref(count) // 2
const str = '111'
unref(str) // '111'
reactive函数,返回普通对象的响应式副本
参数为需要定义为响应式数据的数据对象,可以理解为相当于vue2中的data
setup() {
const data = reactive({
name: 'zhangsan',
age: 0
})
return {
data // 组件中使用data中的属性时需要使用data[key]的方式使用,例如组件中使用name应该写成data.name
}
}
如果希望直接使用data中的属性,一般我们会用es6的解构赋值,但直接将data解构,那么data中的数据就不再具有响应式的特性
toRefs函数,将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property的ref,那么在将结果对象解构赋值的时候,属性的响应式特性会保留
setup() {
const data = reactive({
name: 'zhangsan',
age: 0
})
return {
...toRefs(data) // 组件中可以直接使用data中的属性,且为响应式
}
}
toRef函数
可以用来为源响应式对象上的某个 property 新创建一个 ref。ref 可以被传递,它会保持对其源 property 的响应式连接。
setup() {
const data = reactive({
num: 1
})
const count = toRef(data, 'num')
const changeCount = () => {
count.value += 1
}
console.log(data.num) // 2
return {
count // 组件中可以直接使用count,且为响应式
}
}