快捷導(dǎo)航

詳解如何在nodejs項目中使用Vue的響應(yīng)式API

更新時間：2024年11月26日 14:31:29 作者：前端歐陽

vue3的響應(yīng)式API大家應(yīng)該都特別熟悉,平時大家都是在vue-cli或者vite創(chuàng)建的vue項目里面使用的這些響應(yīng)式API,今天小編來和大家聊聊如何在node.js項目中使用vue的響應(yīng)式API吧

前言

vue3的響應(yīng)式API大家應(yīng)該都特別熟悉，比如ref、watch、watchEffect等。平時大家都是在vue-cli或者vite創(chuàng)建的vue項目里面使用的這些響應(yīng)式API，今天歐陽給大家?guī)硪恍┎灰粯拥?。脫離vue項目，在node.js項目中使用vue的響應(yīng)式API。

直接上代碼

話不多說，直接上代碼。這個是我在本地新建的一個最簡單的node.js項目，如下圖：

從上圖可以看到我們的node.js項目依賴只有一個：vue。并且提供了一個名為dev的腳本命令，這個腳本命令實際是在node環(huán)境內(nèi)執(zhí)行index.js文件。

我們來看index.js文件，代碼如下：

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",
  }
);

為了標(biāo)明index.js文件是在node.js環(huán)境中運行的，所以這里我特地使用require去導(dǎo)入vue導(dǎo)出的ref、watch、watchEffect這三個響應(yīng)式API。

并且我們還模擬了修改count響應(yīng)式變量值的操作，使用setInterval每隔一秒讓count的值+1。

在vue項目中一樣使用watch和watchEffect去監(jiān)聽count變量的值。

在終端執(zhí)行yarn dev，也就是執(zhí)行node index.js，如下圖：

從上圖中可以看到在node.js中的執(zhí)行結(jié)果和預(yù)期是一模一樣的。

為什么可以這樣寫呢

前面的那個例子是一個node.js項目，項目中我們并沒有像vue項目那樣去創(chuàng)建一個vue組件，然后在組件里面去使用響應(yīng)式API。而是直接在一個普通的node.js文件中使用vue暴露出來的響應(yīng)式API，并且watch和watchEffect在監(jiān)聽的值改變后同樣觸發(fā)了對應(yīng)的watch回調(diào)，那么這個又是怎么做到的呢？

這得益于vue3優(yōu)秀的模塊化設(shè)計，他將核心功能拆分為多個獨立的模塊，如下圖：

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

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

得益于模塊化的設(shè)計，響應(yīng)式相關(guān)的API和vue組件并沒有強關(guān)聯(lián)的關(guān)系，所以我們可以在node.js應(yīng)用中去直接使用響應(yīng)式API。

這里使用到了三個響應(yīng)式API，分別是：ref、watch和watchEffect。在vue組件中的響應(yīng)式的實現(xiàn)原理大家多多少少都有所聽聞，其實在node.js項目中實現(xiàn)原理也是一樣的，接下來我們講講是如何實現(xiàn)響應(yīng)式的。

在我們這個demo中count是一個ref的響應(yīng)式變量，當(dāng)我們對count變量進(jìn)行讀操作時會觸發(fā)get攔截。當(dāng)我們對count變量進(jìn)行寫操作時會觸發(fā)set攔截。

在我們這里使用watch和watchEffect的代碼是下面這樣的：

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

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

當(dāng)代碼首次執(zhí)行到watch和watchEffect時都會對count變量進(jìn)行讀操作，并且watch和watchEffect都傳入了一個回調(diào)函數(shù)。

由于對count變量進(jìn)行讀操作了，所以就會觸發(fā)get攔截。在get攔截中會將當(dāng)前watch的回調(diào)函數(shù)作為依賴收集到count變量中。收集的方式也很簡單，因為count變量是一個對象，所以使用對象的dep屬性進(jìn)行依賴收集。因為dep屬性是一個集合，所以可以收集多個依賴。

在我們這里watch和watchEffect都觸發(fā)了count變量的get攔截，所以watch和watchEffect的回調(diào)函數(shù)都被count變量進(jìn)行了依賴收集。

當(dāng)修改count變量的值時會觸發(fā)set攔截，在set攔截中做的事情也很簡單。將count變量收集到的依賴全部取出來，然后執(zhí)行一遍。這里收集的依賴是watch和watchEffect的回調(diào)函數(shù)，所以當(dāng)count變量的值改變時會導(dǎo)致watch和watchEffect的回調(diào)函數(shù)重新執(zhí)行。

這個是整個流程圖：