Vue基础进阶 之 Vue生命周期与钩子函数

时间:2022-08-05 16:11:01

Vue生命周期

Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期;

Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这些方法在Vue实例创 建、挂载、数据更新、销毁等阶段做一些事情;

Vue的生命周期钩子函数

钩子函数的详情介绍网址:https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子

beforeCreate与created钩子函数进行对数据的观测

示例效果:

Vue基础进阶 之 Vue生命周期与钩子函数

该两个钩子函数的vue代码:

<script>

            window.onload= () =>{
new Vue({
el:'div',
data:{
msg:'欢迎来到perfect*博客园!!!!' }, beforeCreate(){
alert("1 beforCreate 创建Vue实例,但是未进行数据的观测"+this.msg); }, created(){
alert("2 created创建Vue实例,进行数据的观测了"+this.msg); } }) }
</script>

html:

<div >
<input type="text" v-model="msg" /><br />
<h1>{{msg}}</h1> </div>

beforeMount与mounted钩子函数进行对数据的挂载:

Vue基础进阶 之 Vue生命周期与钩子函数

挂载实例的钩子函数代码:

beforeMount(){
alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); },
mounted(){
alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); }

HTML:

<h1 ref='msgText'>{{msg}}</h1>

beforeUpdate与updated钩子函数:

Vue基础进阶 之 Vue生命周期与钩子函数

数据更新前与更新后的钩子函数:

beforeUpdate(){
alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); },
updated(){
alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); }

html:

<input type="text" v-model="msg" /><br />

            <h1 ref='msgText'>{{msg}}</h1>
            

beforeDestroy与destroyed的钩子函数:

Vue基础进阶 之 Vue生命周期与钩子函数

由效果图可知当点击销毁后,数据就不能再进行观测了,由此观测不到数据的修改

销毁前与销毁后的钩子函数代码:

beforeDestroy(){
alert("7 beforeDestroy 销毁前");
},
destroyed(){
alert("8 destroyed 销毁后"); },
methods:{
onDestroy(){ this.$destroy();
}

html:

<input type="text" v-model="msg" /><br />

            <h1 ref='msgText'>{{msg}}</h1>
<button @click="onDestroy">销毁</button>

以上所有钩子函数组成的代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue生命周期钩子函数</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload= () =>{
new Vue({
el:'div',
data:{
msg:'欢迎来到perfect*博客园!!!!' }, beforeCreate(){
alert("1 beforCreate 创建Vue实例,但是未进行数据的观测"+this.msg); }, created(){
alert("2 created创建Vue实例,进行数据的观测了"+this.msg); }, beforeMount(){
alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); },
mounted(){
alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); },
beforeUpdate(){
alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); },
updated(){
alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); },
beforeDestroy(){
alert("7 beforeDestroy 销毁前");
},
destroyed(){
alert("8 destroyed 销毁后"); },
methods:{
onDestroy(){ this.$destroy();
} } }) }
</script>
</head>
<body>
<div >
<input type="text" v-model="msg" /><br />
<!--<h1>{{msg}}</h1>-->
<h1 ref='msgText'>{{msg}}</h1>
<button @click="onDestroy">销毁</button> </div>
</body>
</html>

钩子函数