Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

2024-03-12 1055阅读

温馨提示：这篇文章已超过374天没有更新，请注意相关的内容是否还可用！

声明响应式数据

一、组合式API

1.1 ref()

ref() 函数，可以创建任何数据类型的响应式数据；

🔺注意：

当值为对象类型时，会用 reactive() 自动转换它的 .value；

ref 函数的内部实现依赖于 reactive 函数；
在 script 中使用值的时候，需要添加 .value 的后缀；
在模板中使用 ref申明的响应式数据，可以省略 .value；

使用场景：

基本数据类型；
数组；

示例展示：

    // 引入 ref 函数，来声明响应式对象
    import { ref } from 'vue'
    // 使用 ref 函数来声明原始类型的数据源，具备响应式
    let account = ref('Abc')
    // 更改账号，控制台查看最新值
    function changeAccount() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        account.value += '='
        console.log(account)
    }
    // 使用 ref 函数来声明对象类型的数据源：具备响应式
    let emp = ref({
        salary: 7000,
        name: 'Jack'
    })
    // 更改员工薪资，控制台查看最新值
    function changeEmpSalary() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        emp.value.salary += 100
        console.log(emp)
    }


  账号：{{ account }}
  点我更改账号
  
员工：{{ emp }}
  点我更改员工薪资

1.2 ractive()

reactive() 函数，它可以定义一个引用数据类型成为响应式数据（Object、Array、Set、Map）；

使用场景：

Object；

🔺注意：

使用的时候不能对数据进行普通解构，解构出来的数据不具备响应式；

如果需要进行解构，需要使用特殊的函数；
对 string、number、boolean 等这样的原始数据无效；

示例展示：

    import { ref, reactive, toRef, toRefs } from 'vue';
    // NOTE ref - 使用 - 将基本数据类型转换成响应式数据
    let account = ref(123456)
    // NOTE reactive - 使用 - 将引用数据类型转换成响应式数据
    let info = reactive({
        name: '奥特曼',
        age: 22
    })
    // NOTE 将 info 进行解构，查看解构后的数据是否具有响应式
    // NOTE 结论：使用 reactive 将引用数据类型转换成响应式数据的时候，不能对其进行解构，因为解构出来的数据不具备响应式
    let { name, age } = info
    function changeAccount() {
        account.value++
    }
    function changeInfo() {
        info.age++
    }
    function changeName() {
        name += '1'
    }
    function changeAge() {
        age++
    }


   {{ account }} 
   改变数字的值 
  
 {{ info }} 
   改变对象的值 
  
 {{ name }} 
   改变name的值 - 解构 
  
 {{ age }} 
   改变age的值 - 解构

效果展示：

1.3 toRef()

toRef()：转换响应式对象中某个属性为单独响应式数据，并且值是关联的；

语法：

import { toRef } from 'vue'
let 新变量名 = toRef(要转换的对象名, '要转换对象中的属性名')

🔺注意：

使用 toRef() 的前提是对象必须被 reactive() 转换成响应式了；
要使用解构之后的数据，需要添加 .value 的后缀；
toRef() 转换响应式数据包装成对象，value存放值的位置；

使用场景：

有一个响应式数据，但是模板中只需要使用其中一项数据；

示例展示：

基于 1.4.2 代码，对 info 对象中的某个属性进行解构；

// NOTE 将 info 进行解构，查看解构后的数据是否具有响应式
// NOTE 结论：使用 reactive 将引用数据类型转换成响应式数据的时候，不能对其进行解构，因为解构出来的数据不具备响应式
// let { name, age } = info
// NOTE 使用 toRef 对 info对象 的 某个属性 进行解构，并转换成响应式数据
let name = toRef(info, 'name')
let age = toRef(info, 'age')
function changeName() {
    console.log(name)
    // 添加 .value 后缀才会生效
    name.value += '1'
}
const changeAge = () => {
    // NOTE 对象数据格式
    console.log(typeof age)
    // NOTE 数字
    console.log(typeof age.value)
    // 添加 .value 后缀才会生效
    age.value++
}

效果展示：

可以看到使用 toRef() 解构之后的数据，是一个Object，value 存放数据；

1.4 toRefs()

toRefs()：

将一个响应式数据转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的；
转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
🔺 toRefs() 可以批量解构数据并保持响应式

对象成为普通对象:

const obj = reactive({ a: 1});
const obj1 = toRefs(obj);

🔺注意：

使用 toRefs() 的前提是对象必须被 reactive() 转换成响应式了；
要使用解构之后的数据，需要添加 .value 的后缀；
toRefs() 转换响应式数据包装成对象，value存放值的位置；
使用场景：剥离响应式对象（解构 / 展开），想使用响应式对象中的多个或者所有属性为响应式数据；

示例展示：

基于 1.4.2 的代码，对 info 对象的所有属性进行解构；

// NOTE 使用 toRef 对 info对象 的 某个属性 进行结构，并转换成响应式数据
// let name = toRef(info, 'name');
// let age = toRef(info, 'age');
// NOTE 使用 toRefs 将对象的所有属性进行解构，此时，该对象是个普通对象，所有的值具有响应式
const info1 = toRefs(info);
let { name, age } = toRefs(info);
// 以上两种方式，使用的时候都需要添加 .value 的后缀
/**
* info1.nmae.age += 1
* age.value += 1
**/

效果展示：

// 这块还不是太清楚，还要我自己瞎鼓捣一会
// 如果是这种写法
let info1 = toRefs(info)
// 1. 不改变 info1 里面数据的时候，改变 info 数据，info1数据也会同步发生变化；
// 2. 改变 info1 里面某个属性的数据
    // info 对应属性的数据不会发生变化，视图上info1展示的信息不会立即发生变化
    // 只有当info数据改变的时候（只要有一个属性改变，info1就会展示这次修改的数据），info1才会展示这次修改之后的数据
    // 再次改变 info 里面对应属性的数据，info1里面对应属性的数据不会发生改变；
// 新增方法
    const changeAge1 = () => {
        console.log(info1)
        info1.age = 456
    }
// 新增结构
 {{ info1 }} 
 改变info1-age的值

二、选项式API的响应式数据

可用 data 选项来声明组件的响应式状态，该 data 选项的值应为返回一个对象的函数；
data 函数返回对象的所有顶层属性都会被代理到组的实例（既方法和生命周期钩子中的 this 上）；
```
export default {
    data: () => ({
        // 定义数据
    }),
    methods: {
        // 定义方法
    }
}
```

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

声明响应式数据

一、组合式API

1.1 ref()

1.2 ractive()

1.3 toRef()

1.4 toRefs()

二、选项式API的响应式数据

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]

声明响应式数据

一、 组合式API

1.1 ref()

账号：{{ account }}

员工：{{ emp }}

1.2 ractive()

{{ account }}

{{ info }}

{{ name }}

{{ age }}

1.3 toRef()

1.4 toRefs()

{{ info1 }}

二、 选项式API的响应式数据

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]

一、组合式API

二、选项式API的响应式数据