背景：

一個項目完工在即，鑒于此，前端使用了vue，寫下此欄，以供日后翻閱，
會涉及到我所運用到的vue相關知識，需要一定的js基礎。
默認vue的single-file-components（單文件組件開發）既sfc。

本文主題

vue里數據的處理

存放數據

我們先看vue里哪里能存放數據：

1.單個vue文件里。
2.官方插件vuex，作為一個集中管理經常復用的數據很有用。
3.直接聲明在vue實例上,用$號標識。

第一種情況下存放數據對于單個文件又分這幾種屬性
1.1 data(常規使用，默認函數返回:忘記為啥了)
1.2 computed(計算，也就說，這是一個基于其他屬性的屬性)
1.3 watch(監聽屬性，官方推薦在此分類下的屬性用于觸發異步函數)
1.4 props(特殊，用來接收父組件向子組件傳遞的屬性)
1.5 propsData(特殊，貌似是用來測試的)

第二種情況下數據存放都在state里
第三種情況是特別特別特別的，不討論(都有vux，還用什么$號啊)。

---

數據傳遞

數據傳遞也分幾種情況
1.全局傳遞。
2.父向子傳遞。
3.子向父傳遞。

第一種情況，請使用vuex,注意刷新會清空
第二種情況，子聲明props，父在子組件上聲明這個屬性，就能傳遞下去
第三種情況，一般情況就用事件提交，父監聽子聲明的事件，然后就能接收到了

這里對props和事件做個特殊說明，假如運用了第三方的vue框架，你可能就是封裝一下
對方的組件使其變成專用的子組件，這個時候，方法啊，屬性啊，都在第三方組件上
而你封裝的木有。如果一個個在去聲明，第三方組件的props或者event著實累，自然有
簡便的api啦。vm.$attrs,vm.$listener,然后你封裝的子組件就把所有事件和屬性都會被
第三方的組件所監聽。vm.$listener，除法你開發了特殊的指令，否則，不用官網那樣聲明，第三方聲明的事件都會被監聽。

---

數據的修改

有以下幾個note：
1.computed

別去修改，本身就是基于依賴，但是computed是個很好的展示數據容器。它原本是只有get方法，但是可以聲明set方法。

2.watch

有兩個屬性，deep和immediate，一個是深度檢測，一個是立即執行，相當于任務隊列的第一個觸發，deep不如直接用"foo.bar"的形式來監視.

如果同時監視N個屬性，而這幾個屬性又都有關聯性，個人推薦，這個時候，不要用watch，不如去監聽事件，用switch語句更加方便，尤其是在有異步方法存在的時候，異步隊列搞得心都碎了。

3.props

最好有默認值

4.比較簡單便捷的方式，是引用某個組件,參開api里的ref。

            原文地址：https://segmentfault.com/a/1190000016820628

轉載于:https://www.cnblogs.com/lalalagq/p/9900945.html

總結

以上是生活随笔為你收集整理的vue里的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。