It is another graduation season. Many students at the front end of the study feel pressured in the face of fierce job search competition and want to know what questions asked by corporate job fairs. Today, the editor of Qianfeng Zhengzhou Web Front-end Training will share with you the relevant information during the interview with senior web front-end engineersVueProblems and analysis.
1. What is Vue?
It's a buildData-drivena progressive framework for web interface. The goal is to implement responsive data binding and combined view components through the simplest API possible. It is not only easy to get started, but also easy to useThird-party libraryOr existing project integration, Vue is also fully capable of providing drivers for complex single-page applications when used in conjunction with single-file components and libraries supported by the Vue ecosystem.
2. The principle of two-way binding data in Vue
Vue implements two-way data binding mainly: using data hijacking combined with the "Publisher-Subscriber" mode, hijacking the setters and getters of each attribute through (), publishing messages to subscribers when data changes, triggering corresponding listening callbacks.
3. How to remove # from URLs in Vue
vue-routerThe hash mode is used by default, so when the route is loaded, the URL in the project will come with "#". If you don't want to use "#", you can use another mode history of vue-router:
new Router({
mode: 'history', routes: [ ]
})
It should be noted that when we enable history mode, since our project is a single-page application, when the route jumps, there will be "404" situations when the static resources are not accessible. At this time, the server needs to add a candidate resource covering all situations: if the URL does not match any static resources, the same "" page should be returned.
4. Understanding of Vue life cycle
A Vue instance has a complete life cycle, and the life cycle refers to the process from the beginning of creation to the destruction of an instance.
beforeCreated(): Execute between instance creations, data is not loaded.
created(): After the instance is created and data is loaded, the data can be initialized and executed before DOM rendering.
beforeMount(): The virtual DOM has been created and the data has been changed for the last time before the data is rendered.
mounted(): The page and data rendering are completed, and the real DOM mount is completed.
beforeUpadate(): Triggered before re-rendering.
updated(): The data has been changed and the DOM has been rendered again. Changing the data will fall into a dead loop.
beforeDestory() and destroyed(): The former is executed before destruction (the instance is still fully available), while the latter is executed after destruction.
5. Talk about the advantages and disadvantages of one-way data flow and two-way data binding
One-way data flow: As the name implies, data flow is one-way. The direction of data flow can be tracked, with a single flow, and it can be faster when tracing problems. The disadvantage is that it is not convenient to write. To change the UI, various actions must be created to maintain the corresponding state.
Two-way data binding: The data are interconnected, and the data change operation is hidden inside the framework. The advantage is that in scenarios where there are more form interactions, a large amount of business-independent code will be simplified. The disadvantage is that the local state changes cannot be tracked, which increases the difficulty of debugging when errors occur.
6. Vue-router routing implementation
Routing is a way to interact with the backend server. Requesting different resources through different paths is one of the functions of routing.
7. The difference between v-if and v-show
When using v-if, if the value is false, the page will not have this html tag generated.
v-show does not exist regardless of whether the value is true or false, but the display in CSS is displayed or hidden.
8. The difference between $route and $router
$router is a VueRouter instance. If you want to navigate to a different URL, use the $ method.
$route is the current router jump object that can get name, path, query, params, etc.
9、VueComponentsWhy must data be a function
Because the characteristics of JS itself brings, if data is an object, then since the object itself is a reference type, when we modify one of the properties, it will affect the data of all Vue instances. If data is returned as a function, the data properties of each instance are independent and will not affect each other.
10、jQueryWhat is the difference between Vue
jQuery focuses on the layer and implements some logical rendering of the page by operating the DOM; Vue focuses on the data layer, and through the two-way binding of the data, it is ultimately reflected at the DOM level, reducing DOM operations. Vue uses componentization ideas, which makes the responsibilities of the project subset clear, improves development efficiency, facilitates reuse, and facilitates collaborative development.
Vue is one of the tools that senior web front-end engineers must master, and it is also the key knowledge for enterprise inspection. Of course, if you want to successfully get a high salary for a job, mastering the interview questions is only one aspect, and you also need systematic and comprehensive knowledge and corresponding project experience. If you want to know more about the web front-end job interview skills, you can follow the WeChat official account of "Qianfeng Zhengzhou Campus".