Vue基础知识：学习ref() - 定义响应式变量且可以定义任意类型-工具盒子

今天我们来学习一个Vue基础知识点：关于ref()的一些了解。

ref() ：定义响应式变量，它可以定义任意类型。

1、使用前必需引入 ref

<script setup>
    import {
        ref
    } from 'vue'
</script>

2、定义语法：

const a= ref(0)
const b = ref(null)
const c = ref({})
const d = ref(false)
const e = ref([])

3、取值、赋值方法：

const num = ref(0)
num.value = 20 // 赋值
const a = num.value // 取值

VUE官方目前开发的响应性语法糖功能还在测试中，该功能可以去掉.value的取值、赋值方式，像普通变量一样使用。不过当前uni-app还未支持。

响应性语法糖代码：

<script setup>    
    // 官方文档：https://cn.vuejs.org/guide/extras/reactivity-transform.html
    let count = $ref(0)
    console.log(count)
</script>

关于响应式语法糖介绍可以点击：Vue进阶：详细了解响应式语法糖的来龙去脉。

4、ref响应式类型：是任意类型。这是它与reactive的明显区别。

5、ref在模板中解包的几种场景：

a) ref在模板中作为顶层属性被访问时，会被自动解包，不需要使用.value取值，如：

<template>
   <view>{{a}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const a = ref(5)
</script>

b) 不是顶层属性时，且不参与混合语法，自动解包：

本例中 object.foo 属于子节点，所以不是顶层属性，但是它能正常解包

<template>
   <view>{{object.foo}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const object = { foo: ref(5) }
</script>

c) 不是顶层属性时，且参与混合语法，无法解包：

在本例中object.foo不是顶层属性，且它参与了计算，所以无法正常解包

<template>
    <!-- 这里混合参与计算，打印结果为：[object Object]1 -->
   <view>{{object.foo+1}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const object = { foo: ref(5) }
</script>

在上例中，如果想正常显示，可以加上.value方式，如：<view>{{object.foo.value+1}}</view>