vue3.0 响应式数据

1.什么是响应式

这个术语在今天的各种编程讨论中经常出现，但人们说它的时候究竟是想表达什么意思呢？本质上，响应性是一种可以使我们声明式地处理变化的编程范式。一个经常被拿来当作典型例子的用例即是 Excel 表格：

-	A	B
0	1
1	2
2	3

这里单元格 A2 中的值是通过公式 = A0 + A1 来定义的 (你可以在 A2 上点击来查看或编辑该公式)，因此最终得到的值为 3，正如所料。但如果你试着更改 A0 或 A1，你会注意到 A2 也随即自动更新了。

而 JavaScript 默认并不是这样的。如果我们用 JavaScript 写类似的逻辑：

let A0 = 1
let A1 = 2
let A2 = A0 + A1

console.log(A2) // 3

A0 = 2
console.log(A2) // 仍然是 3

当我们更改 A0 后，A2 不会自动更新。

那么我们如何在 JavaScript 中做到这一点呢？首先，为了能重新运行计算的代码来更新 A2，我们需要将其包装为一个函数：

let A2

function update() {
  A2 = A0 + A1
}

然后，我们需要定义几个术语：

• 这个 update() 函数会产生一个副作用，或者就简称为作用 (effect)，因为它会更改程序里的状态。
• A0 和 A1 被视为这个作用的依赖 (dependency)，因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者 (subscriber)。

我们需要一个魔法函数，能够在 A0 或 A1 (这两个依赖) 变化时调用 update() (产生作用)。

whenDepsChange(update)

• 这个 whenDepsChange() 函数有如下的任务：
  1. 当一个变量被读取时进行追踪。例如我们执行了表达式 A0 + A1 的计算，则 A0 和 A1 都被读取到了。
  2. 如果一个变量在当前运行的副作用中被读取了，就将该副作用设为此变量的一个订阅者。例如由于 A0 和 A1 在 update() 执行时被访问到了，则 update() 需要在第一次调用之后成为 A0 和 A1 的订阅者。
  3. 探测一个变量的变化。例如当我们给 A0 赋了一个新的值后，应该通知其所有订阅了的副作用重新执行。

2. 选项式 API 的响应式数据

● 可用data选项来声明组件的响应式状态；该data选项的值应为返回一个对象的函数；
● data函数返回对象的所有顶层属性都会被代理到组件实例（即方法和生命周期钩子中的 this）上

<script>
    export default {
        // data 选项的值应该是一个函数返回的对象
        data: () => ({
            account: 'Abc',
            student: {
                name: 'Jack',
                age: 30
            }
        }),
        methods: {
            changeAccount() {
                // 取出数据源可通过 this（当前组件得实例对象） 关键字获取
                this.account += '='
            },
            changeStudentAge() {
                this.student.age ++
            }
        }
    }
</script>

<template>
  
    <h1>账号：{{ account }}</h1>
    <button @click="changeAccount">点我更改账号</button>

    <hr>

    <h1>学生：{{ student }}</h1>
    <button @click="changeStudentAge">点我更改学生年龄</button>

</template>

3.组合式 API 的响应式数据

如果在组合式 API 中直接声明普通变量的数据源，他们并不具备响应式数据

<script setup>

    // 普通的变量不具备响应式
    let account = 123

    function changeAccount() {
        account+= 1
        console.log(account)
    }

    // 普通类型的对象，不具备响应式
    let emp = {
        salary: 7000,
        name: 'Annie'
    }

    function changeEmpSalary() {
        emp.salary += 100
        console.log(emp)
    }

</script>

<template>
    <h1>账号：{{ account }}</h1>
    <button @click="changeAccount">点我更改账号</button>

    <hr>
    <h1>员工：{{ emp }}</h1>
    <button @click="changeEmpSalary">点我更改薪资</button>

</template>

3.1 reactive() 函数

reactive()函数只对对象类型有效（对象、数组、Map、Set），对string、number和 boolean这样的原始类型无效
reactive接收一个普通对象然后返回该普通对象的响应式代理
	● 普通对象==>返回一个proxy对象，响应式转换是深层的，对影响对象内部所有嵌套的属性
	● 用user.name=“new name”来修改值
	● 内部基于proxy实现
	● 获取数据值的时候直接获取，不需要加.value
	● 参数只能传入对象类型

<script setup>

    // 引入 reactive 函数
    import { reactive } from 'vue'

    // reactive 对原始类型是无效（不具备响应式）
    let account = reactive('Abc')

    function changeAccount() {
        account += '='
        console.log(account)
    }

    // reactive 对象数据源（具有响应式）
    let emp = reactive({
        name: 'Jack',
        salary: 7000
    })

    function changeEmpSalary() {
        emp.salary += 1
        console.log(emp)
    }

</script>

<template>

    <hr>
    <h1>账号：{{ account }}</h1>
    <button @click="changeAccount">点我更改账号</button>

    <hr>
    <h1>员工：{{ emp }}</h1>
    <button @click="changeEmpSalary">点我更改员工薪资</button>

</template>

3.2 toref() 函数

1.toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。
2. Template中直接获取值，js中需要加.value获取数据值
3. toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
4. 不会触发UI界面的更新

3.3 toRefs() 函数

● toRefs 用于将响应式对象转换为普通对象，但是其中的每个属性都会指向原始对象相应属性的ref（也就是依然保持响应式）。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
● 获取数据值的时候需要加.value
● toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
● 作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值

3.4ref() 函数

● 使用ref()方法我们可以创建任何类型的响应式数据，获取时需要通过.value来进行获取
● 当值为对象类型时，会用reactive()自动转换它的 .value
● ref 接受一个内部值并返回一个响应式可变的ref对象
任意类型==>返回一个ref对象
用num.value=***来修改值
获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的
参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广，
setup中定义数据时推荐优先使用	ref，方便逻辑拆分和业务解耦
template中使用ref值不用通过value获取（导出后已默认做了一个解构），js中使用ref必须通过.value获取
ref获取元素

<script setup>

    // 引入 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)
    }
</script>

<template>
  
    <h1>账号：{{ account }}</h1>
    <button @click="changeAccount">点我更改账号</button>

    <hr>

    <h1>员工：{{ emp }}</h1>
    <button @click="changeEmpSalary">点我更改员工薪资</button>

</template>

总结

以上就是Vue3.0 的响应式带数据。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog