Vue.js中的watch屬性可以用來監(jiān)聽數(shù)據(jù)的變化。它可以一旦發(fā)現(xiàn)數(shù)據(jù)被修改，就自動執(zhí)行指定的操作。下面來看一下如何使用watch來檢測屏幕寬度的變化。

watch: {
screenWidth (newVal) {
if (newVal >768) {
this.layout = 'desktop'
} else {
this.layout = 'mobile'
}
}
},
data () {
return {
screenWidth: window.innerWidth,
layout: 'mobile'
}
},
mounted () {
window.addEventListener('resize', () =>{
this.screenWidth = window.innerWidth;
});
}

首先，我們定義了一個watch對象，其中screenWidth是我們需要監(jiān)測的數(shù)據(jù)。接著，我們定義了一個data函數(shù)，其中屏幕寬度被賦值給了screenWidth。此時，我們也初始化了layout屬性的值為mobile。最后，我們使用mounted鉤子來監(jiān)聽窗口大小變化的事件。一旦窗口大小發(fā)生變化，我們就能得到新的屏幕寬度，并將其賦值給screenWidth屬性。

如果屏幕寬度大于768px，我們希望顯示桌面版（desktop）的布局，否則就顯示移動版（mobile）的布局。因此，我們在watch對象內定義了一個回調函數(shù)，該函數(shù)接收一個新值（在此例中，是screenWidth的新值），并根據(jù)屏幕寬度的大小來修改layout屬性的值。

使用watch來監(jiān)測屏幕寬度比使用其他方法更好的是，它不需要反復計算屏幕寬度。當屏幕寬度發(fā)生變化時，watch會自動執(zhí)行相關代碼。因此，我們不必擔心屏幕寬度的反復計算會影響頁面性能。

總之，在Vue.js中，使用watch屬性來監(jiān)聽數(shù)據(jù)的變化是一種很方便的方式。我們可以通過定義watch對象來監(jiān)測數(shù)據(jù)的變化，并在數(shù)據(jù)被修改時執(zhí)行指定的操作。使用watch來檢測屏幕寬度的變化時，我們可以在窗口大小發(fā)生變化時，自動獲取最新的屏幕寬度，并修改相關屬性的值，從而實現(xiàn)響應式布局。