Vue.js 是一個優秀的前端框架，它的攔截能力為開發者提供了很多便利。Vue.js 的攔截主要是基于它的響應式系統實現的，可以攔截對象的屬性訪問、修改以及數組的變異操作。

在 Vue.js 中，我們可以使用 $watch API 來攔截對象屬性的改變。使用 $watch API 可以讓我們知道屬性的變化，并且做一些處理。例如：

vm.$watch('name', function(newValue, oldValue) {
// do something when the name property is changed
})

此外，Vue.js 還提供了 computed 屬性，它是一個計算屬性。當計算屬性依賴的屬性發生變化時，Vue.js 會自動重新計算并緩存計算結果。這樣，我們在訪問計算屬性時，不需要每次都計算一遍。例如：

var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})

接下來，我們看看 Vue.js 如何攔截數組的變異操作。Vue.js 可以攔截數組的 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse() 方法，這些方法都會改變原數組。例如：

var vm = new Vue({
el: '#app',
data: {
items: ['item1', 'item2', 'item3']
},
methods: {
addItem: function() {
this.items.push('new item')
}
}
})

在上面的例子中，當我們調用 addItem() 方法時，Vue.js 捕獲到了數組的變異操作，并自動更新視圖。這樣我們就不需要手動更新視圖了。

除了捕獲數組的變異操作外，Vue.js 還提供了非變異方法來操作數組。Vue.js 的非變異方法不會改變原數組，而是返回一個新的數組，并且不會觸發更新視圖。例如：

var vm = new Vue({
el: '#app',
data: {
items: ['item1', 'item2', 'item3']
},
methods: {
addItem: function() {
this.items = this.items.concat('new item')
}
}
})

在上面的例子中，當我們調用 addItem() 方法時，Vue.js 不會捕獲到數組的變異操作，并且不會自動更新視圖。我們需要手動將新的數組賦值給原數組，這樣才能觸發更新視圖。

總的來說，Vue.js 的攔截能力讓我們開發前端應用更加便捷和高效。除了攔截對象屬性的改變和數組的變異操作外，Vue.js 還提供了很多其它的攔截能力，例如計算屬性和指令。