前言

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

@vue/runtime-core

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

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

并且這些模塊還被單獨當作npm包進行發(fā)布，命名規(guī)則是@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("觸發(fā)watch", newVal);
});

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

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

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

重構watch函數(shù)

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

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

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

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

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

watch函數(shù)重構到reactivity模塊后，小程序框架中手寫的watch函數(shù)都不需要了，因為reactivity模塊已經(jīng)提供了。

總結

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

這個改動對于普通開發(fā)者可能沒什么影響，但是對于下游項目，比如Vue mini來說還是很受益的。因為以前他們需要自己去手寫watch函數(shù)，現(xiàn)在reactivity提供了后就不需要這些手寫的watch函數(shù)了。

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

最新評論