初識Vue

vue-loader 的作用

查看vue官方文檔阴幌,發(fā)現(xiàn)組件注冊一般都是這么寫的

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 將只在父模板可用
    'my-component': Child
  }
})

但是我們的實際項目中的代碼都是這樣的不从。

<template>
....
</template>
<script>
.....
</script>

原因就在于我們在實際項目中使用了 vue-loader, 它可以非常好的幫我們自動加載所有的內(nèi)容蝗拿,按照某種約定伤极。vue-loader文檔

vue組件和實例

這樣可以創(chuàng)建一個vue實例谎懦。每個 Vue.js 應用都是通過構造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例 啟動的:

var vm = new Vue({
  // 選項
})

可以擴展 Vue 構造器,從而用預定義選項創(chuàng)建可復用的組件構造器,這樣可以創(chuàng)建一個vue實例赐稽。

image.png

所有的 Vue.js 組件其實都是被擴展的 Vue 實例叫榕。

全局組件

要注冊一個全局組件,你可以使用 Vue.component(tagName, options)姊舵。 例如:

Vue.component('my-component', {
  // 選項
})

組件在注冊之后晰绎,便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例 之前 注冊了組件:

<div id="example">
  <my-component></my-component>
</div>
// 注冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
  el: '#example'
})

也可以這樣注冊組件

var apple = Vue.extend({
   ....
})
Vue.component('apple',apple) 

這樣相當于上面的一句Vue.component 括丁。Vue.extend 返回的是一個“擴展實例構造器”荞下,也就是一個預設了部分選項的 Vue 實例構造器。
Vue.component 是用來全局注冊組件的方法史飞,其作用是將通過 Vue.extend 生成的擴展實例構造器注冊(命名)為一個組件尖昏,可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時,會自動調(diào)用類似于 new myVue 這樣的構造函數(shù)來生成組件實例构资,并掛載到自定義元素上抽诉,當然實際情況要比這復雜得多。
vue.component

局部組件

不必在全局注冊每個組件吐绵。通過使用組件實例選項注冊迹淌,可以使組件僅在另一個實例/組件的作用域中可用:

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 將只在父模板可用
    'my-component': Child
  }
})

我們項目中的組件一般都是局部注冊河绽。該頁面需要什么組件引入什么組件。

vuex

什么時候需要vuex唉窃?
他的意思其實就是如果開發(fā)的程序并不是很龐大耙饰,一個頁面中的組件不是很多并且他們之間并不需要大量頻繁的互相讀寫操作,那么就可以直接使用傳統(tǒng)的Vue.js中的組件Prop或者事件觸發(fā)來修改狀態(tài)纹份,或者用組件 - vue.js**#非父子組件通信 中介紹的new一個空的Vue對象實例苟跪,并且通過事件觸發(fā)等方式來跨組件通信。如果中大型蔓涧,尤其是有許多事件傳播件已,那么vuex作用就體現(xiàn)出現(xiàn)了,為什么蠢笋?ok拨齐,dispatch,on,這種傳播,如果是單向的還好昨寞,向上瞻惋,向下,但是如果非單向援岩,那么必定是先傳上去歼狼,在傳下來,中間還要監(jiān)聽好各自事件別給我整亂了享怀。羽峰。。試想一下添瓷,一個中大型項目梅屉,這里會發(fā)生什么?一個字亂鳞贷,有的時候一個事件坯汤,對應的模塊都要找半天

必須將所有 state 都維護在 Redux 中嗎? 可以用 React 的 setState() 方法嗎搀愧?

沒有 “標準”惰聂。有些用戶選擇將所有數(shù)據(jù)都在 Redux 中維護,那么在任何時刻咱筛,應用都是完全有序及可控的搓幌。也有人將類似于“下拉菜單是否打開”的非關鍵或者 UI 狀態(tài),在組件內(nèi)部維護迅箩。適合自己的才是最好的溉愁。

使用局部組件狀態(tài)是更好的。作為一名開發(fā)者饲趋,應該決定使用何種 state 來組裝你的應用叉钥,每個 state 的生存范圍是什么罢缸。在兩者之間做好平衡,然后就去做吧投队。
這么個應用場景

