隨著移動互聯網的發(fā)展，越來越多的用戶使用移動設備瀏覽網頁。然而，不同設備的屏幕尺寸與分辨率差異很大，這就導致了網站需要適配不同屏幕設備的需求。Vue.js 作為一款優(yōu)秀的前端框架，兼容了很多自適應的思想，并且提供了很多便捷的方法幫助我們實現類似的功能。

// vue的初始化代碼
new Vue({
el: '#app',
data: {
screenWidth: 0
},
mounted() {
window.addEventListener('resize', this.getScreenWidth)
this.getScreenWidth()
},
methods: {
getScreenWidth() {
this.screenWidth = window.innerWidth
}
}
})

對于Vue實現自適應，首先需要提供一個用來綁定屏幕寬度的數據變量，例如上面的代碼中的 screenWidth 變量。對于 screenWidth 的初始化，我們可以在 Vue 的 mounted 鉤子函數中使用 window 對象的 innerWidth 屬性更新 screenWidth 的值，并且在 mounted 鉤子函數中添加 resize 事件的監(jiān)聽，在事件觸發(fā)時再次更新 screenWidth 的值，從而實現 screenWidth 的實時監(jiān)測。

隨后，Vue 的計算屬性（computed）功能特別適合用于實現自適應功能，我們可以創(chuàng)建一個計算屬性 screenWidthCode，根據不同設備的屏幕寬度生成不同的 HTML 代碼，從而實現屏幕自適應。例如，對于 screenWidth 小于 768（Bootstrap 的移動端視口寬度），我們生成如下的代碼：

computed: {
screenWidthCode() {
if(this.screenWidth< 768) {
return '
這是移動端
'
} else {
return '
這是電腦端
'
}
}
}

對于 screenWidth 大于等于 768 的情況，我們生成的代碼為：

computed: {
screenWidthCode() {
if(this.screenWidth< 768) {
return '
這是移動端
'
} else {
return '
這是電腦端
'
}
}
}

在模板中直接使用該計算屬性即可實現屏幕自適應。需要注意的是，這種方式雖然方便，但是會導致 HTML 代碼的大量重復，造成頁面加載速度的降低。

另外，Vue 的指令（directive）功能也可以實現類似的功能。Vue 提供了很多內置指令，例如 v-if，v-for 和 v-bind 等。除此之外， Vue 的指令系統還允許我們自定義指令。

// 自定義一個 v-screen-width 指令
Vue.directive('screen-width', {
bind(el, binding) {
if(window.innerWidth< binding.value) {
el.innerHTML = '
這是移動端
'
} else {
el.innerHTML = '
這是電腦端
'
}
}
})

在模板中使用 v-screen-width 指令即可實現屏幕自適應。

總之，Vue 提供的計算屬性和指令功能非常適合實現自適應功能。同時，Vue 還提供了很多內置組件和插件支持移動端開發(fā)，例如 Vue-Router、Vue-Cli 和 Vant 等，可以極大地提高開發(fā)效率。