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

This article mainly introduces the relevant knowledge of "principle Analysis of data response in Vue". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "principle Analysis of data response in Vue" can help you solve the problem.

Transform data

Let's first try to write a function to transform the object:

Why write this function first? Because transforming the data is one of the most basic and important steps, all subsequent steps will depend on this step.

/ / Code 1.1function defineReactive (obj,key,val) {Object.defineProperty (obj,key, {enumerable: true, configurable: true, get: function () {return val }, set: function (newVal) {/ / determine whether the new value is equal to the old value / / the latter part of the judgment is to verify that if both the new value and the old value are NaN, NaN is not equal to its own if (newVal = val | | (newVal! = = newVal & & value! = = value) {return;} val = newVal;}});}

For example, const obj = {}, and then call the defineReactive (obj,'a',2) method. In this case, in the function, val=2, and then each time you get the value of obj.a, you get the value of val, and when you set obj.a, you also set the value of val. (each call to defineReactive produces a closure that holds the value of val.)

Process discussion

After verification, it is found that this function can indeed be used. Then let's discuss the process of response:

Input data

Transform data (defineReactive ())

If data changes = > triggers an event

Let's take a look at the third step, how do data changes trigger subsequent events? Think about it carefully. If you want to change the data, you must first set the data, so we just add the method in set () to ok.

Then there is an important question:

Dependency collection

How do we know what events will be triggered after the data changes? In Vue:

Use data = > view; use data to render the view, so it is the best time to collect dependencies when getting data. Vue generates a Dep instance to collect dependencies when transforming the data properties.

/ / Code 1.2class Dep {constructor () {/ / subscription information this.subs = [];} addSub (sub) {this.subs.push (sub);} removeSub (sub) {remove (this.subs, sub);} / / the function of this method is equivalent to this.subs.push (Watcher); depend () {if (Dep.target) {Dep.target.addDep (this) }} / / this method is to issue a notice telling you that notify () {const subs = this.subs.slice () for (let I = 0, l = subs.length; I) has changed

< l; i++) { subs[i].update(); } }}Dep.target = null; 代码1.2就是Dep的部分代码，暂时只需要知道2个方法的作用就可以了 depend() --- 可以理解为收集依赖的事件，不考虑其他方面的话 功能等同于addSub() notify() --- 这个方法更为直观了，执行所有依赖的update()方法。就是之后的改变视图啊 等等。 本篇主要讨论数据响应的过程，不深入讨论 Watcher类，所以Dep中的方法知道作用就可以了。 然后就是改变代码1.1了 //代码 1.3function defineReactive (obj,key,val) { const dep = new Dep(); Object.defineProperty(obj,key,{ enumerable: true, configurable: true, get: function () { if(Dep.target){ //收集依赖 等同于 dep.addSub(Dep.target) dep.depend() } return val; }, set: function (newVal) { if(newVal === val || (newVal !== newVal && val !== val)){ return ; } val = newVal; //发布改变 dep.notify(); } });} 这代码中有一个疑点，Dep.target是什么？为什么要有Dep.target才会收集依赖呢？ Dep是一个类，Dep.target是类的属性，并不是dep实例的属性。 Dep类在全局可用，所以Dep.target在全局能访问到，可以任意改变它的值。 get这个方法使用很平常，不可能每次使用获取数据值的时候都去调用dep.depend()。 dep.depend()实际上就是dep.addSub(Dep.target)。 那么最好方法就是，在使用之前把Dep.target设置成某个对象，在订阅完成之后设置Dep.target = null。 验证 是时候来验证一波代码的可用性了 //代码 1.4const obj = {};//这一句是不是感觉很熟悉 就相当于初始化vue的data ---- data:{obj:{}};//低配的不能再低配的watcher对象（源码中是一个类，我这用一个对象代替了）const watcher = { addDep:function (dep) { dep.addSub(this); }, update:function(){ html(); }}//假装这个是渲染页面的function html () { document.querySelector('body')[xss_clean] = obj.html;}defineReactive(obj,'html','how are you');//定义响应式的数据Dep.target = watcher;html();//第一次渲染界面Dep.target = null; 此时浏览器上的界面是这样的 然后在下打开了控制台开始调试，输入： obj.html = 'I am fine thank you' 然后就发现，按下回车的那一瞬间，奇迹发生了，页面变成了

This is the end of the introduction to "the principle Analysis of data response in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.