Shulou(Shulou.com)05/31 Report--

This article mainly explains "Code Analysis of vue Core interview questions". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "Code Analysis of vue Core interview questions".

1-Why bind key in the list? what's the use?

The component compares the vnode twice during the upgrade phase to determine whether to follow the patchVnode or create-updateParentPlaceholder-destory process

One of the conditions of node comparison is whether the key value can be equivalent.

This means that without a key value (that is, both times are undefined), vue has a certain probability (such as list list) that twice vnode will be judged to be sameVnode and patchVnode to reuse dom nodes.

So, assuming that the current requirement is in the form of a tab, and there is a list list under each tab, and we highlight it by clicking bind class in listing 1 under tab1, then after the selected tab switches to tab2, listing 1 is still highlighted

2-talk about the bidirectional data binding of vue

The so-called two-way binding, that is, data-driven view upgrade, while view upgrade can change to data changes

Data-> view

The component creation of vue goes through the init process, which executes the initstate function to solve data and props, and it traverses the key of data to execute observe, which is a recursive defineReactive process. That is, block each key through Object.defineProperties, collect watcher from dep when get, and execute render update from dep notify to watcher when set.

View-data

This is reflected in the v-model instruction, and the text we enter in input and textarea can drive the upgrade of the data. This is because vue parses v-model to events+props and mounts it to the ast node during the template compilation phase. During the patch process, updateListeners will be called to add input events to input through addeventListeners. When input is triggered, the corresponding value of event upgrade props will be called to achieve the purpose of view upgrade.

3-talk about the similarities and differences between vuex and redux

Both of them are responsive programming state management solutions, which well deal with the data transfer problem of nested components, and both define store globally, and send action to reducer through dispatch to upgrade store. Compared with redux, vuex provides a direct connection to reducer, namely commit

4-in vue, why can't a child component modify the props passed by the parent component? if so, how does vue monitor and report a warning?

The component executes the initstate function during the init process, which includes the resolution of props

As you can see, vue issues a warning when attempting to modify props by overriding the Object.properties.set method. This is done to ensure a single flow of data and avoid errors

5-Why can't there be asynchronous operations in mutations in vue

Because the asynchronous operation is counterproductive, its fixed input will not have a fixed output, which will make the program state unpredictable.

Why Object.definedProperty in 6-vue2.x is replaced by Proxy in vue3

Object.definedProperty can only hijack the properties of an object, but not for the nesting of a property, but Proxy can. In addition, Proxy provides a richer alternative api.

7-Vue component life cycle

The creation of a component requires the execution of the init-mount-reder-patch process. In the init process, beforeCreate is called first through callhook, followed by initState, which means that the state of the component is not available during beforeCreate, but a small amount of plug-in capabilities can be mixed through Vue.mixin as vuex or vue-router does. Because the component is still "clean" at this time, the possibility of interference to the component is avoided. Similarly, because created is after initState, the state at this time is available, so we can make a request to the backend to get the data and bind it to data.key;. During the mount process, beforeMount will be executed first, and the render function at this time and compiled but not yet executed, so the dom operation cannot be performed. In the process of new Watcher, render and update will be executed, following the patch process, so when mounted, dom has been created, so we can add dom references through the ref instruction; when we use click event to trigger data upgrade, dep will notify watcher to execute run go render update, at this time beforeUpdate will be executed, because the dom has not been upgraded at this time, so we can copy an old dom to try to do a fallback operation Finally, beforeDestory and destoryed are triggered when the component is uninstalled, which recursively destroys the component. Because the template parsing of vue will only resolve the events in template, we need to manually destroy the added events in dom through ref.

Finally, there are activited and deactivited related to keep-alive, which identify the activation and frozen state of the component.

Does 8-vue need to use an event broker to bind events to each element when v-for?

No need!

The event listening of vue to dom is realized through dom.addEventListener, and the event resolution of components is done through event bus.

How does 9-vue respond to arrays? Why not by subscript (assume that the array is [1, 2, 2, 3])

Vue iterates through every key of data to call observe, and when it is an array, instantiates observe

That is, to call

You can see that this will enter a new round of observe.

For our array, each key is a basic type, so vue directly return does not respond to every key of the array.

So how to achieve the response of the array? in the process of observe instantiation, the protoAugment or copyAugment method is called for the array, which points the prototype chain of our array to the arrayMethods object, which is rewritten by methodsToPatch.

Therefore, the upgrade can be triggered when we push/splice the array

10-Why should data be a function

There is a solution to data in the init process. When it is a function, it executes getData to point this to the current instance through call syntax, which will return a unique reference type.

When there are subcomponents in the component, the subcomponent constructor will be built through Vue.extend during the render process, and our configuration items will be merged in the process. If data is not a function, vue will warn you.

This is because when a component is used as a common component, the data in the form of an object is shared, which means that changes at an affect the presentation at b

The realization of 11-nextTick

When the component is upgraded, it goes through dep.notify to watcher's update, which queues watcher push.

And manually call nextTick and pass in flushSchedulerQueue

And this actually takes advantage of asynchronous api to postpone our callback queue to be executed behind the main line.

How to implement 12-computed

Computed watcher judges changes in dependencies and recalculates them only when dependencies are changed. We know that watcher's update will be triggered when the data in data is modified, which will set dirty to true

Then computedGetter will be triggered when computed.key is accessed during render, which will trigger computed re-evaluation.

And reset to false after calculation

At this point, I believe you have a deeper understanding of the "vue core interview question code analysis". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.