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

主要操作技能：

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

  2.  生命周期图示：

      

编写代码：

   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> <!--3.使用组件-->
		
		<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">
		<!--3.在模板中使用-->
		<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）初始化加载

2）单击修改

3）单击挂载

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

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

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