Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points about how to use set and delete of Vue2 responsive system. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. Array set import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {list: [1,2],}; observe (data); const updateComponent = () = > {console.log (data.list);}; new Watcher (updateComponent); list [0] = 3

Will re-execution be triggered by list [0]? UpdateComponent

You can think about it first.

The answer is no, the array can only be triggered by rewriting, etc., as detailed in the array of pushspliceVue2 responsive systems.

If we want to replace an element in the array, we can turn around and do so. Splice

Import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {list: [1,2],}; observe (data); const updateComponent = () = > {console.log (data.list);}; new Watcher (updateComponent); / / list [0] = 3mitdata.list.splice (0,1,3)

Every time it is too troublesome to write like this, we can provide a method for users to use. Set

/ * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. * / export function set (target, key, val) {if (Array.isArray (target)) {target.length = Math.max (target.length, key); target.splice (key, 1, val); return val;} / / targe is the case of object / /.}

Then we can just use the method. Set

Import {observe, set} from ". / reactive"; import Watcher from ". / watcher"; const data = {list: [1,2],}; observe (data); const updateComponent = () = > {console.log (data.list);}; new Watcher (updateComponent); / / list [0] = 3 observe / data.list.splice (0,1,3); set (data.list, 0,3); 2, array del

With the same array, we provide a method by the way to support the array to delete an element in response. Setdel

/ * Delete a property and trigger change if necessary. * / export function del (target, key) {if (Array.isArray (target) & & isValidArrayIndex (key)) {target.splice (key, 1); return;} / / targe is the case of the object / /.} 3, object setimport {observe, set, del} from ". / reactive"; import Watcher from ". / watcher" Const data = {obj: {a: 1, b: 2,},}; observe (data); const updateComponent = () = > {const c = data.obj.c? Data.obj.c: 0; console.log (data.obj.a + data.obj.b + c);}; new Watcher (updateComponent); data.obj.c = 3

Although the property is used in the updateComponent method, there are no properties in it before the call, so the property is not responsive. Objcobservedata.objcc

When we modify the value, it does not trigger the execution of. Data.obj.cupdateComponent

If you want to be responsive, one way is to define properties at the beginning. C

Const data = {obj: {a: 1, b: 2, c: null,},}; observe (data); const updateComponent = () = > {const c = data.obj.c?

Another way is to set the new property, where we can set the newly added property to be responsive. Setset

/ * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. * / export function set (target, key, val) {if (Array.isArray (target)) {target.length = Math.max (target.length, key); target.splice (key, 1, val); return val;} / / the case where targe is an object / / key already exists in target if (key in target &! (key in Object.prototype)) {target [key] = val Return val;} const ob = target.__ob__; / / target is not responsive data if (! ob) {target [key] = val; return val;} / / change the current key to responsive defineReactive (target, key, val); return val;}

Go back to our previous program:

Import {observe, set, del} from ". / reactive"; import Watcher from ". / watcher"; const data = {obj: {a: 1, b: 2,},}; observe (data); const updateComponent = () = > {const c = data.obj.c? Data.obj.c: 0; console.log (data.obj.a + data.obj.b + c);}; const ob = new Watcher (updateComponent); set (data.obj, "c", 3)

Although the attribute has been added, it will not be triggered again at this time, so let's take a look at the dependency graph. SetWatcher

Although the property owns the object, it does not collect dependencies because no dependent property has been called. CDepcWatcher

Of course, we can call the corresponding one manually. SetWatcher

Const data = {obj: {a: 1, b: 2,},}; observe (data); const updateComponent = () = > {const c = data.obj.c? Data.obj.c: 0; console.log (data.obj.a + data.obj.b + c);}; const ob = new Watcher (updateComponent); set (data.obj, "c", 3); ob.update (); / / manually call Watcherdata.obj.c = 4

In this way, the execution will be triggered when it is executed. Data.obj.c = 4Watcher

So can we put the trigger logic into the function? Watcherset

You can see that there is also one, which was actually prepared for the array at that time, referring to the array of objDepVue2 responsive systems, but nothing was collected. Objdep

Let's modify the code so that it also collects:

Export function defineReactive (obj, key, val, shallow) {const property = Object.getOwnPropertyDescriptor (obj, key); / / read get, set const getter = property & & property.get; const setter = property & & property.set; / / val that the user may have defined by himself, if ((! getter | | setter) & & arguments.length = = 2) {val = obj [key] } const dep = new Dep (); / / holds a Dep object that holds all Watcher let childOb =! shallow & & observe (val) that depend on this variable; Object.defineProperty (obj, key, {enumerable: true, configurable: true, get: function reactiveGetter () {const value = getter? Getter.call (obj): val; if (Dep.target) {dep.depend (); if (childOb) {/ * New location * / childOb.dep.depend () / * * / if (Array.isArray (value)) {/ / childOb.dep.depend (); / / original location dependArray (value) } return value;}, set: function reactiveSetter (newVal) {const value = getter? Getter.call (obj): val; if (setter) {setter.call (obj, newVal);} else {val = newVal;} childOb =! shallow & & observe (newVal); dep.notify ();},},});} function dependArray (value) {for (let e, I = 0, l = value.length I

< l; i++) { e = value[i]; /******新位置 *************************/ e && e.__ob__ && e.__ob__.dep.depend(); /**********************************/ if (Array.isArray(e)) { // e && e.__ob__ && e.__ob__.dep.depend(); // 原位置 dependArray(e); } }} 因为读取 属性，一定先会读取 属性，即 。 也同理。aobjdata.obj.ab 所以通过上边的修改， 的 会收集到它的所有属性的依赖，也就是这里的 、 的依赖，但因为 和 的依赖是相同的，所以收集到一个依赖。objdepabab 但其实我们并不知道 被哪些 依赖，我们只知道和 同属于一个对象的 和 被哪些 依赖，但大概率 也会被其中的 依赖。cWatchercabWatchercWatcher 所以我们可以在 中手动执行一下 的 ，依赖 的 大概率会被执行，相应的 也会成功收集到依赖。setobjDepcWatcherc export function set(target, key, val) { if (Array.isArray(target)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; } // targe 是对象的情况 // key 在 target 中已经存在 if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } const ob = target.__ob__; // target 不是响应式数据 if (!ob) { target[key] = val; return val; } defineReactive(target, key, val); /******新增 *************************/ ob.dep.notify() /************************************/ return val;} 回到最开始的代码： const data = { obj: { a: 1, b: 2, },};observe(data);const updateComponent = () =>

{const c = data.obj.c? Data.obj.c: 0; console.log (data.obj.a + data.obj.b + c);}; const ob = new Watcher (updateComponent); set (data.obj, "c", 3)

After the execution, in addition to becoming responsive, the execution was successfully triggered and collected. CWatcherWatcher

At this point, if you modify the value, the execution will be triggered successfully. CWatcher

4. Object del

With the above understanding, deletion is easy to solve.

If you want to delete an attribute, you can delete it and execute it accordingly. But it's in the closure, and we can't get it. ADepaDep

Second, we can execute the object where the property is located. AobjDep

/ * Delete a property and trigger change if necessary. * / export function del (target, key) {if (Array.isArray (target)) {target.splice (key, 1); if return;} / / targe is an object, const ob = target.__ob__; if (! hasOwn (target, key)) {return;} delete target [key]; if (! ob) {return;} ob.dep.notify () } these are all the contents of the article "how to use set and delete in Vue2 responsive systems". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.