前端vue前面该学习什么（前端基础:什么是Vue的生命周期函数）
前端vue前面该学习什么（前端基础:什么是Vue的生命周期函数）现在在浏览器输入框删掉“方”字Mounted阶段主要是DOM节点编译了，{{message}}发生了数据替换。控制台打印效果：注意created函数，拿到了data对象和属性message。后台数据请求可以放在这个阶段。beforeMount的 el 不再是undefined 但是DOM节点{{message}}没有编译。
说了很多关于Vue的文章，对于其中的生命周期理解也是一笔带过，甚至官网也是一笔带过，只给了一张图：
对于新手来说不是很友好，今天就给大家简单讲讲：
完整代码：
<!DOCTYPE html> <html> <head> <title>vue生命周期</title> <script type="text/javascript" src="https://img.aigexing.comhttps://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body> <div id="app"> {{message}} <br> <input type="text" v-model="message" /> <button onclick="xiao();">销毁</button> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app' data: { message: "这是我们放数据的地方" } beforeCreate: function() { console.group('beforeCreate 创建前状态===============》'); console.log("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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("真实dom结构:" document.getElementById("app").innerHTML); 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) } }); function xiao() { vm.$destroy(); // 调用销毁函数，销毁实例vm console.log("=========================销毁后========================="); console.log(vm.$el); console.log(vm.message); // 能拿到原来的数据，再修改后，{{message}}等不再改变 } </script> </body> </html>
编辑器：
控制台打印效果：
注意created函数，拿到了data对象和属性message。后台数据请求可以放在这个阶段。
beforeMount的 el 不再是undefined 但是DOM节点{{message}}没有编译。
Mounted阶段主要是DOM节点编译了，{{message}}发生了数据替换。
现在在浏览器输入框删掉“方”字
beforeUpdate:我们看到真实DOM还有改变，但是实例vm里面el已经改变。
Updated:更新后，数据一样了，蓝框部分。
现在在浏览器点击按钮“销毁”，调用函数xiao();
beforeDestroy:打印数据一切正常。
Destroyed:打印数据一切"看似"正常，当我们在输入框进行增加或者删除内容的时候，不再触发beforeUpdate，Updated钩子函数。或者直接控制台修改vm.message = "xxxxxxxx" 浏览器的展示不再发生改变。即{{ message}}和data中的message已经解绑！！！官方的文档解释：“Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。”
好了，Vue生命周期就阐述到这里，还不明白神仙也救不了你。
欢迎关注，分享干货
