Vue.js之生命周期
Posted 呜咽的时光喵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js之生命周期相关的知识,希望对你有一定的参考价值。
有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,Vue提供给我们一系列的钩子函数。
vue生命周期
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.js"></script> </head> <body> <div id="app"> {{ name }} <button @click="myClick">点击修改数据</button> </div> <script> new Vue({ el: "#app", // 在template中使用组件与在body中使用组件是一样的 // template: `<cont></cont>`, data: { name: "Alex" }, methods: { init: function () { console.log(this.name); }, myClick: function () { this.name = "Pizza"; } }, beforeCreate() { console.group("beforeCreate"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, }); </script> </body> </html>
效果:
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> {{ name }} <button @click="myClick">点击修改数据</button> </div> <script> new Vue({ el: "#app", // 在template中使用组件与在body中使用组件是一样的 // template: `<cont></cont>`, data: { name: "Alex" }, methods: { init: function () { console.log(this.name); }, myClick: function () { this.name = "Pizza"; } }, beforeCreate() { console.group("beforeCreate"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, created() { console.group("Created"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); } }) </script> </body> </html>
beforeMount
在挂载开始之前被调用:相关的 render
函数首次被调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.js"></script> </head> <body> <div id="app"> {{ name }} <button @click="myClick">点击修改数据</button> </div> <script> new Vue({ el: "#app", // 在template中使用组件与在body中使用组件是一样的 // template: `<cont></cont>`, data: { name: "Alex" }, methods: { init: function () { console.log(this.name); }, myClick: function () { this.name = "Pizza"; } }, beforeCreate() { console.group("beforeCreate"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, created() { console.group("Created"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, beforeMount() { console.group("beforeMount"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); } }) </script> </body> </html>
mounted
el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted
被调用时 vm.$el
也在文档内。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.js"></script> </head> <body> <div id="app"> {{ name }} <button @click="myClick">点击修改数据</button> </div> <script> new Vue({ el: "#app", // 在template中使用组件与在body中使用组件是一样的 // template: `<cont></cont>`, data: { name: "Alex" }, methods: { init: function () { console.log(this.name); }, myClick: function () { this.name = "Pizza"; } }, beforeCreate() { console.group("beforeCreate"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, created() { console.group("Created"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, beforeMount() { console.group("beforeMount"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, mounted() { console.group("mounted"); console.log("el: ", this.$el); console.log("data: ", this.$data); console.log("name: ", this.name); console.log("init: ", this.init); console.log("innerHTML: ", document.getElementById("app").innerHTML); }, }) </script> </body> </html>
beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.js"></script> </head> <body> <div id="app"> {{ name }} <button @click="myClick">点击修改数据</button> </以上是关于Vue.js之生命周期的主要内容,如果未能解决你的问题,请参考以下文章