this.$nextTick( 回调函数 )的作用

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

this.$nextTick( 回调函数 )的作用

周小w   2021-02-04 我要评论

首先要明确几个概念

1.Vue的核心思想

 数据驱动 和 组件化系统

2.同步和异步

在没有特殊情下,程序一般先执行同步代码,等待同步执行完之后,执行异步代码

下面进入正题,首先贴出程序片段:

  

 在该段代码执行时,数据驱动发生,由于数据驱动页面的变化有先后之分,先执行数据的更新,在进行页面的渲染更新。前者是同步操作,后者是异步操作,而接下来的this.$nextTick(),他是等到页面渲染之后,才调用该函数,所以顺理成章,执行过程如下: 数据更新(同步) =》 页面更新(异步) =》this.$nextTick() (等到页面更新完毕之后)

来一个对比:

     如果没有的话,如图所示:

  

  这个时候会报错:

  

  显示 后面的$refs前面的是undefined  现在的执行顺序是: 数据更新(同步) =》 this.$refs.saveTagInput.$refs.input.focus()  (同步, 查到对应的dom元素节点,如果找到的话,继续执行)  =》  页面更新 (异步) 

  显然是执行不了的,因为在页面更新之前,还没有渲染页面,他找不到对应  this.$refs.saveTagInput 的dom节点,所以报错显示 undefined 

  需要特别注意 的是 this.$nextTick()  的执行时机  即:等到页面更新完毕之后执行

 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们