一個按鈕,點擊它的時候顯示上面的文字爵川,再點擊它的時候不顯示上面的文字敷鸦。

redux是一個狀態(tài)管理工具,使用它本來就是為了管理公共狀態(tài)的寝贡。組件A發(fā)生的變化影響了組件BCD扒披,那么使用它很方便。但是圃泡,如果組件A的變化只影響它本身(包括未來也不會影響其他組件)碟案,那么何不回到react,把這個狀態(tài)直接存儲到組件本身上呢颇蜡?只需要一步价说,this.setState()

這里有一些將怎樣的數(shù)據(jù)放入 Redux 的經(jīng)驗法則:

  • 應用的其他部分是否關心這個數(shù)據(jù)?
  • 是否需要根據(jù)需要在原始數(shù)據(jù)的基礎上創(chuàng)建衍生數(shù)據(jù)风秤?
  • 相同的數(shù)據(jù)是否被用作驅(qū)動多個組件鳖目?
  • 能否將狀態(tài)恢復到特定時間點(在時光旅行調(diào)試的時候)?
  • 是否要緩存數(shù)據(jù)(比如:數(shù)據(jù)存在的情況下直接去使用它而不是重復去請求他)缤弦?
    組織state
    vuex實踐
    vuex源碼
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末领迈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子碍沐,更是在濱河造成了極大的恐慌狸捅,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件累提,死亡現(xiàn)場離奇詭異尘喝,居然都是意外死亡,警方通過查閱死者的電腦和手機刻恭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門瞧省,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鳍贾,你說我怎么就攤上這事鞍匾。” “怎么了骑科?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵橡淑,是天一觀的道長。 經(jīng)常有香客問我咆爽,道長梁棠,這世上最難降的妖魔是什么置森? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮符糊,結果婚禮上凫海,老公的妹妹穿的比我還像新娘。我一直安慰自己男娄,他們只是感情好行贪,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著模闲,像睡著了一般建瘫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尸折,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天啰脚,我揣著相機與錄音,去河邊找鬼实夹。 笑死橄浓,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的收擦。 我是一名探鬼主播贮配,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼塞赂!你這毒婦竟也來了泪勒?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤宴猾,失蹤者是張志新(化名)和其女友劉穎圆存,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仇哆,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡沦辙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了讹剔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片油讯。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖延欠,靈堂內(nèi)的尸體忽然破棺而出陌兑,到底是詐尸還是另有隱情,我是刑警寧澤由捎,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布兔综,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏软驰。R本人自食惡果不足惜涧窒,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锭亏。 院中可真熱鬧纠吴,春花似錦、人聲如沸慧瘤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碑隆。三九已至,卻和暖如春蹬音,著一層夾襖步出監(jiān)牢的瞬間上煤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工著淆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留劫狠,地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓永部,卻偏偏與公主長得像独泞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子苔埋,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫...
    果汁密碼閱讀 23,137評論 8 124
  • 距離上次健身隔了十幾天了.這樣子可不行.要持續(xù)鍛煉才行.不然會沒有那樣突出的效果的.另外在家里也好多多聯(lián)系才行. ...
    孔方圓閱讀 178評論 0 1
  • 今天我一個App提交審核组橄,于是我上傳了一個構建版本荞膘。上傳成功后顯示“正在處理中”,不過一會這個版本就消失了玉工,沒有在...
    讀月魚_Harlan閱讀 2,905評論 0 0
  • 曾經(jīng)我雄心勃勃遵班,想把每個學生教好屠升,想讓每個學生都不虛度光陰。現(xiàn)在我心有余力不足狭郑,你依舊昏昏欲睡腹暖,依舊對自己不...
    童初2017閱讀 373評論 0 9
  • 山不在高,有仙則名愿阐。水不在深微服,有龍則靈。斯是陋室,惟吾德馨以蕴。苔痕上階綠糙麦,草色入簾青。談笑有鴻儒丛肮,往來...
    陳筱Q閱讀 745評論 0 1