vue2+composition api+echarts记忆回收录

第一次写文章，自己学到的一点东西，欢迎指出有误的地方，希望和大家一起学习，共同进步

const和let区别

const和let众所周知都是块级元素 const用来定义不可以改变的元素 let定义可以改变的元素 const可以用来定义一个方法const data=()=>{} 想要计算和 let sum=0

ref和reactive

ref 通过.value获得属性 reactive直接获得属性，reactive只接收对象作为参数，无法对完整的对象重新赋值，ref接收原语，如string，boolean,number,null,symbol,null,undefined等 例如定义一个可以放入值的空数组const dataList: any = ref<any>([]);

watch

监听数据变化，搜索框例如： watch([searchText, searchTime], () => { onSearch();//需要监听的数据 });

onMounted

生命钩子 开始的时候是一个空数组，onMounted触发，数据填充数组 进行页面渲染

时间筛选框

绑定数组searchTime const searchTime=ref(["",""]),

使用moment.js转后端时间精确到毫秒的写法例如： begin.value=moment(searchTime.value[0]).valueOf();//开始时间 end.value=moment(searchTime.value[1]).valueOf();//结束时间

begin.value||null end.value||null

下拉筛选框

数据绑定在select上，条件判断出现空数组情况 例如dataList.value||""

表格注意事项

 slot插槽用于有特殊操作的行例如点击弹出对话框，其余使用key值绑定
 

echarts

绑定都用ref绑定例如:<div id="cluster-echarts" ref="echartsBar"></div>
初始化一个图表例如:let dataEchart: any;
echarts画图例如:let options: any = reactive<any>({})
填入数据例如：onMounted(()=>{ 
dataEchart = echarts.init(context.refs.echartsBar);
window.addEventListener("resize", () => {
    dataEchart.resize();//echarts图自适应大小
  });
})