With the update to Vue3.0, interviewers now have a new tool to use to assess candidates.

** Interviewer: ** Why did Vue3.0 rewrite responsive systems?

It’s like you and me under the tree. What’s the interviewer asking, and I have no idea what’s going on.

For example, Proxy directly proxies objects, rather than hijacking objects’ properties, better array monitoring, etc.

This answer is barely qualified.

So how do you answer this question in order to successfully pass the interview?

The logic behind the interviewer

As Sun Tzu’s art of war goes, “Know yourself and know your enemy, and you will win a hundred battles with no danger of defeat.”

Interviewing is like a war, so we need to put ourselves in other people’s shoes and think about it.

Why would an interviewer ask such a question?

What does the interviewer want from this question?

What technical points can this question examine?

Think about these questions and then go back to yourself and think about whether you’ve mastered these skills.

To put it bluntly, an interview is like an exam: you need to read and examine the question before you can answer it well.

Why do many people think that “interview makes the rocket, job turns the screw”?

Because there is no empathy, not thinking clearly about the logic behind the interview questions.

So once we figure out the logic, what we need to do is extract the technical points — organize our thoughts — and make corresponding solutions.

That is, of course, if you have these technical skills.

So next, I will try to disassemble this interview question and extract the knowledge points from it. For you, it’s all about these things, how much do you know?

Why did Vue3.0 rewrite responsive systems?

Why rewrite it?

There’s no point rewriting it if it worked well before. What problems existed before, and how they are solved now, that’s the key point.

I wonder how much you know about the Vue2. X responsivity, are you in technical debt?

That’s okay. I’ll help you with your debt. Let’s comb through the Vue2.

In fact, there are many technical points behind this interview question. These are directly related to the topic at hand. In the actual interview, it is likely to be based on these technical points, and then in-depth communication, here will not be extended, you can now these questions clear, even if earned!

Vue2. X response type

This point has already been explained in the official Vue documentation, and it is very detailed.

When you pass an ordinary JavaScript object into a Vue instance as the data option, Vue iterates through all of the object’s properties, And use Object.defineProperty to turn all of these properties into getters/setters.

Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when the property is accessed and modified.

It is important to note that different browsers format getters/setters differently when printing data objects on the console, so it is recommended to install vue-devTools for a more user-friendly interface for examining data.

Each component instance corresponds to a Watcher instance, which records “touched” data properties as dependencies during component rendering. Watcher is then notified when the setter for the dependency fires, causing its associated component to be re-rendered.

We use an official graphic to tease out the process.

Let’s start with some code:

Response principle

Obj in data is a plain JavaScript object that assigns a random number to this.message by clicking on the Click button. This. message refers to the message property of the obj object in data.

When data changes to Message, the contents of the H1 tag on the page change accordingly, which is a reactive process.

So how does Vue work?

First, Vue internally uses Object.defineProperty() to convert every member in Data to a getter/setter form.

Getters are used to rely on collections and setters are used to distribute updates. The template content, on the other hand, is eventually compiled into the Render function.

In the render function, we can see that the _v(_S (message)) message is accessed, which triggers the getter for dependency collection.

In the case of a click event in the code, once the event handler is triggered to execute, the message is modified and setters are triggered to distribute updates.

Although flow manages clear, but total feeling little what, how can ability connect more fully?

We use code to simulate the entire implementation process.

DefineProperty mock code

The basic usage of defineProperty, just read the manual

Let’s look at the code:

<div id="app"> hello </div> <script> 'hello'} // Simulate Vue instance let vm = {} // data hijacking: Object.defineproperty (VM, 'MSG ', {// Enumerable: // The new information is freely configurable and works without any additional information. The new information is freely configurable and works without any additional information. // The new information is freely configurable and works without additional information. ', data.msg) return data.msg}, // Set (newValue) {console.log('set: ', newValue) if (newValue === data.msg) {return} data.msg = newValue, TextContent = data.msg}}) // Test vm. MSG = 'Hello World' console.log(vm.msg) </script>Copy the code

You read that right, 36 lines of code with comments, and that’s how Vue2 2.x works for a responsive implementation.

Continue to implement multiple data responses.

<body> <div id="app"> hello </div> <script> Function proxyData(data) {function proxyData(data) {function proxyData(data) {function proxyData(data) Object.keys(data).foreach (key => {// Convert attributes in data into setters for vm // Object.defineProperty(vm, key, {enumerable: true, configurable: true, get () { console.log('get: ', key, data[key]) return data[key] }, set (newValue) { console.log('set: ', key, newValue) if (newValue === data[key]) {return} data[key] = newValue, Document.queryselector ('#app').textContent = data[key]}})}) console.log(vm.msg) </script> </body>Copy the code

The above code only simulates the principle of responsiveness, but Vue implementation is definitely not that simple.

Next, a item from Kang Kang (●’◡’●).