Vue3.5新增的baseWatch讓watch函式和Vue元件徹底分手

前端欧阳發表於2024-08-26
Vue函式元件

前言

在Vue 3.5.0-beta.3版本中新增了一個base watch函式，這個函式用法和我們熟知的watch API一模一樣。區別就是我們之前用的watch API是和Vue元件以及生命週期是一起實現的，他們是深度繫結的。而Vue3.5新增的base watch函式是一個新的函式，他的實現和Vue元件以及生命週期沒有一毛錢關係。

歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。

@vue/runtime-core

vue3是模組化設計，他將核心功能拆分為多個獨立的模組，如下圖：
modules

比如reactivity模組中就是響應式的核心程式碼、runtime-core模組就是執行時相關的核心程式碼、compiler-core模組就是編譯相關的核心程式碼。

並且這些模組還被單獨當作npm包進行釋出，命名規則是@vue+模組名。比如reactivity模組對應的npm包就是@vue/reactivity。如下圖：
npm

所以如果我們只需要vue的響應式功能，理論上只需要匯入@vue/reactivity包即可。比如我之前的文章： 漲見識了！脫離vue專案竟然也可以使用響應式API，在這篇文章中我就介紹瞭如何脫離Vue專案，在node.js專案中使用vue的響應式API。

但是不知道你有沒有注意到，在demo中我是require("vue")，而不是require("@vue/reactivity")。

因為watch不是由@vue/reactivity中匯出的，而是由@vue/runtime-core中匯出的，如果我只引入@vue/reactivity就會報錯了。

const { ref, watch, watchEffect } = require("vue");

const count = ref(0);

// 模擬count變數的值修改
setInterval(() => {
  count.value++;
}, 1000);

watch(count, (newVal) => {
  console.log("觸發watch", newVal);
});

watchEffect(
  () => {
    console.log("觸發watchEffect", count.value);
  },
  {
    flush: "sync",
  }
);

watch的實現是和vue元件以及生命週期深度繫結的，而vue元件以及生命週期明顯是和響應式無關的。他們的實現是在runtime-core模組中，而非reactivity模組中，這也就是為什麼watch的實現是放在runtime-core模組中。
runtime

據說效能是 Taro 10 倍的小程式框架 vuemini 底層也是依靠@vue/reactivity實現的，但是由於watch是由@vue/runtime-core中提供的，小程式框架卻只引入了@vue/reactivity，所以作者不得不手寫了一個watch函式。
vue-mini

重構watch函式

智子在寫Vue Vapor時又拆了一個新的模組，叫做runtime-vapor。如果你不瞭解Vue Vapor，可以看看我之前的文章： 沒有虛擬DOM版本的vue（Vue Vapor）。
vue-vapor

他們遇到一個問題需要在runtime-vapor模組中使用watch函式，而watch函式是位於runtime-core模組中。但是又不應該在runtime-vapor模組中直接引用runtime-core模組，所以Vue Vapor團隊的絢香音就將watch函式重構到了reactivity模組中，這樣在runtime-vapor模組中直接使用reactivity模組中的watch函式就行了。

這也就是為什麼需要重構watch函式到reactivity模組中。

在歐陽的個人看法中watch函式本來就是屬於響應式中的一部分，他在runtime-core模組中反而不合理。在歐陽第一次看vue3原始碼時就在奇怪為什麼沒有在reactivity模組中找到watch函式的實現，而是在runtime-core模組中實現的。

當watch函式重構到reactivity模組後，小程式框架 vuemini 的作者也發了一篇帖子。
X

watch函式重構到reactivity模組後，小程式框架中手寫的watch函式都不需要了，因為reactivity模組已經提供了。

看見完了！這下 Vue Mini 真成 @vue/reactivity 套殼了...這個評論後，對不起！楊明山大佬歐陽確實沒忍住笑出了聲。

總結

vue3.5版本中，Vue Vapor團隊在reactivity模組中重構實現了一個watch函式。重構的這個watch函式和我們現在使用的watch函式用法是一樣的，區別在於以前的watch函式的實現和Vue元件以及生命週期是深度繫結的，而重構的watch函式和Vue元件以及生命週期一毛錢關係都沒有。

這個改動對於普通開發者可能沒什麼影響，但是對於下游專案，比如Vue mini來說還是很受益的。因為以前他們需要自己去手寫watch函式，現在reactivity提供了後就不需要這些手寫的watch函式了。

關注公眾號：【前端歐陽】，給自己一個進階vue的機會

另外歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。

相關文章