瞭解響應式原理後對代碼的一點小重構 在操作一個響應式變數的時候，可能會多次去取這個響應式變數的值，這就意味著會多次執行依賴收集中的get,可以用一個局部變數緩存下來，這樣只需要一次get操作. // 比如商城業務中，根據價格篩選不同的商品 data: () => ({ goods: [] }), c ...
瞭解響應式原理後對代碼的一點小重構
在操作一個響應式變數的時候，可能會多次去取這個響應式變數的值，這就意味著會多次執行依賴收集中的get,可以用一個局部變數緩存下來，這樣只需要一次get操作.
// 比如商城業務中，根據價格篩選不同的商品
data: () => ({
goods: []
}),
computed: {
specialGoods() {
let goods = this.goods
xxx
}
}
封裝組件時，讓props響應式
父組件給子組件傳遞props時，有的時候需要改變這個props, 然後子組件做一些操作，讓props變成響應式操作起來會方便一些，可以用計算屬性包一下
- Child.vue
- 在模板中直接使用calcList即可
export default {
props: {
list: {
type: Array,
default: () => []
}
},
computed: {
calcList() {
return xx
}
}
}
數據結構層級比較深時，用v-if
有時候數據結構層級比較深，在模板上渲染時，服務端還沒有發送過來，會報一個cannot read property of undefined , 就是不能從undefined 上 讀取xx屬性，這個時候加個v-if,確保數據到了再渲染
