<>vue What is it?

Progressive with data-driven view MVVM frame .

* Progressive : Use step by step vue, Strong selectivity , Can only use vue Small functions of , Do not use it completely vue. Unconstrained meaning .
– mvvm:m: data model , v-view view : Data is bound in both directions , All data changes cause view changes .
<>vue Underlying principles and vue describe

principle :Object.definProperty
vue: advantage : fictitious dom, Modular development , Data driven , Bidirectional response , Browser compatible .
shortcoming : Because it is js Generated virtual dom, Disadvantageous seo Reptile crawling , The first screen load is slower than the static page .

<>data Why function

Because of the component data Will improve , On the root instance data Is an object , Will result in a merge . hold data Become a function , Make , Avoid coverage and conflict

<> What is virtual dom

use js Algorithm dynamically generated dom Called virtual dom

<>diff Algorithm and key Relationship between

Comparison of the same layer , As long as different nodes are found, new ones will be used dom Replace old dom. Because diff Calculated virtual dom No tracking ID , When a virtual loop comes out dom In the list
Any element is modified ,diff The algorithm can't find it , You can only re cycle render a new copy dom. Add key after , each dom Have their own unique identity , It can be modified in this way
Accurately find and modify , This saves performance . therefore ,key The value of must be unique , And random numbers cannot be used , Use time , Subscript is not recommended

<> life cycle

4 Stages 8 Functions , Its biggest problem is automatic initiation ajax Request questions , If running in browser , Should be in mounted launch , If it is server-side rendering , belong created launch .
// Creation phase beforeCreate(){ // Skeleton screen to occupy space // Log upload }, created(){
// launch ajax request ,【 Not recommended 】 because ajax asynchronous , Lifecycle synchronization // When rendering on the server side , This function is the last life cycle // Technical fat }, // Mount phase
beforeMount(){ // Some data can be formatted }, mounted(){ //
launch ajax【 recommend 】 Most front-end projects run in browsers , Very few are server rendering }, // Update phase beforeUpdate(){ // You can modify the data twice },
updated(){ // Only updated data can be observed }, // Destruction phase beforeDestroy(){ // Clear garbage from resident memory // Prompt the user's leaving behavior
}, destroyed(){ }
<> Built in components

<>solt slot

It is an advanced form of custom components , Mostly used for template reuse , Dynamically render incoming content or components .
Usage scenarios : Encapsulation of plug-ins , Website deconstruction layout, etc .

* Anonymous slot
The incoming bulk content in the slot component is solt Label reception
* Named slot
use template label , use v-solt Instruction binding name , In slot assembly slot For component use name Attribute name the slot
* Slot transfer parameter
slot Component pass parameters , Of upstream components template receive
* v-slot: The abbreviation of is #
<>keep-alive Cache component
grammar :`<keep-alive excludes='MyDom'> <MYDom> </keep-alive>` All components wrapped by it , Will be cached -
includes Cache only specified components - excludes Do not cache the specified components
<>keep-alive life cycle
- activated Cached components are activated - deactivated Cached components are disabled
<>component Dynamically load components
Must use is Property dynamic load component name , Liberated a lot of writing v-if or v-show problem .
<>transition Animation components
use name Attribute controls the prefix of the animation class name , Thus, different animation effects can be produced . It is generally used for components nested in routing view or dynamic components .
<>template Template
The first act vue Template label usage , The second is the template as a slot .
<>nextTick

Guarantee all dom It will not be triggered until all updates are completed , For getting dom Updated acquisition dom1 Node data

<> instructions

html
Dedicated to rendering strings dom fragment , The bottom layer is protected against injection attacks , Will js Content escape

text
Only text content can be rendered

for
character string , number , object , array
The difference between traversing an array and an object is that the object has three parameters , Are values respectively , key , subscript

model
Data bidirectional binding instruction , Specifically used on form elements

on
The abbreviation is @, Two usages , Bind native events , Custom events

bind
Native attributes can be bound ,
Bind custom attributes
Binding to a custom component is a parameter transfer method
Dynamic binding properties
v-bind:[name]='data'
Dynamically bind attribute values
v-bind:checked='state'
binding class
v-bind:class='{active:true/false}'
binding style
v-bind:style='{color:color}'

