【Vue Mastery中英字幕】Vue 3 Reactivity

Vue 3 反应性

讲师：Vue Msatery Team

双语IT资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

Vue 3 反应性

在本课程中，我们将了解新的 Vue 3 Reactivity 系统。了解它是如何从头开始构建的，将帮助您了解 Vue 内部使用的设计模式，提高您的 Vue 调试技能，使您能够使用新的 Vue 3 模块化 Reactivity 库，甚至可能自己为 Vue 3 源代码做出贡献。

在本课中，我们将开始使用与 Vue 3 源代码中相同的技术构建一个简单的反应系统。

了解反应性

当您第一次看到 Vue 的反应系统工作时，它看起来就像魔法一样。

以这个简单的应用程序为例：

  
Price: ${{ product.price }}
  
Total: ${{ product.price * product.quantity }}
  
Taxes: ${{ totalPriceWithTax }}



  var vm = new Vue({
    el: '#app',
    data: {
      product: {
        price: 5.00,
        quantity: 2
      }
    },
    computed: {
      totalPriceWithTax() {
        return this.product.price * this.product.quantity * 1.03
      }
    }
  })

不知何故，Vue 的 Reactivity 系统只知道如果price发生变化，它应该做三件事：

• 更新price我们网页上的值。
• 重新计算乘以 的表达式price * quantity，并更新页面。
• 再次调用该totalPriceWithTax函数并更新页面。

但是等等，我听到你想知道，Vue 的 Reactivity 系统如何知道更改时要更新什么price，以及它如何跟踪所有内容？

这不是 JavaScript 编程通常的工作方式

如果这对您来说不是很明显，那么编程通常不会以这种方式进行。例如，如果我运行这段代码：

let product = { price: 5, quantity: 2 }
let total = product.price * product.quantity  // 10 right?
product.price = 20
console.log(`total is ${total}`)

你认为它会打印什么？因为我们没有使用 Vue，所以它会打印 10。

>> total is 10

在 Vue 中，我们希望total随时更新price或quantity获得更新。我们想要：

>> total is 40

不幸的是，JavaScript 是过程式的，而不是反应式的，所以这在现实生活中行不通。为了做出total反应，我们必须使用 JavaScript 来使事物表现不同。

对于本课的其余部分以及本课之后的下两节课，我们将使用与 Vue 3 相同的方法（与 Vue 2 有很大不同）从头开始构建一个响应式系统。然后我们将查看 Vue 3 源代码以发现我们从头开始编写的这些模式。