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() 的执行时机 即:等到页面更新完毕之后执行
加载全部内容