vue 524 (生命周期 計算屬性 監聽)
阿新 • • 發佈：2018-05-25
自己的 body ava pan span ext 成員變量 col create
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
依據上表可以確定各個位置的先後觸發順序
// 關於計算屬性:
vue改變或獲取一個內部方法有以下兩種種.
1.在vue對象中 以 methods:{}模式定義各類成員方法:
例如(js vue對象定義內): methods:{ FF1(){return 成員變量1+‘bbb‘}
在標簽內使用時為 <標簽> {{FF1()}} </標簽> //返回 FF1()方法值
該模式是每次調用都會返回最新值.
2. 在vue對象中 以 computed:{}模式定義各類成員方法:
例如(js vue對象定義內): computed:{ FF1(){return 成員變量1+‘bbb‘}
在標簽內使用時為 <標簽> {{FF1}} </標簽> //返回 FF1()方法值
該模式是每次調用不一定會返回最新值. ,除非所引用的變量值發生變更,不然每次調用都是原始值,當調用的變量發生變化時,計算屬性值會自動更新
//watch:可以檢測指定變量變化,並做指定操作
watch:{變量名1(新值,舊值){用新舊值做先關操作.})}
///以上內容配套測試代碼///
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>生命周期+計算屬性 監聽</title> <script src="vue.js"></script><style type="text/css"></style></head><body><div id="zuj"> {{fl + ln}} <input type="button" value="chang" v-on:click="xg"></div></body><script type =‘text/javascript‘> var vm= new Vue({ el:‘#zuj‘, data:{mmm:‘test123456‘, fl:‘aaa‘, ln:‘bbb‘}, watch:{fl(nv,odv){console.log(nv)}}, mounted: function(){ console.log(‘mounted died‘) //後執行 }, created:function(){ console.log(‘created did‘) //先執行 }, methods:{ //此範圍內將以 fh() 方式進行調用 fh(){ return this.mmm.split("").reverse().join("")}, xg(){this.fl=‘cccc‘}, }, computed:{ fh2(){ return this.mmm +"kkkkkkkklklk" //調用後,如果mmm值不變化,則調用一直未首次調用值 } } })</script></html>
vue 524 (生命周期 計算屬性 監聽)