前言

在Vue 3.5.0-beta.3版本中新增了一個(gè)base watch函數(shù)，這個(gè)函數(shù)用法和我們熟知的watch API一模一樣。區(qū)別就是我們之前用的watch API是和Vue組件以及生命周期是一起實(shí)現(xiàn)的，他們是深度綁定的。而Vue3.5新增的base watch函數(shù)是一個(gè)新的函數(shù)，他的實(shí)現(xiàn)和Vue組件以及生命周期沒(méi)有一毛錢(qián)關(guān)系。

@vue/runtime-core

vue3是模塊化設(shè)計(jì)，他將核心功能拆分為多個(gè)獨(dú)立的模塊，如下圖：

比如reactivity模塊中就是響應(yīng)式的核心代碼、runtime-core模塊就是運(yùn)行時(shí)相關(guān)的核心代碼、compiler-core模塊就是編譯相關(guān)的核心代碼。

并且這些模塊還被單獨(dú)當(dāng)作npm包進(jìn)行發(fā)布，命名規(guī)則是@vue+模塊名。比如reactivity模塊對(duì)應(yīng)的npm包就是@vue/reactivity。如下圖：

所以如果我們只需要vue的響應(yīng)式功能，理論上只需要導(dǎo)入@vue/reactivity包即可。比如我之前的文章：漲見(jiàn)識(shí)了！脫離vue項(xiàng)目竟然也可以使用響應(yīng)式API，在這篇文章中我就介紹了如何脫離Vue項(xiàng)目，在node.js項(xiàng)目中使用vue的響應(yīng)式API。

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

因?yàn)?code>watch不是由@vue/reactivity中導(dǎo)出的，而是由@vue/runtime-core中導(dǎo)出的，如果我只引入@vue/reactivity就會(huì)報(bào)錯(cuò)了。

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

const count = ref(0);

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

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

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

watch的實(shí)現(xiàn)是和vue組件以及生命周期深度綁定的，而vue組件以及生命周期明顯是和響應(yīng)式無(wú)關(guān)的。他們的實(shí)現(xiàn)是在runtime-core模塊中，而非reactivity模塊中，這也就是為什么watch的實(shí)現(xiàn)是放在runtime-core模塊中。

據(jù)說(shuō)性能是 Taro  10 倍的小程序框架 vuemini 底層也是依靠@vue/reactivity實(shí)現(xiàn)的，但是由于watch是由@vue/runtime-core中提供的，小程序框架卻只引入了@vue/reactivity，所以作者不得不手寫(xiě)了一個(gè)watch函數(shù)。

重構(gòu)watch函數(shù)

智子在寫(xiě)Vue Vapor時(shí)又拆了一個(gè)新的模塊，叫做runtime-vapor。如果你不了解Vue Vapor，可以看看我之前的文章：沒(méi)有虛擬DOM版本的vue（Vue Vapor）。

他們遇到一個(gè)問(wèn)題需要在runtime-vapor模塊中使用watch函數(shù)，而watch函數(shù)是位于runtime-core模塊中。但是又不應(yīng)該在runtime-vapor模塊中直接引用runtime-core模塊，所以Vue Vapor團(tuán)隊(duì)的絢香音就將watch函數(shù)重構(gòu)到了reactivity模塊中，這樣在runtime-vapor模塊中直接使用reactivity模塊中的watch函數(shù)就行了。

這也就是為什么需要重構(gòu)watch函數(shù)到reactivity模塊中。

在歐陽(yáng)的個(gè)人看法中watch函數(shù)本來(lái)就是屬于響應(yīng)式中的一部分，他在runtime-core模塊中反而不合理。在歐陽(yáng)第一次看vue3源碼時(shí)就在奇怪為什么沒(méi)有在reactivity模塊中找到watch函數(shù)的實(shí)現(xiàn)，而是在runtime-core模塊中實(shí)現(xiàn)的。

當(dāng)watch函數(shù)重構(gòu)到reactivity模塊后，小程序框架 vuemini 的作者也發(fā)了一篇帖子。

watch函數(shù)重構(gòu)到reactivity模塊后，小程序框架中手寫(xiě)的watch函數(shù)都不需要了，因?yàn)?code>reactivity模塊已經(jīng)提供了。

總結(jié)

vue3.5版本中，Vue Vapor團(tuán)隊(duì)在reactivity模塊中重構(gòu)實(shí)現(xiàn)了一個(gè)watch函數(shù)。重構(gòu)的這個(gè)watch函數(shù)和我們現(xiàn)在使用的watch函數(shù)用法是一樣的，區(qū)別在于以前的watch函數(shù)的實(shí)現(xiàn)和Vue組件以及生命周期是深度綁定的，而重構(gòu)的watch函數(shù)和Vue組件以及生命周期一毛錢(qián)關(guān)系都沒(méi)有。

這個(gè)改動(dòng)對(duì)于普通開(kāi)發(fā)者可能沒(méi)什么影響，但是對(duì)于下游項(xiàng)目，比如Vue mini來(lái)說(shuō)還是很受益的。因?yàn)橐郧八麄冃枰约喝ナ謱?xiě)watch函數(shù)，現(xiàn)在reactivity提供了后就不需要這些手寫(xiě)的watch函數(shù)了。

到此這篇關(guān)于Vue3.5中新增的baseWatch函數(shù)用法詳解的文章就介紹到這了,更多相關(guān)Vue3.5 baseWatch內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！