快捷導(dǎo)航

淺析在Vue中watch使用的必要性及其優(yōu)化

更新時(shí)間：2023年12月22日 08:22:22 作者：ssshooter

這篇文章主要來(lái)和大家深入討論一下在Vue開發(fā)中是否有必要一定用watch,如果換成watcheffect會(huì)如何,文中的示例代碼講解詳細(xì),需要的可以參考下

場(chǎng)景

代碼大概如下，刪除了很多無(wú)關(guān)內(nèi)容。

<template>
  <div>
    <SearchBar @search="handleSearch" />
    <Pagination
      v-model:page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
    />
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch, inject, computed } from 'vue'
  import SearchBar from '@/components/SearchBar.vue'

  const route = useRoute()
  const pagination = reactive({
    page: 1,
    pageSize: isPublic.value ? 10 : 9,
    total: 0,
  })
  const keyword = ref('')
  const fetchList = async () => {
    loading.value = true
    const res = await connect.get(`/api/${route.params.type}`, {
      params: {
        pageSize: pagination.pageSize,
        page: pagination.page,
        name: keyword.value,
      },
    })
    pagination.total = res.total
    loading.value = false
  }
  watch(
    () => route.params.type,
    async () => {
      pagination.page = 1
      fetchList()
    },
    { immediate: true }
  )
  watch(
    () => pagination.page,
    async () => {
      fetchList()
    }
  )
  watch(
    () => keyword.value,
    async () => {
      if (pagination.page === 1) fetchList()
      else {
        pagination.page = 1
      }
    }
  )
  const handleSearch = (val: string) => {
    keyword.value = val
  }
  const handleDelete = async (item: MindMapItem) => {
    await confirmModal.value?.confirm()
    await connect.delete('/api/map/' + item._id)
    fetchList()
  }
</script>

本來(lái)只有 2 個(gè) watch，今天新功能加了個(gè)關(guān)鍵詞搜索，又得多 watch 一個(gè) keyword.value。

于是這里變成了 3 個(gè) watch，而且里面有邏輯，甚至是相互依賴的邏輯。

上面的代碼沒寫完，但是整理一下，最終目標(biāo)是這樣的：

請(qǐng)求參數(shù)有三個(gè)變量：route.params.type、keyword 和 pagination
route.params.type 改變時(shí)需要重置 pagination 和 keyword，然后重新請(qǐng)求
keyword 改變時(shí)需要重制 pagination，然后重新請(qǐng)求
pagination 改變時(shí)需要重新請(qǐng)求

watch 真的好？

如果繼續(xù)用 watch，因?yàn)樾枰刂?pagination 和 keyword，硬生生把三個(gè) watch 寫成了個(gè)像是任務(wù)委托一樣的效果，例如 keyword.value 修改時(shí)如果 page 是 1 就直接請(qǐng)求，否則修改 page 再讓 page 的 watch 觸發(fā)請(qǐng)求。

watch(
  () => keyword.value,
  async () => {
    if (pagination.page === 1) fetchList()
    else {
      pagination.page = 1
    }
  }
)

這么耦合真的好嗎？這不好。我勸自己耗子尾汁，好好反思。

得出的結(jié)論是：watch 不是好文明，能不用 watch，就別用 watch。

這不是我第一次對(duì) watch 有意見，在工作中我就見過(guò)很多復(fù)雜組件動(dòng)則 5 個(gè)以上的 watch，有的里面還有復(fù)雜邏輯。

重點(diǎn)是啥，還沒注釋……watch 天然就容易讓人不寫注釋，給人一種“啊，這個(gè)值變了，運(yùn)行下面的邏輯是理所當(dāng)然的吧。”，那你問(wèn)問(wèn)兩個(gè)月后的自己，是不是真的這樣？你自己寫的 watch 你自己看得懂嗎？一個(gè)值變了就觸發(fā)邏輯，但問(wèn)題是，它變的原因可多了。

所以 watch 生而在語(yǔ)義上不明確，它只解釋了對(duì)值的依賴，沒有解釋依賴的原因。

watchEffect 呢？

上面的例子，假如把 fetchList 寫成 watchEffect，其實(shí)還是一樣的問(wèn)題，需要在里面額外加 if else 處理重置邏輯。不過(guò)邏輯集中在一個(gè) watchEffect 大概還是比分散在 N 個(gè) watch 里好。

總結(jié)

總結(jié)一下，watch 或者 watchEffect 有其用武之地，但最好滿足以下的條件：

變動(dòng)觸發(fā)點(diǎn)大于 2 個(gè)才考慮 watch（只有一個(gè)觸發(fā)機(jī)會(huì)的話，什么時(shí)候用，什么時(shí)候跑就好了）
所有場(chǎng)景全都適用同一個(gè)處理邏輯
與其他 watch 沒耦合

不過(guò)如果沒有事件機(jī)制來(lái)觸發(fā)的話，那就只能 watch 了。

優(yōu)化后

<template>
  <div>
    <SearchBar @search="handleSearch" />
    <Pagination
      v-model:page="pagination.page"
      @update:page="fetchList"
      :page-size="pagination.pageSize"
      :total="pagination.total"
    />
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch, inject, computed } from 'vue'
  import SearchBar from '@/components/SearchBar.vue'

  const route = useRoute()
  const pagination = reactive({
    page: 1,
    pageSize: isPublic.value ? 10 : 9,
    total: 0,
  })
  const keyword = ref('')
  const fetchList = async () => {
    // 省略
  }
  watch(
    () => route.params.type,
    async () => {
      keyword.value = ''
      pagination.page = 1
      fetchList()
    },
    { immediate: true }
  )
  const handleSearch = (val: string) => {
    keyword.value = val
    pagination.page = 1
    fetchList()
  }
  const handleDelete = async (item: MindMapItem) => {
    await confirmModal.value?.confirm()
    await connect.delete('/api/map/' + item._id)
    fetchList()
  }
</script>

修改后，只保留 route.params.type 的 watch，不會(huì)發(fā)生沖突，另外兩個(gè)通過(guò)事件觸發(fā)。至于觸發(fā)事件也不用額外寫 @change，直接用 @update:xxx 就可以了。

這樣只有易讀的重置邏輯，沒有 if else！清爽！

到此這篇關(guān)于淺析在Vue中watch使用的必要性及其優(yōu)化的文章就介紹到這了,更多相關(guān)Vue watch內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: