preamble
Everyone should be particularly familiar with vue3's responsive APIs, such as theref、watch、watchEffectetc. Normally everyone is in thevue-cliorviteThese responsive APIs used inside the created vue project, today Ouyang brings you some different ones.Detach the vue project from theUsing vue's responsive API in projects。
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
Straight to the code.
Without further ado, let's get right to the code. This one is the simplest of the new ones I've created locallyproject, as shown below:
As you can see from the image above ourThere is only one project dependency:vue. And a script command called dev is provided that actually executes within the node environmentDocumentation.
Let's see.file with the following code:
const { ref, watch, watchEffect } = require("vue");
const count = ref(0);
// analog (device, as opposed digital)countValue modification of variables
setInterval(() => {
++;
}, 1000);
watch(count, (newVal) => {
("trigwatch", newVal);
});
watchEffect(
() => {
("trigwatchEffect", );
},
{
flush: "sync",
}
);
In order to labelThe file is in theenvironment, so here I'm specifically using therequireGo ahead and import the vue exportedref、watch、watchEffectThese three responsive APIs.
And we also simulated modificationscountResponsive variable value manipulation usingsetIntervalEvery second, letcountvalue of+1。
In a vue project, it's just as easy to use thewatchcap (a poem)watchEffectgo and listen incountThe value of the variable.
Execute theyarn devThat is to say, the execution ofnode , as shown below:
As you can see from the above figure in theThe results of the implementation in are exactly as expected.
Why is it okay to write like that?
That previous example was aproject, we didn't create a vue component and use the responsive API inside of it like we did in the vue project, but instead, we created the responsive API directly in a normalfile uses the responsive API exposed by vue, and thewatchcap (a poem)watchEffectThe corresponding watch callback is also triggered when the value of the listener changes, so how does this work again?
This is due to the excellent modular design of vue3, who splits the core functionality into multiple independent modules, as shown below:
for examplereactivityIn the module is the core code for responsive,compiler-coreA module is the core code associated with compilation.
And these modules are also distributed separately as npm packages, with the naming convention being@vue+module name. For examplereactivityThe corresponding npm package for the module is@vue/reactivity. Pictured below:
Thanks to the modular design, responsive-related APIs and vue components don't have a strong correlation, so we can use them in theThe application goes to use the responsive API directly.
There are three responsive APIs used here, which are:ref、watchcap (a poem)watchEffect. The principle of responsive implementation in vue components is more or less heard of, in fact, in theThe principle of implementation in the project is the same, next we talk about how to implement responsive.
In our democountis a responsive variable for ref, and when we make a change to thecountvariable triggers a read operation on thegetInterception. When we are interested in thecountvariable will be triggered when a write operation is performed.setInterception.
In our case usewatchcap (a poem)watchEffectThe code for this is something like the following:
watch(count, (newVal) => {
("trigwatch", newVal);
});
watchEffect(
() => {
("trigwatchEffect", );
},
{
flush: "sync",
}
);
When the code is first executed into thewatchcap (a poem)watchEffectIt's a good idea to keep a close eye on thecountvariable performs a read operation, andwatchcap (a poem)watchEffectBoth pass in a callback function.
as a result of the introduction ofcountvariable has been read, so it triggers thegetInterception. In thegetThe interception will include the currentThe watch callback functionCollected as a dependency oncountin the variables. The collection is also simple, as thecountA variable is an object, so using the object'sdepattribute for dependency collection. Because thedepAn attribute is a collection, so multiple dependencies can be collected.
It's here with us.watchcap (a poem)watchEffectThey're all triggered.countvariable's get intercept, so thewatchcap (a poem)watchEffectThe callback functions of thecountThe variables were subjected to dependency collection.
When modifyingcountvariable triggers thesetInterception, atsetWhat is done in Intercept is also simple. Place thecountThe variable collects all the dependencies taken out and executed once. The dependencies collected here arewatchcap (a poem)watchEffectcallback function, so when thecountA change in the value of a variable causes thewatchcap (a poem)watchEffectof the callback function is re-executed.
This one is the whole flowchart:
As you can see from the flowchart the responsive implementation turns out to be completely independent of the vue component, so we canThe project uses vue's responsive API, which is one of the marvelous things about vue's design.
summarize
This article talks about how we can break away from the vue project and directly add a new project to theThe project uses vue's responsive API, and goes on to talk about how responsive implementations actually rely on thegetinterception for dependency collection.setIntercept for dependency triggering.
After figuring out how responsive works, we realize that responsive doesn't rely on the vue component at all, so we can use it in theThe project uses vue's responsive API, which is one of the marvelous things about vue's design.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
