vue中$nextTick的用法讲解

 更新时间:2019年01月17日 14:02:23   作者:muzidigbig  
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如你在Vue生命周期的created()/mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()/mounted()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

为什么要用nextTick?

请看如下一段代码

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.get()
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

我在获取到数据后赋值给数据模型中list属性,然后我想引用ul元素找到第一个li把它的颜色变为红色,但是事实上,这个要报错了,我们知道,在执行这句话时,ul下面并没有li,也就是说刚刚进行的赋值操作,当前并没有引起视图层的更新。因此,在这样的情况下,vue给我们提供了$nextTick方法,如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.$nextTick(() => {
    this.get()
  })
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • Vue字符串中如何添加多个空格

    Vue字符串中如何添加多个空格

    这篇文章主要介绍了Vue字符串中如何添加多个空格问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解Vue-Router源码分析路由实现原理

    详解Vue-Router源码分析路由实现原理

    这篇文章主要介绍了Vue-Router源码分析路由实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 基于vue的短信验证码倒计时demo

    基于vue的短信验证码倒计时demo

    这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue3前端获取文件的绝对路径问题解决

    vue3前端获取文件的绝对路径问题解决

    这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue中使用h5 Plus的实现方法

    Vue中使用h5 Plus的实现方法

    这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中使用过滤器filters的this为undefined的问题

    vue中使用过滤器filters的this为undefined的问题

    这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法,有需要的朋友们可以参考下。
    2020-02-02
  • 如何重置vue打印变量的显示方式

    如何重置vue打印变量的显示方式

    这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2017-12-12
  • 使用Vue 实现滑动验证码功能

    使用Vue 实现滑动验证码功能

    本文章主要来介绍一下第一个阶段,也就是前端校验的验证码的实现,下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下
    2019-06-06
  • ElementUI中el-dropdown-item点击事件无效问题

    ElementUI中el-dropdown-item点击事件无效问题

    这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论