VUE005. 在data中使用 / 改變data，或在data中調用method函數

使用三方UI庫時經常會遇到在data中寫入方法的場景，如Element-UI的級聯選擇器（動態加載part）需要在data中寫入lazyLoad.

但后端總會給出意想不到的需求：

通過接口調取一串數據格式如 [ { id: 1, name: '97z', code: 191, children: [] }, { id: 2, name: '4moon', code: 263, children: [] } ]，現在進行映射 value -> id , label -> name 

選擇完畢后通過code入參調取另一個接口的數據賦值給另一個 Select 的 options，同樣采用映射。

真正的大佬可能已經動手二次封裝 Element-UI 的 Cascader 組件了，趕項目的情況就只能盡量抄些近道：

data() {
    let _self = this
    return {
        lazy: 'i & vue.'
        lazyLoad: (function () {
            _self.lazy = ‘97z & vue.'
        }())
    }
}

mounted() {
    console.log(this.lazy)
    // 97z & vue.
}

其實這樣書寫還不夠嚴謹，因為我們可以用箭頭函數將this拋出，在element的級聯動態加載場景中，打印出來的this是指向data中的props（非彼props）的。

無論如何，通過在data() { } 函數體中，return { } 的包裹外儲存this的指向，雖然這部分會造成內存泄漏，但占用較小在平常應用場景是可忽略的。

- END -