1. 背景

最近前端項(xiàng)目遇到一個(gè)問題，我在父組件中使用了兩個(gè)相同的子組件child，分別設(shè)置ref為add和update。其中A組件的功能是新增，也就是說在頁面上A頁面只有一個(gè)。而update組件是放在表格里的，表格中的每一行數(shù)據(jù)都有update組件。跟update組件并列還有一個(gè)刪除按鈕，每次刪除完都會(huì)重新獲取數(shù)據(jù)。

2.問題描述

界面第一次加載時(shí)我對(duì)表格的組件B進(jìn)行操作的時(shí)候是沒問題的，但是當(dāng)我刪除某一行的數(shù)據(jù)之后再點(diǎn)擊B組件，出現(xiàn)了update組件變?yōu)閡ndefined的問題。

    <el-table-column label="操作" min-width="100px">
                        <template slot-scope="scope">
                            <UpdateButton title="修改" @click.native="updateClick(scope.row)" size="mini"></UpdateButton>
                            <DeleteButton class="resource_pause_delete_button" @click.native="ruleDelete(scope.$index, scope.row)" />
                            <TimeSelectDialog ref="updateTime" title="修改暫停規(guī)則">
                                <update-button @click.native="updateData()" size="mini">
                                </update-button>
                            </TimeSelectDialog>
                        </template>
                    </el-table-column>

3.定位問題

因?yàn)閍dd和update是相同的組件，所以我一開始認(rèn)為是兩個(gè)組件的沖突。但是當(dāng)我把a(bǔ)dd組件完全去掉之后，還是出現(xiàn)了undefined的問題。所以排除了add組件是干擾這個(gè)原因。

繼續(xù)猜想以為是組件渲染問題，于是我給update組件添加了nextTick和setTimeOut來讓組件渲染完成。但是這依然不起作用。

緊接著我看了下vue中關(guān)于ref的文檔。

當(dāng) v-for 用于元素或組件的時(shí)候，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組。

關(guān)于 ref 注冊(cè)時(shí)間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

我的組件用了element-UI的el-table組件，這個(gè)組件的內(nèi)部肯定是使用了v-for循環(huán)的。于是我就把問題定位在v-for引起的數(shù)據(jù)綁定問題。

我把update組件從el-table中拿出來，放在表格之外。此時(shí)表格行內(nèi)的按鈕只是調(diào)用update組件，并且每次調(diào)用的都是同一個(gè)組件。這次問題果然解決了。

4.總結(jié)

ref本身是作為渲染結(jié)果被創(chuàng)建的，這句話應(yīng)該是這樣理解的。如果在循環(huán)中使用了包含ref的組件，那么循環(huán)出來的就是ref組件渲染的結(jié)果。當(dāng)數(shù)據(jù)改變需要重新循環(huán)的時(shí)候，因?yàn)閞ef并不是響應(yīng)式的，這導(dǎo)致包含了ref組件的行就無法再被渲染出來，因此出現(xiàn)了undefined的問題。

反過來想，既然update組件是一個(gè)可重用的組件，那么我們每次都讓組件渲染其實(shí)并不是一個(gè)好的實(shí)現(xiàn)。實(shí)際上我的頁面中的update組件每次改變的只有數(shù)據(jù)。從這個(gè)角度思考，我的設(shè)計(jì)是不合理的。