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元素,不用使用驼峰命名

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有