1. 程式人生 > >vue生命週期及例項的屬性和方法

vue生命週期及例項的屬性和方法

vue的生命週期 vue例項從建立到銷燬的過程,稱為生命週期,共八個階段 window.onload=function(){ let vm = new Vue({ el:'#itany', data:{//儲存資料 msg:'welcome to itany' }, methods:{ update(){ this.msg='歡迎來到北京!' }, destroy(){ vm.$destroy(); } }, beforeCreate(){ alert('元件例項剛剛建立,還未進行資料觀測和事件配置'); }, created(){//常用 alert('例項已經建立完成,並且已經進行資料觀測和事件配置'); }, beforeMount(){ alert('模板編譯之前,還沒掛載'); }, mounted(){ alert('模板編譯之後,已經掛載,此時才會渲染頁面,才能看到頁面上資料的展示'); }, beforeUpdate(){ alert('元件更新之前'); }, updated(){ alert('元件更新之後'); }, beforeDestroy(){ alert('元件銷燬之前'); }, destroyed(){ alert('元件銷燬之後'); } }); } 計算屬性 基本用法 計算屬性也是用來儲存資料的, a資料可以進行邏輯處理操作 b對計算屬性中的資料進行監視
計算屬性vs方法 將計算屬性的get函式定義為一個方法也可以實現類似的功能 區別: a,計算屬性是基於它的依賴進行更新的,只有在相關依賴發生改變時才能更新變化 b,計算屬性是快取的,只要相關依賴沒有改變,多次訪問計算屬性得到的值是之前快取的計算結果。不會多次執行。
計算屬性的組成get函式和set函式 分別用來獲取計算屬性和設定計算屬性 預設只有get,如果需要set,要自己新增
vue例項的屬性和方法 屬性: vm.$el vm.$data vm.$option vm.$refs 方法: vm.$mount() vm.$destroy() vm.$nextTick()
vm.$set() vm.$delete() vm.$watch()