vue生存周期

来源：互联网发布：包小姐过夜知乎编辑：程序博客网时间：2024/05/12 02:29

生存周期

这里写图片描述

<div id="app">    <p>{{ message }}</p></div><script type="text/javascript">    var app = new Vue({        el: '#app',        data: {            message : "xuxiao is boy"        },        beforeCreate: function () {            console.group('beforeCreate 创建前状态===============》');            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined            console.log("%c%s", "color:red","data   : " + this.$data); //undefined            console.log("%c%s", "color:red","message: " + this.message)        },        created: function () {            console.group('created 创建完毕状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el); //undefined            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化            console.log("%c%s", "color:red","message: " + this.message); //已被初始化        },        beforeMount: function () {            console.group('beforeMount 挂载前状态===============》');            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化            console.log("%c%s", "color:red","message: " + this.message); //已被初始化        },        mounted: function () {            console.group('mounted 挂载结束状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化            console.log("%c%s", "color:red","message: " + this.message); //已被初始化        },        beforeUpdate: function () {            console.group('beforeUpdate 更新前状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el);            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data);            console.log("%c%s", "color:red","message: " + this.message);        },        updated: function () {            console.group('updated 更新完成状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el);            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data);            console.log("%c%s", "color:red","message: " + this.message);        },        beforeDestroy: function () {            console.group('beforeDestroy 销毁前状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el);            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data);            console.log("%c%s", "color:red","message: " + this.message);        },        destroyed: function () {            console.group('destroyed 销毁完成状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el);            console.log(this.$el);            console.log("%c%s", "color:red","data   : " + this.$data);            console.log("%c%s", "color:red","message: " + this.message)        }    })</script>

chrome浏览器打印的console出来的数据
这里写图片描述
当你手动改变data里面的值时，beforeUpdate，updated两个函数才会执行

关于催毁
beforeDestroy
destroyed
这两个执行app.$destroy()时，才会执行的两个函数
自己复制运行一下就很好理解了~~
参考：https://segmentfault.com/a/1190000008010666

0 0