Vue [笔记] Dom元素无生成完毕、API来不及抓取之处理、传值方式

1. Dom元素无生成完毕，使用this.$nextTick

情境：Dom元素无生成 导致 refs 无法使用预设方法 .focus()
～～computed无法使用～～
methods、mounted内可下

this.$nextTick(() => {                console.log("Hihi");            });

2. API来不及抓取之处理

情境：API尚未抓到值，导致渲染时无资料
此API有用getter先抓取到，因此监听该getter值，比较新旧，藉由新旧之不同触发

    watch: {        aaa(newVal, oldVal) {            // 此时API接到值并更新aaa，致触发watch            if (newVal === 1 && oldVal === 0) {              // if为防呆，指定取得API后执行以下渲染              this.methods();....            }        },

状况：

Computed return Data值 卡住
Data为API回传资料，塞入

return initLeagueListData[sportType][`${this.curSport}`]

错误方法：
有尝试用watch去监听gette(抓api值)，再把getter到的资料放入Data，但因为起始就是空值，所以return就卡住了，没办法往下跑，watch也就无效

解答：
把预设值Data拿掉，如果资料没拿到直接让computed回传空[]，成功就会走try

    try {        // obj资料        const objData = this.listData[type][this.kind];        // 排序        return Object.keys(objData)            .sort((a, b) => a - b)            .map(order => (Object.assign({}, objData[order],             {                order,            })));    } catch (err) {        return [];    }

3. refs抓到DOM元素时，同document.querySelector('XXX')

会有DOM元素的长相

4. 传值方式

a. VueX > getter 格式：state创值 > mutation连接action及state > action改变值 > getter取值
前内后外，前子后父
b. props > 外传内(父传子) > 格式：(当前页面data + 标籤:) 及 (子元件页面 + data props)
c. emit > 内传外(子传父) > 格式：(当前页面methods + 标籤@) 及 (子元件页面 + methods)
d. refs > dom外传内 > 可使用子data、methods、及变动Dom (但不能变更data值，只能取用)