5.Vue的生命周期

Vue中的所有组件都是有生命周期，从创建开始到组件的销毁，一共会经历8个过程，由8个钩子函数控制

首先什么是钩子函数？

钩子函数是一种面向切面编程的思维，即AOP编程，在drf源码中被大量使用
OOP：面向对象编程
面向函数编程

beforeCreate：组件创建之前调用
1. 无法使用对象内数据
2. 无法使用模板
created：组件创建之后调用,以后发送ajax请求在该钩子函数中
1. 可以使用对象内数据
2. 无法使用模板
beforeMount：渲染DOM之前调用
1. 可以使用对象内数据
2. 无法使用模板
mounted：渲染DOM完成后调用
1. 可以使用对象内数据
2. 可以使用模板
beforeUpdate:重新渲染页面之前调用
updated：重新渲染页面之后调用
beforeDestroy：销毁对象之前调用
destroyed：销毁对象之后调用：销毁定时器等资源清理

前四个函数在页面初始化的时候调用，五六则是在更新页面的时候调用，最后两个则是销毁对象的时候使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!-- 引入vue.js-->
 7     <script src="js/vue.js"></script>
 8 </head>
 9 <body>
10 <div id="app">
11     <!--    使用组件-->
12     <hr>
13     <Victor v-if="res"></Victor>
14     <hr>
15     <button @click="handler">删除Victor</button>
16 </div>
17 </body>
18 <script>
19     // 定义一个组件
20     Vue.component('Victor', {
21         template: `
22           <div><h1>我是一个组件:{{ name }}</h1> <button @click="handler">点我</button></div>`,
23         data() {
24             return {name: 'kunmzhao'}
25         },
26         methods: {
27             handler(){
28                 this.name = 'Victor'
29             }
30         },
31         beforeCreate() {
32             console.log('组件创建之前',this.name,this.$el)
33         },
34         created() {
35             console.log('组件创建之后',this.name,this.$el)
36         },
37         beforeMount() {
38             console.log('DOM渲染之前',this.name,this.$el)
39         },
40         mounted() {
41             console.log('DOM渲染之后',this.name,this.$el)
42         },
43         beforeUpdate() {
44             console.log('更新之前')
45         },
46         updated() {
47             console.log('更新之后')
48         },
49         beforeDestroy() {
50             console.log('销毁之前')
51         },
52         destroyed() {
53             console.log('销毁之后')
54         }
55     })
56     new Vue({
57         // vue管理的区域,所有的vue语法仅在该区域内生效
58         el: '#app',
59         data: {
60             res:true
61         },
62         methods: {
63             handler(){
64                 this.res = false
65             }
66         }
67 
68     })
69 </script>
70 </html>

View Code

以上是针对vue2的写法，当然在vue中也是支持的，不过vue3支持了组合式API，也可以使用如下方法

posted on 2022-11-05 16:36 阿明明阅读(42) 评论(0) 编辑收藏举报