vue中$nextTick作用和实例

为什么要使用nextTick?

vue中DOM更新是异步执行,相当于我们在修改数据的时候,视图是不会立即更新的,会先把新的数据攒一赞,例如假如v-for更新这三个数据item1和item2和item3,按照vue的特性dom更新的特性会把item1、item2、item3全部更新后才会更新dom,这个时候如果还没有吧这三个数据更新完的时候想获取item1的话就会无法获得item1的值,正是为了应对这种情况才vue出现了一个api:nextTick

vue中$nextTick作用和实例_第1张图片

作用实例:

1、修改dom元素进行判断在修改样式:

如果不加nexttick的话点击事件触发的时候,字符串变红,然后dom元素更新,但是条件判断并不是更新后执行的,所以第一次点击时时不会付出判断条件后面的语句的



运行效果:

2、在生命周期函数created中操作

因为生命周期created函数是在dom还没有渲染前使用的函数,如果在creted函数中使用dom肯定会报错,所以在函数中可以用nextTick来获取dom如图所示

如果想在created之前更新dom元素就需要要用$nextTick


运行效果:

vue中$nextTick作用和实例_第2张图片

当dom元素更新后控制台打印samsung,最后在执行this.$nextTick中的内容

你可能感兴趣的:(vue.js,javascript,前端)