window.resize方法监听窗口大小

在实现了页面基本功能后，想去优化一下页面的适配问题，就让我的Echart表跟着用户变化浏览器大小或者分辨率大小而改变，具体实现上代码：

<template>
<div class="searchCon" ref="tableDataRef"> 
    <div class="chart">
        <line-chart
          :title="accessLineData.title" 
          :catalog="accessLineData.catalog" 
          :data="accessLineData.data" 
          :y-name="yName" 
          :a-colori="accessLineData.aColor1" 
          :a-colorii="accessLineData.aColor2"
          :rendering="rendering"></line-chart>
    </div>
    <div class="chart">
        <line-chart
          :title="accessLineData1.title" 
          :catalog="accessLineData1.catalog" 
          :data="accessLineData1.data" 
          :y-name="yName" 
          :a-colori="accessLineData1.aColor1" 
          :a-colorii="accessLineData1.aColor2"
          :rendering="rendering"></line-chart>
    </div>
</div>
</template>

<script>
import LineChart from '@/components/LineChart.vue'

export default {
// ...
name: '',
components: {
    LineChart
},
data() {
    return {
        accessLineData: {
        title: 'CPU使用率',
        catalog: [],
        data: [],
        aColor1: '#ffffff',
        aColor2: '#ffffff'    
        },
        accessLineData1: {
        title: '内存使用率',
        catalog: [],
        data: [],
        aColor1: '#ffffff',
        aColor2: '#ffffff' 
        }
    }
},
mounted() {
  this.$nextTick(() => {   
        this.handleFn()
  })
   window.addEventListener('resize', this.handleFn)
},
methods: {
  handleFn() {
    // this.height = this.$refs.tableDataRef.clientHeight - 130
    this.rendering = !this.rendering
    let _this = this
    if (_this.$refs.chartCon.clientWidth >= 1120) {
        _this.chartData.accessLineData.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData1.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
    } else {
        _this.chartData.accessLineData.width = '759px'
        _this.chartData.accessLineData1.width = '759px'          
    }
    if (_this.$refs.chartCon.clientHeight >= 500) {
        _this.chartData.accessLineData.height = '450px'
        _this.chartData.accessLineData1.height = '450px'          
    }
}
}
}
</script>

获取是获取到了但是会报错clientHeight或clientWidth为undefined,如下图：

这是因为页面在刚渲染的时侯，这个值还没有就已经用了，所以会报错。所有需要在data里先声明一个clientHeight为获取到的值。

那就成功啦，但是又会出现一个新的问题就是变化有点慢