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

In this article Xiaobian for you to introduce in detail "Vue2 responsive system depth response how to achieve", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue2 responsive system depth response how to achieve" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

1. Scene import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {text: {innerText: {childText: "hello",}; observe (data); const updateComponent = () = > {console.log (data.text.innerText.childText);}; new Watcher (updateComponent); data.text.innerText.childText = "liang"

Our responsive system does not yet support the response when the attribute is an object, so there will be no output when we change it. ChildText

We have only collected dependencies, so if we want to respond, we must assign the entire value to a new object. Data.textdata.text

Import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {text: {innerText: {childText: "hello",}; observe (data); const updateComponent = () = > {console.log (data.text.innerText.childText);}; new Watcher (updateComponent); data.text = {innerText: {childText: "liang",},}

Of course, we don't want to assign the whole object every time, we need to make some changes to make the nested objects responsive.

2. Plan

We just need to call the function once just like the one above for the calling function before giving it a rewrite and. Keygetsetvaluedataobserveobserve

At the same time, the parameters are provided, leaving the extension for the outside world to decide whether a deep response is needed. Shallow

/ * add shallow*/export function defineReactive (obj, key, val, shallow) {/ * / const property = Object.getOwnPropertyDescriptor (obj, key) / / read get that the user may have defined, set const getter = property & & property.get; const setter = property & & property.set; / / val without incoming calls to manually assign if ((! getter | | setter) & & arguments.length = = 2) {val = obj [key];} const dep = new Dep () / / hold a Dep object to hold all Watcher / * new * * /! 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 ();} return value;}, set: function reactiveSetter (newVal) {const value = getter? Getter.call (obj): val; if (setter) {setter.call (obj, newVal);} else {val = newVal;} dep.notify ();},});}

At the same time, in the function, if the object is not passed in, we will directly. Observevaluereturn

/ * util.jsexport function isObject (obj) {return obj! = = null & & typeof obj = "object";} * / export function observe (value) {if (! isObject (value)) {return;} let ob = new Observer (value); return ob;} 3, scene 2import {observe} from ". / reactive"; import Watcher from ". / watcher" Const data = {text: {innerText: {childText: "hello",}; observe (data); const updateComponent = () = > {console.log (data.text.innerText.childText);}; new Watcher (updateComponent); data.text.innerText.childText = "liang"; data.text = {innerText: {childText: "liang2",}}; data.text.innerText.childText = "liang3"

You can think about what will be output for a minute.

New Watcher (updateComponent);, which performs an output. UpdateComponenthello

Data.text.innerText.childText = "liang"; we have solved the case where the property is an object, so we will also output it here. Liang

Data.text = {innerText: {childText: "liang2",},}

The above code is the method at the beginning of the article, so it will also trigger the function execution and output. Liang2

Data.text.innerText.childText = "liang3"; will this last sentence be executed?

The answer is no, because our assignment is a new object, but we don't set it to be responsive. Data.text

So we need to set the object to be responsive when we do it. Set

/ * Define a reactive property on an Object. * / 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 ();} return value;}, set: function reactiveSetter (newVal) {const value = getter? Getter.call (obj): val; if (setter) {setter.call (obj, newVal);} else {val = newVal;} / * New * / childOb =! shallow & & observe (newVal) / * / dep.notify ();},}) } after reading this, the article "how to realize the Deep response of Vue2 responsive system" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow 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.