Vue_(组件)实例生命周期钩子

 

 

  Vue生命周期中文文档  传送门

 

 

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

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

 

  Vue的生命周期钩子方法:
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    update

    activated
    deactivated
    beforeDestroy
    destroyed
    errorCaptured

  

  Learn
    一、beforeCreate和created钩子方法

    二、beforeMount和mounted钩子方法

    三、beforeUpdate和updated钩子方法

    四、 beforeDestroy和Destory钩子方法

 

  项目结构

  

  【每个demo下方都存有html源码】

 

 

一、beforeCreate和created钩子方法

  body中放有v-model绑定的msg信息

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

 

  使用beforeCreate和created钩子函数

            beforeCreate(){
                alert("beforeCreate() 创建Vue实例(未进行数据观测)"+this.msg);
            },
            created(){
                alert("created() 创建Vue实例(进行数据观测)"+this.msg);
            }

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
  <script>
    window.onload= ()=>{

     new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!'
            },
            beforeCreate(){
                alert("beforeCreate() 创建Vue实例(未进行数据观测)"+this.msg);
            },
            created(){
                alert("created() 创建Vue实例(进行数据观测)"+this.msg);
            }
  
      });
    }

  </script>

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

Gary_VueShop.html
Gary_lifeCycle.html

 

 

二、beforeMount和mounted钩子方法

  未获取<h1>DOM对象,给<h1>标签添加一个ref属性

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

 

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

 

  可以看到,在执行beforeMount()方法时,控制台出现报错,找不到该DOM元素!

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
  <script>
    window.onload= ()=>{

     new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!'
            },
            beforeCreate(){
                alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
            },
            created(){
                alert("created() 创建Vue实例(进行数据观测)" + this.msg);
            },
            beforeMount(){
                alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
            },
            mounted(){
                alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
            }
  
      });
    }

  </script>

    
</head>
<body>
<div>
    <input type="text" v-model="msg" /><br />
    <h1 ref="msgText">{{msg}}</h1>
</div>
    
</body>
</html>
Gary_lifeCycle.html

 

 

三、beforeUpdate和updated钩子方法

  当更新了input中文本后会触发beforeUpdate和updated钩子函数

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

 

  beforeUpdate钩子函数this.$refs.msgText.innerText会获得跟新前的文本数据

  updated钩子函数this.$refs.msgText.innerText会获得跟新后的文本数据

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
  <script>
    window.onload= ()=>{

     new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!'
            },
            beforeCreate(){
                alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
            },
            created(){
                alert("created() 创建Vue实例(进行数据观测)" + this.msg);
            },
            beforeMount(){
                alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
            },
            mounted(){
                alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
            },
            beforeUpdate(){
                alert("beforeUpdate 数据 更新前"  + this.$refs.msgText.innerText);
            },
            updated(){
                alert("updated 数据 更新后 "  + this.$refs.msgText.innerText);
            }
  
      });
    }

  </script>

    
</head>
<body>
<div>
    <input type="text" v-model="msg" /><br />
    <h1 ref="msgText">{{msg}}</h1>
</div>
    
</body>
</html>
Gary_lifeCycle.html

 

 

四、beforeDestroy和Destory钩子方法

  添加Button组件,给Button组件绑定onDestroy销毁方法

<div>
    <input type="text" v-model="msg" /><br />
    <h1 ref="msgText">{{msg}}</h1>
    <button @click="onDestroy">销毁</button>
</div>

 

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

 

  当实例被销毁后就无法观测deforeUpdate钩子函数和updated方法

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
  <script>
    window.onload= ()=>{

     new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!'
            },
            beforeCreate(){
                alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
            },
            created(){
                alert("created() 创建Vue实例(进行数据观测)" + this.msg);
            },
            beforeMount(){
                alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
            },
            mounted(){
                alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
            },
            beforeUpdate(){
                alert("beforeUpdate 数据 更新前"  + this.$refs.msgText.innerText);
            },
            updated(){
                alert("updated 数据 更新后 "  + this.$refs.msgText.innerText);
            },
              beforeDestroy(){
                alert("beforeDestroy 销毁 前 ");
            },
            destroyed(){
                alert("updated 销毁 后");
            },
            methods: {
            onDestroy(){
                    this.$destroy();
                }
            }
        });
    }

  </script>

    
</head>
<body>
<div>
    <input type="text" v-model="msg" /><br />
    <h1 ref="msgText">{{msg}}</h1>
    <button @click="onDestroy">销毁</button>
</div>
    
</body>
</html>
Gary_lifeCycle.html

 

posted @ 2019-02-24 21:31  Cynical丶Gary  阅读(262)  评论(0编辑  收藏  举报