current position:Home>Vue content summary

Vue content summary

2022-04-29 09:42:12Aaron Con

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

copyright notice
author[Aaron Con],Please bring the original link to reprint, thank you.

Random recommended