国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于vue、vuex的一些初步小結(jié)

joywek / 1046人閱讀

摘要：只能是同步函數(shù)，原因是無法捕捉異步函數(shù)的快照。除了這三個概念外，還有類比計算屬性，用于從派生出一些值分割較大的狀態(tài)樹，便于管理。處理表單可手動監(jiān)聽或是使用帶的雙向綁定計算屬性。

一、Vue組件的創(chuàng)建

一般語法：

Vue.component(tagName, options)

務(wù)必在根組件實例化之前注冊組件

組件options說明：

data: 必須是一個函數(shù)，目的在于返回獨立的對象，保證組件之間的數(shù)據(jù)不互相影響

components: 局部注冊一個組件，僅在當(dāng)前組件作用域內(nèi)可用

props: 用于父組件向子組件傳遞數(shù)據(jù)時使用，可傳靜態(tài)屬性，也可傳動態(tài)的（數(shù)據(jù)綁定，父組件數(shù)據(jù)變化引起子組件數(shù)據(jù)相應(yīng)變化），一次性傳遞所有屬性可采用v-bind指令

computed: 計算屬性，在部分情況下可以代替watch的功能，也可用于:class的動態(tài)綁定

watch: 即屬性偵聽器，接受參數(shù)newData, oldData，含義顧名思義

methods: 定義組件內(nèi)的方法

生命周期函數(shù)：beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed，其具體含義可參照官方文檔

二、組件間數(shù)據(jù)傳遞

來看看文檔里一段值得參考的語法（位置：組件-自定義事件-.sync修飾符）：

:foo="bar"即父組件向子組件傳遞屬性foo，vue中采用單向數(shù)據(jù)流，這里是為了讓父組件的數(shù)據(jù)和數(shù)據(jù)的改動（若有的話）傳遞到子組件上，供子組件使用

update為vue生命周期函數(shù)，在數(shù)據(jù)變化前調(diào)用

這里update部分事實上為v-on的縮寫，作用是監(jiān)聽子組件中foo的改變并調(diào)用對應(yīng)的處理器

子組件向父組件發(fā)布事件(emit)會觸發(fā)父組件設(shè)置的監(jiān)聽器（如果你設(shè)置了的話）

好了，這里涉及的概念可能比較多，所以再多解釋一下吧～為了邏輯上更加清新，vue是不推薦子組件改變父組件的數(shù)據(jù)的，主要是出于維護(hù)成本的考慮，這就是所謂的單向數(shù)據(jù)流。父組件可以通過改變prop影響子組件數(shù)據(jù)，而子組件可以通過emit觸發(fā)父組件方法。

但是，如果這樣的數(shù)據(jù)傳遞不僅僅限于父子組件之間，而是祖先與后代組件或是兄弟組件呢？顯然這會是一件很麻煩的事，為了處理這種多狀態(tài)、多通信的情形，我們引入了vuex。

三、vuex的使用

如果你之前使用過flux、redux等狀態(tài)狀態(tài)管理工具的話，那么應(yīng)該會很容易理解這個工具是要做什么～

下面依次介紹一下state、mutation和action這三個核心概念：

state

是一個持久化存儲的狀態(tài)，不歸屬于vue的某個特定組件，除非刷新頁面，否則數(shù)據(jù)不會消失～

在根實例中注冊store，下發(fā)到所有子組件，使用如下：

computed: {
  count () {
    return this.$store.state.count
  }
}

如果想要簡化定義，使用mapState輔助函數(shù)就可，使用時從vuex引入該方法就可。

mutation

state的值不能直接被操作，想要改變它必須通過提交mutation的形式進(jìn)行，方式為：

store.commit("something", payload)

注意一下第二個參數(shù)，這是以載荷形式提交參數(shù)，參數(shù)最多一個，想傳多個參數(shù)的話必須以對象的形式提交。

mutation只能是同步函數(shù)，原因是devtool無法捕捉異步函數(shù)的快照。

action

為了執(zhí)行異步操作，vuex引入了action來完成這一工作，調(diào)用方式是用dispatch方法，簡化寫法與state和mutation是類似的，值得看看的是將它和es6的promise和es7的async與await結(jié)合起來的工作原理：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit("someMutation")
        resolve()
      }, 1000)
    })
  }
}

這個action返回了一個Promise對象，可以在后續(xù)進(jìn)行處理，同時action中也可以調(diào)用其他異步action。

除了這三個概念外，還有g(shù)etter（類比計算屬性，用于從state派生出一些值）、module（分割較大的狀態(tài)樹，便于管理）。

處理表單可手動監(jiān)聽input、change或是使用帶setter的雙向綁定計算屬性。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90211.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • vuex在重構(gòu)Cnode項目中的運用

    摘要：定義需要狀態(tài)的參數(shù)變量，狀態(tài)變更用于改變的狀態(tài)，注意中是不能直接改變中的狀態(tài)的，一定要借助于的事件分發(fā)。而在中進(jìn)行事件的分發(fā)就可以進(jìn)行異步操作。當(dāng)然還有許多的地方可以用到，比如說在本項目的彈窗組件也用到了，來根據(jù)具體情境顯示對應(yīng)的提示文本。 寫在文章前： 在第一版初步實現(xiàn)cnode的基本功能后，本來是用本地存儲的存儲用戶登錄成功返回的用戶的基本信息，用于后面的回復(fù)功能，查看信息等操作需...

    trilever 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<