Xi'an phone interview: talk about the principle of Vue data two-way binding, and see how much your answer can score

Recently, I participated in a telephone interview from Xi'an (the second round, technical), whether it is a large factory or a small workshop, I will not list here, let me first talk about the few things that left a deep impression on me this time. For the interview questions, this time, let's talk about Vue's data two-way binding principle.

Scene reconstruction:

When my cell phone rang and looked at the phone call from Xi'an, Shaanxi, on the screen, I knew that the first phone interview of my life was coming. After picking up the phone, the interviewer's voice came from the other end of the computer (omitting some courtesy, and going straight to the interview questions.) The interviewer asked, "Tell me about your understanding of Vue data two-way binding."

The interviewer's question can also be understood as "How do you understand Vue data binding and the principle behind it?" Generally, the front-end newcomers who have just graduated may say, use v-model. (of course, this may be nonsense)

If you simply say that the v-model instruction is a syntactic sugar of Vue, it may not satisfy the interviewer, and it will not show your proficiency in Vue. It can only mean that you have read the official documentation of Vue, as shown in the following figure: 

If your answer points to this point, it is basically unqualified. At this point the interviewer may implicitly ask: Then what?

In fact, if the interviewer asks this question, you should think in two ways. To put it simply, if you don't use the v-model instruction, can you implement two-way binding with your own ideas? Digging deeper, he wanted to ask the principle behind the implementation of v-model.

If you can get this, it means that you are already on the road, at least a small code farmer who has developed business code in the company.

How to customize data binding like v-model in components?

I'll give it a respect first:

import Vue from 'vue'

const component = {
    template: `
        <div>
            <input type="text" @input="handleInput">
        </div>
    `,
    methods: {
        handleInput (e) {
            this.$emit('input', e.target.value) } } } new Vue({ conponents: { CompA: component }, el: '#root', template: ` <div> <comp-a></comp-a> </div> ` }) 

This is an initialized demo that defines a component and instantiates a Vue object. The value bound by v-model is passed in from the outer Vue instance. First we need to define a props in the component component:

props: ['value']

Then you can add this value to the template template of the Vue instance and bind the input event at the same time:

template: `
    <div>
        <comp-a :value="value" @input="value = arguments[0]"></comp-a>
    </div>
`,
data () { return { value: 'runtu' } } 

Explain, the arguments in the above code are the values ​​passed from $emit in the component template, and all the parameters will be placed in arguments, similar to an array. So here we assign arguments[0] to value.

Similarly, the input in the component component must also bind the value:

const component = {
    props: ['value'],
    template: `
        <div>
            <input type="text" @input="handleInput" :value="value"> </div> `, methods: { handleInput (e) { this.$emit('input', e.target.value) } } } 

After executing the above steps, the rules of the rivers and lakes, first run in the terminal npm run dev:

 

 

After seeing that the demo runs successfully on the local port 8080, turn your attention to the browser and take a look:

 

 

You can see that the value in Root is "runtu". When we enter something in the input box, the value in its data will become what. It is equivalent to us using v-model in the Vue instance template, which is equivalent to us binding :valueand @input.

So far, this demo has implemented the function of v-model.

Of course, you can directly replace and with:value v-model in the template at this time, and the effect is the same:@input

template: `
    <div>
        <comp-a v-model="value"></comp-a>
    </div>
`,

 

This should be the easiest demo to implement v-model data binding. You only need to have props in a component, add a value, and then when the component is going to modify the data, $emit an input event and pass the new value out. This implements two-way data binding in Vue.

In fact, the v-model instruction adds a props to the component and an event listener (such as the input event in this demo). To put it bluntly, the author encapsulates the logic of this two-way binding for us in v-model. , we just use it.

Of course, this demo can go a step further and define the name of the variable, which looks more flexible:

const conmponent = {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: ['value'],
    template: `
        <div>
            <input type="text" @input="handleInput" :value="value"> </div> `, methods: { handleInput (e) { this.$emit('change', e.target.value) } } } 

Summarize

A summary in one sentence is: use prop rendering data to bind the prop to the data of the child component itself when data is rendered, update its own data to replace the prop when modifying the data, watch the change of the child component's own data, and trigger an event to notify the parent component to change the binding The data set to prop.

 

The interviewer may also take the trouble to ask you, what is the benefit of doing this with Vue data binding?

 

Knock on the blackboard and focus: When the parent component data changes, the child component data that stores the prop will not be modified, but the child component data is used as the medium to complete the two-way modification of the prop.

 

If you want to continue to dig deeper, you have to move a small bench, make a pot of tea, prepare seeds and peanuts, sit down and talk to the interviewer about the responsive principle of Vue. Object.defineProperty hijacks object assignment through getters and setters The process of updating the dom and so on can be performed during this process.

 

When you can talk about this part, it means that your research on Vue has reached a certain level, and the interviewer can also understand the depth of your knowledge of Vue.js on the other end of the phone through this question, not just using APIs Do business development.

 

Of course, this interview question is just an appetizer for my phone interview in Xi'an. There are more interview questions waiting for me to answer. This series of articles will be updated on my public account < Runtu as soon as possible. Uncle > Inside, everyone is welcome to pay attention.

 

 

In addition, to tell you the bottom line, so far, through several rounds of interviews, I have successfully obtained the offer of this listed company.

 

To be continued...