VueJS - 觀察屬性：初學者指南

你好，未來的 Vue.js 超級巨星！今天，我們將深入 Vue 其中最強大的功能之一：觀察屬性（Watch Property）。別擔心你對編程還是新手——我會一步一步地引導你走過這個旅程，就像我過去幾年來對無數學生所做的一樣。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

VueJS - Watch Property

覺察屬性是什麼？

在我們投入代碼之前，讓我們先來了解觀察屬性到底是什麼。想像你正在密切觀察烤箱裡你最喜歡的蛋糕。你密切地觀察它，準備在它開始燒焦或完美烘烤時採取行動。這正是 Vue.js 中的觀察屬性所做的——它觀察特定的數據屬性，並在該屬性發生變化時做出反應。

為什麼使用觀察屬性？

你可能會想，"我們為什麼需要這個？"讓我告訴你一個小故事。曾經，我有一個學生正在開發一個天氣應用程序。他想要在天氣變為"下雨"時顯示下雨動畫。觀察屬性對此非常完美！它讓他的應用程序能夠"觀察"天氣數據，並在需要時觸發動畫。

現在，讓我們看看我們如何在 Vue.js 應用程序中使用這個強大的功能。

觀察屬性的基本語法

這裡是如何定義觀察屬性的基本結構：

export default {
data() {
return {
// 你的數據屬性在這裡
}
},
watch: {
propertyToWatch(newValue, oldValue) {
// 你的邏輯在這裡
}
}
}

別擔心現在這看起來有點混亂。我們會用一些真實的例子來拆解它。

示例 1：觀察一個簡單屬性

讓我們從一個簡單的例子開始。我們將創建一個計數器，每次其值改變時都會記錄一條消息。

<template>
<div>
<p>計數器：{{ counter }}</p>
<button @click="counter++">增加</button>
</div>
</template>

<script>
export default {
data() {
return {
counter: 0
}
},
watch: {
counter(newValue, oldValue) {
console.log(`計數器從 ${oldValue} 變為 ${newValue}`)
}
}
}
</script>

在這個例子中：

我們有一個 counter 數據屬性，初始化為 0。
有一个按钮，点击时增加计数器的值。
我们正在观察 counter 屬性。
每当 counter 改變時，我们的观察函数会记录一条消息。

尝试几次增加计数器，并检查浏览器的控制台。你会看到每次改变都被记录下来！

示例 2：觀察嵌套屬性

现在，让我们升级一点。如果我们想要观察一个对象内部的嵌套属性呢？Vue.js 使用深度观察来覆盖我们。

<template>
<div>
<p>用户名：{{ user.name }}</p>
<input v-model="user.name" />
</div>
</template>

<script>
export default {
data() {
return {
user: {
name: 'John Doe'
}
}
},
watch: {
'user.name': {
handler(newName, oldName) {
console.log(`名字从 ${oldName} 改为 ${newName}`)
},
deep: true
}
}
}
</script>

在这个例子中：

我们有一个 user 对象，它有一个 name 属性。
我们使用点符号观察 user.name。
我们设置 deep: true 以确保 Vue 深度观察嵌套属性。
handler 函数在名字改变时记录一条消息。

尝试在输入字段中更改名称，并观察控制台中的消息！

示例 3：立即觀察屬性

有时，你希望你的观察函数在创建时立即运行，而不仅仅是当值改变时。让我们看看如何实现这一点。

<template>
<div>
<p>当前时间：{{ currentTime }}</p>
</div>
</template>

<script>
export default {
data() {
return {
currentTime: new Date().toLocaleTimeString()
}
},
watch: {
currentTime: {
handler(newTime) {
console.log(`现在的时间是 ${newTime}`)
},
immediate: true
}
},
created() {
setInterval(() => {
this.currentTime = new Date().toLocaleTimeString()
}, 1000)
}
}
</script>

在这个例子中：

我们有一个 currentTime 属性，每秒钟更新一次。
我们的观察属性有 immediate: true，所以它会在组件创建时立即运行。
handler 函数在时间改变时记录当前时间。

你会看到初始时间立即被记录，然后每秒钟都有一个新的日志！

方法表

以下是我们示例中使用的方法的便捷表格总结：

方法	描述
`watch`	定义要观察的属性
`handler`	当观察的属性改变时运行的函数
`deep`	为嵌套属性启用深度观察
`immediate`	在创建时立即运行观察处理程序

结论

亲爱的学生们，这就是 Vue.js 观察属性的奇妙世界。从简单的计数器到嵌套对象和立即观察者，你现在拥有了使你的 Vue.js 应用程序更具反应性和动态性的力量。

记住，观察属性就像是你数据的警觉守护者。明智地使用它，它将在你的 Vue.js 旅程中为你提供良好的服务。一如既往，最好的学习方式就是实践，所以我鼓励你尝试这些例子并创造你自己的。谁知道呢？你可能只是构建了下一个大热门！

快乐编码，愿 Vue 与你同在！??‍??‍?

Credits: Image by storyset