亲宝软件园·资讯

展开

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

周小w 人气:0

首先要明确几个概念

1.Vue的核心思想

 数据驱动 和 组件化系统

2.同步和异步

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

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

  

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

来一个对比:

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

  

  这个时候会报错:

  

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

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

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

 

加载全部内容

相关教程
猜你喜欢
用户评论