Vue3-02-ref() 响应式详解

ref() 是什么

ref() 是一个函数；
ref() 函数用来声明响应式的状态（就是来声明变量的）
ref() 函数声明的变量，是响应式的，变量的值改变之后，页面中会自动重新渲染。

ref() 有什么特点

1.ref() 可以声明基础类型的变量，也可以声明复杂类型的变量；
   如 基本的 number 类型、string类型，以及 json对象类型都可以进行声明；

2.ref() 声明的变量，是深度响应式的；
   比如一个变量是json类型的，会有多层的嵌套，那么深层嵌套的属性值发生改变时，该变量同样是响应式的；

3.ref() 声明的变量 在 script 脚本中使用时，需要添加一个 [.value] 属性才能取到对应的值；
  如 ： 声明变量： const a = ref(100);
       使用变量： console.log(a.value); // 添加 .value 才可以真正访问到变量的值；

4.ref() 声明的变量  在template 模板中，可以直接使用，无需使用 [.value] 属性,这是因为 vue3 在渲染页面时进行了自动的解包；
  如 ：声明变量： const a = ref(100);
      模板中使用变量 ：<div>{{ a }}</div>

ref() 基本使用案例

案例代码

<template>
<div>
    msg : {{ msg }}
    <br>
    num : {{ num }}
    <br>
    stu : {{ stu }}
</div>
</template>

<script setup lang="ts">

// 引入 ref 
import {ref} from 'vue'
// 使用 ref 声明响应式状态
const msg = ref('hello')
const num = ref(100)
const stu = ref({
    id:'001',
    name:'小明',
    classInfo:{
        classId:1001,
        className:'开心一班',
    }
    

})
// 逻辑代码中使用响应式状态
console.log('msg : ',msg)
console.log('num : ',num)
console.log('stu : ',stu)

console.log('msg.value : ',msg.value)
console.log('num.value : ',num.value)
console.log('stu.value : ',stu.value)

// 测试响应式的 ： 延迟10s 修改一下上述变量的值
setTimeout(()=>{
    msg.value = 'hello world'
    num.value = 666
    stu.value.classInfo.className = '快乐足球一班'
},10000)

</script>

<style scoped>
</style>

案例执行结果分析

1、一开始页面展示的是各个变量初始化的值，控制台打印的是初始化的值；
2、因为有一个 10s 钟的延时，10s 钟后变量的值发生改变，页面随之改变
效果图如下：

1、初始化效果

2、10s钟后的效果

ref() 添加类型

vue3 是支持ts 的，所以如果想使用ts 的类型特征进行变量的类型限制也是可以的。
对于 变量的类型，不仅仅局限于 基本的数据类型，也可以是自己定义的复杂类型，
例如，通过 interface 声明的类型。

方式一：自动类型推断

ts 本身就可以进行自动类型的转换，
因此，在定义变量、修改变量的值的时候，会自动进行类型的推断。
如果，变量修改值时的赋值与原来定义的值的类型不相符，会提示异常。
案例代码如下 ：

<template>
</template>

<script setup lang="ts">

// 引入 ref 
import {ref} from 'vue'

// 使用 ref 声明响应式状态
const msg = ref('hello')

// 自动进行类型推断 ：
// 声明的时候是字符串string类型，但是赋值的时候是数字number类型，
// 此时会直接提示错误
msg.value = 100;

</script>

<style scoped>
</style>

在这里插入图片描述

方式二：通过 Ref 指定变量的类型

使用 Ref 进行变量类型声明的时候，可以声明多个类型，
这也是ts的语法特性，可以给变量声明多种类型。
案例代码如下 ：

<template>
</template>

<script setup lang="ts">

// 引入 ref 
import {ref} from 'vue'
// 引入 Ref
import type { Ref } from 'vue';

// 使用 ref 声明响应式状态
const msg : Ref<string | number> = ref('hello')
// 声明了类型之后，就可以正常赋值了
msg.value = 100;
// 但是因为变量只能是 string 或者 number 类型，所以赋值布尔类型时就会提示错误
msg.value = true

</script>

<style scoped>
</style>

在这里插入图片描述

方式三：使用ref的泛型参数代替默认的类型推倒

这种方式实际上是对 方式二 的一种写法的代替，
无需再引入 Ref 了。
案例代码如下：

<template>
</template>

<script setup lang="ts">

// 引入 ref 
import {ref} from 'vue'

// 使用 ref 声明响应式状态
const msg  = ref<string|number>('hello')
// 声明了类型之后，就可以正常赋值了
msg.value = 100;
// 但是因为变量只能是 string 或者 number 类型，所以赋值布尔类型时就会提示错误
msg.value = true

</script>

<style scoped>
</style>

在这里插入图片描述

附加：使用自定义的类型进行类型限制

<script setup lang="ts">
// 引入 ref 
import {ref} from 'vue'

// 自定义一个复杂的数据类型
interface Stu {
    id:string,
    name:string,
    classInfo:{
        classId:number,
        className:string
    }
}

// 使用泛型的方式进行变量类型的限制
const stu = ref<Stu>({
    id:'001',
    name:'小明',
    classInfo:{
        classId:1001,
        className:'开心一班',
    }
   
})
</script>