鍍金池/ 問答/HTML/ 這個(gè)vue的生命周期怎么解釋?

這個(gè)vue的生命周期怎么解釋?

原文末尾問題 文末有g(shù)ithub鏈接

問題(待解決): 在vue的編碼規(guī)范中有如下聲明:

傳遞過于復(fù)雜的對(duì)象使得我們不能夠清楚的知道哪些屬性或方法被自定義組件使用,這使得代碼難以重構(gòu)和維護(hù)。

所以, 我考慮Table.vue傳遞李明的字符串, edit()方法修改如下:

edit(index) {
   this.selectedList = JSON.stringify(this.students[index]);
   this.toggleEdit();
}

然后再在Crud.vue中解析成對(duì)象, 修改如下:

updated() {
  this.list = JSON.parse(this.modifyList);
}

此時(shí)點(diǎn)擊一行數(shù)據(jù)進(jìn)行編輯, 瀏覽器會(huì)進(jìn)入死循環(huán), 卡死。 解析放到beforeupdate

beforeupdate() {
  this.list = JSON.parse(this.modifyList);
}

點(diǎn)擊編輯, 循壞100來此報(bào)錯(cuò):

clipboard.png

哪位大神能詳盡的解釋一下么? updated狀態(tài)下進(jìn)行解析生成新對(duì)象, 組件Crud.vue又會(huì)進(jìn)入beforeUpdate => updated狀態(tài)又成新解析的對(duì)象, 無限循環(huán)直到內(nèi)存溢出, 那么為什么解析放在updated中回掉瀏覽器器會(huì)直接卡死, 而beforeUpdated中遞歸會(huì)中止并報(bào)錯(cuò)?

回答
編輯回答
厭惡我

我最近也遇到了這樣的問題,不過是React,不過很類似的吧,我最初的想法是把一些重新格式化或者處理放到子組件中,但是非常容易導(dǎo)致無限循環(huán),這其實(shí)本身可能就是一種不健康的方式,我最后的辦法還是盡量集中到父組件中,利用props傳下去,子組件只做展示渲染。

2017年2月5日 00:49
編輯回答
久愛她

換個(gè)思路吧
使用 Prop 傳遞數(shù)據(jù)
事件監(jiān)聽接收數(shù)據(jù)
$on
$emit

2018年6月25日 23:50