[In-depth study of vue data response principle]

Vue data response principle in-depth learning

foreword

As a long-term brick mover, in an entrepreneurial company, under the influence of masks, the company couldn't hold on anymore, and the team disbanded!
Continue to new beginnings.
Next, review and review to enrich yourself.
Due to the long-term battle on the front line, the project business has been carrying out daily work. I don't know where the focus of the current corporate interview is.
I really don't have much confidence to participate in the interview directly, so it took me a while to review.
But it is still the most important to end the experience in actual combat;

1: Do you understand the response principle of vue? Can you elaborate on its specific implementation?

As a front-end development engineer, it should be unavoidable to learn vue. As long as you say that your technology stack is vue during the interview process, the interview process will always fail to bypass the topic of "data response"; then this question seems to
be The answer is not so good, the answer is too simple, "You don't know enough, and the technology is average". Do you answer vue2 or vue3? Let me also say here: If vue2 is used in the project during the interview, mainly talk about the response principle of vue2. If both vue2 and vue3 have been used in the project, you can compare the two. , state the difference between the two.

vue2 data response principle

Speaking of the data response principle of vue2, let’s talk about it first:
Object.defineProperty
We all know that vue2 data response is implemented by Object.defineProperty, but what does it do?
The Object.defineProperty(obj, prop, descriptor) method will directly define a new property on an object, or modify an existing property of an object, and return this object, and its parameters are:

1. obj: the object whose properties are to be defined
2. prop: the property name or Symbol to be defined or modified
3. descriptor: The attribute descriptor to be defined or modified
   Next, let's look at a simple case:

let testObj = {
    
    }
let name;
Object.defineProperty(testObj,'name',{
    
    
	get:()=>{
    
    
		console.log('get name:')
		return name
	},
	set: (newVal)=>{
    
    
		console.log('set name')
		name = newVal
	}
})
testObj.name = 'test name'
console.log(testObj.name)

Through this simple example, we can find that when we use Object.defineProperty to modify the object testObj, when we add properties to testObj, the set method will be called automatically; when we access the testObj property, the get method will be called automatically

Principle analysis
Vue is designed using the MVVM model architecture, which must be satisfied: the data and the view are synchronized;
so what Vue needs to do is to detect the change of the data and then update the view; checking the view is relatively simple, nothing more than using events monitor.
Combined with the Object.defineProperty we mentioned above, we can monitor the changes of data properties. That is, when the set method is triggered to notify us of the new view;

vue3 data response principle

Implementation principle
The principle of vue3 event response uses the new feature of es6: Proxy
Let me talk about Proxy first:

1. Proxy: It is used to create an object proxy, so as to realize the basic interception and customization of objects (such as: attribute search, assignment, enumeration, function call, attribute addition and deletion, etc.); 2. Proxy: can be used
for The target object is read, modified, and the function call is intercepted, and then the operation is processed. Instead of operating the object directly, the proxy mode is activated. By operating the proxy object, this benefit can also add custom additional operations.

In the MD document, we can see a description of the combination of Proxy and Reflect:

	const obj = new Proxy({
    
    },{
    
    
		get(target,propKey,receive){
    
    
			return Reflect.get(target,propKey,receive)
		},
		set(target,propKey,value,receive){
    
    
			return Reflect.set(target,propKey,value,receive)
		},
		deleteProperty(target,prop){
    
    
			return Reflect.deleteProperty(target, prop)
		}
	})

All the ways of using Proxy are as above; then use a get function that calls Proxy as an example:

	const proxy = new Proxy({
    
    }, {
    
    
		get(target, prop){
    
    
			return 50
		}
	})
	proxy.name;// 50
	proxy.age;//50

The above code is a constructor with two parameters, the first is the proxy target object, and the second is the configuration object. We can define the operations we need to proxy the first target object in the second object.

Pay special attention: in order for the proxy to work, you must operate on the Proxy instance, not on the target object;

As mentioned above, the Proxy instance receives two parameters, and the second parameter number defines the object to intercept the target function. Currently, there are 13 supported intercept operations 1.
Reflect.apply()
2. Reflect.construct()
3. Reflect.defineProperty()
4, Reflect.deleteProperty()
5, Reflect.enumerate()
6, Reflect.get()
7, Reflect.getOwnPropertyDescriptor() 8
, Reflect.getPrototypeOf()
9, Reflect.has()
10, Reflect .isExtensible()
11, Reflect.ownKeys()
12, Reflect.preventExtensions()
13, Reflect.set()
14, Reflect.setPrototypeOf()
I won’t remember here—all verification methods are recorded;

what's the difference

The above also said that the principle of two-way data binding in vue2 uses Object.defineProperty, and the principle of data hijacking in vue3 uses Proxy proxy; two differences:

1. Object.definePropery can only hijack object properties, cannot monitor arrays, and the new type set map of es6 can monitor these data types, and cannot monitor corresponding types, such as adding, deleting, etc.; 2. Peoxy can monitor the entire
object Instead of attributes, you can monitor changes in the array;