1、blue、click、mousedown事件的优先级问题

功能： 获取输入框的值，下拉列表展示去匹配相关的值且展示，下拉列表点击则填充至input的value中

展示：

问题描述:  在input失去焦点的时候,需要让联想的下拉框消失, 但是该元素display:none之后, 无法触发元素内部 li 元素的点击事件, 根本原因是, blur失焦事件的触发速度比click点击事件的触发速度快

解决： 将click点击事件, 改为 mousedown 鼠标按下事件。

优先级：mousedown > blur > click

2、组件间传值，还未拿到数据就渲染了页面问题

功能： 父组件传递数据，打印出来数据正常，但页面渲染时数据为空

展示：

问题描述:  父组件传递数据，打印出来数据正常，但在mounted中渲染，页面渲染时数据为空，渲染出空的图表

解决： 在mounted中初次渲染一次，用watch监视该数据，变化了再一次调用渲染图表函数

mounted() {
        this.setChart()
    },
    watch: {
        //图表数据
        configSeries: {
            handler(val) {
                this.setChart() //等数据变化了（从空变为有数据了），再次渲染
            },
            deep: true,
        }
    },
    methods: {
        //设置echarts
        setChart() {
            //该函数内容省略......
        }
    }

3、前端兼容返回数据为null/undefined等情况

filterEmpty(value) {
      if (value === null || value === void 0) {
        return "";
      }
      return value;
}

3、动态绑定css样式

<div :class="{ active: isActive }"></div>
//或者
<div :class="[isActive ? activeClass : '']"></div>