ref是Vue提供的一個用于獲取組件或DOM元素的屬性，使用ref可以在Vue組件內部直接操作DOM元素。對于需要動態改變樣式的Vue組件，ref的使用非常重要。

在Vue組件中動態改變樣式的方式有很多種，比如綁定class、style等等。接下來我們將重點介紹使用ref在Vue組件中動態改變樣式的方法。

//template部分
<div ref="box"></div>
//script部分
export default {
data() {
return {
width: 100,
height: 100
}
},
methods: {
changeStyle() {
let box = this.$refs.box;
box.style.width = this.width + 'px';
box.style.height = this.height + 'px';
}
}
}

在上述代碼中，我們將一個div元素添加了ref屬性，并將其賦值為"box"。在Vue組件的methods中，我們定義了一個changeStyle()函數，該函數通過this.$refs.box獲取到div元素，并分別使用box.style.width和box.style.height改變該元素的寬度和高度。

除了改變樣式，Vue ref還可以用于獲取組件的其他屬性。例如，我們可以使用ref獲取input元素的值、獲取滾動條的位置等等。接下來我們將用一個例子來演示如何使用ref獲取input元素的值。

//template部分
<div>
<input type="text" ref="input" />
<button @click="getValue">獲取input value</button>
</div>
//script部分
export default {
methods: {
getValue() {
let value = this.$refs.input.value;
alert(value);
}
}
}

在上述代碼中，我們將一個input元素添加了ref屬性，并將其賦值為"input"。在Vue組件的methods中，我們定義了一個getValue()函數，該函數通過this.$refs.input獲取到input元素，并使用input.value獲取到該元素的值。最終，我們使用alert()函數將獲取到的值彈框展示出來。

綜上所述，ref是Vue組件中非常重要的一個屬性，通過它我們可以獲取組件的屬性以及直接操作DOM元素。當我們需要動態改變樣式、獲取元素值等功能時，ref的使用是不可或缺的。