Example Analysis of data Agent access of Vue Source Code

Editor to share with you the Vue source data proxy access 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!

Concept analysis:

1) data proxy: operation (read / write) of attributes in another object (inside the previous object) through one object agent

2) vue data proxy: proxies all the properties in the data object through the vm object (that is, this)

3) benefits: more convenient manipulation of data in data

4) basic implementation process

a. Add a property descriptor corresponding to the property of the data object to the vm through Object.defineProperty ()

b. All added properties contain getter/setter

C. Getter/setter to manipulate the corresponding attribute data in data

Doubt

Have you ever wondered why the properties defined in the data object can be accessed by this, an instance of Vue, when you use Vue?

Let's look at the implementation of the source code.

Var sharedPropertyDefinition = {enumerable: true, configurable: true, get: noop, set: noop}; / / this is called in the source code: proxy (vm,'_ data', key) / / vm is the instance of Vue, and key is the name of the data object attribute function proxy (target, sourceKey, key) {sharedPropertyDefinition.get = function proxyGetter () {return this [sourceKey] [key]}; sharedPropertyDefinition.set = function proxySetter (val) {this [sourceKey] [key] = val;} Object.defineProperty (target, key, sharedPropertyDefinition);}

For example, there is a demo like this

Const vm = new Vue ({el:'# app', data: {message: 'Hello this.message'}, created () {console.log (this.message) / / output Hello Vue! Console.log (this._data.message) / / also output Hello Vue!}})

That is to say, when we write this.message like this, Vue sets a layer of proxy to this.message through Object.defineProperty, which actually accesses the message property in this._data, and this._data points to the data object we wrote.

The above is all the contents of the article "sample Analysis of Vue Source data Agent access". 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!