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

巴特西

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

最新文章

热门文章