了解 Vue.js 觀察者以改進您的 Web 應用程式開發

要點

Vue 是一種流行的 JavaScript 框架，為開發人員建立 Web 應用程式提供了幾個關鍵優勢。其中包括對基於組件的架構的支持，允許模組化和可重複使用的程式碼；其強大的狀態管理系統，有助於保持應用程式不同部分的一致性；及其內建路由功能，可實現同一網站內不同頁面或視圖之間的無縫導航。透過利用這些功能，開發人員可以簡化工作流程並使用 Vue 建立更有效率、可擴展的 Web 應用程式。

Vue 觀察者充當反應屬性的觀察者，能夠檢測變化並促進對發生的事件或資料修改的反應。

與使用觀察器實現類似功能相比，利用計算屬性提供了一種更簡潔、更易讀的替代方案，最終提高了執行速度並簡化了調試過程。

JavaScript 框架已發展成為 Web 開發領域中不可或缺的元素，這歸因於其使用者友善的屬性，例如模組化設計、狀態保存和導航管理。因此，這些整合元件極大地有助於減輕從頭開始建立 Web 應用程式所需的負擔、支出和持續時間。

Vue 提供了一系列有助於快速應用程式開發的功能。其中一項功能是「監視」功能，它使開發人員能夠在運行時操作期間追蹤變數和表達式值的變化。

Vue 中的觀察者是什麼?

Vue 觀察者構成了觀察反應性屬性變化的函數，並隨後根據此類修改提供適當的反應。這些觀察器使用戶能夠對資料的發生和調整做出回應，從而提供了一種在應用程式內進行細心監控的方法。

為了在 Vue 專案中使用 Watcher，您必須先從 Vue 套件中匯入「watch」函數並將其合併到您的腳本中。

 <script setup>
import { watch } from 'vue';
</script>

利用提供的「watch」功能，人們可以在其 Vue 元件中有效地合併一個「觀察者」。一個基本的說明如下:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const user = ref('Chinedu');

const changeName = () => {
  user.value = 'Victor'; // Change the user's name
};

watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

這個特定元素使用觀察者功能來追蹤使用者身分的變更。程式碼區塊的標記區域建立了元件的 HTML 框架，其中包含一個段落元素，該段落元素顯示名為「user」的反應物的值。

此範本包含一個與點選事件偵聽器和「changeName」函數關聯的按鈕元件。當使用者輸入修改時，Vue 會呼叫指定的回呼函數，該函數隨後會彈出一則訊息，指示「使用者名稱已從『Chinedu』更新為『Victor』。

將觀察者與計算屬性進行比較

在 Vue 框架中將觀察者和計算屬性用作反應機制時，理解觀察者和計算屬性之間的差異至關重要。雖然兩者在根據更改更新資料綁定方面具有相似的功能，但必須將它們用於特定的預期目的。

這個概念的一個例證可以在使用日晷計算父子的總年齡時找到，如下所示:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref, watch } from 'vue';

const father = ref();
const son = ref();
const total = ref();

watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) \+ Number(newAge)
})

watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) \+ Number(son.value)
})

</script>

給定的 Vue 組件利用觀察者透過創建一個稱為「total」的新穎反應變數來獲取父親和兒子的年齡總和。這個過程是使用Vue提供的Composition API來執行的。

該代碼利用兩個手錶功能來監控父親和兒子的年齡。透過計算這些年齡的總和並用另一個人的年齡值更新一個人的年齡值，即可獲得總年齡的最終總和。該結果隨後儲存在

同樣，讓我們來看一個涉及計算屬性的範例:javascriptconst person={firstName:‘John’,lastName:‘Doe’,fullName() {return this.firstName +’’+ this.lastName;}};console 。日誌(person.fullName);//輸出:約翰·多伊

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) \+ Number(son.value);
});

</script>

修訂後的程式碼提供了一種更簡潔和簡化的方法來讀取父子的年齡，同時也利用計算屬性來儲存他們的合併計數。透過在模板部分中進行插值，利用 Vue 強大的資料綁定功能，可以將資訊無縫地顯示給使用者。

與依賴觀察者相比，利用計算屬性提供了更有效的方法來確定兩個年齡值的總和。在這種情況下，觀察者的實作可能會導致載入時間增加，並且由於本質上更複雜的程式碼庫而使偵錯過程變得複雜。

建議專門使用觀察者來觀察和回應資料的修改，而不是使用它們作為計算屬性的替代品，計算屬性是專門為從當前反應資料中獲取附加資訊而設計的。

Vue 中觀察者可以立即使用的選項

「immediate」選項是建立觀察者過程中的替代選擇，它決定了在成功安裝關聯的 Vue 元件後是否立即執行觀察者的回調函數。

當然，這裡是一個使用帶有“immediate”屬性的觀察者函數的組件的範例:

 <script setup>
import { ref, watch } from 'vue';

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

當上述組件的生命週期開始時，觀察者應立即執行其附帶功能，並在系統日誌中註冊「計數從不確定狀態變為十」。此類操作表明，在 Vue 向計數器引用提供值 10 之前，尚未為初步實體指派任何值。

在某些情況下，利用「立即」選項可能被證明對於根據受監視屬性的當前狀態執行初始操作或初始化是有利的。舉例來說，如果您的應用程式需要在安裝特定元件後立即從 API 檢索資料。

Vue Watchers 中提供的 Deep 選項

Vue 的觀察者功能提供了對封閉物件或陣列內修改的深入觀察，允許檢測深層嵌入屬性中發生的變更。透過將相應的參數設為其肯定的等效值來啟動此功能。

下面是一個使用「deep」選項的 Vue.js 元件的範例，該選項允許在輸入欄位內以樹狀結構顯示和編輯嵌套物件:

 <script setup>
import { ref, watch } from 'vue';

const data = ref({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);

// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

提供的程式碼段使用具有“length”屬性的物件初始化“data”引用。隨後，它啟用“deep”選項並在控制台中驗證資料是否已更新，因為“length”屬性的值已從其原始狀態轉換為三十三 (33)。

當將 Vue 中的資料變數初始化為響應式物件時，它能夠追蹤深度嵌套物件的更改，而無需使用「深度」選項。相反，如果未啟用“深度”選項，則監視功能將無法偵測對此類物件所做的修改。

 <script setup>
import { ref, watch } from 'vue';

const data = reactive({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);

// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

提供的程式碼包括一個監視功能，該功能在偵測到稱為「資料」的反應物件的變更後，將一條訊息記錄到控制台，指示已發生所述修改。

使用 Vue Watchers 建立更好的應用程式

Vue 的觀察者透過允許觀察對特定資料屬性的修改，觸發與此類變更相關的預定操作，從而在應用程式中實現高度的反應行為。

深入理解使用觀察者的適當環境，識別觀察者與計算屬性的差異，並熟悉即時和深度等選擇，可以大大增強構建高反應性 Vue 應用程式的能力。