前端vue框架中遇到的一些问题

本人新手小白一枚~总结一下自己开发中遇到的一些小问题和解决办法。

1. 最常见的就是this.$nextTick(()=>{})的使用。一般从后端接收的值还没有获取到，但就要使用，就会造成当前值空。此时需要一个延迟才能获取。

2. vue父子组件传递过程中，如果想要在父组件里为子组件添加点击事件，@click是不生效的，需要用到@click.native的原生事件。

3. js向vue中append一个div加上样式不生效。因为vue中scoped样式都含有’data-v-1893249‘，去掉scoped就可以。（f12可以看到data后面的那个数字都会变化）

4. 组件复用性。不敢保证所有的产品能够一步到位，特别是持续使用过程的产品。如果面临突然增删改需求，那么没有模块化或者复用性高的组件必然让人头疼。所以，可以完成任务的前提下利用有限时间进行组件的封装，拆分，避免代码冗余，维护麻烦。

5. .element-ui组件的时间选择器clearble后值为null。做判断的时候要注意一点。

6. echarts用v-if控制显隐时，会发生不可重新渲染，原因为echarts高度丢失或数据显示但是dom还未渲染，所以echarts不会显示。通过this.$nextTick()实现。

7. element表格v-if切换列会出现乱序情况。给每一列都增加一个key值，或者用:key=“Math.random()”，或者data里定义表格列数据的内容。

8. 如果页面使用了缓存后，会看到elemen-ui表格发生错位问题，可以用

activated() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    }, 

9. .echarts的自适应问题。页面中多个echarts使用resize只会应用到其中一个，需要用到二级绑定，即监听事件

//（多个无效）
setTimeout(function (){
	    window.onresize = function () {
	    	myChart.resize();
	    }
	},100)
//换成下方代码
=======》
setTimeout(function () {
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }, 100);

暂时总结这么多，欢迎补充！