Vue3-03-reactive() 响应式基本使用

reactive() 的简介

复制代码
reactive() 是vue3 中进行响应式状态声明的另一种方式;
但是,它只能声明 【对象类型】的响应式变量,【不支持声明基本数据类型】。

reactive() 与 ref() 一样,都是深度响应式的,即对象嵌套属性发生了改变,页面中都会重新刷新。

reactive() 声明的对象变量,可以直接使用它的属性值,无需像 ref() 一样使用 [.value] 的方式读取变量的值。

reactive()  函数返回的是对象的一个代理对象,这个代理对象可以直接操作属性,且这个代理对象是唯一的,
即 同一个对象 多次调用 reactive() 函数,返回的是同一个代理对象。

reactive() 对象解构之后的属性,不具有响应式。

reactive() 对象的值单独传入函数中作为参数时,不具有响应式。

基本使用案例

html 复制代码
<template>
    <div>
       stu: {{ stu }}
       <br>
       numList : {{ numList }}
    </div>
</template>
    
<script setup lang="ts">

    // 引入 reactive
    import {reactive} from "vue"

    // 声明响应式状态 : 必须是一个对象类型
    const stu = reactive({
        id:'001',
        name:'小明',
        classInfo:{
            classId:1001,
            className:'开心一班',
        }
    })

    const numList = reactive([1,2,3,4])

    // 打印一下 响应式的变量,直接打印,无需使用 【.value】 进行值的获取
    console.log('stu : ',stu)
    console.log('numList : ',numList)

</script>
    
<style scoped>
</style>

reactive() 添加数据类型限制

复制代码
官方提示 :不推荐 给 reactive() 使用泛型的方式进行类型限制!

方式一 : 自动类型推导

复制代码
这也是ts的自有特性,因为 reactive() 是封装对象的,所以,自动类型推导也会推导为一个对象类型。
js 复制代码
	// 会自动推导为 {name:string} 类型
    const job = reactive({name:'程序员'})
    console.log('job',job)

方式二 :显示的标注类型

复制代码
如果想给reactive() 添加类型,笔者比较推荐这种方式,
这样程序代码比较清晰,可维护性更高。

可以通过自己定义 接口的方式,进行类型的标注。
这个就纯纯的是ts的知识点了。
js 复制代码
    // 声明一个接口,作为数据类型规范
    interface Job{
        name:string
    }
    // 显式的指定变量的类型
    const job : Job = reactive({name:'程序员'})
    console.log('job',job)
相关推荐
Sheldon一蓑烟雨任平生2 天前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
duansamve2 天前
TS在Vue3中的使用实例集合
typescript·vue3
ღ᭄ꦿ࿐Never say never꧂2 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
Sheldon一蓑烟雨任平生3 天前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
昔冰_G12 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
wxr061614 天前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
知识分享小能手15 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
上单带刀不带妹20 天前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
雪山上的小灰熊22 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
路光.1 个月前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3