Vue生命周期

最新推荐文章于 2024-07-06 21:51:37 发布

枫叶…

最新推荐文章于 2024-07-06 21:51:37 发布

阅读量346

点赞数 1

文章标签： vue.js javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/qq_43157227/article/details/127252474

版权

Vue生命周期

组件的生命周期

组件的生命周期指的是：组件从创建=>运行（渲染）=>销毁的过程，强调一个过程。
在这里插入图片描述
vue为组件不同的生命周期时刻设置了生命周期函数，这些函数会随着组件的生命周期自定地调用。

Vue2.x生命周期图

官方资料：https://v2.cn.vuejs.org/v2/guide/instance.html#生命周期图示
在这里插入图片描述
Vue2.x组件阶段：

代码实验：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
   <h3 id="h3">
       <input type="button" value="修改msg" @click="msg='No'">

       {{msg}}
   </h3>
</div>

</body>
</html>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg:"yes",
        },
        methods:{
            show(){
                console.log('执行了show方法')
            }
        },
        beforeCreate(){
            //这是我们遇到的第一个周期函数，表示实例完全被创建出来之前，会执行它
            console.log(this.msg);
             this.show()
            //注意在beforeCreate 生命周期函数执行的时候，data 和 methods中的数据都还没有初始化

        },
        created(){
            //这是遇到的第二个周期函数
            // console.log(this.msg)
            // this.show();
            //在created中data和methods已经被初始化好了
            //如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作
        },
        beforeMount(){  //这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中
            // console.log(document.getElementById('h3').innerText);
            //在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前的一些模板字符串
        },
        mounted(){
           //这是遇到的第4个生命周期函数，表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面了
            console.log(document.getElementById('h3').innerText);
            //注意：mounted 是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，
            //此时如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动
        },


        //接下来的是运行中的两个事件
        beforeUpdate(){ //这时候，表示我们的界面还没有被更新【数据被更新了吗？ 数据肯定别更新了】

            console.log('界面上元素的内容：'+ document.getElementById('h3').innerText);
            console.log('data中的msg数据是：'+ this.msg);
            //得出结论：当执行beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

        },

        updated(){

            console.log('界面上元素的内容：'+ document.getElementById('h3').innerText);
            console.log('data中的msg数据是：'+ this.msg);
            //updated 时间执行的时候，页面和data数据已经保持同步了，都是最新的

        }




    })
</script>

结果：
在这里插入图片描述
注意：

Vue的生命周期：创建----》运行----》销毁
Vue有虚拟DOM和实际渲染的DOM，虚拟DOM为实际的DOM渲染提供数据准备
在Created的阶段主要完成方法和数据的初始化，最早可以调用数据和方法，但是在虚拟DOM中
beforeMount()这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中。在Mounted的过程中，DOM数据已经完成准备好了，渲染了出实际的DOM，这是最早操作DOM节点的时间点。
在运行时期，只有数据更新才能触发beforeUpdate()。当执行beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步。updated执行的时候，页面和data数据已经保持同步了，都是最新的。

Vue3.x生命周期图

官方资料：https://cn.vuejs.org/guide/essentials/lifecycle.html
在这里插入图片描述
vue代码测试：

<template>
	<p>HelloWorld组件</p>
	<p ref="p">{{n}}</p>
	<button @click="n++">+1</button>
</template>

<script>
	import {onBeforeMount,onMounted} from 'vue'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String,
			num: Number
		},
		data() {
			return {
				n: 0
			}
		},
		methods: {

		},
		//开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
		setup() {
			console.log(this)
			console.log(  "setup生命周期函数");
			 console.log("我是setup");
			    onBeforeMount(() => {
			      console.log("我是onBeforeMount");
			    });
			    onMounted(() => {
			      console.log("我是onMounted");
			    });
		},
		beforeCreate() {
			console.log('beforeCreate生命周期函数')
			console.log(this)
			console.log(`n:${this.n}`, `p标签:${this.$refs.p}`, "beforeCreate生命周期函数");
		},
		created() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p}`, "created生命周期函数");
		},
		//组件挂载到节点上之前执行的函数。
		beforeMount() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p}`, "beforeMount生命周期函数");
		},
		mounted() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p}`, "mounted生命周期函数");
		},
		unmounted() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p}`, "unmounted生命周期函数");
		},
		beforeUpdate() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p.innerText}`, "beforeUpdate生命周期函数");

		},
		updated() {
			console.log(`n:${this.n}`, `p标签:${this.$refs.p.innerText}`, "updated生命周期函数");
		}
	}
</script>

//父组件
<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<HelloWorld v-if="flag" msg="Hello Vue 3.0 + Vite" :num="n" />
	<button @click="flag=false">销毁HelloWorld组件</button>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	
	export default {
		name: 'App',
		components: {
			HelloWorld
		},
		data() {
			return {
				n: 1,
				mssg1: 'red，APP.vue',
				flag:true
			}
		},
		
	}
</script>

结果：
在这里插入图片描述

在这里插入图片描述

注意：

beforeUpdate函数，数据更新完成，虚拟DOM准备就绪，即将渲染到页面中。
beforeCreate函数，数据和方法存在，但是未初始化完成。
setup（）开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method。
setup() 钩子是在组件中使用组合式 API 的入口，返回值会暴露给模板和其他的选项式 API 钩子。可以使用Vue2.x的生命周期钩子函数，兼容Vue2.x。（https://cn.vuejs.org/api/composition-api-setup.html#basic-usage）