（vue基础试炼_07）Vue实例生命周期函数
生活随笔
收集整理的這篇文章主要介紹了
（vue基础试炼_07）Vue实例生命周期函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、生命周期圖示
- 二、常見的生命周期函數
- 三、生命周期函數執行場景
- 四、測試代碼
- 五、項目開源地址
一、生命周期圖示
二、常見的生命周期函數
| beforeCreate | Vue初始化 |
| created | Vue初始化 |
| beforeMount | 模板未渲染到頁面上 |
| mounted | 模板已經渲染到頁面上 |
| beforeDestroy | 只有Vue實例銷毀的時候或者調用vm.$destroy()這個方法 |
| destroyed | 只有Vue實例銷毀的時候或者調用vm.$destroy()這個方法 |
| beforeUpdate | 數據發生變化時，先觸發beforeUpdate |
| updated | 數據發生變化時，再觸發updated |
| 溫馨提示 | 生命周期函數，直接卸載Vue實例中，不寫在methods中 |
三、生命周期函數執行場景
刷新頁面，會依次觸發以下函數
Vue銷毀時，會依次觸發以下函數
當數據發生改變時，會依次觸發以下函數
四、測試代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue實例生命周期函數</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root"></div><script>/*生命周期函數就是vue實例在某一個是點會自動執行的函數*/var vm = new Vue({el: '#root',template: "<div>{{content}}</div>",data: {content: 'hello world'},beforeCreate: function () {console.log("beforeCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");/*模板未渲染到頁面上*/console.log(this.$el);},mounted: function () {console.log("mounted");/*模板已經渲染到頁面上*/console.log(this.$el);},beforeDestroy: function () {console.log("beforeDestroy");},destroyed: function () {console.log("destroyed");},beforeUpdate: function () {console.log(this.$data);console.log("beforeUpdate");},updated: function () {console.log(this.$data);console.log("updated");}}); </script> </body> </html>五、項目開源地址
xxx
總結
以上是生活随笔為你收集整理的（vue基础试炼_07）Vue实例生命周期函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flowable实战（六）flowabl
- 下一篇： html5倒计时秒杀怎么做,vue 设