Vue中提供的$refs可以讓我們獲取到DOM元素、組件實(shí)例等等，方便我們進(jìn)行操作。而其中的append方法則可以在DOM元素中添加子元素，下面我們就來(lái)詳細(xì)了解一下這個(gè)方法的使用。

假設(shè)我們有一個(gè)div元素：

<div ref="myDiv"></div>

現(xiàn)在我們需要在這個(gè)div中添加一個(gè)p元素，可以使用如下代碼：

this.$refs.myDiv.appendChild(document.createElement('p'));

上面這行代碼實(shí)際上就是在myDiv元素的子節(jié)點(diǎn)中添加了一個(gè)p元素，效果類似于這樣：

<div ref="myDiv">
<p></p>
</div>

如果我們需要添加多個(gè)子元素，可以使用循環(huán)來(lái)實(shí)現(xiàn)：

for (let i = 0; i < 5; i++) {
this.$refs.myDiv.appendChild(document.createElement('p'));
}

上面這段代碼的作用是向myDiv元素中添加5個(gè)p元素，展示效果跟下面這個(gè)代碼片段類似：

<div ref="myDiv">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

除了appendChild方法外，我們還可以使用insertBefore方法來(lái)插入子節(jié)點(diǎn)。insertBefore使用方式如下：

let p = document.createElement('p');
let firstChild = this.$refs.myDiv.firstChild;
this.$refs.myDiv.insertBefore(p, firstChild);

上面這段代碼的作用是向myDiv元素中添加一個(gè)p元素，并且將它插入到其子元素的最前面。

總的來(lái)說，$refs append方法是一個(gè)比較基礎(chǔ)的操作，但在某些場(chǎng)景下能派上很大用處，如需要?jiǎng)討B(tài)向DOM中添加子節(jié)點(diǎn)時(shí)。