vue 使用中的小技巧（一）

在vue的使用過程中會遇到各種場景，當普通使用時覺得沒什麼，但是或許優化一下可以更高效更優美的進行開發。下面有一些我在日常開發的時候用到的小技巧

每個vue例項都會**其data物件裡所有的屬性，這些被**的資料是響應式的，在其資料改變時檢視也會隨之更新。

在每個vue元件中都有乙個data物件，不要把所有資料都放在data中。只把需要做響應式的資料放在data物件中；原因是：如果乙個資料存在於data中，資料會被劫持，vue會給資料新增乙個getter（獲取資料），乙個setter（設定資料），效能不會高。

可以把一些不需要響應的資料直接放到例項上，而不是在data裡

data()
}

object.freeze() 方法可以凍結乙個物件。乙個被凍結的物件再也不能被修改；凍結了乙個物件則不能向這個物件新增新的屬性，不能刪除已有屬性，不能修改該物件已有屬性的可列舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結乙個物件後該物件的原型也不能被修改。freeze() 返回和傳入的引數相同的物件

對於一些不需要響應列表資料，也可以用 object.freeze() 處理

data()
},created () ,
])// 凍結 listdata 
this.list = listdata;
// 介面不會有響應
this.list[0].value = 100;
// 下面兩種做法，介面都會響應，只是凍結 listdata 沒有凍結 this.list
this.list = [,];
this.list = object.freeze([
,]);
}

有時候我們會遇到這樣的場景,需要自己去監聽一些事件什麼的，可能會像下面這個寫，但是有時候可能因為mounted和destroyed不再乙個位置啥的，導致忘記清除對事件監聽。可以利用 hook 去監聽鉤子事件將它們寫在一起

mounted() ,
destroyed() ,
methods:
}

更改後

mounted() );
},methods:
}

在有些情況下，我們可能需要對乙個prop進行「雙向繫結」。不幸的是，真正的雙向繫結會帶來維護上的問題，因為子元件可以修改父元件，且在父元件和子元件都沒有明顯的改動**。這也是為什麼我們推薦以update:mypropname的模式觸發事件取而代之。舉個例子，在乙個包含showprop 的假設的元件中，我們可以用以下方法表達對其賦新值的意圖：

this.$emit('update:show', newshow)

父元件可以監聽那個事件並根據需要更新乙個本地的資料

使用 .sync 簡寫

有時候需要對一些元件進行更高層次封裝，例如有乙個普通**元件，需要實現能有行內編輯等一些功能時候，就需要對**進行二次封裝。像**元件屬性較多時，需要乙個個去傳遞，非常不友好並且費時

可以看到傳遞屬性和事件的方便性，而不用乙個個去傳遞,還有$attrs（props、class、style 除外的其他 attribute ）可以使用

當 watch 乙個變數的時候，初始化時並不會執行，如下面的例子，你需要在created的時候手動呼叫一次。

created() ,
watch: ,
}

上面這樣的做法可以使用，但很麻煩，我們可以新增immediate屬性，這樣初始化的時候就會自動觸發(不用再寫created去呼叫了)，然後上面的**就能簡化為

watch: ,
immediate: true
}}

vue 使用中的小技巧（一）

Vue開發小技巧

html中的小技巧（一）

vue使用技巧

vue 使用中的小技巧 （一）

Vue開發小技巧

html中的小技巧（一）

vue使用技巧

相關推薦

vue 使用中的小技巧（一）