偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

漲見(jiàn)識(shí)了!脫離vue項(xiàng)目竟然也可以使用響應(yīng)式API

開(kāi)發(fā) 前端
這篇文章講了我們可以脫離vue項(xiàng)目,直接在node.js?項(xiàng)目中使用vue的響應(yīng)式API。接著講了響應(yīng)式的實(shí)現(xiàn)原理其實(shí)就是依靠get?攔截進(jìn)行依賴收集,set攔截進(jìn)行依賴觸發(fā)。

前言

vue3的響應(yīng)式API大家應(yīng)該都特別熟悉,比如ref、watch、watchEffect等。平時(shí)大家都是在vue-cli或者vite創(chuàng)建的vue項(xiàng)目里面使用的這些響應(yīng)式API,今天歐陽(yáng)給大家?guī)?lái)一些不一樣的。脫離vue項(xiàng)目,在node.js項(xiàng)目中使用vue的響應(yīng)式API。

直接上代碼

話不多說(shuō),直接上代碼。這個(gè)是我在本地新建的一個(gè)最簡(jiǎn)單的node.js項(xiàng)目,如下圖:

圖片圖片

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

我們來(lái)看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)境中運(yùn)行的,所以這里我特地使用require去導(dǎo)入vue導(dǎo)出的ref、watch、watchEffect這三個(gè)響應(yīng)式API。

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

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

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

圖片圖片

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

為什么可以這樣寫(xiě)呢?

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

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

圖片圖片

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

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

圖片圖片

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

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

在我們這個(gè)demo中count是一個(gè)ref的響應(yīng)式變量,當(dāng)我們對(duì)count變量進(jìn)行讀操作時(shí)會(huì)觸發(fā)get攔截。當(dāng)我們對(duì)count變量進(jìn)行寫(xiě)操作時(shí)會(huì)觸發(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時(shí)都會(huì)對(duì)count變量進(jìn)行讀操作,并且watch和watchEffect都傳入了一個(gè)回調(diào)函數(shù)。

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

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

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

這個(gè)是整個(gè)流程圖:

圖片圖片

從流程圖可以看到響應(yīng)式的實(shí)現(xiàn)原來(lái)完全不依賴vue組件,所以我們可以在node.js項(xiàng)目中使用vue的響應(yīng)式API,這也是vue的設(shè)計(jì)奇妙之處。

總結(jié)

這篇文章講了我們可以脫離vue項(xiàng)目,直接在node.js項(xiàng)目中使用vue的響應(yīng)式API。接著講了響應(yīng)式的實(shí)現(xiàn)原理其實(shí)就是依靠get攔截進(jìn)行依賴收集,set攔截進(jìn)行依賴觸發(fā)。

搞清楚響應(yīng)式原理后,我們發(fā)現(xiàn)響應(yīng)式完全不依賴vue組件,所以我們可以在node.js項(xiàng)目中使用vue的響應(yīng)式API,這也是vue的設(shè)計(jì)奇妙之處。

責(zé)任編輯:武曉燕 來(lái)源: 前端歐陽(yáng)
相關(guān)推薦

2019-01-29 10:00:59

GitHub開(kāi)源搜索

2021-04-16 10:45:02

SQLJava函數(shù)

2017-07-12 09:46:00

5G社會(huì)網(wǎng)絡(luò)

2020-06-07 16:07:57

Python開(kāi)發(fā)工具

2020-06-22 10:40:35

Python微信技術(shù)

2023-04-03 09:00:28

2021-03-09 22:29:46

Vue 響應(yīng)式API

2021-03-07 16:41:06

URLSpring5

2023-09-14 08:46:50

ReactVue

2020-12-22 09:34:20

JavaScript開(kāi)發(fā)技術(shù)

2020-08-20 07:38:51

Java字符串整形

2024-05-17 09:37:26

format屬性Spring

2020-09-18 14:01:21

vue3.0

2022-02-23 12:56:45

框架開(kāi)發(fā)

2025-05-26 04:21:00

2022-09-02 10:34:23

數(shù)據(jù)Vue

2020-06-09 11:35:30

Vue 3響應(yīng)式前端

2019-07-01 13:34:22

vue系統(tǒng)數(shù)據(jù)

2021-01-22 11:47:27

Vue.js響應(yīng)式代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)