一.異步DOM更新
DOM更新是異步的
如果真的想獲取dom中的數據:
- 延時器
- this.$nextTick( ( )=>{ 獲取 } ) DOM更新完成之後,自動回調
一次性更新的問題
數據不是以改變就會更新DOM,而是數據不變了,一次性改變的
二.$set
如果數據data裏沒有數據obj:{ } ,沒有name屬性,但是直接加了this.obj.name= '春'
解決方法 :
- 方法1 : 現在data裏聲明好,給個初始值,再使用
- 方法2 : 第三方框架裏, this.$set(this.obj , ' name ' , ' ')
三.監聽器 wacth
作用 : 監聽數據的變化
wacth的基本使用
watch :{
num(newVal,oldVal)
}
監聽複雜類型 深度監聽
- 方式一 obj : { deep:true , handler(newVal ) { } }
- 方式二 'obj.name' (newVal) { }
computed和watch的區別
computed : 根據已知值,得到一個新值
新值隨着已知(相關的數據) 的變化而變化
特點 : 別人改變, 影響了我
wacth: 監聽已知值
特點 :我改變,影響別人
四.過濾器 (格式化數據工具)
如何使用
1.先註冊
全局過濾器 : 所有的vue實例裏都可以使用
Vue.filter('dataFliter',(res) => { return ' XXX ' })
局部過濾器 : 只有註冊過濾器的當前的vue實例纔可以使用
在vm實例中註冊 : fliter : { dateFilter(res){ return 'hehe' } }
2. 再使用 : 格式 要處理的數據 | 過濾器
moment : 安裝 引入 使用 moment(res).format('YYYY-MM-DD')
傳參 : 傳 data | dataFliter('YYYY')
接 (res,str)
五.生命週期函數(鉤子函數)
實例生命週期 == 組件生命週期
鉤子函數 = 生命週期函數
注意點: 1. 鉤子函數vue會自動調節
2. 鉤子函數命名都是規定好的
三大階段
1. 掛載階段 (進入頁面階段)
> 1.數據初始化
beforeCreate ---- 數據響應式之前調用
created ------- 數據響應式之後調用
特點 : 可以獲取data裏的數據和methods 的方法
場景 : 發送ajax 操作data裏的數據 操作本地數據
> 2. 找模板
<h1>{{ msg }}</h1>
el : 有 ---繼續下一步 沒有 : vm.$mount('#app') 繼續下一步
tempalte : 沒有 => el編譯 有 => 編譯template裏的內容
優先級 : template > el (同時出現 template生效)
> 3. DOM渲染
beforeMount : DOM渲染之前
mounted : DOM 渲染之後
場景 : 1. 發送ajax請求 2. 操作DOM
2. 更新階段(更新數據)
- boforeUpdate 更新之前
- updated 更新之後
3. 卸載階段(頁面關閉)
- beforeDestroy() 卸載之前 手動處理自己添加的定時器之類的
- destroyed() 卸載之後