網頁中經常需要根據瀏覽器窗口大小的變化來進行布局和樣式的調整。Vue作為一款快速、靈活、易用的前端框架，也提供了在組件中監聽窗口大小變化的方式。

Vue通過提供一個$attrs屬性，讓我們可以在組件中訪問元素的所有屬性，例如寬度和高度。同時，Vue還提供了一個$refs屬性，可以在組件中通過引用元素來獲取元素的實例信息。這兩個屬性的結合，可以幫助我們在Vue組件中實現根據窗口大小改變元素的寬度和高度。

mounted() {
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.$refs.myElement.style.width = this.$attrs.width + "px";
this.$refs.myElement.style.height = this.$attrs.height + "px";
}
}

在上述代碼中，我們在組件的mounted鉤子函數中為窗口resize事件注冊了一個監聽器，然后在handleResize方法中通過this.$refs.myElement獲取元素實例，再通過this.$attrs.width和this.$attrs.height獲取元素的寬度和高度，在改變元素的樣式。這樣，當窗口大小發生變化時，元素的大小也會自動進行響應式的調整。

除了通過$attrs和$refs屬性來訪問元素的寬度和高度之外，Vue還提供了一種更為簡潔的方式，即使用computed屬性。computed屬性實際上是一個計算屬性，用于計算一個新的數據值，該值將根據其他組件數據的變化而自動更新。通過使用computed屬性，我們可以在Vue組件中實現根據窗口大小改變元素的寬度和高度的響應式更新。

computed: {
elementWidth() {
return this.$attrs.width + "px";
},
elementHeight() {
return this.$attrs.height + "px";
},
},

在上述代碼中，我們通過定義elementWidth和elementHeight兩個計算屬性來計算元素的寬度和高度，這兩個計算屬性將根據$attrs.width和$attrs.height的值進行自動更新。然后通過在樣式表中為元素設置width和height屬性，使元素具有響應式的自適應能力。

總之，Vue提供了許多方便的方式讓我們實現在組件中響應窗口大小變化的布局和樣式調整。無論是使用$attrs和$refs屬性，還是使用computed屬性，都可以幫助我們輕松地實現這一目的，提高開發效率和用戶體驗。