隨著移動設備的普及，越來越多的網站需要適配不同的屏幕大小。Vue是一個非常靈活的框架，可以幫助我們根據屏幕大小來動態(tài)修改頁面布局。這在開發(fā)響應式網站時是非常有用的。

在Vue中，我們可以使用computed屬性和watcher來實現根據屏幕大小的布局調整。computed屬性和watcher是Vue中非常重要的屬性，讓我們可以監(jiān)聽數據的變化并且自動更新視圖。

import Vue from 'vue'
const resizeMixin = {
computed: {
isMobile() { return this.windowWidth< 768 }, // 小屏幕寬度
windowWidth() { return window.innerWidth }
},
methods: {
_handleResize() {
this.$nextTick(() =>{
this.$emit('window-resize')
})
}
},
created() {
window.addEventListener('resize', this._handleResize)
},
destroyed() {
window.removeEventListener('resize', this._handleResize)
}
}
export default {
mixins: [ resizeMixin ]
}

上面的代碼是一個Vue的mixin，它可以讓我們方便地監(jiān)聽窗口大小的改變。當窗口大小發(fā)生改變時，Vue會自動更新computed屬性的值，然后我們可以通過注冊一個事件來獲取這個變化。

下面是使用此mixin的實例：

上面的代碼展示了如何使用我們剛剛定義的mixin來動態(tài)修改頁面布局。我們使用v-if和v-else指令來根據computed屬性的值來判斷是否是移動設備。如果是移動設備，我們將渲染移動版的頁面，否則將渲染桌面版的頁面。

最后，我們需要注意的是，在Vue中，我們應該避免直接修改DOM。相反，我們應該利用Vue提供的數據綁定和計算屬性等特性來讓Vue自動更新頁面。這樣可以讓我們開發(fā)更加高效和穩(wěn)定的Web應用程序。