1, vue life cycle
initialization:
beforeCreate: generally futile, the data did not mount, DOM is not rendered
created: data has been mounted, but DOM is not rendered, the hook function which can do some asynchronous operation, and change the data without affecting the running hook function in this hook function inside.
beforeMounte: This function represents the DOM is about to be rendered, but has not yet been rendered, like created, do some asynchronous operation
mounted: data has been mounted, the real DOM has rendered out.
Operation:
beforeUpdate: When data changes will perform this function, the function of which is to get the data before the change, do not change the data in the inside, otherwise it will cause an infinite loop
updated: get the data after the update, in which this function generates a new DOM, DOM do to keep up with a virtual contrast, after comparing the differences, and then render real DOM, DOM triggered when the data re-render time in this hook function which you can get to the real DOM.
When destruction:
beforeDestroy: before destruction, do some remedial action
destroyed: two-way data binding, listens are deleted, but still exists in real DOM
2. What is MVVM? And the difference between MVM.
mvvm is a simplified user interface, event-driven programming mode
View is a view of layer, user interaction layer is mainly constructed of html and css
Model is a view of layer, the various logic and processing data manipulation refers back end
It refers ViewModel view data layer, in this layer, acquired from the front end to the rear end of the developer to the Model data conversion processing, make the secondary package, in line with the view data to generate a model using the expected View layer.
MVVM mainly to resolve the MVM feedback is not even a problem.
What 3,90 complete lifecycle function in the end is?
beforeCreate: basically can not do anything, vue data is not injected into the inside, not obtain data information, do some pre-processing functions,
created: data can be obtained, and change the data does not call the hook function is executed hook function
beforeMount: the case has not been generated html page.
mounted: initialization phase last hook function, you can operate the real DOM
Data update when the first call beforeUpdate, and then view the data update triggered after rendering is complete, will perform updated
4. How VUE in package assembly? What components, why should package assembly? Why component data is a function?
Why package assembly?
The main is to decouple, improve code reuse rate.
What are the components?
Library equivalent components, some can be multiplexed in the project or projects in different packaging requirements of the code.
Why is a component of the data function
Let each returned instance can maintain a separate copy of the returned objects.
(Yan Shen)
What is a module?
It corresponds to business logic blocks, the same kind of items in the function logic of packaging requirements.
Modular development: that is the js file in accordance with the functional separation, the introduction of different files according to the needs, from the server
Exploitation components: a single portable, i.e., "as used with the load", does not need to prepare a complex of the basic conditions for the component is declared, non-imperative
5. What axios that?
axios mainly used to send a request to the background. Support promise
axios support concurrent requests may request multiple interfaces simultaneously
axios provides interceptors.
axios possible to prevent cross-site request forgery. That is phishing sites
axios interceptor:
REQUEST request and response into a response intercepted interception
request interception request: unified treatment before sending the request. For example: setting request header headers
response corresponding interception: the next operation is performed in accordance with the code of the response. For example: Due to the current token expires, the interface 401 Unauthorized returned. Then we will jump to the login screen
Axios / FETCH is based on the promise. The latter mainly use the callback form of
fetch out xhr, is the new syntax, the default does not pass cookie. There is also monitor the progress of less than requested
6. What VUEX that? how to use? On that occasion use?
vuex is a specialized vue built state management tools, mainly to solve the status issue shared among multiple groups. Emphasized that centralized management (relationships between components and assemblies into a relationship between the assembly and the warehouse)
Vuex core comprises: state (stored state), mutations (changes in the synchronization state), Actions (asynchronous transmission request, get data), getters (distributed according to the new state before state), modules (module division)
Post a new state data is distributed in a new state based on the state inside getters, Actions send asynchronous request the data, and then change the data synchronization in which mutations
Applications: shopping cart data sharing, Log In Register
7, vue usage instructions
v-if conditions rendering instruction
v-bind command binding properties
v-on instruction monitor events
v-for rendering instruction loop
v-text rendering text
8, navigation hook?
vur-router
spa single-page applications: it refers to the formation of the address change detection switch according to the column corresponding to route
In other words, a project which only a complete HTML page. The rest are HTML components, refresh jump between pages, are switching between components, reducing the sending http request, to improve the user experience,
Js principle is perceived url changes, by this point, you can dynamically remove the contents of the current page using js, then the next page of content to mount on the current page, this route is not time to do the back-end, but the front end is completed , in the end determine which page is displayed, remove unwanted, display needs, this process is the single-page application.
Advantage is: a good interactive experience, a good separation of the front and rear end mode, reducing the pressure on the server, the common set of code.
history hash
Declarative Navigation: router-link
history: This mode will directly change the url address, we need to back-end configuration.
hash: This mode detects change the path identifier # behind the url address bar, thereby triggering event hashchange browser, and then get through the current path identifier location.hash, jump in route operation.
A route, the secondary route? children
Jump routing, in two ways: router-link to this $ router.push ().
Routing guard interceptors
Interceptor: request and response in response to the request interceptor interceptor
REQUEST request intercepted: the same processing before sending a request,
for example: headers setting request header, the version number of the application, the terminal type of
response in response to intercepting the formula: Sometimes we response according to the formula state to the next step,
for example: As the current token expires, the interface returned 401 unauthorized, we need to work to re-login.
Navigation routing hook is vue vue-router
Category:
beforeEach call routing switch when starting
afterEach called when routing switch away from the
local to a single routing
beforeRouteEnter
hook function components
beforeRouterEnter
beforeRouterUpdata
beforeRouteLeave
three attributes:
to about to enter a target object
from navigation to leave the navigation target
next is a function, call resolve with the next step
9, v-model What is that?
Instructions for the form of two-way data binding
There are two operations:
1, v-bind bind the value of a property
2, v-on to the current element bound to an event
10, swiper plug-in data acquisition from the background no problem, css code is what is not a problem, but the picture did not move, how to solve.
Mainly because swiper initialized in advance, but the data has not yet fully come out.
this. $ nextTick () main function is to change data such as DOM will be performed after the completion of the initiator re-rendering.
11、keep-alive
When switching between these components, so you want to keep the formation of the state, to avoid performance problems caused by repeated exaggeration
Principle: When created, and will need to cache the virtual DOM node into the cache, and then carried out according to the reader when the name.
Route lazy loading:
It is when you will need to load, loaded on demand.
Single-page application problem is that all the pages need to introduce a js file, generate a js wepback packed time, this js will then call all the time switch components
Single-page introduces all of a js, a log will also introduce all the js, so slow loading home page. The solution is to route lazy loading.
12, the one-page application
Principle is by detecting a change corresponding to the routing address bar assembly to switch between the components.
A project is only one complete html page, the rest of the components are html, jump page only partial refresh, do not reload all of the resources, fast switching between between components are relatively easy to achieve transition animation . Each time the page jump, you should not need to do html file requests, thus saving a lot of http request is sent, our switch pages when the speed is fast.
Benefits: good interactive experience, the front and rear ends work well separation mode, reduce the pressure on the server, a utility program code backend
Drawback: SEO more difficult, not forward and backward management page, the initial load time-consuming.
13. What is the vue-loader?
vue-loder is a loader assembly to convert vue js mode.
Why this translation module?
Some of the data can be dynamically rendering, optimized for three labels
template virtual write DOM
script writing es6 grammar
The default style can scss grammar, providing scope
And development phase provides heat loader
14. What slot that? how to use?
Slots: named slots, anonymous slot, slot Scope
15. What is a virtual DOM? Relations with key worth?
DOM is recorded using js objects have a copy of a node dom, dom changed when the first diff algorithms perform virtual dom, calculate the minimum difference, and then modify the real dom.
When was the traditional way of operating DOM too, the browser will start execution from start to finish constructing the DOM tree while the process is inefficient, and is represented by a virtual DOM javascrit objects, and operations javascriot is very simple and efficient. Virtual and real dom dom with a layer mapping relationship, a lot of places will need to operate dom to operate virtual dom, dom last updated, thereby improving performance.
Virtual disadvantages of dom:
1, the code more, larger volume
2, memory usage increases
3, a single DOM DOM modifications using virtual small amount but higher costs, it is better to directly modify real fast dom
16, how to understand mvvm framework of vue?
A simplified user interface is event-driven programming equation.
view layer is a layer of view, so that the user interaction layer, mainly to build HTML and CSS
moedl layer data model layer, the various logic refers back end processing and data manipulation
viewmodel layer is a data layer view. In this layer, the front end of the developer model data acquired from the rear end of the conversion processing, so the second package, in line with the view data to generate a model using the expected view layer.
Two-way data binding:
When the view changes to update the model layer, when the layer is changed to update the model view
vue two-way data binding:
vue method subscriber data hijacking & release mode: vue in the creation of vm, will be configured in a number of instances, and then use object.defineproperty these data processing, and data will be processed and will be for these data add getter and setter methods, when data is changed, it will trigger the setter method of the data, thereby triggering watcher method for vm, and then change the data, rendering further vm view view.
17, active-class property which is a component.
Properties router-link assembly vue-router module provides
There are two ways in vue-router to be used in active-class
1, directly in the routing configuration linkActiveClass js file
2, is written in the active-class in router-link
18. What scss that?
scss is a pre-compiler.
19, vue third-party plug-ins:
MIUI-ui-ui element vuex
20. What axios that?
axios is used to send the request. get and post two kinds
get: by defining a get function, he has two parameters, the first parameter to indicate the url address our request, and the second parameter is the request parameters we have to carry, get function returns a promise object, when axios request when the server returns a success to us is reslove return value is returned to the request error when we reject the error value is, finally get thrown through the export function
post: consistent with the method of the get method, but requires setting request header.
21, promise to understand
promise is asynchronous function solutions is an object from the grammatically promise, he can get from the news asynchronous operation, promise three states, pending a wait state, fulfilled the success of state, rejected a failed state status once the change, they will not after the change, to create a promise instance, he will be executed immediately, promise API has two methods: resolve and reject, resolve represents the callback function after success, reject it represents the results returned after the failure of two prototype discharge method: .then .catch methods and, for example, request interface .then get data by capturing error exception .catch
22, the custom instruction method:
vue.directive
钩子：bind、inserted、update、unbind
Parameters: el, binding, vnode
Communication between 23, vue
Sons: subassembly with props, accept the value transfer from the parent component
Child-parent: a parent component life data, write a way to change their own, passed to the sub-assembly, then add components to handle the click event
By value between brothers:
Chain ref: parent element subassembly give traditional values, define a ref attribute on the sub-assembly, so that you can get the value of the sub-assembly by $ refs property of the parent component, can also be Sons, traditional values between brothers
even.bus event bus: simple scenario, with an empty instance as the VUE event bus, communication can be achieved between brothers.