Home > Article > Web Front-end > Check out these 3 must-ask interview questions to test your Vue mastery!
This article will share with you 3 Vue must-ask interview questions to test your mastery of Vue and see if you can answer them correctly!
This question is to examine the interviewer’s Vue basics. Generally, anyone who has used Vue will definitely use v-show and v-if. (Learning video sharing: vue video tutorial)
v-if
instruction is used to conditionally render a piece of content, while v-show
Also used for conditional display elements.
Elements using v-show
will be rendered and retained in the DOM, and CSS display will be used to control the display and hiding of the elements. v-show
does not support the <template>
element, nor does v-else
.
Using v-if
is "true" conditional rendering, and the element's event listeners and subcomponents will be destroyed and rebuilt. v-if
is also lazy. If the initial condition is false, it will not be rendered, and the first rendering will not be triggered until it becomes true. And v-show will render regardless of the conditions, and control the display and hiding according to the display attribute.
Generally speaking, v-if has greater switching overhead, while v-show only has initial rendering overhead. If the element needs to be switched frequently, use v-show. If the conditions rarely change, use v- if is better.
v-model
command is mainly used in <input>
, <select>
, <textarea>
On form elements or components to achieve two-way binding of data. It's not that magical, it just listens to the user's input events to update the data.
v-model will trigger different events based on different elements:
input
events; change
event; Take the input form as an example:
<input v-model='something'> <!-- 等价于 --> <input v-bind:value="something" v-on:input="something = $event.target.value">
If in a custom component:
<!-- 父组件: --> <ModelChild v-model="message"></ModelChild> <!-- 子组件: --> <template> <div>{{value}}</div> </template> <script> export default { props:{ value: String }, methods: { test1(){ this.$emit('input', '小红') }, }, } </script>
in In the parent component, if the value of the message is modified, the value field of the props in the child component will be automatically changed. If the input event is triggered in the child component, the message value in the parent component will also be changed.
This question is also a very common question in interviews. The more ways you can answer it, the more proficient you are in Vue. Generally, communication between components can be roughly divided into three types: parent-child component communication, grandfather-grandson component communication, and sibling component communication. Let’s look at them separately:
props / $emit
Suitable for communication between parent and child components
ref
and $parent / $children
are suitable for communication between parent and child components
ref
If used on a component, you can get the instance object of the component and manipulate the data$parent
/ $children
: You can also access the parent/child instance object for data operationsEventBus ($emit/$on)
Suitable Communication between father-son, grandfather-grandson, and brother components
EventBus
This method has many disadvantages. It is not recommended for everyone to use it in projects. Just know this implementation idea. ##$attrs/
$listeners Suitable for grandfather-grandson component communication
: Contains attribute bindings and events in the parent scope that are not component props and custom events, and can be passed in via
v-bind="$attrs" Internal components.
: Contains v-on event listeners (without .native decorators) in the parent scope. It can be passed into internal components via
v-on="$listeners".
Note: Removed in Vue 3. Event listeners are now part of $attrs
.
provide / inject Suitable for grandfather-grandson component communication
Vuex is suitable for father-son, grandfather-grandson, and brother component communication
(Learning video sharing: web front-end development, Basic programming video)
The above is the detailed content of Check out these 3 must-ask interview questions to test your Vue mastery!. For more information, please follow other related articles on the PHP Chinese website!