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

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;
});
}

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

如果屏幕寬度大于768px，我們希望顯示桌面版（desktop）的布局，否則就顯示移動(dòng)版（mobile）的布局。因此，我們?cè)趙atch對(duì)象內(nèi)定義了一個(gè)回調(diào)函數(shù)，該函數(shù)接收一個(gè)新值（在此例中，是screenWidth的新值），并根據(jù)屏幕寬度的大小來(lái)修改layout屬性的值。

使用watch來(lái)監(jiān)測(cè)屏幕寬度比使用其他方法更好的是，它不需要反復(fù)計(jì)算屏幕寬度。當(dāng)屏幕寬度發(fā)生變化時(shí)，watch會(huì)自動(dòng)執(zhí)行相關(guān)代碼。因此，我們不必?fù)?dān)心屏幕寬度的反復(fù)計(jì)算會(huì)影響頁(yè)面性能。

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