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

时间 2020-05-20

标签 vue 基础进阶生命周期钩子函数繁體版

原文原文链接

Vue生命周期

Vue生命周期：Vue实例从建立到销毁的过程，称为Vue的生命周期；javascript

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

Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，咱们能够经过这些方法在Vue实例创建、挂载、数据更新、销毁等阶段作一些事情；vue

Vue的生命周期钩子函数

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

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

示例效果：ide

该两个钩子函数的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:ui

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

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

挂载实例的钩子函数代码：spa

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钩子函数：

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

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的钩子函数：

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

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

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>

以上全部钩子函数组成的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue生命周期钩子函数</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             
 9             window.onload= () =>{ 10                 new Vue({ 11                     el:'div', 12  data:{ 13                         msg:'欢迎来到perfect*博客园！！！！'
14                         
15  }, 16                     
17                     
18  beforeCreate(){ 19                         alert("1 beforCreate 建立Vue实例，可是未进行数据的观测"+this.msg); 20                         
21                         
22  }, 23                     
24                     
25  created(){ 26                         alert("2 created建立Vue实例，进行数据的观测了"+this.msg); 27                         
28                         
29                         
30  }, 31                     
32  beforeMount(){ 33                         alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); 34                         
35  }, 36  mounted(){ 37                          alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); 38                         
39                         
40  }, 41  beforeUpdate(){ 42                         alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); 43                         
44  }, 45  updated(){ 46                          alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); 47                         
48                         
49  }, 50  beforeDestroy(){ 51                         alert("7 beforeDestroy 销毁前"); 52  }, 53  destroyed(){ 54                         alert("8 destroyed 销毁后"); 55                         
56                         
57  }, 58  methods:{ 59  onDestroy(){ 60                             
61                             this.$destroy(); 62  } 63                         
64                         
65                         
66  } 67                     
68                     
69                     
70                     
71  }) 72                 
73                 
74  } 75         </script>
76     </head>
77     <body>
78         <div >
79             <input type="text" v-model="msg" /><br />
80             <!--<h1>{{msg}}</h1>-->
81             <h1 ref='msgText'>{{msg}}</h1>
82             <button @click="onDestroy">销毁</button>
83             
84             
85             
86             
87         </div>
88     </body>
89 </html>

钩子函数

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

Vue生命周期

Vue的生命周期钩子函数

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