Vue js 的生命周期（看了就懂）
轉自:?https://blog.csdn.net/qq_24073885/article/details/60143856
用Vue框架，熟悉它的生命周期可以讓開發更好的進行。
首先先看看官網的圖，詳細的給出了vue的生命周期:
?
它可以總共分為8個階段：
beforeCreate（創建前）,
created（創建后）,
beforeMount(載入前),
mounted（載入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（銷毀前）,
destroyed（銷毀后）
然后用一個實例的demo 來演示一下具體的效果：
<div id=app>{{a}}</div>
<script>
var myVue = new Vue({ ? ? ? ? ?
el: "#app", ? ? ? ? ?
data: {
a: "Vue.js" ? ? ? ?
}, ? ? ? ??
?beforeCreate: function() {?
? ? ? ? ? console.log("創建前") ? ? ? ? ? ?
console.log(this.a) ? ? ? ? ? ?
console.log(this.$el) ? ? ? ? ?
}, ? ? ? ??
?created: function() {
? ? ? ? ? ? ? ? console.log("創建之后"); ? ? ? ? ? ?
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>
?
?
?
運行后，查看控制臺，
得到這個：
然后再methods 里面添加一個change方法：
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
點擊按鈕之后出現的是：
這就是vue的生命周期.
?
轉載于:https://www.cnblogs.com/JQstronger/p/vue_shengmingzhouqi.html
總結
以上是生活随笔為你收集整理的Vue js 的生命周期（看了就懂）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LayIM.AspNetCore Mid
- 下一篇： Digit Sum II（ABC044A