Vue content summary

1. vue Understanding the life cycle of

vue Hook function of life cycle

• beforeCreate
  Instance just created in memory , It's not initialized yet data and methods
• created
  The instance has been created in memory , here data and methods Created
• beforeMount
  At this point, the compilation of the template is completed , But not rendered to the interface
• mounted
  The template has been rendered to the browser , The creation phase is complete , Coming into operation
• beforeUpdate
  Call... When data is updated , Suitable for accessing existing before updating DOM
• updated
  The page is re rendered , Data and in the page data bring into correspondence with
• beforeDestroyed
  Call before instance destruction , The instance is still available
• destroyed
  Call after instance destruction , If the hook function is called , Corresponding vue All instructions of the instance are unbound , All time listeners are removed , Sub instances are also destroyed

2. vue Parent child component life cycle call order

• Load Render Pass
  Father beforeCreate -> Father created -> Father beforedMount -> Son beforeCreate -> Son created -> Son beforeMount -> Son mounted -> Father mounted
• Subcomponent update process
  Father beforeUpdate -> Son beforeUpdate -> Son updated -> Father updated
• Destruction process
  Father beforeDestroy -> Son beforeDestroy -> Son destroyed -> Father destroyed

3. keep-alive Understanding of components

• keep-alive Components ： It is an abstract component , It does not render itself DOM Elements , Use keep-alive When wrapping dynamic components , Will cache inactive component instances instead of destroying them
• scene ： When we use dynamic components to switch content , Direct switching will cause the previous component state to return to the default state , We can cache the previous state through keep-alive Dynamic package components

4. vue In which life cycle are asynchronous requests invoked

• created、beforeMount、mounted
• Recommended in the created The asynchronous request is invoked in the hook function
  • comparison beforeMount、mounted Faster access to server data 、 Reduce pages loading Time
  • ssr（ Server rendering ） I won't support it beforeMount、mounted Hook function

5. vue-if and v-show The difference between

• The same thing ： Control the display and hiding of elements
• Difference ：
  • v-show The first rendering will be compiled , Will add elements to DOM Node , adopt display: none Control hide , Will trigger page redrawing
  • v-if Whether to compile will be determined according to the true or false condition , Every time conditions change, they will tell DOM Node to add or remove elements , Will trigger page reflow , And cause redrawing