vue生命周期

来源：互联网发布：淘宝手办现货可信? 编辑：程序博客网时间：2024/05/16 09:38

vue的生命周期分为以下阶段：

beforeCreated(实例化开始)

created(实例化完成)

beforeMount(开始挂载)

mounted(挂载完成)

beforUpdate(更新之前)

updated(更新完成)

beforeDestroy(销毁之前)

Destroy(销毁之后)

分析图

附官网生命周期图

栗子：

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>钩子</title></head><body>    <div id="app">        <p>{{msg}}</p>        <input type="button" @click="change" value="更新">        <input type="button" @click="show" value="销毁">    </div></body></html>

javascript代码：

<script type="text/javascript" src="vue.js"></script><script type="text/javascript">     var vm = new Vue({         el:"#app",         data:{             msg:'hello world'         },         methods:{            change:function () {                this.msg='click 更新'            },             show:function () {                 vm.$destroy()             }         },         beforeCreate: function () {             console.group('beforeCreate 创建前状态===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         created: function () {             console.group('created 创建之后状态===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         beforeMount: function () {             console.group('beforeMount 开始挂载===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         mounted: function () {             console.group('mounted 挂载完成===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         beforeUpdate: function () {             console.group('beforeUpdate 更新之前===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         updated: function () {             console.group('updated 更新完成===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:red","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         beforeDestroy: function () {             console.group('beforeDestroy 销毁之前===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log("%c%s", "color:green","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         },         destroy: function () {             console.group('Destroy 销毁完成===============》');             console.log("%c%s", "color:red","el     : " + this.$el);             console.log(this.$el);             console.log("%c%s", "color:green","data   : " + this.$data);             console.log("%c%s", "color:red","msg: " + this.msg);         }     })</script>

其运行结果为：

当页面打开的时候

当点击更新按钮的时候：

当点击销毁按钮的时候：

阅读全文

0 0