once
Let the values in the element always keep the first rendering , A means to optimize performance , For example, write dead static to the fixed dom After adding , there dom Will not be updated in , Not participating diff Recalculate .

pre
Will not use vue To analyze the contents , But when the string is rendered ,

clock
Prevent flickering , When a value is used in the page , If the value is ajax Return value of , Then the value is null during initialization , Will cause the page to flash .

show
Control the display and hiding of elements , The principle is css of display:none;

if
Control the loading and destruction of elements , If you switch frequently, you should use v-show

slot
Instructions for slots , The abbreviation is #

<> stay vue Why v-for and v-if Cannot be used together

because v-for Priority ratio v-if high
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3"> {{item}} </div>

The above is written as v-for and v-if Coexist , Will first 7 All elements are traversed , Then judge whether it is 3, Combine 3 Hide it , The disadvantage of this is , Rendered useless 3 node , Increase useless dom operation , Recommended use computed To solve this problem :
<div v-for="item in list"> {{item}} </div> computed() { list() { return [1, 2,
3, 4, 5, 6, 7].filter(item => item !== 3) } }
<> What are the routing modes

* hash pattern : adopt # Change of contents after No , trigger hashchange event , Realize route switching
* history pattern : adopt pushState and replaceState switch url, trigger popstate event , Realize route switching , Requires back-end coordination
<> Listening and calculating properties

<> identical

Can monitor data changes

<> Different

Calculate attribute to listen for a value , Return a new value , If this value is not used , Monitoring will not be triggered .
watch Specially monitor the change of a value

There are no data type restrictions on calculation properties ,watch If the listening object or array , Depth monitoring must be enabled deep by true;

watch Can perform asynchronous operations ,computed Yes, return immediately , Therefore, asynchrony cannot be performed

Calculate the attribute as long as the observed data is written , Will immediately monitor the data ,watch Only one data can be monitored .

If the calculation attribute is read-only by default , If you want to modify it, it must be object writing , stay set Function to modify the monitored data .

<> Modifier

<> Incident

* once Event is executed only once
* native Bind native events When Binding Components
* stop Tissue bubbling
* prevent Block default events
<> Attributive

v-bind.sync Pseudo bidirectional data binding
v-bind.prop Turn attributes into invisible attributes

<> instructions

v-model.lazy Triggered when the user loses focus
v-model.number Try to convert to NaN
v-model.trim Remove empty strings at the beginning and end

<> Keyboard modifier

13 and enter Monitor carriage return

<> mouse

right and left

<> Subscription publishing mode

subscriber : Object of sending and receiving , such as dom element
Publisher : Entrusted object , such as proxy

<> Skeleton screen optimization

When a page is rendered based on data , Data has not been obtained , Use skeleton screen to occupy space .

<> Dynamic binding instructions

v-bind;[name].name Is a variable , Assign any value

<> Component communication

<> Father to son

Parent component v-bind transmit , Subcomponents props receive

<> Son to father

Parent component v-on function , Sub component use $emit call

<> Father son bidirectional

* v-model Automatic injection value Value sum input function
* .sync Pseudo data bidirectional binding
<> brother

* Let the parent component act as an intermediary
* $parent Get parent component instance
* $children Get all sub components
<> Cross level

* $root Get root instance object
* $on and $event Use the same parent , For children on send out , Parent use event monitor
* Dark magic vae1.0bus Central event pool .new One vue Let it act as an intermediary , be based on on and event To handle .
* Ultimately vuex
<>vue Project optimization

* Load on demand - Lazy loading of components , Only when the user accesses this component , To load .
* Close source mapping when packaging , It can improve the packaging speed
* Modular code reuse .
* Using dynamic load components component
* Frequently switched elements are preferred v-show
* Avoid using when using circular rendering v-if
* When binding events to a large number of child elements, event delegates are preferred
* Use sprite graph to optimize loading small icons
* Use the skeleton screen to optimize the problem of slow loading of the first screen
<> Custom system ( instructions / filter ) plug-in unit

