preface

Every time you start a technical interview, the interviewer deliberately asks, can you vue? It can be seen that THE status of VUE in China can not be underestimated. The first question it asks is how can VUE achieve two-way data binding?

To avoid embarrassing situations, let’s take a good look at the responsivity principle of VUE.

If you’re already familiar with these questions, check out your friend’s database of interviews that they’re planning

Catty little tube, walk Chen Exhibition. Let’s get down to business.

1.Object.defineProperty()

Quote from vUE’s official website.

When you pass an ordinary JavaScript Object to a Vue instance as the data option, Vue iterates through all of the Object’s properties and converts them into getters/setters using Object.defineProperty.

Object.defineproperty plays a crucial role in this project.

So if you’re not familiar with this method, you can click on MDN

2. Data hijacking

What is data hijacking?

Define all attributes with Object.defineProperty, and these attributes can have get/set methods.

Use 🌰 on the vUE website. When I type app.$data on the console, I can access the data object in the app instance.

We can see that the property message under the data object has its own GET /set.

How to implement data hijacking?

We now have set()/get() in the data property of our vue instance. But we often see examples in VUE

this.$data.message = {repoter:{person:'zhx'}}
Copy the code

And since we’re going to get to the responsive form, we’re going to add get()/set() to it even if we change it later.

All we need to do is call Observe() again in the set method, as shown below

Data brokers

In vue we usually value this. Message instead of this.$data.message, so we're going to do this step$dataThe agent ofCopy the code

This time the main share has

  • 1.Object.defineProperty
  • 2. Data hijacking
  • 3. Data broker

Next major share 1. Compile template processing 2. Publish and subscribe mode

If the interviewer asks me again, I’ll be sure to answer the question.

I hope this article has been helpful to you. Have fun with your work and life ❤