唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > VUE中Vue.nextTick()和this.$nextTick()

VUE中Vue.nextTick()和this.$nextTick()

2018-10-15 分类:Vue.js专区 作者:管理员 阅读(2686)

官方文档是这样解释的

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
}

其实这个东西就是为了更好的拿到DOM最新节点,比如你有一个基于jquery的插件,在每次视图更新之后去执行这个jq的方法,那就需要这个钩子回调,当然有人说不是有updata吗,是有这个东西,但是那是针对某个组件整体渲染进行的生命周期钩子,但如果我们并没有去切换更新组件,只是通过事件改变了某处组件中的UI,那这时候updata自然是不会执行的,而这时候就可以用到this.$nextTick了

如果你觉得还不好理解,那我再举个例子,假如说我在页面上有个input,默认是隐藏的,我想页面刷新后input展示并获取到焦点,那你获取焦点是不是前提是必须先元素显示在页面上才能去说获得焦点,但有同学了可能说,我把获取焦点放在input显示后执行不就行了吗,不是说好的代码执行都是遵行上下文执行循序的原则吗,其实在框架下有点不同,比如下面这个例子:

1
2
3
4
5
6
7
methods: {
  get_focus() {
    this.isInput = true;
    this.isInput = false;
    this.isInput = true;
  }
},

你以为代码是input先页面显示,然后隐藏,然后再显示吗?那这样的话你把vue想的也太蠢了,其实是我们事件执行完成后然后一股脑一次性更新DOM,这样的话你焦点自然不能和input显示逻辑一起执行,所以你必须应该这样写:

1
2
3
4
5
6
7
8
9
10
methods: {
  get_focus() {
    this.isInput = true;
    this.isInput = false;
    this.isInput = true;
    this.$nextTick(function () {
      console.log(this.$el.textContent) // => 'updated'
    })
  }
},

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(4) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
4

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - VUE中Vue.nextTick()和this.$nextTick()

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 235 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 936 条
  • 链接总数: 13 个
  • 标签总数: 424 个
  • 建站时间: 1010 天
  • 注册用户: 2228 人
  • 访问总量: 8925097 次
  • 最近更新: 2019年9月19日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线