生活随笔
收集整理的這篇文章主要介紹了
VueJS生命周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、生命周期
vue在生命周期中有這些狀態，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
在實例化的過程中，會調用這些生命周期的鉤子，給我們提供了執行自定義邏輯的機會。
vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鉤子的內容
beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象
created ：數據已經綁定到了對象實例，但是還沒有掛載對象
beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的
el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創
建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點
mounted:將el的內容掛載到了el，相當于我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們
就會發現dom的元素和我們el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，并
進 行各種操作
當我們的data發生改變時，會調用beforeUpdate和updated方
beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還
沒有發生改變
updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到
dom上面，完成更新
beforeDestroy,destroed :實例的銷毀，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據
與view的綁定，即數據驅動
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>vue生命周期 </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"> {{message}}</div><script>//創建vue對象//鉤子函數(回調函數)：不用手動調用的函數/** $.ajax({* url:"",* type:"",* data:"",* dataType:"",* success:function(){* * }* ,error:function(){* * }* * })*/var vm = new Vue({el:"#app", // 選擇器 $("#app")data:{message:"hello"},methods:{findAll:function(){}},beforeCreate: function() {console.log(this);showData('創建vue實例前', this);},created: function() {this.findAll();showData('創建vue實例后', this);},beforeMount: function() {showData('掛載到dom前', this);},mounted: function() {showData('掛載到dom后', this);},beforeUpdate: function() {showData('數據變化更新前', this);},updated: function() {showData('數據變化更新后', this);},beforeDestroy: function() {vm.test = "3333";showData('vue實例銷毀前', this);},destroyed: function() {showData('vue實例銷毀后', this);}});function showData(process, obj) {console.log(process);console.log('data 數據：' + obj.test)console.log('掛載的對象：')console.log(obj.$el)realDom();console.log('------------------')console.log('------------------')}function realDom() {console.log('真實dom結構：' + document.getElementById('app').innerHTML);}vm.message="good...";vm.$destroy();
</script>
</body>
</html></script></body>
</html>
總結
以上是生活随笔為你收集整理的VueJS生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
