The life cycle

Lifecycle concept: The process from creation to destruction of a VUE instance is the lifecycle.

Hook (built-in) functions

Role: At a specific point in time, consult pending operations

Scenario: After the component is created, an Ajax request can be made in the Created lifecycle function to initialize data

classification

There are 4 stages and 8 methods

The Vue web site (Cn.vuejs.org/v2/guide/in…

Life cycle diagram

1. Initialization phase

Explanation of meaning:

1. New Vue() — Vue instantiation (the component is also a small Vue instance)

2.Init Events & Lifecycle – Initializes Events and Lifecycle functions

3. BeforeCreate — The lifecycle hook function is executed

4.Init Injections&reActivity — Add data and methods inside Vue

5. Created – Lifecycle hook functions are executed and instances are created

6. Next comes the compile template phase — start the analysis

7.Has el option? – Is there an EL option – Check where to hang it

No. Call the $mount() method

Yes, continue checking the template option components/Life.vue

1 <script> 2 export default {3 data(){4 return {5 MSG: "hello, Vue" 6} 7}, 8 // 一 10 beforeCreate(){11 console.log("beforeCreate -- execute ");  12 console.log(this.msg); 16 created(){17 console.log("created -- executed "); 18 console.log(this.msg); // hello, Vue 19 20 this.timer = setInterval(() => {21 console.log(" ha ha ha "); 22 }, 1000) 23 } 24 } 25 </script>Copy the code

App.vue

1 <template> 2 <div> 3 <h1>1. lifecycle </h1> 4 <Life></Life> 5 </div> 6 </template> 7 8 <script> 9 import Life from './components/Life' 10 export default { 11 components: { 12 Life 13 } 14 } 15 </script>Copy the code

2. Mount stage

Explanation of meaning:

1. Check the template option

Compiling template returns the render function

None – Compile el option tag as template(template to render)

2. Before mounting the virtual DOM to the real DOM

BeforeMount – Life cycle hook functions are executed

4. Create… Attach the virtual DOM and rendered data to the real DOM

5. The real DOM is mounted

Mounted – The lifecycle hook function is executed components/Life.vue

1 <template> 2 <div> 3 <p> Learn life cycle - watch console print </p> 4 <p id="myP">{{MSG}}</p> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 // ... Omit other code 11 12 // two. Mount 13 // Real DOM before mounting 14 // Scenario: Preprocesses data without triggering the updated hook function 15 beforeMount(){16 console.log("beforeMount -- execute "); 17 console.log(document.getElementById("myP")); 23 {24 console.log("mounted "); // null 18 19 this. MSG = "revalue" 20}, 21 // Real DOM mounted 23 {24 console.log("mounted "); 25 console.log(document.getElementById("myP")); // p 26 } 27 }Copy the code

3. Update phase

Explanation of meaning:

1. Update DOM before data changes in data

BeforeUpdate – The lifecycle hook function is executed

3. The Virtual DOM… – The virtual DOM is re-rendered and patched to the real DOM

4. Updated — The lifecycle hook function is executed

5. When data changes – repeat the cycle

 components/Life.vue

1 < template > 2 < div > < p > learning life cycle - see the console print < / p > 4 < p id = "myP" > {{MSG}} < / p > < ul id = "myUL" > 5 < li v - for 6 = "(val, Index) in arr" :key="index"> 7 {{val}} 8 </li> 9 </ul> 10 < button@click ="arr.push(1000)" </button> 11 </div> 12  </template> 13 14 <script> 15 export default { 16 data(){ 17 return { 18 msg: "hello, Vue", 19 arr: [5, 8, 2, 1] 20} 21}, 22 //... Omit other code 23 24 // three. Update 25 // Prerequisite: Data data changed before executing 26 // Before updating 27 beforeUpdate(){28 console.log("beforeUpdate -- executing "); 29 console.log(document.querySelectorAll("#myUL>li")[4]); 33 updated(){34 console.log("updated -- executed "); 35 console.log(document.querySelectorAll("#myUL>li")[4]); // li 36 } 37 } 38 </script>Copy the code

4. Destruction stage

Explanation of meaning:

1. When $destroy() is called — such as when the component DOM is removed (example v-if)

BeforeDestroy – The lifecycle hook function is executed

3. Remove the data monitor, subcomponents, and event listeners

4. After the instance is destroyed, a hook function is finally triggered

5. Destroyed — Lifecycle hook functions are executed

 

components/Life.vue

1 <script> 2 export default { 3 // ... Omit other code 4 5 // 4. Destroy 6 // Prerequisite: V-if ="false" Destroy Vue instance 7 // Scenario: Remove global events, remove current components, timers, timers, eventBus Remove events $off method 8 beforeDestroy(){9 // console.log('beforeDestroy -- execute '); 11}, 12 destroyed(){12 // console.log("destroyed -- executed "); 14 } 15 } 16 </script>Copy the code

App.vue

  • Click the button to remove the Life component from the DOM -> cause the Life component to enter the destruction phase
1 <Life v-if="show"></Life> 2 < button@click ="show = false"> 3 4 <script> 5 data(){6 return {7 show: true 8 } 9 }, 10 </script>Copy the code
1 <Life v-if="show"></Life> 2 < button@click ="show = false"> 3 4 <script> 5 data(){6 return {7 show: true 8 } 9 }, 10 </script>Copy the code

axios

Axios is basically used

Features:

  • Supports Ajax requests sent by clients
  • Support server node.js to send requests
  • Support Promise related usage
  • Interceptor functionality that supports request and response
  • Automatically convert JSON data
  • The underlying IMPLEMENTATION of AXIos is still a native JS implementation, encapsulated internally by Promise

The basic use

1 axios({2 method: 'request method ', // get post 3 URL:' request address ', 4 data: {// concatenate the parameters to the request body, 5 XXX: XXX, 6}, 7 params: {// concatenate the parameters to the request line, get the parameters of the request 8 XXX: XXX 9} 10}). Then (res => {11 console.log(res.data) // Background result 12}). Catch (err => {13 console.log(err) // Background error 14})Copy the code

Basic use of Axios – get data

1 <template> 2 <div> 3 <p>1. Get all book information </p> 4 < button@click ="getAllFn" <script> 9 // Goal 1: Get all book information 10 // 1. Download axios 11 // 2. Import Axios 12 // 3. 13 Import axios from "axios"; 14 export default { 15 methods: { 16 getAllFn() { 17 axios({ 18 url: "Http://123.57.109.30:3006/api/getbooks", 19 method: 20}). Then ((res) => {21 console.log(res); 22}); 23 // axios()- get the Promise object 24}, 25} 26};Copy the code

Axios basically uses – parameter passing

GET request method: use params to pass parameter, concatenate to URL? behind

POST request mode: data is used to transmit parameters, and the parameters are automatically loaded into the request body; Generally in the request weight transfer data to the background

Note that the original result of the AXIos function call is a Promise** object

2. The default data format sent to the background request body is JSON string format

Global configuration

Syntax: axios.defaults.baseURL=” Project root path”