vue中this.$nextTick()的使用

vue中this.$nextTick()的使用

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

this.$nextTick()是在数据更新以后再调用里面的动作
例如：

<div id="app">
  <h1 id="title">{{content}}</h1>
  <button @click="click">点击</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      content: 'hello vue!'
    },
    methods: {
      click() {
        this.content = 'hello nextTick'
        console.log(document.getElementById('title').innerText); 
        // 打印结果为hello vue! 因为数据还没有更新到页面
        
        this.$nextTick(() => {
          console.log(document.getElementById('title').innerText);
          //数据更新到页面后再进行执行打印,打印结果为hello nextTick
        })
      }
    }
  })
</script>

同理，也可以在mounted()或者created()使用this.$nextTick()，因为在created()钩子函数执行

的时候，页面DOM其实还没有进行渲染，数据也还没有更新到页面，这个时候对DOM中数据进行操作会没用，如果在created()里用this.$nextTick()，可以等数据更新到页面之后才能后取到DOM里面的值进行操作。

欢迎关注公众号,有你想要的前端知识：