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

Editor to share with you the Vue responsive principle of Observer, Dep, Watcher example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Object.defineProperty

I believe that many students more or less understand that the responsive principle of Vue is realized through Object.defineProperty. Objects bound by Object.defineProperty will become "responsive". That is, get and set events are triggered when the object is changed. This in turn triggers some view updates. Give me a chestnut?

Function defineReactive (obj, key, val) {Object.defineProperty (obj, key, {enumerable: true, configurable: true, get:) = > {console.log ('I've been read, shall I do something?'); return val;}, set: newVal = > {if (val = = newVal) {return;} val = newVal Console.log ("data has been changed, I'm going to render the new value to the page!")} let data = {text: 'hello world',}; / / bind defineReactive (data,' text', data.text) to the text attribute on data; console.log (data.text); / / console output data.text = 'hello Vue'; / / console output

Observer "responsive"

The Observer class is used in Vue to manage the above process of responding to Object.defineProperty. We can use the following code to describe the "responsive" binding of all the this.data, the data properties we defined in the Vue code.

Class Observer {constructor () {/ / responsive binding data via the method observe (this.data);}} export function observe (data) {const keys = Object.keys (data); for (let I = 0; I

< keys.length; i++) { // 将data中我们定义的每个属性进行响应式绑定 defineReactive(obj, keys[i]); }} Dep 「依赖管理」 什么是依赖？ 相信没有看过源码或者刚接触Dep这个词的同学都会比较懵。那Dep究竟是用来做什么的呢？ 我们通过defineReactive方法将data中的数据进行响应式后，虽然可以监听到数据的变化了，那我们怎么处理通知视图就更新呢？ Dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例，我们发现，虽然data中有text和message属性，但是只有message被渲染到页面上，至于text无论怎么变化都影响不到视图的展示，因此我们仅仅对message进行收集即可，可以避免一些无用的工作。 那这个时候message的Dep就收集到了一个依赖，这个依赖就是用来管理data中message变化的。 {{message}} data: { text: 'hello world', message: 'hello vue',} 当使用watch属性时，也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化，message变化时我们就要通知到watch这个钩子，让它去执行回调函数。 这个时候message的Dep就收集到了两个依赖，第二个依赖就是用来管理watch中message变化的。 watch: { message: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) },} 当开发者自定义computed计算属性时，如下messageT属性，是依赖message的变化的。因此message变化时我们也要通知到computed，让它去执行回调函数。 这个时候message的Dep就收集到了三个依赖，这个依赖就是用来管理computed中message变化的。 computed: { messageT() { return this.message + '!'; }} 图示如下：一个属性可能有多个依赖，每个响应式数据都有一个Dep来管理它的依赖。 如何收集依赖 我们如何知道data中的某个属性被使用了，答案就是Object.defineProperty，因为读取某个属性就会触发get方法。可以将代码进行如下改造： function defineReactive (obj, key, val) { let Dep; // 依赖 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () =>

{console.log ('I've been read, shall I do something?'); / / read, collect this dependency Dep.depend (); / / add return val;}, set: newVal = > {if (val = newVal) {return;} val = newVal / / changed, notify dependency to update Dep.notify (); / / add console.log this time ("the data has been changed, I want to render the new value to the page!");}})}

What is dependence?

What exactly is the so-called dependence? The answer has been exposed in the figure above, which is Watcher.

Watcher "intermediary"

Watcher is similar to the role of an intermediary. For example, message has three intermediaries. When the message changes, notify the three intermediaries, and they will implement the changes they need to make.

Watcher can control which it belongs to, whether it is an attribute in data or watch, or computed,Watcher has its own unified update entry, as long as you notify it, the corresponding update method will be executed.

So we can speculate that there are two methods that Watcher must have. One is to notify changes, and the other is to be collected into Dep.

Class Watcher {addDep () {/ / my Watcher is going to be stuffed into Dep ~}, update () {/ / Dep informs me to update ~ ~},} above is all the content of the article "sample Analysis of Vue response principles Observer, Dep, Watcher". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.