computed算法是Vue.js的一個基礎概念,可以用來進行一些動態計算或者過濾操作,具有高效而且強大的特點。Vue.js中的computed屬性是一個可以讀取,但是不能設置的屬性,常用于對原始數據進行處理和篩選,直接依賴組件內的響應數據,在數據發生改變時自動更新數據,并且只返回一個計算結果。
//例子: computed: { filteredList: function() { return this.list.filter(item =>item.isShow === true); } }
在上面的computed屬性例子中,我們定義了一個名為filteredList的計算屬性,它根據list中的isShow屬性自動篩選出在頁面中需要展示的元素,其它不滿足條件的元素就不會被更新到dom中去,從而提升了頁面渲染的效率和性能。
另外,在computed屬性中我們還可以使用getter和setter來讀取和設置屬性,在數據發生變化時自動更新數據,比如下面的例子中我們使用getter和setter來計算和設置總價。
//例子: computed: { totalPrice: { get: function() { return this.goodsList.reduce((total, item) =>total + item.price * item.num, 0); }, set: function(newValue) { let rate = newValue / this.totalPrice; this.goodsList = this.goodsList.map(item =>{ item.num = item.num * rate; return item; }) } } }
在上面的computed屬性例子中,我們定義了一個名為totalPrice的計算屬性,使用getter來計算屬性值,setter來設置總價時自動調整每個商品的數量,從而保證商品的總價和頁面上的總價是一致的。這種使用computed屬性進行數據計算和設置的方式,讓我們的邏輯更加清晰而且易于維護。