試用期對VUE的學(xué)習(xí)
問題
data中為什么要使用return返回?cái)?shù)據(jù)
如果不使用return進(jìn)行包裹，會導(dǎo)致data中的數(shù)據(jù)全局可見大磺，造成變量污染。
計(jì)算屬性與方法的差異
計(jì)算屬性的出現(xiàn)是為了減少模板負(fù)擔(dān)過重彪笼，難以維護(hù)捧灰。雖然使用method也可以完成同樣的操作丑罪，但我們更傾向于單對一個變量進(jìn)行操作時使用computed。他倆職責(zé)不一樣凤壁，函數(shù)一般用來作為數(shù)據(jù)的處理器來使用吩屹。
Vue中出現(xiàn)的語法糖
v-model : event.target.value- 事件冒泡
click.stop/click.self : event.stopPropagation()
生命周期
VUE2
創(chuàng)建、掛載只執(zhí)行一次
創(chuàng)建
beforecreate
獲取不到this.data
created
能獲取到this.data
狀態(tài)初始化 或 掛載到當(dāng)前實(shí)例的一些屬性
一般用于：查看localstorage或cookie中的值拧抖，用來處理狀態(tài)
掛載
beforeMount
獲取不到DOM中{{}}模板
在模板解析之前最后一次修改模板DOM節(jié)點(diǎn)
mounted
拿到真實(shí)的DOM節(jié)點(diǎn)煤搜，即{{}}中的真實(shí)數(shù)據(jù)
依賴于DOM創(chuàng)建之后，才進(jìn)行初始化工作的插件
一般用于：
- 輪播圖插件
- 訂閱 bus.$on
- 發(fā)ajax
更新
beforeUpdate
一般用于：記錄滾動條的位置
updated
一般用于：更新完成唧席，獲取更新后的DOM
銷毀
- 清除定時器
clearInterval(this.id) - 事件解綁
window.onresize = null
組件之間的通信問題
父子
porps
props:{
name :{
type : String ,
default : ""
}
}
子父
this.$emit
//父組件中定義
<child @event="handleData"></child>
methods : {
handleData(data){
console.log(data) //100
//處理子傳遞過來的數(shù)據(jù)
}
}
//子組件中定義
<button @click="handleClick">點(diǎn)擊</button>
methods : {
handleClick(){
this.$emit("event",100)
}
}
叔侄 甚至更多
- bus 中央事件總線
- vuex 狀態(tài)管理
