Vue 3 反应性
讲师:Vue Msatery Team
口袋资源独家Vue Mastery付费课程,独家中英文字幕,配套资料齐全!
用不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。
Vue 3 反应性
在本课程中,我们将了解新的 Vue 3 Reactivity 系统。了解它是如何从头开始构建的,将帮助您了解 Vue 内部使用的设计模式,提高您的 Vue 调试技能,使您能够使用新的 Vue 3 模块化 Reactivity 库,甚至可能自己为 Vue 3 源代码做出贡献。
在本课中,我们将开始使用与 Vue 3 源代码中相同的技术构建一个简单的反应系统。
了解反应性
当您第一次看到 Vue 的反应系统工作时,它看起来就像魔法一样。
以这个简单的应用程序为例:
<div id="app">
<div>Price: ${{ product.price }}</div>
<div>Total: ${{ product.price * product.quantity }}</div>
<div>Taxes: ${{ totalPriceWithTax }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
product: {
price: 5.00,
quantity: 2
}
},
computed: {
totalPriceWithTax() {
return this.product.price * this.product.quantity * 1.03
}
}
})
</script>
不知何故,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 源代码以发现我们从头开始编写的这些模式。