1, the difference between v-show and v-if's
v-show display operation is the attribute of the element
v-if the operating element is inserted to create and
v-if there is higher overhead, and v-show has a higher initial cost of rendering, if very frequent switching, use the v-show better, if the conditions are rarely changed at runtime, use the v-if better
Display shows the permissions list of v-if ---- Management System v-show ---- foreground data: Using scenes
2 difference, methods, computed, watch three
Three things in common:
methods, computed, watch are based on function-based
computed and watch are based vue dependent basis, dependent on when the data changes will trigger related functions to achieve data changes
in methods is used to define the function, you need to perform manual, computed and do not want to watch "self-executing" function
Three different points:
calculated attribute is computed, the computed dependent property changes, the calculated attribute will be recalculated and cached. computed attributes are not recalculated when other data is changed, thereby enhancing the performance
watch：
a, watch event mechanism similar to an event listener +
b, the default method watch will not be implemented, the change will occur only depend on the properties of execution
c, watch the default for the first time will not be implemented, you can perform a handler to true immediately by declaring immediate option
d, watch with changes in monitor data, sends a data request to the backend
e, watch the monitor can only change the default handler attribute references, but inside of property is not listening, it can be set to true deep depth monitoring, but also become large performance overhead
f, watch can not monitor the changes in the data values (under special circumstances)
computed and watch usage scenarios:
Data computed by the impact of a number of data, for example: a shopping cart settlement goods, data filtering certain goods
Effect watch a plurality of data, such as data: the network request, the browser adaptive routing object monitoring
3, watch can not monitor an array of situations and solutions
You can not monitor an array of situations:
When a, an array using the index entry directly, for example: arr [indexOfItem] = newValue
B, when modifying the length of the array, for example: arr.length = newLength
solution:
a、this.$set(arr,index,newVal)
b, splice method using an array
4. How to add a property to a responsive object? How do I delete responsive object attributes?
import Vue from "vue"
new Vue({
data:{
obj:{
}
}
})
Vue.set(obj,name,"孙艺珍")
Vue.delete(obj,"name")
5, vue instructions on how to use the custom
Vue.directive ()
A parameter: command name
Parameter Two: function instructions implemented in the callback function parameters First, the instruction binding element, the second is a parameter object, the object has value property represents the result of an expression to return, as well as property modifiers are command modifiers
6, vue way in which components created
Global components: Vue.component ()
A parameter: Component name
Two parameters: CI assembly
Local components: new Vue ({
components: {} key value is the component configuration item name, val value component
})
7, vue how to use a filter
vue.filter ()
A Parameters: Filter Name
Two parameters: a filter implemented method, the method has two parameters, namely the need to filter the data transfer filter parameters
8, vue components in the way of communication which
Father to son:
By binding custom attributes received by props
Parent child transmission:
a, by binding a custom event
b, the scope through slots
Non-traditional values Sons components:
a, create public vue instance of an object
b、EventBus
c, manual event subscription package
d、vuex
9, vue life cycle
beforeCreate () component has just been created (el and uninitialized data)
created () to create a component has been completed, the property is bound, but DOM has not been generated ($ el property does not exist yet)
beforeMount () template before mount (el and data initialization)
() After mounted mount
beforeUpdate () component updates before
() Update the updated components
beforeDestroy () components destroyed before
() After the destruction of the components destroyed
10, vue unidirectional data flow
To transfer data from the parent component subassembly, binding only one-way, sub-assembly can not be changed from the data transfer directly over the parent
Status data can be modified only from one direction, if the parent data transfer components to the n sub-assembly, then the sub-assembly in a modification of this data, it will cause the data in other components may also change. This will prevent accidental changes from the parent component sub-assembly state, resulting in the flow of your application data is difficult to understand, so the data can only be modified from a state direction
11, what is the dynamic component, how to use, and the role of keep-alive
Dynamic Components: Make multiple components use the same mount point, and dynamically switch
Dynamic components: reserved by <component> </ component> element, it is the dynamic binding properties, enables dynamic components
<Keep-alive> </ keep-alive> is an abstract component, it does not render itself into a DOM element
Some common attributes:
include: Type: string or a regular expression
Explanation: The only component name matches are cached
exclude: Type: string or a regular expression
Explanation: any component will not match the name cache
max: Type: Digital
Explanation: The maximum number of component instances can be cached
12, when using the keep-alive two built-in components which will increase the life cycle
activated: when the component is triggered when the active state (into the page of time)
deactivated: When the buffer state trigger
13, vue in the slot of the use, the scope and use of slot slot
When a component used as a tag when the time required if the content of the internal components nested labels, package contents through the nested template assembly is received over <slot> </ slot> within the component
14, why the inside of the component data is not a function of an object
Because each component invocation time regenerates an object, if the object is a case, data will be multiplexed with the data, because the object is a reference type of data, and when the data is a function, each call will return a new Object
15, vue animation how
Animated need to add an element <transition> </ transition> tag,
进入时class类 <name>-enter <name>-enter-active <name>-enter-to
离开时class类 <name>-leave <name>-leave-active <name>-leave-to
16. On the understanding of routing
What is the route: to show different pages or data according to different url address
A front end and a rear end routes into the routing route
Front-end routing:
a, the front end of the route for the development of a single page, SPA
B, the front end of the route is not related to the server, using a hash or a front-end to achieve the historyAPI h5, generally used for switching and display different content
17, route jumps way
①a label jump <a href="#/home"> Home </a>
②router-link jump <router-link to = "/ home"> Home </ router-link>
③ programming routing this. $ Router.push ()
18, the way the route passed by value, which has several
① pass value dynamic routing path =. "/ Home /: id / name" $ route.params received by the this
? ②query traditional values later in the url parameters are not resolved, the query transmitted by a value obtained by this $ route. .query receiving
③ decoupling routing attribute added props arranged routes when true, a page component needs to be received by the parameter receiving props
④ navigation programming this $ router.push ({path:. "/ home", query: { }})
19, routing and configuration items common action
Jump route path
component with respect to the path of the assembly
Route name named
meta meta-information Route
children sub-route configuration parameters (nested route)
props routing decoupling
redirect route redirection
20, navigation programming method it used
Routing jump this. $ Router.push ()
Routing replace this. $ Router.replace ()
Back this. $ Router.back ()
Come this. $ Router.forward ()
21, how to redirect the route? How to achieve routing decoupling?
By configuring redirection route entry redirect
Props disposed in the entries in the routing configuration: true, the internal components to be received by the receiving props
22, how to detect a change of route parameters
Is achieved by listening or property beforeRouteUpdate ()
watch: { "$route"(){ } } beforeRouteUpdate(to,from,next)
23, what is the routed guard? Routing hook function What? And usage scenarios were used to say
Some routing verification before and after the jump: What is the routing guard
Routing common hook function: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
scenes to be used:
beforeRouteEnter: Before entering the route. Record login authentication, the heatmap
beforeRouteUpdate: When routing updates. If the current route has changed, but the time of creation and destruction process does not require assembly, we need to use the hook function
beforeRouteLeave: When routing to leave. Pay exit
24, what is global guard
Whether beforeEach authenticate user logins
25, axios and jQuery's ajax What is the difference
axios advantages:
① support PromiseAPI
② automatically convert json data
③ provides a number of concurrent requests interface
④ client support to prevent CSRF, XSRF
⑤ create http request from the nodejs
ajax advantages and disadvantages:
①jQuery huge project, simply use jQuery ajax introduced throughout unreasonable
② Based on the development of native XHR, but architecture is not clear XHR
26, the data transfer process outlined vuex
When the component data changes, we need to call dispatch method to trigger actions in
actions in the method, there is a commit method, by calling the commit method to trigger mutations in the data modifications
mutations in a process state parameter, when the modification is completed, because the data is responsive, and will be transmitted to the page.
27, two-way data binding principle
vue.js is the use of data in conjunction with hijacking a publisher - subscriber's way to hijack each attribute by Object.defineProperty () setter and getter, posted a message to subscribers when data changes, triggering the corresponding listener callback.
The first step: the need for observer data objects recursively traverse, including sub-attributes of the object attributes, plus both setter and getter, so, assign a value to this object, it will trigger setter, so you can listen to the data changes
Step two: compile command parsing template, the template variable substitution into data, then initialize rendering the page view, and bind each instruction node corresponding update function, add subscribers to monitor data, once the data are subject to change, to close to update notification view
The third step: watcher subscribers as a bridge of communication between the observer and compile, which thing to do is:
① to attribute subscriber (dep) at the instance of itself to add your own inside
② itself must have an update method
③ be property changes dep.notice () notification, can call their own update methods, and trigger callback compile bound, then mission accomplished
28, using vue time will load all of a sudden everything makes initial page very slow, what is the solution
① routing lazy loading
② side rendering service
③ screen skeleton injection
Vue such as single-page application, if the application is not lazy loading, use the file after webpack package will be exceptionally high, it causes too much when entering the home, you need to load the contents, long time, a long white screen will appear, even with the loading is not conducive to the user experience. And you can use lazy loading pages divided, the time required to load a page, can effectively share the load borne by home pressure, reduce load when you first use.
29, how to implement css in privatization vue
vue component is added in the style attribute scoped tags can make css the privatization. However, this method will cause the style can not be modified, because a lot of time fine-tuning needs to be done to the style common components, so caution.
30, the cross-domain common way
① server proxy http-proxy-middleware principle: Request server does not exist between the cross-domain issues
②nginx proxy-pass back with a cross-domain address
③cors proxy server provided in response header: header (Access-Control-Allow-Origin: *)
④jsonp principle: form of action, script in the src, a label and a link href tag will cause a jump page, so that cross-domain issues. jsonP src script principle is to use the jump, the front end of the function passed to the server, the server will then return to the processing function, and so jsonp ajax not the same thing. Cons: only supports get
31, vue using the plug-in process
Vue from Import "VUE" Import plug-in from "plug-in" Vue.use (plug-in)
32, include three commonly vue hook function lifecycle
created: instance has been created after the call is completed, the data has been completed example here observed, properties and methods of operation, watch / event event callbacks. Mounting the stage has not yet begun, $ el property is not yet visible
mounted:. vm el was created $ el replaced, and mount it to invoked the hook on the instance later. If the root instance mounted within a document element, when mounted invoked. $ El document also within vm
activated: When keep-alive component activation call