Vue3.5新增了一個baseWatch，讓watch函數和Vue組件徹底分手，他的實現和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是模塊化設計，他將核心功能拆分為多個獨立的模塊，如下圖：
比如reactivity模塊中就是響應式的核心代碼、runtime-core模塊就是運行時相關的核心代碼、compiler-core模塊就是編譯相關的核心代碼。
並且這些模塊還被單獨當作npm包進行發佈，命名規則是@vue+模塊名。比如reactivity模塊對應的npm包就是@vue/reactivity。如下圖：
所以如果我們只需要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模塊中。
據說性能是 Taro 10 倍的小程式框架 vuemini 底層也是依靠@vue/reactivity實現的，但是由於watch是由@vue/runtime-core中提供的，小程式框架卻只引入了@vue/reactivity，所以作者不得不手寫了一個watch函數。
重構watch函數
智子在寫Vue Vapor時又拆了一個新的模塊，叫做runtime-vapor。如果你不瞭解Vue Vapor，可以看看我之前的文章： 沒有虛擬DOM版本的vue（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 的作者也發了一篇帖子。
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。
