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 -