資訊專(zhuān)欄INFORMATION COLUMN
摘要：數(shù)據(jù)通信首先我們通常說(shuō)數(shù)據(jù)傳遞組件通信什么什么的我認(rèn)為可以分成兩種場(chǎng)景頁(yè)面和頁(yè)面之間組件和組件之間通信方案不管什么場(chǎng)景在使用的時(shí)候一般我們有下面種選擇去實(shí)現(xiàn)數(shù)據(jù)通信選擇通信方案我們?cè)谶x擇通信方案的時(shí)候比如說(shuō)確定列表頁(yè)如何把每一項(xiàng)的傳遞給詳情
數(shù)據(jù)通信
首先, 我們通常說(shuō)數(shù)據(jù)傳遞, 組件通信什么什么的, 我認(rèn)為可以分成兩種場(chǎng)景:
頁(yè)面和頁(yè)面之間
組件和組件之間
通信方案不管什么場(chǎng)景, 在使用 Vue 的時(shí)候, 一般我們有下面 5 種選擇去實(shí)現(xiàn)數(shù)據(jù)通信.
vuex
storage
props
event
URL queryString
選擇通信方案我們?cè)谶x擇通信方案的時(shí)候, 比如說(shuō)確定 列表頁(yè)如何把每一項(xiàng)的 id 傳遞給 詳情頁(yè)的時(shí)候,
一般要考慮什么問(wèn)題? 你是直接全套都是 vuex, 還是說(shuō)喜歡使用 sessionStorage?
一般我們要考慮下面的幾個(gè)問(wèn)題:
頁(yè)面是否可以刷新
頁(yè)面是否可以分享 (或者說(shuō)URL 是否要求 RESTful)
數(shù)據(jù)更新之后, 所有使用此數(shù)據(jù)的組件是否都需要響應(yīng)更新
分析先說(shuō) "頁(yè)面和頁(yè)面之間的通信場(chǎng)景", 首先上面的 5 種方案, 我們可選的有:
vuex, storage, URL queryString.
然后分析一下, 每一種方案, 它對(duì)上面的 3個(gè)問(wèn)題, 是不是很好的解決掉了:
備注:
頁(yè)面通信場(chǎng)景不會(huì)要求實(shí)時(shí)響應(yīng), 因?yàn)榫退阆聜€(gè)頁(yè)面的確是實(shí)時(shí)響應(yīng), 你也看不見(jiàn),
所以主要看 "刷新" 和 "分享"
vuex: 不能刷新, 不能分享
storage: 不能分享
url: 能刷新, 能分享
這樣看來(lái), url queryString 的方式是 "頁(yè)面通信場(chǎng)景" 中的最佳選擇, 但是我依舊有疑慮:
我始終覺(jué)得把跳轉(zhuǎn)信息, 暴露給用戶(hù), 是很不好的事情; (心理問(wèn)題, 可以克服)
url 的長(zhǎng)度限制; 這個(gè)無(wú)所謂的, 2k, 你再怎么傳遞, 我都不會(huì)覺(jué)得你會(huì)出現(xiàn)超過(guò) 2k 的情況
url 需要拼接, 這個(gè)拼接是否麻煩? 也不麻煩, 只是對(duì)象轉(zhuǎn)字符串.
這樣每個(gè)頁(yè)面都需要在進(jìn)入的時(shí)候先解析一下 queryString, 這樣是不是增加了麻煩的程度
也可以通過(guò) mixins 來(lái)操作. 聚合到 mixins, 況且也不一定很多.
所以我們可以選擇 "url queryString" 作為 "頁(yè)面和頁(yè)面通信場(chǎng)景" 中的通信方案.
以后你就可以這樣用了:
比如列表頁(yè)面跳轉(zhuǎn)到詳情頁(yè)要帶一個(gè) id
this.$router.push({
path: "detail",
query: {
id
}
})
你的 url 會(huì)始終長(zhǎng)這樣:
https://abc.com/#/?id=123
備注: 如果你的頁(yè)面不能刷新和分享, 你完全可以三種方案隨便選, 愛(ài)誰(shuí)誰(shuí).
重點(diǎn): url queryString 的方式, 有一個(gè)問(wèn)題解決不了:
從詳情頁(yè)到訂單頁(yè), 通過(guò) queryString 帶了商品信息過(guò)來(lái), 假設(shè)此時(shí) url 長(zhǎng)這樣:
order/?goods=xxx
訂單頁(yè)面有一個(gè)收貨地址欄, 點(diǎn)擊可以進(jìn)入地址編輯頁(yè)面, 此時(shí)的 url 不會(huì)帶參數(shù)的(你可以試試帶一下看多麻煩)
address-edit/
地址編輯頁(yè)面有一個(gè)保存按鈕, 點(diǎn)擊會(huì)返回到訂單頁(yè)面
order/
so, url queryString 丟了.
我目前的解決方案:
針對(duì)這種存在多入口的頁(yè)面, 一定要在進(jìn)入它的第一時(shí)間, 先把 queryString 存起來(lái).
并且做如下判斷:
if (// 存在 queryString) {
// use queryString
} else {
// use storage
}
但是這種方式還是搞不定 從地址編輯頁(yè)返回到訂單頁(yè), 用戶(hù)此時(shí)分享訂單頁(yè), 分享出去的玩意肯定會(huì)是錯(cuò)的.
現(xiàn)在來(lái)說(shuō)下 "組件和組件之間的通信場(chǎng)景"
上面的 5 種方案, 可以選擇 vuex, event, props, storage
先看下 刷新, 分享和實(shí)時(shí)響應(yīng)
vuex, 不能刷新
event, props 能刷新能分享
storage 不能分享 & 實(shí)時(shí).
解釋:
為什么 vuex 在這里還是不能刷新
因?yàn)槿绻褂玫?state 里面的值是其他頁(yè)面設(shè)置的而不是 init 就存在的, 刷新丟值.
為什么 event, props 可以做到防刷新防分享
因?yàn)檫@兩個(gè)玩意是程序運(yùn)行它就生效的, 它也可以做到實(shí)時(shí)更新.
storage 雖然在存的時(shí)候有一個(gè)事件, 但是這太 trick 了.
所以我們選擇的是 event, props?
分析一下吧.
組件通信可以分成兩種, 父子, 同輩.
父子之間呢:
父?jìng)髯? props
子傳父: $emit(event)
這就是 "props down, events up";
但是其實(shí)還有:
父?jìng)髯? this.$refs.xxx
子傳父: this.$parent.xxx
還有: 自定義 v-model
還有: 讓 props 是一個(gè)對(duì)象.
同輩之間: event-bus.
所以這就完了? 啥都沒(méi)有了? 嗯, 就這樣.
思考
關(guān)于 vuex 的應(yīng)用場(chǎng)景的考慮
不是應(yīng)該所有的組件, 路由之間的數(shù)據(jù)傳遞都應(yīng)該通過(guò) vuex, 當(dāng)同時(shí)存在兩種方式可以選擇的時(shí)候,選擇 vuex 的唯一理由只有一個(gè):
需要響應(yīng)式的狀態(tài)
why?
因?yàn)?vuex 雖然有輔助函數(shù), 但是用起來(lái)還是要 引入, 定義. 而且真的是一刷新頁(yè)面就掛了.
可以通過(guò)監(jiān)聽(tīng) beforeunload 事件, 在其中緩存 state, 然后在 onload 事件再恢復(fù), 這樣可以避免掉vuex 的丟值.
沒(méi)有必要追求全項(xiàng)目統(tǒng)一的一種通信方式, 理論上你不考慮刷新分享, 全項(xiàng)目都用 vuex, 什么事情也不會(huì)有的.
vuex 是狀態(tài)管理, 不是保存常量的地方.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87119.html
摘要：一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù)，而通過(guò)子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專(zhuān)門(mén)總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過(guò)向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫(xiě)，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...
摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實(shí)例講述這其中的差別及使用場(chǎng)景，希望對(duì)小伙伴有些許幫助。狀態(tài)改變提交操作方法。 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。一般來(lái)說(shuō)，組件可以有以下幾種關(guān)系：showImg(https://segmentfault.com/img/remote/146000001...
摘要：組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見(jiàn)諒。示例效果如下兄弟組件同級(jí)別組件相互間的通信，我們可以使用或著。 Vue組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見(jiàn)諒。文章代碼具體見(jiàn)DEMO；文章首發(fā)于imon...
摘要：我在中寫(xiě)了這段代碼在組件被創(chuàng)建時(shí)候?qū)?huì)執(zhí)行此函數(shù)相當(dāng)于進(jìn)入頁(yè)面的自執(zhí)行使用方法監(jiān)聽(tīng)屬性并執(zhí)行一個(gè)回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候，會(huì)將監(jiān)聽(tīng)到的值賦給并且打印。 天地不仁以萬(wàn)物為芻狗，宇宙無(wú)義視眾生如螻蟻 ——蕭鼎和我 上一節(jié)列出了５個(gè)關(guān)鍵點(diǎn)，第一個(gè)路由已經(jīng)解決了，接下來(lái)解決第二個(gè)問(wèn)題： 組件的通信問(wèn)題 一、組件的關(guān)系 組件之間的關(guān)系無(wú)非就是兩種父子關(guān)系...
摘要：是一個(gè)事件，它向下傳播到當(dāng)前實(shí)例的所有后代。由于后代擴(kuò)展為多個(gè)子樹(shù)，事件傳播將會(huì)遵循許多不同的路徑。組件修改實(shí)現(xiàn)遞歸地在父鏈上傳播事件。 組件通信 父子組件通信 父?jìng)髯?props屬性 子傳父 $emit事件 這兩種官方文檔里有很詳細(xì)的介紹就不解釋了 還是舉個(gè)栗子： //parent.vue父組件 parent: {{money}} ...
閱讀 2183·2023-04-25 15:00
閱讀 2361·2021-11-18 13:14
閱讀 1188·2021-11-15 11:37
閱讀 3097·2021-09-24 13:55
閱讀 1234·2019-08-30 15:52
閱讀 2656·2019-08-29 12:35
閱讀 3371·2019-08-29 11:04
閱讀 1219·2019-08-26 12:13
