vue踩坑之旅 -- computed watch

vue踩坑之旅 -- computed watch

經常在使用vue初始化組件時，會報一些莫名其妙的錯誤，或者，數據明明有數據，確還是拿不到，這是多么痛苦而又令人忍不住抓耳撓腮，捶胸頓足啊

技術點

• vue + element + ehcarts + vuex + vue-router

問題再現

    data() {
        return {
            option: {
            chart: '' //echarts的實例
            }
        }
    },
    //鈎子函數
    mounted() {
        this.chart = echarts.init(this.$refs.charts) // 使用vue提供得ref來獲取dom
        this.chart.setOption(this.option)  // 初始化數據   
    },
    computed: {
        ...mapState({
            option(state) {
                const state = state.state.option
                //this.chart.setOption(state)     
                return state
                
            }
        })
    },
    watch: {
        this.option(oldVal, newVla) {
            this.chart.setOption(state)
        }
    }

• 當動態獲取的數據回來時，computed中調用setOption時，會有兩次顯示，第一次沒有數據，因而會報錯，第二次才有數據，給人的感覺是， computed比mounted先執行，而且是執行多次，因而導致報錯，思來想去，最后在watch中調用時才得以解決
• 這個讓我想起另一個例子，當時也是拿數據，有一個數據是在sessionStorage中獲取，當時這個數據是本地的，因而會現出來，但是要求是后出來，放在watch中解決，雖然watch是監聽路由，數據，但是也可以作為數據先后展示的重要函數

新的發現

computed： 假設用來獲取vuex中的數據

• 思考一

computed: {
    ...mapState({
        //假設的值
        timeList(state) {
            return state.timeList
        }
    })
}

若是想直接使用timeList可以在template模板中調用，但是若是沒有使用，需要查看timeList的值，可以在watch中，進行監聽即可。之前一直存在誤區，以為必須在watch中進行監聽，才可以拿到值，現在想想完全沒有必要，除非進行業務邏輯處理而已

• 思考二

在上面的問題，提到 computed會執行兩次，而第一次是沒有數據的，需要額外進行處理。今天用一種簡單的方式即可解決

computed: {
    ...mapState({
        //假設的值
        timeList(state) {
            const timeList = state.timeList
            if (timeList.length == 0) return
            //業務邏輯處理
            return state.timeList
    空    }
    })
}

簡單地進行判斷即可，若是空，直接跳出函數

個人的一些總結：

• computed在使用時，一定要注意，函數里面的變量都會被監聽，只要里面的某一個值變動，便會將整個函數執行一遍，這樣會有很多坑在里面，因而考慮如何不在里面使用
• watch只是監聽某一個值，若是監聽的值里面也有很多變量，也會全部監聽