This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Understanding these knowledge points will help you pass the interview and get the offer!
Recently, my friend’s company is hiring Vue front-end engineers and asked me to help organize some interview questions, so I started from the perspective of the front-end interviewer, some important features of the Vue framework, the principle of the framework in the form of questions to organize the summary. Understanding these knowledge points will help you pass the interview and get the offer!
1. Tell us your understanding of SPA single page, what are its advantages and disadvantages?
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
Advantage:
- Good and fast user experience, content changes do not require reloading the entire page, avoiding unnecessary jumps and repeated rendering;
- Based on the above point, SPA has relatively little pressure on the server;
- The front-end and back-end responsibilities are separated, the structure is clear, the front-end is responsible for the interaction logic, and the back-end is responsible for data processing;
Shortcoming
- The initial loading takes a lot of time: In order to realize the function and display effect of a single-page web application, it is necessary to load JavaScript and CSS uniformly when loading the page, and some pages are loaded on demand.
- Forward and backward routing management: Since a single-page application displays all content on one page, the forward and backward functions of the browser cannot be used, and all page switching needs to establish stack management by itself.
- SEO is more difficult: Since all content is dynamically replaced and displayed on a page, it has a natural weakness in SEO.
2. What is the difference between v-show and v-if?
v-if is true conditional rendering, as it ensures that event listeners and child components inside the conditional block are properly destroyed and recreated during the toggle; also lazy: if the condition is false on initial render, nothing do — The conditional block won’t start rendering until the first time the condition becomes true.
v-show is much simpler — the element is always rendered regardless of the initial condition, and simply toggles based on the CSS “display” property.
Therefore, v-if is suitable for scenarios that rarely change conditions at runtime and do not need to switch conditions frequently; v-show is suitable for scenarios that require very frequent switching conditions.
3. Can Vue detect the change by directly assigning a value to an array item?
Due to JavaScript limitations, Vue cannot detect changes to the following arrays:
When you set an array item directly by index, for example: vm.items[indexOfItem] = newValue
When you modify the length of the array, for example: vm.items.length = newLength
4. Can the parent component listen to the life cycle of the child component?
If the parent component listens to the mount of the child component, it will do some logic processing, which can be achieved by the following way of writing:
The above needs to manually trigger the event of the parent component through $emit. A simpler way can be monitored through @hook when the parent component refers to the child component, as shown below:
5. Talk about your understanding of keep-alive?
keep-alive is a built-in component of Vue, which can keep the state of the contained components and avoid re-rendering. It has the following features:
Generally used in conjunction with routing and dynamic components to cache components.
Provide include and exclude properties, both of which support strings or regular expressions, include means that only components with matching names will be cached, exclude means that any components with matching names will not be cached, where exclude has a higher priority than include.
Corresponding to the two hook functions activated and deactivated , when the component is activated, the hook function activated is triggered, and when the component is removed, the hook function deactivated is triggered.
6. Why is the data in the component a function?
Why does the data in the component have to be a function and then return an object, while in the new Vue instance, data can be an object directly?
Because the component is used for reuse, and the object in JS is a reference relationship, if the data in the component is an object, then the scope is not isolated, and the data attribute values in the subcomponent will affect each other. If the data option in the component is a function, then each instance can maintain an independent copy of the returned object, and the data attribute values between component instances will not affect each other; and the instance of new Vue will not be reused, so there is no reference object The problem.
7. The principle of v-model?
We mainly use the v-model instruction in the vue project to create two-way data binding on elements such as form input, textarea, select, etc. We know that v-model is essentially syntactic sugar, and v-model is used internally for different input elements Different properties and throw different events:
- text and textarea elements use the value attribute and input event;
- checkbox and radio use checked attribute and change event;
- The select field has value as prop and change as event.
Take the input form element as an example:
<input v-model=’something’>
equivalent to:
<input v-bind:value=”something” v-on:input=”something = $event.target.value”>
If in a custom component, v-model will by default utilize a prop named value and an event named input , like this:
8. What are the routing modes of vue-router?
vue-router has 3 routing modes: hash, history, abstract. The corresponding source code is as follows:
hash: Use the URL hash value for routing. Supports all browsers, including browsers that do not support HTML5 History Api;
history : Depends on HTML5 History API and server configuration. For details, see HTML5 History mode;
abstract : Supports all JavaScript runtimes like Node.js server side. Routes are automatically forced into this mode if no browser API is found.
Well, today we will organize these, the rest will be written later, I hope that the 8 interview questions organized today will be helpful to you! Thank you!
Recommended reading series of articles on JavaScript design patterns，if you are interested in my articles, you can follow me on Medium or Twitter.
- JavaScript Design Patterns: Observer Pattern
- JavaScript Design Patterns: Strategy Pattern
- JavaScript Design Patterns : Singleton Pattern
Vue.js Interview Questions To Help You Get Job Offers Smoothly was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Maxwell | Sciencx (2022-10-27T23:18:53+00:00) Vue.js Interview Questions To Help You Get Job Offers Smoothly. Retrieved from https://www.scien.cx/2022/10/27/vue-js-interview-questions-to-help-you-get-job-offers-smoothly/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.