nextTick的用法（scrollTop/echarts）

nextTick

官方介绍nextTick

我的理解是：
因为js/ts是单线程的，而且vue在数据和视图交互过程中是异步行为，数据改变之后，视图不会立马改变。nextTick这个API就相当于一个回调函数，视图更新后就会被调用

例子：
下面是html部分：

 <div ref="testRef">{
    
    {
    
     msg }}</div>
 <div>{
    
    {
    
     msg1 }}</div>
 <div>nextTick后：{
    
    {
    
     msg2 }}</div>

下面是script部分：

//这边改变msg的值（这是数据的变化）
state.msg = "test";
//这边改变msg1的值（这是通过拿到dom元素的属性值来改变数据，这是在看dom元素的变化）
state.msg1 = (testRef.value as any).innerText;
nextTick(()=>{
    
    
    state.msg2 = (testRef.value as any).innerText;
})

下面是浏览器显示内容：

scrollTop

需求：聊天界面回复消息的时候，始终保持回复的消息处于滚动条的最底部

scrollRef.value!.scrollTop = scrollRef.value!.scrollHeight

通过上面的代码，始终没有实现，对scrollTop的值进行打印，发现数值也是得到了改变，但视图一直没有变化，这就跟上面nextTick的现象是一样的，scrollTop初始化的时候拿到的是0，虽然数值发生变化，但是dom元素一直没有变化，所以通过nextTick方法拿到下一周期返回的数值，实现需求

echarts

需求： 在项目中引入echarts表格，希望表格的宽度一直为100%

<div id="main" style="width: 100%; height: 500px"></div>

const chartDom = <HTMLElement>document.getElementById("main");
const myChart = echarts.init(chartDom);
myChart.setOption(option);
window.onresize = function () {
    
    
  myChart.resize();
};

结果： 由滚动条得知，echarts表格超过父元素的大小，但是在进行调动窗口的大小的时候，表格的大小瞬间变的正常起来

由于echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度，跟上面scrollTop一直保持为0一样，所以在外面包裹一层nextTick方法，瞬间解决了

总结

从上面事例就可以发现，nextTick拿到的是视图更新后的数据