Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

As an important concept in Vue, Vue life cycle requires us to be familiar with, such as when to initiate a request to the back end of the request data, when to update the data, these are also used in the actual work, is more important!

Vue declares the periodic hook function

Vernacular understanding: a particular function that is automatically executed throughout the life of an instance

beforeCreate

No instantiation, no data access

created

Called after the instance is created

Have access to the data

Can modify the data,

And modifying data does not trigger the updated beforeUpdate hook function

You can make a request in this hook function to access the back-end interface for data

beforeMount

The compiled template is complete, the virtual DOM exists,

Data can be accessed and changed

And modifying data does not trigger the updated beforeUpdate hook function

mounted

Real DOM nodes

This.$refs finds the node represented by ref

Data can be accessed and changed

And modifying data triggers the updated beforeUpdate hook function

beforeUpdate

Call before modification

updated

Call after modificationCopy the code

Note: beforeUpdate updated Monitors all data changes in data

Do not modify data in update beforeUpdate as this will cause an endless loop

beforeDestroy

Called before the instance is unloaded to clean up non-VUE resources and prevent memory leaks

destroyed

activated

Keep-alive is called when the component is cached

deactivated

Called when the cache component is unloaded

watch:

Listen for changes to specific values

Scaffolding environmentv2.x

  1. NPM I vue-cli -g (vue -v can see version number, then install successfully)
  2. Create project folders
  3. vue init webpack

  1. cnpm i
  2. NPM run dev (Start the development environment)
  3. Browser openhttp://localhost:8080

Directory Description of each folder

  • The Vue CLI uses a single file component
  • Template template
  • Script script
  • The style style scoped indicates that the style is only valid for the current component
  • Vue CLI is hot update
  • Import name from Component path Import
  • Export Default Component name Export