<> Custom instructions directive

extend vue No command function , give an example : When the page opens, let input Get focus

* grammar directives:{ focus:{ inserted(el,binding,olnode){ // el Is a bound element object //
binding yes outions, There are value // oldnode Old virtual dom } } }
<> Custom filter filters

Without modifying the original data , Process data , Return new data .

* grammar : // statement filters:{ add(value){ return value+666 } } // use {{n | add}}
<> object .install method

vue The plug-in of is a comprehensive functional package .

* grammar : // statement exprot default { install(value,option){ /// *** value.filters } }
// use Vue.use(plugin,{lg:trye})
<>mixin Mix in

Reduce the code volume of the current component , Extract some irrelevant code outside , It can be reused for other components .
Mix in yes js code reuse .
however , It is not used globally , Otherwise, conflicts will occur

* If the value mixed in or the repetition of functions and components , Be sure to use the one in the component .
* If the life cycle and components are repeated in the mix , Mix first and then components , Will merge
<>spa Single page application

There is only one in the project html file .

<>v-model principle

object.defineProtperty

<>el and $mount difference

el Yes configuration ,mount Is the method
el than mount Mount fast .mount Wait for everything

<>Vue.set method

<> because object.defineProtperty Shortcomings of the method , Properties that are dynamically added or deleted cannot be listened for , All use this method .

<> Underlying principle of routing

history and loaction.hash

<> Parameter transmission mode of route

* query use ? be similar to get Request mode parameter transmission
* params Dynamic fields of dynamic routing
* hash wrong hash Use in mode # Transmission parameter , Will be hash receive
* meta metadata , Meta information , The routing configuration is dead .
* Attribute transfer parameter , All routing components rendered by him will receive props attribute
<> Interceptor of route

Global guard : Front guard beforeEach Used for global routing permission management Rear guard afterEach No, next, It is best to report logs
Exclusive routing :beforeEnter Before confirming entry
Component guard :beforeRouteUpdate Get fields of dynamic components to update , leave beforeRouteLeave Used to confirm the user's leaving behavior , Form page

<>router and route difference

router yes new of vueRouer Instance object of , It has all the functions of routing .
route Only information indicating the current route

<> Declarative and programmatic navigation

Declarative means <router-link>
Programming refers to this.$router.push

<> Jump mode

push Add a record to the history
go Forward and backward in history , Value is a number
back back off
forward forward
replace Replace the last address in the history with the current address

<> Route configuration mode

Dynamic routing : use /:name
Nested Route : use children
alias :alias Multiple can be set with array wrapping
redirect :redirect
Named route :name attribute

<> Components of routing

Navigation , view , to configure

<> Lazy loading of routing components

A function returns import Function loading component
() => import('./component')

<> Listen for scrolling events

<>scrollBehavior You can set the initial position of the scroll bar , When the route jumps, it will execute

<>vuex Workflow

1.store Inside state Use in components
2. Component usage dispatch call action Distribution business
3.action use commit call mutation
4.mutation call state Make modifications
5. When state After change ,store Notify component updates

<>vuex Components of

* state
* getters
* mutations
* modules
* actions
* plugins
* strict
<> The difference between strict and non strict modes

<> Strict mode

mutations Only sync code can be run , And can only be modified here state

<> Non strict mode

state Can be modified anywhere ,mutations You can also execute asynchronous code

<> auxiliary function

* matState
* mapGetters
* mapMutations
* mapActions
* createNamespacedHelpers
<>mutation and action difference

mutation Type unique modification state, And can only run synchronization code ,action Designed to handle asynchronous operations , Only by calling mutation modify state

<>state and getter Relationship between

state Equivalent to the data,getters Equivalent to the computed
getters Is based on state Calculated

<>vuex Modularization of

modules For large project development , Mainly responsible for the exclusive status management of independent modules

default state and getter It belongs to the scope of the current module , however mutation and action Function is automatically promoted to the root store Under the object , So namespace is required , Each module uses namespaced Attribute on

<>ui Use of Library

pc:element-ui move :vant

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?