【Vue基础六】--- 生命周期详解

文章目录

一、
二、生命周期

一、

请添加图片描述

二、生命周期

2-1

2-1-1 引出生命周期

改变data中的数据，就帮忙重新解析模板，重新解析模板就会继续调用方法

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>引出生命周期title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>

<body>
    
    
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vueh2>
        {{change()}}
    div>
body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            a: false,
            opacity: 1
        },
        methods: {

            change() {
                console.log('函数调用');
                setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) this.opacity = 1
                })
            }
        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        // mounted() {
        //     console.log('mounted', this)
        //     setInterval(() => {
        //         this.opacity -= 0.01
        //         if (this.opacity <= 0) this.opacity = 1
        //     }, 16)
        // },
    })
script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

关键的周期做关键的事情
生命周期：
- 生命周期回调函数、生命周期函数、生命周期钩子
- Vue在关键时刻帮我调用的一些特殊名称的函数
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this指向是vm或组件实例对象

2-1-2 分析生命周期

更新
vm的生命周期
- 将要创建—> 调用beforeCreate函数
- 创建完毕----> 调用created函数
- 将要挂载—> 调用beforeMount函数
- 挂载完毕 —> 调用mounted函数
- 将要更新：调用beforeUpdate函数
- 更新完毕—> 调用updated函数
- 将要销毁-----> 调用beforeDestory函数
- 销毁完毕 ----> 调用destroyed函数
销毁

分析生命周期

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root" :x="n">
			<h2 v-text="n">h2>
			<h2>当前的n值是：{{n}}h2>
			<button @click="add">点我n+1button>
			<button @click="bye">点我销毁vmbutton>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			// template:`
			// 	
			// 		当前的n值是：{{n}}
			// 		
			// 	
			// `,
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

三、

beforeMount函数：
- 模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数
- 此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换
- 模板编译：用vue对象的数据（属性）替换模板中的内容
Mounted函数：
- 模板编译完成，数据挂载完毕
- 即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了。
- 一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里。
beforeUpdate函数：
- 组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）
- 数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前
updated函数：
- 组件更新之后执行的函数
- vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后
activated函数：keep-alive组件激活时调用
activated函数：keep-alive组件停用时调用
beforeDestroy：vue（组件）对象销毁之前
destroyed：vue组件销毁后

相关阅读:
华为三层交换机之基本操作
 SLAM从入门到精通（里程计的计算）
吐血整理的 Android 性能优化思维导图，让面试官眼前一亮
 OpenGV
Redis的安装
 idea不识别yaml文件导致,配置文件点击跳转不了类
 EasyRecovery2023互盾免费数据恢复软件下载功能介绍
 在ubuntu安装vncserver，可以打开远程桌面
 大数据：Shell的操作
 [java并发编程]基于信号量semaphore实现限流器
原文地址：https://blog.csdn.net/hannah2233/article/details/126896360

【Vue基础六】--- 生命周期详解

文章目录

一、

二、 生命周期

2-1

2-1-1 引出生命周期

2-1-2 分析生命周期

当前的n值是：{{n}}

三、

二、生命周期