（vue基础试炼_07）Vue实例生命周期函数
生活随笔
收集整理的這篇文章主要介紹了
（vue基础试炼_07）Vue实例生命周期函数
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 一、生命周期圖示
- 二、常見的生命周期函數(shù)
- 三、生命周期函數(shù)執(zhí)行場景
- 四、測試代碼
- 五、項(xiàng)目開源地址
一、生命周期圖示
二、常見的生命周期函數(shù)
| beforeCreate | Vue初始化 |
| created | Vue初始化 |
| beforeMount | 模板未渲染到頁面上 |
| mounted | 模板已經(jīng)渲染到頁面上 |
| beforeDestroy | 只有Vue實(shí)例銷毀的時(shí)候或者調(diào)用vm.$destroy()這個(gè)方法 |
| destroyed | 只有Vue實(shí)例銷毀的時(shí)候或者調(diào)用vm.$destroy()這個(gè)方法 |
| beforeUpdate | 數(shù)據(jù)發(fā)生變化時(shí)，先觸發(fā)beforeUpdate |
| updated | 數(shù)據(jù)發(fā)生變化時(shí)，再觸發(fā)updated |
| 溫馨提示 | 生命周期函數(shù)，直接卸載Vue實(shí)例中，不寫在methods中 |
三、生命周期函數(shù)執(zhí)行場景
刷新頁面，會(huì)依次觸發(fā)以下函數(shù)
Vue銷毀時(shí)，會(huì)依次觸發(fā)以下函數(shù)
當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，會(huì)依次觸發(fā)以下函數(shù)
四、測試代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue實(shí)例生命周期函數(shù)</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root"></div><script>/*生命周期函數(shù)就是vue實(shí)例在某一個(gè)是點(diǎn)會(huì)自動(dòng)執(zhí)行的函數(shù)*/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");/*模板已經(jīng)渲染到頁面上*/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>五、項(xiàng)目開源地址
xxx
總結(jié)
以上是生活随笔為你收集整理的（vue基础试炼_07）Vue实例生命周期函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flowable实战（六）flowabl
- 下一篇： 可视化流程设计器 Activiti De