preamble
existVue 3.5.0-beta.3The version has a newbase watchfunction, which is similar in usage to the familiarwatch APIExactly the same. The difference is that we previously usedwatch APIis implemented together with Vue components and lifecycle, they are deeply bound. Whereas Vue 3.5 adds a newbase watchfunction is a new function whose implementation has nothing to do with Vue components and the lifecycle.
Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, reading this book can give you a qualitative improvement in your knowledge of vue compilation. This book is accessible to beginner and intermediate front-ends and is completely free, just asking for a STAR.
@vue/runtime-core
vue3 is modular in design, he split the core functionality into multiple independent modules, as shown below:
for examplereactivityIn the module is the core code for responsive,runtime-coreModules are the core code associated with the runtime,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:
So if we only need the responsive functionality of vue, we theoretically only need to import the@vue/reactivityThe package will suffice. For example, my previous post:Up and coming! It's surprisingly possible to use responsive APIs out of a vue project!, and in this post I describe how to break away from the Vue project in theThe project uses vue's responsive API.
But I don't know if you noticed, but in the demo I wasrequire("vue")Instead ofrequire("@vue/reactivity")。
on account ofwatchnot caused by@vue/reactivityis derived from the@vue/runtime-coreIf I only bring in the@vue/reactivityIt would have reported an error.
const { ref, watch, watchEffect } = require("vue");
const count = ref(0);
// analog (device, as opposed digital)countModification of the value of a variable
setInterval(() => {
++;
}, 1000);
watch(count, (newVal) => {
("trigwatch", newVal);
});
watchEffect(
() => {
("trigwatchEffect", );
},
{
flush: "sync",
}
);
watchimplementations are deeply bound to vue components and lifecycles, which are clearly unrelated to responsive. Their implementation is in theruntime-coremodule instead of thereactivitymodule, which is why thewatchThe implementation is placed in theruntime-corein the module.
The applet framework that is said to perform 10 times better than Tarovuemini The bottom layer also relies on@vue/reactivityimplementation, but since watch is implemented by the@vue/runtime-coreprovided in the applet framework, but the applet framework only introduces the@vue/reactivity, so the author had to handwrite awatchfunction.
Refactoring the watch function
Tomoko's writing.Vue VaporWhen a new module was split, it was calledruntime-vapor. If you don't understandVue Vapor, check out my previous post:No virtual DOM version of vue (Vue Vapor)。
They encountered a problem that needed to be addressed inruntime-vapormodule uses the watch function, which is located in theruntime-corein the module. But again, it shouldn't be in theruntime-vaporDirect references in modulesruntime-coremodule, so Gorgeous Kanyin from the Vue Vapor team refactored the watch function to thereactivitymodule, so that in theruntime-vapormodule directly using thereactivityThe watch function in the module will do the trick.
This is why the watch function needs to be refactored to thereactivityin the module.
In Ouyang's personal opinion the overwatch function is inherently part of the responsive, and he has a good example in theruntime-coreInstead, it doesn't make sense to have it in the module. When Ouyang first looked at the vue3 source code he was wondering why it wasn't in thereactivitymodule to find the implementation of the watch function; instead, you'll find it in theruntime-coreimplemented in the module.
When the watch function is refactored toreactivityAfter the module, the applet frameworkvuemini The author of the post also posted.
The watch function is refactored toreactivitymodule, none of the handwritten watch functions in the applet framework are needed anymore, because thereactivitymodule has been provided.
catch sight ofIt's over! Now Vue Mini is really a @vue/reactivity shell...Sorry after this comment!Yang Mingshan (1902-1978), Chinese * leader, a politburo member in the 1950s and 1960sBig Brother Ouyang did fail to hold back a laugh.
summarize
With vue 3.5, the Vue Vapor team has made thereactivityA refactored implementation of the watch function in the module. The refactored watch function is the same as the one we're using now, but the difference is that the previous implementation of the watch function is deeply bound to the Vue component and its lifecycle, whereas the refactored watch function is not related to the Vue component or its lifecycle at all.
This change may not have much of an impact on the average developer, but for downstream projects such as theVue miniIt's still very beneficial. Because they used to have to hand-write the watch function themselves, now thereactivityProviding it eliminates the need for these handwritten watch functions.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
Also Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, reading this book can give you a qualitative improvement in your knowledge of vue compilation. This book is accessible to beginner and intermediate front-ends and is completely free, just asking for a STAR.