1. ref(): 用来定义基本数据类型的数据。
ref是通过Object.defineProperty()的get和set实现数据代理,获取数据 **需要** .value
reactive是用来定义引用类型的数据,使用Proxy实现数据代理,获取数据 **不需要** value
<script setup>
const data = ref('123') //响应式变量
const num = 123 //不可修改
</script>
2. isRef(): 判断值是否为一个ref对象
<script setup>
function doFetch(){
// doSomething
}
if(isRef(val)) {
//如果输入的val是一个ref,那么将启动一个响应式的请求
watchEffect(doFetch) // doFetch为一个方法名
}
</script>
3. unref(): 解包可能为ref的值。如果参数是一个ref则返回它的value,否则返回参数本身
unref(val) 等价于 val = isRef(val) ? val.value : val
<script setup>
value = unref(val)
</script>
toRef()、toRefs()
本质是引用,修改响应式的数据,会影响到响应式的数据,视图不改变如果对对象做了展开操作(展开运算符 - 赋值),那么就会丢失响应式的效果
4. toRef(): 一次仅能设置一个数据,接受两个参数第一个参数为该对象,第二个参数为该对象的属性
<script setup>
import { toRef, reactive } from 'vue'
const data = reactive({
name: 'guoguo',
age: '18'
})
const dataRef = toRef(data, 'name') //toRef 使得data中的name具有响应式
</script>
4. toRefs(): 将响应式对象中的所有属性转换为单独的响应式数据。将对象中的每个属性都做一次ref操作,使每个属性都具有响应式
<script setup>
import { toRefs, reactive } from 'vue'
const data = reactive({
name: 'guoguo',
age: '18'
})
const dataRef = toRefs(data) //toRefs 使得data中所有属性具有响应式
const dataRef = ...toRefs(data) // 则失去了响应式
</script>