Shulou(Shulou.com)06/02 Report--

This article mainly explains the "vue3 responsive principle and api writing method is what", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "vue3 responsive principle and api writing method is what" it!

Preface

Vue3 responsive principle and api programming, quickly understand vue3 responsive principle

Implementation of vue3 responsive principle

Write a piece of code first and take a look.

Implement effect

Var name = 'sl', age = 22 sl console.log (effect1 ()) / / my name is sl, 30 years old console.log (effect2 ()) / my name is sl, my name is sl, 22 years old console.log (effect2 ()) / / my name is sl.

Let's see what can be optimized.

First of all: multiple functions. After the age has changed, you need to call multiple functions again manually to get the latest information.

It is expected that multiple functions can be called automatically after the information can be modified.

How to achieve it?

You can think of storing multiple functions together into the gather function, and when you change the age, you can call multiple functions to trigger.

Implement gather and trigger

Var name = "sl", age = 22 effect2 tom, joy;effect1 = () > (tom = `my name is ${name}, this year ${age} years old `); effect2 = () > (喜悦 = `my name is ${name}, this year ${age + 1} years old`); var dep = new Set (); function gather () {dep.add (effect1); dep.add (effect2);} function trigger () {dep.forEach ((effect) = > effect ());} gather () Effect1 () effect2 () console.log (tom); / / my name is sl, and I am 22 years old console.log (喜悦); / / my name is sl, 23 years old age = 30 console.log () console.log (tom); / / my name is sl, and I am 30 years old console.log (喜悦); / / my name is sl, and I am 31 years old.

Continue to see if there are any points that can be optimized.

What if the variable is one or more objects?

Set storage when the variable is of primitive type

Map can be used to store variables when they are objects.

Use weakMap to store multiple objects

Var obj1 = {name: "tom", age: 22}; var obj2 = {name: "喜悦", age: 23}; var tom, joy;effect1 = () = > (tom = `my name is ${obj1.name}, this year ${obj1.age} `); effect2 = () = > (喜悦 = `my name is ${obj2.name}, this year ${obj2.age}`); var depsMap = new WeakMap (); function gather (target, key) {let depMap = depsMap.get (target) If (! depMap) {depsMap.set (target, (depMap = new Map ());} let dep = depMap.get (key); if (! dep) {depMap.set (key, (dep = new Set ();} if (target = obj1) {dep.add (effect1);} else {dep.add (effect2);}} function trigger (target, key) {let depMap = depsMap.get (target) If (depMap) {const dep = depMap.get (key); if (dep) {dep.forEach ((effect) = > effect ());}} gather (obj1, "age"); / / Collection dependency gather (obj2, "age"); / / Collection dependency effect1 (); effect2 (); console.log (tom); / / my name is sl, 22-year-old console.log (喜悦); / / my name is sl, 23 years old obj1.age = 30 Obj2.age = 10 trigger (obj1, "age"); trigger (obj2, "age"); console.log (tom); / / my name is sl, 30 years old console.log (喜悦); / / my name is sl, 31 years old

Let's continue to see what can be optimized.

The above dependent collection gather and the update notification trigger of the function are manually collected and manually triggered every time. Is there any way to automatically collect and trigger updates?

Proxy

Implement reactive

Write a reactive function first

Function reactive (target) {const handle = {set (target, key, value, receiver) {Reflect.set (target, key, value, receiver); trigger (receiver,key) / / trigger automatic update}, get (target, key, receiver) {gather (receiver,key); / / collect dependencies return Reflect.get (target, key, receiver) on access;},} Return new Proxy (target, handle);}

Then apply the reactive function to the previous code

Var obj1 = reactive ({name: "tom", age: 22}); var obj2 = reactive ({name: "喜悦", age: 23}); var tom, joy;effect1 = () > (tom = `my name is ${obj1.name}, this year ${obj1.age} `); effect2 = () = > (喜悦 = `my name is ${obj2.name}, this year ${obj2.age}`); var depsMap = new WeakMap (); function gather (target, key) {let depMap = depsMap.get (target) If (! depMap) {depsMap.set (target, (depMap = new Map ());} let dep = depMap.get (key); if (! dep) {depMap.set (key, (dep = new Set ();} if (target = obj1) {dep.add (effect1);} else {dep.add (effect2);}} function trigger (target, key) {let depMap = depsMap.get (target) If (depMap) {const dep = depMap.get (key); if (dep) {dep.forEach ((effect) = > effect ());} effect1 (); effect2 (); console.log (tom); / / my name is sl, and I am 22 years old console.log (喜悦); / / my name is sl, and I am 23 years old obj1.age = 30 × obj2.age = 10 position console.log (tom); / / my name is sl, and I am 30 years old console.log (喜悦). / / my name is sl and I am 31 years old.

Then there is another problem, that is, there is a dead dep add function in the gather function.

How to solve it? rewrite the effect function

Let activeEffect = nullfunction effect (fn) {activeEffect = fn; activeEffect (); activeEffect = null; / / immediately becomes null} var depsMap = new WeakMap (); function gather (target, key) {/ / avoid triggering gather if (! activeEffect) return; let depMap = depsMap.get (target) for example console.log (obj1.name); if (! depMap) {depsMap.set (target, (depMap = new Map () } let dep = depMap.get (key); if (! dep) {depMap.set (key, (dep = new Set ());} dep.add (activeEffect) / / add function to dependency} effect (effect1); effect (effect2)

Reactive has also been implemented, so there is also an implementation of ref

Ref

How to use ref in vue3

Var name = ref ('tom') console.log (name.value) / / tom

You need to use .value to get the value.

Function ref (name) {return reactive ({value: name})} const name = ref ('tom'); console.log (name.value) / / tom

Complete code

Var activeEffect = null;function effect (fn) {activeEffect = fn; activeEffect (); activeEffect = null;} var depsMap = new WeakMap (); function gather (target, key) {/ / avoid triggering gather if (! activeEffect) return; let depMap = depsMap.get (target) for example console.log (obj1.name); if (! depMap) {depsMap.set (target, (depMap = new Map ());} let dep = depMap.get (key) If (! dep) {depMap.set (key, (dep = new Set ());} dep.add (activeEffect)} function trigger (target, key) {let depMap = depsMap.get (target); if (depMap) {const dep = depMap.get (key); if (dep) {dep.forEach ((effect) = > effect ()) } function reactive (target) {const handle = {set (target, key, value, receiver) {Reflect.set (target, key, value, receiver); trigger (receiver, key); / / trigger automatic update}, get (target, key, receiver) {gather (receiver, key); / / collect dependency return Reflect.get (target, key, receiver);},},} Return new Proxy (target, handle) } function ref (name) {return reactive ({value: name})} Thank you for your reading, this is the content of "what is the principle of vue3 response and the method of writing api". After the study of this article, I believe you have a deeper understanding of the principle of vue3 response and what the method of api is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.