前言：
现时我们对“vue数据获取放在哪个阶段”可能比较着重，各位老铁们都需要剖析一些“vue数据获取放在哪个阶段”的相关文章。那么小编也在网摘上网罗了一些对于“vue数据获取放在哪个阶段””的相关资讯，希望看官们能喜欢，咱们快快来学习一下吧！说了很多关于Vue的文章，对于其中的生命周期理解也是一笔带过，甚至官网也是一笔带过，只给了一张图：
对于新手来说不是很友好，今天就给大家简单讲讲：
完整代码：
<!DOCTYPE html><html><head> <title>vue生命周期</title> <script type="text/javascript" src=""></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生命周期就阐述到这里，还不明白神仙也救不了你。
欢迎关注，分享干货
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #vue数据获取放在哪个阶段
