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

牛小小小婷～

已于 2022-09-16 20:23:35 修改

阅读量271

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-09-16 19:49:17 首次发布

本文链接：https://blog.csdn.net/hannah2233/article/details/126896360

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

文章目录

一、
二、生命周期

一、

请添加图片描述

二、生命周期

2-1

2-1-1 引出生命周期

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

<!DOCTYPE html>
<html>

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

<body>
    <!-- 
				生命周期：
						1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
						2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
						3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
						4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        {{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>

关键的周期做关键的事情
生命周期：
- 生命周期回调函数、生命周期函数、生命周期钩子
- 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>
		<!-- 引入Vue -->
		<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+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{{n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			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>

三、

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组件销毁后

牛小小小婷～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue基础六】--- 生命周期详解

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

扫一扫