vue3.0 响应式数据

最新推荐文章于 2024-03-21 17:08:37 发布

程序员--韩同学

最新推荐文章于 2024-03-21 17:08:37 发布

阅读量458

点赞数 3

分类专栏： vue3.0 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_60970928/article/details/129012525

版权

本文介绍了Vue3.0中的响应式数据处理，包括响应式的基本概念、选项式API和组合式API的应用。重点讲解了reactive()、toRef()、toRefs()和ref()函数的使用场景和特性，强调了这些函数在保持数据响应性方面的关键作用。

摘要由CSDN通过智能技术生成

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'