試用期對(duì)VUE的學(xué)習(xí)

問題

data中為什么要使用return返回?cái)?shù)據(jù)

如果不使用return進(jìn)行包裹，會(huì)導(dǎo)致data中的數(shù)據(jù)全局可見，造成變量污染。

計(jì)算屬性與方法的差異

計(jì)算屬性的出現(xiàn)是為了減少模板負(fù)擔(dān)過重，難以維護(hù)。雖然使用method也可以完成同樣的操作，但我們更傾向于單對(duì)一個(gè)變量進(jìn)行操作時(shí)使用computed。他倆職責(zé)不一樣，函數(shù)一般用來(lái)作為數(shù)據(jù)的處理器來(lái)使用。

Vue中出現(xiàn)的語(yǔ)法糖

1. v-model : event.target.value
2. 事件冒泡 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中的值，用來(lái)處理狀態(tài)

掛載

beforeMount

獲取不到DOM中{{}}模板

在模板解析之前最后一次修改模板DOM節(jié)點(diǎn)

mounted

拿到真實(shí)的DOM節(jié)點(diǎn)，即{{}}中的真實(shí)數(shù)據(jù)

依賴于DOM創(chuàng)建之后，才進(jìn)行初始化工作的插件

一般用于：

1. 輪播圖插件
2. 訂閱 bus.$on
3. 發(fā)ajax

更新

beforeUpdate

一般用于：記錄滾動(dòng)條的位置

updated

一般用于：更新完成，獲取更新后的DOM

銷毀

1. 清除定時(shí)器 clearInterval(this.id)
2. 事件解綁 window.onresize = null

組件之間的通信問題

父子

porps

props:{
    name :{
        type : String ,
        default : ""
    }
}

子父

this.$emit

//父組件中定義
<child @event="handleData"></child>
methods : {
    handleData(data){
        console.log(data) //100
        //處理子傳遞過來(lái)的數(shù)據(jù)
    }
}

//子組件中定義
<button @click="handleClick">點(diǎn)擊</button>
methods : {
    handleClick(){
        this.$emit("event",100)
    }
}

叔侄 甚至更多

1. bus 中央事件總線
2. vuex 狀態(tài)管理