vue的异步更新队列 $nextTick

这是一段文本

代码运行时会抛出  Cannot read property 'innerHTML' of null 的错误,当vue观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓存在同一事件中循环发生的所有数据变化,并在缓存时去掉重复的数据变化。然后在下一个循环事件tick中Vue刷新队列并执行对应工作(去重后)。如果你用for循环来动态改变数据100次,那么它只会应用100次的最后一次。

报错的原因时 当data中的this.showDiv被改变时 id为div的div还没有被创建出来,直到下一次事件循环时才会被创建

Vue的生命周期时 beforeCreate (组件实例刚被创建 如 data,methods。。。被创建)--> created(data等组件创建完成,属性已绑定  DOM还没有被创建) ,-->beforeMounte(模板编译,挂载之前)--->mounted(模板编译,挂在之后)

vue的异步更新队列 $nextTick_第1张图片

解决方法


这是一段文本



你可能感兴趣的:(vue,vue,$nextTick)