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實例赐稽。
所有的 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)驗法則: