資訊專(zhuān)欄INFORMATION COLUMN
摘要：只能是同步函數(shù)，原因是無(wú)法捕捉異步函數(shù)的快照。除了這三個(gè)概念外，還有類(lèi)比計(jì)算屬性，用于從派生出一些值分割較大的狀態(tài)樹(shù)，便于管理。處理表單可手動(dòng)監(jiān)聽(tīng)或是使用帶的雙向綁定計(jì)算屬性。
一、Vue組件的創(chuàng)建
一般語(yǔ)法：
Vue.component(tagName, options)
務(wù)必在根組件實(shí)例化之前注冊(cè)組件
組件options說(shuō)明：
data: 必須是一個(gè)函數(shù)，目的在于返回獨(dú)立的對(duì)象，保證組件之間的數(shù)據(jù)不互相影響
components: 局部注冊(cè)一個(gè)組件，僅在當(dāng)前組件作用域內(nèi)可用
props: 用于父組件向子組件傳遞數(shù)據(jù)時(shí)使用，可傳靜態(tài)屬性，也可傳動(dòng)態(tài)的（數(shù)據(jù)綁定，父組件數(shù)據(jù)變化引起子組件數(shù)據(jù)相應(yīng)變化），一次性傳遞所有屬性可采用v-bind指令
computed: 計(jì)算屬性，在部分情況下可以代替watch的功能，也可用于:class的動(dòng)態(tài)綁定
watch: 即屬性偵聽(tīng)器，接受參數(shù)newData, oldData，含義顧名思義
methods: 定義組件內(nèi)的方法
生命周期函數(shù)：beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed，其具體含義可參照官方文檔
二、組件間數(shù)據(jù)傳遞來(lái)看看文檔里一段值得參考的語(yǔ)法（位置：組件-自定義事件-.sync修飾符）：
:foo="bar"即父組件向子組件傳遞屬性foo，vue中采用單向數(shù)據(jù)流，這里是為了讓父組件的數(shù)據(jù)和數(shù)據(jù)的改動(dòng)（若有的話(huà)）傳遞到子組件上，供子組件使用
update為vue生命周期函數(shù)，在數(shù)據(jù)變化前調(diào)用
這里update部分事實(shí)上為v-on的縮寫(xiě)，作用是監(jiān)聽(tīng)子組件中foo的改變并調(diào)用對(duì)應(yīng)的處理器
子組件向父組件發(fā)布事件(emit)會(huì)觸發(fā)父組件設(shè)置的監(jiān)聽(tīng)器（如果你設(shè)置了的話(huà)）
好了，這里涉及的概念可能比較多，所以再多解釋一下吧～為了邏輯上更加清新，vue是不推薦子組件改變父組件的數(shù)據(jù)的，主要是出于維護(hù)成本的考慮，這就是所謂的單向數(shù)據(jù)流。父組件可以通過(guò)改變prop影響子組件數(shù)據(jù)，而子組件可以通過(guò)emit觸發(fā)父組件方法。
但是，如果這樣的數(shù)據(jù)傳遞不僅僅限于父子組件之間，而是祖先與后代組件或是兄弟組件呢？顯然這會(huì)是一件很麻煩的事，為了處理這種多狀態(tài)、多通信的情形，我們引入了vuex。
三、vuex的使用如果你之前使用過(guò)flux、redux等狀態(tài)狀態(tài)管理工具的話(huà)，那么應(yīng)該會(huì)很容易理解這個(gè)工具是要做什么～
下面依次介紹一下state、mutation和action這三個(gè)核心概念：
state是一個(gè)持久化存儲(chǔ)的狀態(tài)，不歸屬于vue的某個(gè)特定組件，除非刷新頁(yè)面，否則數(shù)據(jù)不會(huì)消失～
在根實(shí)例中注冊(cè)store，下發(fā)到所有子組件，使用如下：
computed: {
count () {
return this.$store.state.count
}
}
如果想要簡(jiǎn)化定義，使用mapState輔助函數(shù)就可，使用時(shí)從vuex引入該方法就可。
mutationstate的值不能直接被操作，想要改變它必須通過(guò)提交mutation的形式進(jìn)行，方式為：
store.commit("something", payload)
注意一下第二個(gè)參數(shù)，這是以載荷形式提交參數(shù)，參數(shù)最多一個(gè)，想傳多個(gè)參數(shù)的話(huà)必須以對(duì)象的形式提交。
mutation只能是同步函數(shù)，原因是devtool無(wú)法捕捉異步函數(shù)的快照。
action為了執(zhí)行異步操作，vuex引入了action來(lái)完成這一工作，調(diào)用方式是用dispatch方法，簡(jiǎn)化寫(xiě)法與state和mutation是類(lèi)似的，值得看看的是將它和es6的promise和es7的async與await結(jié)合起來(lái)的工作原理：
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit("someMutation")
resolve()
}, 1000)
})
}
}
這個(gè)action返回了一個(gè)Promise對(duì)象，可以在后續(xù)進(jìn)行處理，同時(shí)action中也可以調(diào)用其他異步action。
除了這三個(gè)概念外，還有g(shù)etter（類(lèi)比計(jì)算屬性，用于從state派生出一些值）、module（分割較大的狀態(tài)樹(shù)，便于管理）。
處理表單可手動(dòng)監(jiān)聽(tīng)input、change或是使用帶setter的雙向綁定計(jì)算屬性。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/90211.html
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：定義需要狀態(tài)的參數(shù)變量，狀態(tài)變更用于改變的狀態(tài)，注意中是不能直接改變中的狀態(tài)的，一定要借助于的事件分發(fā)。而在中進(jìn)行事件的分發(fā)就可以進(jìn)行異步操作。當(dāng)然還有許多的地方可以用到，比如說(shuō)在本項(xiàng)目的彈窗組件也用到了，來(lái)根據(jù)具體情境顯示對(duì)應(yīng)的提示文本。 寫(xiě)在文章前： 在第一版初步實(shí)現(xiàn)cnode的基本功能后，本來(lái)是用本地存儲(chǔ)的存儲(chǔ)用戶(hù)登錄成功返回的用戶(hù)的基本信息，用于后面的回復(fù)功能，查看信息等操作需...
閱讀 3823·2023-04-26 00:56
閱讀 2828·2021-09-30 10:01
閱讀 1078·2021-09-22 15:30
閱讀 4049·2021-09-07 10:21
閱讀 1730·2021-09-02 15:40
閱讀 2920·2021-08-30 09:47
閱讀 1436·2021-08-16 10:57
閱讀 1951·2019-08-30 14:01
