TypeError: 'module' object is not callable
阿新 • • 發佈：2020-12-30
vue生命週期
概念
- Vue例項從 建立， 執行，到銷燬期間伴隨著的事件統稱為生命週期
- 生命週期鉤子 = 生命週期函式 = 生命週期時間
- 生命週期鉤子分為
建立期間的生命週期函式，執行期間的生命週期函式，銷燬期間的生命週期函式
程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命週期</title> </head> <body> <div id="app"> <h3 id="h3">{{ msg }}</h3> <input type="button" value="修改資料" @click="msg='no'"> </div> </body> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: {}, beforeCreate() { //第一個生命週期函式， 表示例項完全沒被創建出來之前會執行它 console.log('beforeCreate', this.msg); }, created() { // data 和 methods 都已經被初始化好了， 如果要呼叫methods中的方法或者data中的資料， 最早只能在鉤子函式created裡操作 console.log('created', this.msg) }, beforeMount() { //這是第三個生命週期函式， 模版已經在記憶體中編譯完成， 並未掛載到頁面中，此時頁面還是舊的 console.log('beforeMount', document.getElementById('h3').innerText) // {{ msg }} }, mounted() { //例項建立期間的最後一個生命週期函式， 當執行完mounted, 例項已經完全建立好了 console.log('mounted', document.getElementById('h3').innerText) }, // 執行中的兩個事件 beforeUpdate() { console.log('執行beforeUpdate方法， 此時頁面上的資料： ', document.getElementById('h3').innerText) console.log('執行beforeUpdate方法， 此時models層裡的資料（data中msg的資料）： ', this.msg) //當執行beforeUpdate， 頁面中顯示的資料還是舊的， 此時 data資料是最新的， 頁面尚未和最新的資料保持同步 }, updated() { console.log('執行updated方法， 此時頁面上的資料： ', document.getElementById('h3').innerText) console.log('執行updated方法， 此時models層裡的資料（data中msg的資料）： ', this.msg) //updated 事件執行的時候， 頁面和data 資料已經保持同步裡， 頁面上的資料是最新的 }, }); </script> </html>
- 建立階段執行結果
- 執行階段執行結果