Vue.js框架--组件的生命周期函数（十）

r囧r小猫 2024-02-18 23:28 51阅读 0赞

**主要操作技能：**

1. 生命周期函数的的定义：  
 **就是组件挂载、以及组件更新、组件销毁的时候触发的一系列方法。也叫生命周期钩子**

2. 生命周期图示：

![70][]

![70 1][]

![70 2][]

![70 3][]

**编写代码：**

Lify.vue组件

<template>
    	<div id="life">
    		生命周期函数的使用！ -->{
       {msg}}<br />
    
    		<button @click="setMsg()">执行方法改变msg</button>
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				msg: '这是一个生命周期函数'
    			}
    		},
    		methods: {
    			setMsg() {
    				this.msg = '我是改变后的数据';
    			}
    		}, //不能放在methods中哦！
    		beforeCreate() {
    			console.log('实例创建之前-1')
    		},
    		created() {
    			console.log('实例创建完成-2')
    		},
    		beforeMount() {
    			console.log('模板编译之前-3')
    		},
    		mounted() { //请求数据操作dom,放在这里哦！
    			console.log('模板编译完成-4')
    		},
    		beforeUpdate() {
    			console.log('数据更新之前-5')
    		},
    		updated() {
    			console.log('数据更新完成-6')
    		},
    		beforeDestroy() { //页面销毁的时候再保存数据，就可以监听这个生命周期函数
    			console.log('实例销毁之前-7')
    		},
    		destroyed() {
    			console.log('实例销毁完成-8')
    		}
    
    	}
    </script>

Home.vue组件

<template>
    	
    	<div>
    		<v-header></v-header> 
    		
    		<v-life v-if="flag"></v-life>
    		<br /><br />
    		<button @click="flag=!flag">挂载或卸载Lify组件</button>
    		
    	</div>
    </template>
    
    <script>
    	import Header from './Header.vue'; //1.引入头部组件
    	import Life  from './Lify.vue';
    	export default {
    		data() { //数据
    			return {
    				msg: '我是首页组件',
    				flag:true //标识Lify组件哦
    			}
    		},
    		methods: { //方法
    			run() {
    				return alert(this.msg);
    			}
    		},
    		components:{ //2.挂载组件
    			'v-header':Header  ,
    			'v-life':Life
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    /*css 局部作用域scoped	*/
    	h2{
    		color:red;
    	}
    </style>

App.vue根组件

<template>
    	<div id="app">
    		
    		<v-home></v-home>
    
    	</div>
    </template>
    
    <script>
    	/**
    	 * https://cn.vuejs.org/v2/guide/instance.html
    	 * 生命周期函数:也叫生命周期钩子
    	 *   组件挂载、以及组件更新、组件销毁的时候触发的一系列方法。
    	 */
    	import Home from './components/Home.vue'; //1.引入组件
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello'
    			}
    		},
    		components: { //2.挂载组件
    			/*前面组件名称不能与html标签相同*/
    			'v-home': Home
    		},
    		mounted(){
    			console.log('我是一个生命周期函数!')
    			
    		}
    	}
    </script>

**效果：**

*1）初始化加载*

**![70 4][]**

*2）单击修改*

![70 5][]

*3）单击挂载*

![70 6][]

4）再次*单击挂载按钮，就会重新加载Vue实例*

![70 7][]

*5)单击改变msg按钮,修改数据*

![70 8][]

*6)再次单击挂载按钮，销毁Vue实例*

*![70 9][]*

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3d7de81a14e04ce295b302715db031d8.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/347fcb87c0dc45ae815e9ec0faad1e69.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/26efac70f32144e6b4830cd86bfcf1de.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/20b596f229d34d608085f44893d9f41c.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a92827d73d8f48db9a4fbcd9c6c46062.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7b401225d74b414e99fafda03dabc469.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ba12c0d1de1b4e60bc00b50df4e3a9c1.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0651489a71ec4486abc1c60df7974372.png
[70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b7cff6cfdffe452392e887aa6ff91a8c.png
[70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f5e471b4dafd48f8883b182ad1c62a69.png