Frequently asked Questions about VUE, a set of progressive JavaScript frameworks for building user interfaces that are the preferred front-end framework for startup projects. Many enterprises in the recruitment of front-end engineers will test their knowledge of VUE, the next good programmer Web front-end training xiaofan to share common VUE interview questions to answer questions.
1. How to watch internal changes of an object?
If you only want to listen for a property change in obj, you can directly listen for obj.key.
watch: {
‘obj.question’: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing… ‘
this.debouncedGetAnswer()
}
}
If you listen deeply for the entire OBJ
watch: {
obj: {
handler: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing… ‘
this.debouncedGetAnswer()
},
deep: true,
immediate: true
}
}
The watch listener is not triggered when the value is first bound with immediate. If you use immediate, the watch listener is executed when the value is first bound.
vue
2. Why add key to v-for loop?
The DOM rendering of a Vue is a virtual DOM, and when the data changes, the DIff algorithm will only compare the changed parts. If the order of the data items changes, instead of moving the DOM elements to match the changed data items, Vue will simply reuse each element here and make sure that it displays every element that has been rendered under a specific index.
3. What does $nextTick do?
In some cases, DOM operations need to be performed immediately after data changes, and the DOM obtained is still the DOM obtained before data refresh, which cannot meet the requirements. In this case, $nextTick is used.
What is the use of $set in vue
Add a property to a reactive object and make sure the new property is also reactive and triggers view updates. It must be used for object type to add new attributes to response, because the vue cannot detect common new properties (such as this. MyObject. NewProperty = ‘hi’).
5. What are the methods of value transfer between components?
1) Provide/inject
This pair of options needs to be used together to allow an ancestor component to inject a dependency into all of its descendants, regardless of how deep the component hierarchy is, and remain in effect as long as the upstream and downstream relationship is established.
2) the Vue. Observables
Make an object responsive. It is used internally by VUE to process objects returned by the data function.
The returned object can be used directly in rendering functions and computed properties, and will trigger an update if it changes. It can also serve as a minimal cross-component state store for simple scenarios.
3) $attrs
Contains property bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components.
4) $listeners
V-on event listeners that contain the parent scope (excluding the. Native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components.
5) props
6) $emit
7) eventbus
8) vuex
9) $$children parent / / ref
6. What are the vUE lifecycle functions?
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
Destroyed