Vue.js $nextTick

最近在学习vue.js。了解1.x的基础上再学习2.x的vue。两个版本的确是不会像angular这样1.x和2.x相差甚远。所以学习起来其实还是有很大的关联。但是,终归来说。两者还是有语法上的细微差别的。但是对于此处讲的$nextTick()函数来说,两者并没有什么区别。前两天瞟到了一眼这个 $nextTick这个玩意儿,但是至于它是干什么的,还是不清楚。然后今天在练习项目中就用到了。自己也稍微的去了解了一下。以此做记录。

     vue.js中更新数据是异步更新的。在这种情况下,如果我们想一打开加载、渲染页面就实现某种和dom相关的效果。我们知道这个时候需要把相关的代码放到vue的生命周期的created钩子函数中:执行。然而因为异步的原因。这个时候页面并未开始渲染。你就想对某个dom元素实现某种特殊的效果的话,结果就会是徒劳的。这一点形象点描述的话,可以说此时dom元素还在堵车的路上还没有到页面上呢,你就点着他的名字要他做事。那结果肯定是事情也没有做成。因为他人都还没到呢。这个时候$nextTick就出场了,它实质上是一个回调函数,回调函数就意味着把dom元素的相关实现放在这里面的话,它会等着dom来了,才会开始让他做事。那这就很好的解决了页面的异步渲染问题。

   解释了$nextTick的用法,那么它的使用场景就是当页面还未渲染的时候,比如created,或者mounted(未全部渲染完成)钩子状态的时候有与dom相关的操作的话。此时就需要使用到$nextTick.

  补充:

   在vue中还是可以获取原生js的dom元素的。在1.x和2.x版本中的获取方式稍有差异。

  1.x

     在template模板中如下

    <div  v-el:"my-dom"></div>

  在script中

      this.$els.myDom;//dom获取到dom元素,  注意script中需要使用驼峰命名

2.x

   在template模板中如下

     <div  ref="mydom"></div>

 在script中

    this.$refs.mydom ;//2.x获取dom元素,不用使用驼峰命名

原文地址:https://www.cnblogs.com/Trista-l/p/7826842.html