詳解Vue3中偵聽器watch的使用教學

2022-07-08 10:00:03

學過 vue2 的小夥伴們肯定學習過偵聽器，主要是用來監聽頁面資料或者是路由的變化，來執行相應的操作，在 vue3裡面呢，也有偵聽器的用法，功能基本一樣，換湯不換藥的東西。偵聽器是常用的 Vue API 之一，它用於監聽一個資料並在資料變動時做一些自定義邏輯，本文將先列舉偵聽器在 Vue 中的使用方式，然後再分析原始碼講述為什麼可以這樣使用、以及偵聽器的實現原理。下面我們稍微說一下偵聽器。

watch 偵聽器使用。

watch API 使用，至少需要指定兩個引數： source 和 callback，其中 callback 被明確指定只能為函數，所以不同是用方式的差別其實只在 source 。

接下來我們看一下 vue3 偵聽器的基本使用：

<template>
  <div>
    <h1>watch 偵聽器</h1>
    <el-input v-model="num" />
    <br>
    <br>
    <el-button type="primary" @click="num++">num + 1</el-button>
  </div>
</template>
<script>
  import { watch, ref } from 'vue'
  export default {
    setup() {
      const num = ref(1)
      watch(num, (newVal, oldVal) => {
        console.log("新值：", newVal, "   舊值：", oldVal)
      })
      return { num, }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

上面的程式碼是頁面上有一個數位，點選按鈕一下，數位加一，然後偵聽器偵聽數位的變化，列印出偵聽的最新值和老值。

OK。上邊的案例就是 vue3 偵聽器的簡單案例，偵聽器和計算屬性一樣，可以建立多個偵聽器，這個是沒有問題的，案例就不寫了，和上一節講的宣告多個計算屬性是一致的。如果有不明白的可以看一下我的上一篇部落格。

上邊我們說過這麼一句話，watch API 至少需要指定兩個引數: source 和 callback。通過上邊的案例我們看到了，確實是兩個，source 是監聽的資料，callback 是監聽回撥，那為啥說是至少呢？

對的，因為他還有第三個引數 —— 設定物件。

在 vue2 裡面，我們開啟頁面就像讓偵聽器立即執行，而不是在第一次資料改變的時候才開始執行，這時候有一個引數叫 immediate ，設定了這個引數，建立第一次就執行，所以說呢，vue3 同樣可以使用。

上面的案例重新整理執行的時候發現，在點選按鈕之前，也就是 num 建立的時候，偵聽器是沒有執行的，所以說呢，加上 immediate 引數，就可以讓偵聽器立即執行操作。

<template>
  <div>
    <h1>watch 偵聽器</h1>
    <el-input v-model="num" />
    <br>
    <br>
    <el-button type="primary" @click="num++">num + 1</el-button>
  </div>
</template>
<script>
  import { watch, ref } from 'vue'
  export default {
    setup() {
      const num = ref(1)
      watch(num, (newVal, oldVal) => {
        console.log("新值：", newVal, "   舊值：", oldVal)
      }, {
        immediate: true
      })
      return { num, }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

我們看到，重新整理完頁面，還沒有點選按鈕讓 num 加一的，控制檯就有資料列印了，為什麼呢？就是因為我們加了 immediate 為 true，讓偵聽器立即執行。控制檯輸出最新的值也就是我們初始化的值1，老的值沒有，所以輸出了 undefined。

偵聽器監聽 reactive

上面說了偵聽器偵聽單個資料，他也可以用來偵聽物件的變化。

<template>
  <div>
    <h1>watch 偵聽器</h1>
    <el-input v-model="num.age" />
    <br>
    <br>
    <el-button type="primary" @click="num.age++">num + 1</el-button>
  </div>
</template>
<script>
  import { watch, ref, reactive } from 'vue'
  export default {
    setup() {
      const num = reactive({
        name: '我是

詳解Vue3中偵聽器watch的使用教學

目錄

watch 偵聽器使用。

偵聽器監聽 reactive

熱門文章