Detailed explanation of the principles of Vue's responsive system

The basic principles of Vue's responsive system

When we use vue, we can affect the corresponding view by operating on the data. So how is this mechanism implemented?

Think about it, isn’t it as if our operations on data are being monitored by “someone”? Once we make a change to the data, “someone” can sense it and help us update the view

So who is this “someone”? In fact, it is very common. It is the Object.defineProperty that we have learned in the basics. By using it to process the data, we can implement the "read" callback function when the data is read, and the "write" callback function when the data is written.

Next, we will briefly review the use of this method and use a few practical examples to help you thoroughly understand this principle.

1. Review the usage of Object.defineProperty

Parameter explanation:

	obj: target object prop: property name of the target object to be operated descriptor: descriptor	
	return value passed in object

Some attributes of descriptor, briefly introduce a few attributes.

	enumerable, whether the property is enumerable, the default value is false.
	configurable, whether the property can be modified or deleted, the default value is false.
	writable, whether the property can be modified, the default value is false
	get, method to get attributes.
	set, method for setting properties.

Complete usage:

	Object.defineProperty(obj, prop, descriptor)

2. Practice 1: Use Object.defineProperty to monitor the age property of person

Pitfalls

Look at the code below. At first glance, does it seem like there is nothing wrong?

When someone reads the age attribute of person, I return the age attribute of person; when someone modifies the age attribute of person, I directly modify the value of person.age.

but! Students, after running it, although there is no error, the compiler keeps outputting "@@Someone read the age property".

Why is this? Think about it, if you directly return person.age in the get function, does this count as reading the person's age attribute again? At this time, the program executes the get function of age again, over and over again.

For example, it is equivalent to you want to read age, so you tell the compiler, I want to output person.age. Okay, the compiler goes to check person.age and finds that it has a get function, so it executes the get function. At this time, you think you are going to get its value, but you didn't expect that the get function tells the compiler again, I want person.age. In this way, a vicious circle is formed! !

So how to solve it? I can't directly return person.age in get, so how can I get the value of this attribute?

Answer : Can it be replaced by variables?

I put the value of person.age in the variable ageNumber. When I want to read it, I return the value of ageNumber; when I want to modify it, I modify the value of ageNumber.

Wouldn't this avoid using person.age directly to access in get and set functions?

Correct code

At this point, the effect is complete, and it can be monitored when reading and modifying.

3. Data Broker

What does data broker mean?

A: To put it simply, it is to operate (read/write) the properties of another object through an object proxy.

A bit abstract, right? Let me explain this with the following small example.

When a teacher wants to check or modify a student's grades, he or she can directly operate on the teacher object without having to directly operate on the student object.

This is what I want to explain above. The teacher object (teacher) delegates the operation (read/write) of the score attribute (score) in the student object (student).

4. Implementing responsive thinking in Vue

Students who have some basic knowledge of Vue2 should know that will the data defined in data() {} in Vue be mounted on the vm object? Then we operate on the data through this.data name, right?

Is this equivalent to the scenario in the small example above? Here, the vm object proxies the operation (read/write) of the attributes in the data object you defined.

Let's use another example to fully implement the responsive principle of Vue.

Pass all attributes in the data object to the vm object for proxy (let vm control the (read/write) operations of the attributes in the data object) When the data changes, the corresponding view can be updated

Summarize

1. Data proxy in Vue:

Use the vm object to proxy the operation (read/write) of the attributes in the data object

2. Benefits of data proxy in Vue:

More convenient operation of data in data

3. Basic principles:

Add all properties in the data object to vm through Object.defineProperty() .

For each property added to the vm, specify a getter/setter.

Operate (read/write) the corresponding attributes in data inside getter/setter .

4. Implementing responsive thinking in Vue

Without using a data proxy, the data is directly assigned and mounted on the VM.

1. The method in the figure below is a general method for setting get and set for data objects

2. When creating a new Vue, the data object passed by the user will be directly mounted on the Vue instance

Then monitor the data object on the Vue instance (responsive processing)

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!