1. Active-class is the attribute of which component? How to define nested routing?
A: The router-link component of the vue-router module.
2. How to define the dynamic routing of vue-router? How to get the passed dynamic parameters?
A: In the index.js file in the router directory, add /:id to the path attribute. Use the params.id of the router object
3. What kinds of navigation hooks does vue-router have?
Answer: There are three types, one is the global navigation hook: router.beforeEach(to, from, next), which is used to judge and intercept before jumping. The second: hooks in components; the third: separate routing of exclusive components
4. What is scss? What are the steps to install? What are the characteristics?
A: Preprocess CSS, write the current function of CSS, define variables, and nest. First install loader modules such as css-loader, node-loader, sass-loader, etc., add an extension: extension to the webpack-base.config.js configuration file, and add another module: test, loader in the module
4.1. What is scss? What are the installation and usage steps in vue.cli? What are the characteristics?
A: The pre-compilation of css.
Steps for usage:
Step 1: Use npm to download three loaders (sass-loader, css-loader, node-sass)
Step 2: Find webpack.base.config.js in the build directory, and add an extension .scss to the extends property
Step 3: Still in the same file, configure a module attribute
Step 4: Then add the lang attribute to the style tag of the component, for example: lang=”scss”
What are the major features:
1. Variables can be used, for example ($variable name=value);
2. You can use a mixer, such as ()
3. Can be nested
5. What is mint-ui? how to use? Name at least three component usage methods?
Answer: Vue-based front-end component library. npm install, then import styles and js, vue.use (mintUi) is imported globally. Import locally in a single component: import {Toast} from 'mint-ui'. Component 1: Toast ('login successful'); Component 2: mint-header; Component 3: mint-swiper
6. What is v-model? how to use? How to bind events to tags in vue?
Answer: Two-way binding, instructions (v-class, v-for, v-if, v-show, v-on) can be implemented. The data attribute of vue's model layer. Bind the event: <input @click=doLog() />
7. What is axios? how to use? Describe the process of using it to implement the login function?
A: A module that requests background resources. npm install axios -S is installed, and then the transmission is cross-domain, which needs to be set in config/index.js in the configuration file. If the background is Tp5, define a resource route. Use import in js, then .get or .post. The return is in the .then function if it succeeds, and in the .catch function if it fails
8. In the advanced axios+tp5, what is the operation of calling axios.post('api/user')? What about axios.put('api/user/8')?
A: Cross-domain, add user operation, update operation.
9. What is a RESTful API? how to use?
A: It is an API standard, stateless request. The requested routing address is fixed. If it is tp5, configure the resource routing in the routing configuration first. Standards are: .post .put .delete
10. What is vuex? how to use? Which functional scenarios use it?
Answer: State management in the vue framework. Introduce store in main.js and inject. Created a new directory store, ...... export . Scenarios are: In a single-page application, the state between components. Music playback, login status, add to cart
11. What is the mvvm framework? What is the difference between it and other frameworks (jquery)? Which scenarios are suitable?
Answer: A model+view+viewModel framework, data model model, viewModel connect two
Difference: vue data-driven, the view layer is displayed through data instead of node operations.
Scenario: Scenarios with more data operations are more convenient
12. What are the methods of custom instructions (v-check, v-focus)? What hook functions does it have? What other hook function parameters?
Answer: Globally define directives: There are two parameters in the directive method of the vue object, one is the directive name and the other is the function. Define directives in components: directives
Hook functions: bind (triggered by binding events), inserted (triggered when a node is inserted), update (relevant updates in components)
Hook function parameters: el, binding
13. Name at least 4 Vue commands and their usage?
Answer: v-if: determine whether to hide; v-for: data loop out; v-bind: class: bind an attribute; v-model: realize two-way binding
14. What is vue-router? What components does it have?
A: Vue is used to write a plugin for routing. router-link, router-view
15. What are the navigation hooks? What parameters do they have?
Answer: Navigation hooks include: a/global hooks and hooks exclusive to components. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave
Parameters: there are to (the route to go to), from (the route to leave), next (must use this function to go to the next route, if not, intercept it) the most commonly used are these
16. What is the principle of two-way data binding in Vue?
Answer: vue.js uses data hijacking combined with the publisher-subscriber model Object.defineProperty()to hijack each attribute setter, getterpublishes messages to subscribers when data changes, and triggers corresponding monitoring callbacks.
Specific steps:
Step 1: Recursive traversal of the data object of the observe is required , including the attributes of the sub-attribute object, and the settersum is added. In getter
this case, assigning a value to this object will trigger setter, and then the data change can be monitored.
The second step: compile and parse the template instructions , replace the variables in the template with data, then initialize the rendering page view, bind the update function to the node corresponding to each instruction, and add subscribers to monitor the data. Once the data changes, receive to the notification, update the view
Step 3: Watcher subscriber is the bridge of communication between Observer and Compile. The main things to do are:
1. Add itself to the property subscriber (dep) when it instantiates itself
2. It must have an update() method
3. When the property changes dep.notice() notification, it can call its own update() method and trigger the callback bound in the Compile, then it will be successful.
Step 4: MVVM acts as the entry point of data binding, integrates Observer, Compile and Watcher , monitors its own model data changes through Observer, parses and compiles template instructions through Compile, and finally uses Watcher to set up the connection between Observer and Compile. Communication bridge to achieve data change -> view update; view interaction change (input) -> two-way binding effect of data model change.
ps: The answers to the 16 questions are also suitable for the interview question " How is vue data implemented?" .
17. Please elaborate on your understanding of the vue life cycle?
A: There are 8 stages in total: before/after creation, before/after loading, before/after update, and before/after destruction.
Before/after creation: In the beforeCreated phase, the mount element $el of the vue instance and the data object data are both undefined and have not been initialized. In the created phase, the data object data of the vue instance is available, but $el does not yet.
Before/after loading: In the beforeMount stage, the $el and data of the vue instance are initialized, but they are still virtual dom nodes before mounting, and data.message has not been replaced. In the mounted stage, the vue instance is mounted and the data.message is rendered successfully.
Before/after update: When the data changes, the beforeUpdate and updated methods are triggered.
Before/after destruction: After the destroy method is executed, changes to data will no longer trigger the periodic function, indicating that the vue instance has released event monitoring and binding to dom at this time, but the dom structure still exists
18. Please tell me the process of encapsulating vue components?
A: First of all, components can improve the development efficiency of the entire project. It can abstract the page into multiple relatively independent modules, which solves the problems of our traditional project development: low efficiency , difficult maintenance , and reusability .
Then, use the Vue.extend method to create a component, and then use the Vue.component method to register the component. Child components need data and can accept definitions in props. After the child component modifies the data, it wants to pass the data to the parent component. The emit method can be used.
19. How did you meet vuex?
Answer: vuex can be understood as a development mode or framework. For example, PHP has thinkphp, Java has spring, etc.
Centrally manage the changes of driving components through state (data source) (such as spring's IOC container for centralized management of beans).
The application-level state is centralized in the store; the way to change the state is to submit mutations, which is a synchronous thing; asynchronous logic should be encapsulated in actions.
20. What is vue-loader? What are the uses for using it?
A: A loader that parses .vue files and converts template/js/style into js modules.
Purpose: js can write es6, style can be scss or less, template can add jade, etc.
21. Please tell me the usage of each folder and file in the src directory in the vue.cli project?
Answer: The assets folder is for static resources; components is for components; router is for defining routing-related configuration; view view; app.vue is an application main component; main.js is the entry file
22. How to use custom components in vue.cli? Have you encountered any problems?
Answer: Step 1: Create your component file (smithButton.vue) in the components directory, the script must export default {
Step 2: Import in the required page (component): import smithButton from '../components/smithButton.vue'
Step 3: Inject into the components property of the sub-component of vue, components: {smithButton}
Step 4: Use it in the template view view, <smith-button> </smith-button>
The problem is: smithButton is named, when it is used, it is smith-button.
23. Talk about your understanding of template compilation of Vue.js?
Answer: In short, it is first converted into an AST tree, and then the resulting render function returns VNode (Vue's virtual DOM node)
Detailed steps:
First, the template is compiled into an AST syntax tree (abstract syntax tree is a tree-like representation of the abstract syntax structure of the source code) through the compile compiler. compile is the return value of createCompiler, which is used to create a compiler. In addition, compile is also responsible for merging options.
Then, the AST will go through the generate (the process of converting the AST syntax tree into a render funtion string) to get the render function. The return value of render is VNode, which is the virtual DOM node of Vue, which contains (tag name, child node, text, etc. etc.)
Challenge:
1. Vue responsive principle?
2. How does vue-router work?
3. Why choose vue? Advantages and disadvantages compared to other frameworks?
4. How does Vue implement parent-child component communication, as well as non-parent-child component communication?
5. What is the difference between vuejs, angularjs and react?
6. What is vuex used for?
7. Vue source code structure