随笔：vue中nextTick的妙用

如果遇到需要刷新dataList来清空列表数据，但是又不想视图因为短暂的清空造成页面闪烁影响用户体验，这时可以用nextTick对dataList进行清空，这样可以利用nextTick的特性在js逻辑和渲染视图中间进行清空，在视图刷新前让vue内部逻辑跑完，刷新虚拟dom，再更新真实dom。

// 更新当前渲染的数据
    const updateCurrentRenderData = (tabName: string) => {
        dataList.value = [];
        // 这里如果用setTimeout就会在下一个事件循环中进行，页面会发生闪烁。如果什么都不用，连续赋值，则无意义。
        nextTick(() => {
            const currentTabData = localCacheSearchDataList.value.find(item => item.tabInfo.materialType === tabName);
            if (currentTabData) {
            // 更新当前渲染的数据
                dataList.value = currentTabData.dataList;
                // 设置设置当前渲染的页码
                const {
                    setCurrentPage,
                    setPageSize,
                    setTotalCount
                } = usePagination();
                setCurrentPage(currentTabData.pageInfo.page);
                setPageSize(currentTabData.pageInfo.size);
                setTotalCount(currentTabData.pageInfo.total);
            } else {
            // 无数据重置当前页面
                initRenderData();
            }
        });
    };