vue生命周期鉤子函數解讀步驟
阿新 • • 發佈:2019-03-20
沒有 執行 eat 之間 作用 outer ajax請求 ret 前後端 2. 當前生命周期函數執行的時候會將data中所有的屬性和methods身上所有的方法添加到vue的實例身上,同時會將data中所有的屬性添加一個getter/setter方法
3. 如果需要進行前後端數據交互(ajax請求的時候)需要在當前生命周期函數中使用
console.log(created)
}
3(1). 如果沒有找到vue中的el 會使用
vue的實例方法
vm.$mount("id") 綁定el
優先級
vue中的el優先級比vm.$mount("id") 高
3(2). 在找到data中的el時:
new Vue({
el :"id",
//渲染虛擬DOM
render : function(h){
return h(App)
},
render : h => h(App) ,//es6返回值寫法
})
4. 如果沒有找到template模板的時候,就走outerHTML
beforeMount(){
beforeMount : 掛載前:數據和模板還沒有相結合,
(渲染)
render函數初次被調用時:數據和模板還沒有相結合,同時還沒有渲染到html頁面上,
1. beforeMount作用:
渲染前data中數據最後的修改
console.log(beforeMount)
}
5. mounted(){
mounted : 掛載後:數據和模板進行相結合,渲染成真實的DOM結構,
1. 在當前生命周期函數裏面我們就可以訪問到真實的DOM結構,
2. 在Vue中我們可以通過$refs來訪問到真實的DOM結構
3. ref類似於id一樣 值必須是唯一的 訪問時我們可以通過 :this.$refs.屬性
console.log(mounted)
}
5.(1). beforeUpdate(){
beforeUpdate : 更新前,
1. 只要data中的屬性發生了改變,那麽這個生命周期函數就會執行,render函數會再次執行
2. 在這個生命周期函數中我們可以對數據進行最後的修改,同時也可以訪問到最新的DOM結構和數據
console.log(beforeUpdate)
}
5.(2). updated(){
updated : 更新後,
1. 當前生命周期函數中我們可以訪問到最新的DOM結構(數據更新最新的DOM結構)和數據
}
6. beforeDestroy(){
1.beforeDestroy 銷毀前:在銷毀之前還可以訪問到DOM結構 以及相關的數據(data),
2. 在這個生命周期函數中我們可以將綁定的事件進行移除
console.log(beforeDestroy);
vm.$destroy() 銷毀組件
}
7. dertroyed(){
dertroyed :銷毀後,
1. 在這個生命周期函數中將數據和模板之間的關系斷開(函數自己銷毀,不需要手動)
2. 在這個生命周期函數中我們還是可以訪問到data中的屬性,但訪問不到DOM結構了
}
})
vue 生命周期:
一個組件從創建到銷毀的過程
let vm = new Vue({
el : "id",
data : {
},
1. beforeCreate(){
1. 當vue實例化的時候會做一個初始化的操作,在這個生命周期函數裏面我們可以做初始化的loading
2. 在當前函數中訪問不到data中的屬性,但是可以通過Vue的實例進行訪問 vm."屬性"
console.log(beforeCreate)
}
2. created(){
1. 當beforeCreate執行完畢以後,會執行當前函數,在當前函數中我們可以訪問data中的屬性
3. 如果需要進行前後端數據交互(ajax請求的時候)需要在當前生命周期函數中使用
console.log(created)
}
3(1). 如果沒有找到vue中的el 會使用
vue的實例方法
vm.$mount("id") 綁定el
優先級
vue中的el優先級比vm.$mount("id") 高
3(2). 在找到data中的el時:
el :"id",
//渲染虛擬DOM
render : function(h){
return h(App)
},
render : h => h(App) ,//es6返回值寫法
})
4. 如果沒有找到template模板的時候,就走outerHTML
beforeMount(){
beforeMount : 掛載前:數據和模板還沒有相結合,
(渲染)
render函數初次被調用時:數據和模板還沒有相結合,同時還沒有渲染到html頁面上,
渲染前data中數據最後的修改
console.log(beforeMount)
}
5. mounted(){
mounted : 掛載後:數據和模板進行相結合,渲染成真實的DOM結構,
1. 在當前生命周期函數裏面我們就可以訪問到真實的DOM結構,
2. 在Vue中我們可以通過$refs來訪問到真實的DOM結構
3. ref類似於id一樣 值必須是唯一的 訪問時我們可以通過 :this.$refs.屬性
console.log(mounted)
}
5.(1). beforeUpdate(){
beforeUpdate : 更新前,
1. 只要data中的屬性發生了改變,那麽這個生命周期函數就會執行,render函數會再次執行
2. 在這個生命周期函數中我們可以對數據進行最後的修改,同時也可以訪問到最新的DOM結構和數據
console.log(beforeUpdate)
}
5.(2). updated(){
updated : 更新後,
1. 當前生命周期函數中我們可以訪問到最新的DOM結構(數據更新最新的DOM結構)和數據
}
6. beforeDestroy(){
1.beforeDestroy 銷毀前:在銷毀之前還可以訪問到DOM結構 以及相關的數據(data),
2. 在這個生命周期函數中我們可以將綁定的事件進行移除
console.log(beforeDestroy);
vm.$destroy() 銷毀組件
}
7. dertroyed(){
dertroyed :銷毀後,
1. 在這個生命周期函數中將數據和模板之間的關系斷開(函數自己銷毀,不需要手動)
2. 在這個生命周期函數中我們還是可以訪問到data中的屬性,但訪問不到DOM結構了
}
})
vue生命周期鉤子函數解讀步驟