使用vue開發(fā)感悟
剛開始開發(fā)vue的組件有些不太習(xí)慣，對vue templte的模板語法對比react渲染的內(nèi)容寫在render函數(shù)里面鲸伴，
更改狀態(tài)直接調(diào)用this.屬性名而react是this.setState
vue引入組件后要在components里面注冊組件府蔗，而react不需要注冊組件。
vue的props屬性需要聲明汞窗，react直接拿來用
凡此種種姓赤，對比之后我更愛react，函數(shù)式思想簡潔易懂仲吏。
但是vue比較小巧靈活模捂，當(dāng)所有的容器都準(zhǔn)備好了，機(jī)器就開始運行了蜘矢，后面對機(jī)器的一系列操作頁比較簡單。
在這個過程中综看，會遇到a litter坑坑品腹。
開發(fā)前準(zhǔn)備
開發(fā)前抽時間補(bǔ)了下唐金洲老師的課程《vue開發(fā)實戰(zhàn)》課程挺好的實力推薦 git課程源碼生態(tài)篇的知識已經(jīng)夠開發(fā)組件用了『毂《調(diào)試九法》里講到要解決問題首先得理解系統(tǒng)舞吭，開發(fā)前需要對vue有一個清楚得理解，當(dāng)然閱讀官方文檔是必不可少的析珊。
- 不可以直接修改父組件的props屬性羡鸥。
- .觸發(fā) update 數(shù)據(jù)驅(qū)動視圖改變。狀態(tài)的改變未必會觸發(fā)組件的更新忠寻，屬性的改變頁未必能觸發(fā)組件的更新惧浴。狀態(tài)未必是響應(yīng)式的，響應(yīng)式的狀態(tài)未必添加到模板里奕剃。
- 對vue更新時生命周期的理解
在beforeUpdated和updated之間會進(jìn)行render執(zhí)行衷旅。
什么時候觸發(fā)：狀態(tài)發(fā)生改變或者$foreUpdata()強(qiáng)制跟新捐腿，
這兩個生命周期可以做什么：更新開始前移除事件監(jiān)聽器，更新后添加事件監(jiān)聽器柿顶。
- .在updated時候不能更改響應(yīng)式的數(shù)據(jù)茄袖，會導(dǎo)致死循環(huán)，在updated的時候可以操作dom嘁锯，添加事件監(jiān)聽器宪祥，有一次我就在updated的時候new了一個組件，并給組件添加了一個事件家乘。這個事件的觸發(fā)會導(dǎo)致響應(yīng)式數(shù)據(jù)的變化蝗羊，結(jié)果就是頁面出現(xiàn)了重復(fù)的dom結(jié)點。并沒有觸發(fā)死循環(huán)烤低。
- vue組件是什么時候被銷毀的
組件自己不能銷毀自己,銷毀是在離開或隱藏這個組件的時候肘交，離開組件所在的路由，在這個組件的父組件上調(diào)用方法銷毀組件扑馁，或者使其隱藏涯呻。
組件跨層級通信的幾種方式
父組件provide數(shù)據(jù)，子組件inject的數(shù)據(jù)會往上去尋找腻要，找到父組件中的數(shù)據(jù)就停止尋找复罐，否則就繼續(xù)往上尋找。父組件數(shù)據(jù)的改變要影響子組件雄家，要使用observable
provide() {
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},
子組件接受父組件提供的數(shù)據(jù)
inject: {
theme: {
default: () => ({})
}
},
2 .使用emmit.js具體代碼參見iview emmit.js
iview里有很多設(shè)計很棒的組件效诅，經(jīng)典的樹形結(jié)構(gòu)組件就是通過全局混入emmit.js 實現(xiàn)跨組件通信，設(shè)計非常巧妙趟济，值得好好研究乱投。
emmit使用遞歸向上或向下的方式查找指定的組件名稱，找到后觸發(fā)$emit
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
// todo 如果 params 是空數(shù)組顷编，接收到的會是 undefined
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
子組件狀態(tài)發(fā)生 改變 dispatch(componentName, eventName, params)分發(fā)到響應(yīng)組件名稱的父親戚炫，事件和傳遞的數(shù)據(jù)。
3.v-ant-refs 非遞歸獲取組件實例媳纬，這個方法太牛了双肤，但是我所開發(fā)的組件其實不需要這樣用。
利用provide來緩存子組件的實例钮惠，E或F實例生成或更新的時候告訴A節(jié)點茅糜。
A節(jié)點
provide() {
return {
setChildrenRef: (name, ref) => {
this[name] = ref;
},
getChildrenRef: name => {
return this[name];
},
getRef: () => {
return this;
}
};
},
D節(jié)點
<template>
<div class="border1">
<h2>D 結(jié)點</h2>
<ChildrenG />
<ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" />
<ChildrenI />
</div>
</template>
<script>
import ChildrenG from "./ChildrenG";
import ChildrenH from "./ChildrenH";
import ChildrenI from "./ChildrenI";
export default {
components: {
ChildrenG,
ChildrenH,
ChildrenI
},
inject: {
setChildrenRef: {
default: () => {}
}
}
};
</script>
H實例化完成或更新的時候可以主動去調(diào)用
F節(jié)點
<template>
<div class="border2">
<h3>F 結(jié)點</h3>
<button @click="getARef">獲取A Ref</button>
<button @click="getHRef">獲取H Ref</button>
</div>
</template>
<script>
export default {
components: {},
inject: {
getParentRef: {
from: "getRef",
default: () => {}
},
getParentChildrenRef: {
from: "getChildrenRef",
default: () => {}
}
},
methods: {
getARef() {
console.log(this.getParentRef());
console.log(this.$parent.$parent)
//這樣是遞歸的獲取父組件的實例
},
getHRef() {
console.log(this.getParentChildrenRef("childrenH"));
}
}
};
</script>
組件開發(fā)具體過程
獨立的組件復(fù)雜度主要集中在細(xì)節(jié)，交互素挽，性能優(yōu)化蔑赘，API設(shè)計上，完事開頭難弄，API的設(shè)計和可擴(kuò)展性決定了組件迭代的復(fù)雜性米死，一開始不可能會烤爐的所有的細(xì)節(jié)锌历，但是整體架構(gòu)要清晰可擴(kuò)展，否則很有可能重構(gòu) --來自《vue.js實戰(zhàn)》
設(shè)計
設(shè)計組件的拆分：父組件峦筒，子組件
子組件的狀態(tài)：有哪些狀態(tài)究西，是否需要props，組件自身狀態(tài)改變機(jī)制
父組件：有哪些子組件物喷，需要給子組件傳遞什么參數(shù)卤材。
開發(fā)一個color-picker組件，直接上設(shè)計圖峦失，軟件用的是PressOn
嗎
color-picker.png
設(shè)計好這個組件可以清晰的codeing扇丛，后面開發(fā)就很快了
具體參見源碼地址，很簡單的一個color-picker
持續(xù)更新中...
歡迎點贊嘿嘿嘿
