用Vue框架，熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行。
首先先看看官網(wǎng)的圖，詳細(xì)的給出了vue的生命周期:
它可以總共分為8個階段：
然后用一個實(shí)例的demo 來演示一下具體的效果：
<div id=app>{{a}}</div><script>var myVue = new Vue({ el: "#app", data: {a: "Vue.js" }, beforeCreate: function() { console.log("創(chuàng)建前") console.log(this.a) console.log(this.$el) }, created: function() { console.log("創(chuàng)建之后"); console.log(this.a) console.log(this.$el) }, beforeMount: function() { console.log("mount之前") console.log(this.a) console.log(this.$el) }, mounted: function() { console.log("mount之后") console.log(this.a) console.log(this.$el) }, beforeUpdate: function() { console.log("更新前"); console.log(this.a) console.log(this.$el) }, updated: function() { console.log("更新完成"); console.log(this.a); console.log(this.$el) }, beforeDestroy: function() { console.log("銷毀前"); console.log(this.a) console.log(this.$el) console.log(this.$el) }, destroyed: function() { console.log("已銷毀"); console.log(this.a) console.log(this.$el) } }); </script>運(yùn)行后，查看控制臺，
得到這個：
然后再methods 里面添加一個change方法：
<div id=app>{{a}}<button v-on:click="change">change</button></div>點(diǎn)擊按鈕之后出現(xiàn)的是：
這就是vue的生命周期，很簡單吧。
以上所述是小編給大家介紹的Vue js生命周期詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
