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只是監聽某一個值，如果監聽的值裏面也有不少變量，也會所有監聽