vue 使用中的小技巧 （一）

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

data 和 Object.freeze

每一個Vue實例都會代理其data對象裏全部的屬性，這些被代理的數據是響應式的，在其數據改變時視圖也會隨之更新。
在每一個vue組件中都有一個data對象，不要把全部數據都放在data中。只把須要作響應式的數據放在data對象中；緣由是：若是一個數據存在於data中，數據會被劫持，vue會給數據添加一個getter（獲取數據），一個setter（設置數據），性能不會高。
能夠把一些不須要響應的數據直接放到實例上，而不是在data裏

data(){
    // 不須要作響應的數據
    this.list=[...]

    return {
        list2:[...]
    }
}

Object.freeze() 方法能夠凍結一個對象。一個被凍結的對象不再能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。freeze() 返回和傳入的參數相同的對象

對於一些不須要響應列表數據，也能夠用 Object.freeze() 處理

data(){
   return { 
        list: []
   }
},
created () {
    let listData = Object.freeze([
            { value: 1 },
            { value: 2 }
        ])
    // 凍結 listData 
    this.list = listData;

    // 界面不會有響應
    this.list[0].value = 100;

    // 下面兩種作法，界面都會響應，只是凍結 listData 沒有凍結 this.list
    this.list = [
        { value: 100 },
        { value: 200 }
    ];
    this.list = Object.freeze([
        { value: 100 },
        { value: 200 }
    ]);
}

優雅處理事件監聽和移除

有時候咱們會遇到這樣的場景,須要本身去監聽一些事件什麼的，可能會像下面這個寫，可是有時候可能由於mounted和destroyed再也不一個位置啥的，致使忘記清除對事件監聽。能夠利用 hook 去監聽鉤子事件將它們寫在一塊兒

mounted() {
    window.addEventListener('resize', this.func)
},
destroyed() {
    window.removeEventListener('resize', this.func)
},
methods:{
    func(){

    }
}

更改後

mounted() {
    window.addEventListener('resize', this.func)
    this.$once("hook:beforeDestroy", ()=> {
        window.removeEventListener('resize', this.func)
    });
},
methods:{
    func(){

    }
}

.sync 修飾符

在有些狀況下，咱們可能須要對一個 prop 進行「雙向綁定」。 不幸的是，真正的雙向綁定會帶來維護上的問題，由於子組件能夠修改父組件，且在父組件和子組件都沒有明顯的改動來源。這也是爲何咱們推薦以 update:myPropName 的模式觸發事件取而代之。舉個例子，在一個包含 show prop 的假設的組件中，咱們能夠用如下方法表達對其賦新值的意圖：

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

父組件能夠監聽那個事件並根據須要更新一個本地的數據

使用 .sync 簡寫

屬性事件傳遞

有時候須要對一些組件進行更高層次封裝，例若有一個普通表格組件，須要實現能有行內編輯等一些功能時候，就須要對錶格進行二次封裝。像表格組件屬性較多時，須要一個個去傳遞，很是不友好而且費時

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

Watch的初始當即執行

當 watch 一個變量的時候，初始化時並不會執行，以下面的例子，你須要在created的時候手動調用一次。

created() {
  this.search();
},
watch: {
  searchText(){
    this.search()
  },
}

上面這樣的作法可使用，但很麻煩，咱們能夠添加immediate屬性，這樣初始化的時候就會自動觸發(不用再寫created去調用了)，而後上面的代碼就能簡化爲

watch: {
  searchText: {
    handler(){
        this.search()
    },
    immediate: true
  }
}