码迷,mamicode.com
首页 > 其他好文 > 详细

vue中nextTick的使用

时间:2019-11-19 14:18:46      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:视图   ret   语法   event   ted   get   原理   习惯   官方文档   

      最近使用vue的vm.$nextTick的用法比较多,现在整理一下它的用法。

     推荐阅读:http://www.ruanyifeng.com/blog/2014/10/event-loop.html

   官方文档上这么说的:将回调延迟到下次DOM渲染之后执行。在修改数据后立即使用它,然后等待DOM更新。它和全局方法Vue.nextTick一样,不同的是回调的this自动绑定在它应用的实例上

  上述的话也可以这么理解,我们可以把需要在渲染DOM元素出来后的一些方法放在created生命周期中,不过需要借助vm.$nextTick() 这个回调函数中执行

  或者第二个用法就是在我们更新数据后,vm.$nextTick这个函数中,等待DOM更新时使用。

  其实项目中最常用的就是在组件中使用vm.$nextTick的方法,并且回调函数中的this,会自动绑定在当前的vue实例上

  举例: 

//官网案例
Vue.component(‘example‘, { template: ‘<span>{{ message }}</span>‘, data: function () { return { message: ‘未更新‘ } }, methods: { updateMessage() { this.message = ‘已更新‘ console.log(this.$el.textContent) // => ‘未更新‘ this.$nextTick(() => { console.log(this.$el.textContent) // => ‘已更新‘ }) } } })

上述官方给的案例,我们也可以写成如下方式:通过使用ES7中的async/await的语法完成,这样后面输出的就是已更新的值

methods: {
  updateMessage: async function () {
    this.message = ‘已更新‘
    console.log(this.$el.textContent) // => ‘未更新‘
    await this.$nextTick()
    console.log(this.$el.textContent) // => ‘已更新‘
  }
}

我以项目中我的编写习惯举例

<script>
    export default{
        name:‘demo‘,
        data(){
           return {
    
           }
        },
        created(){
             this.getAjaxData()
             this.$nextTick(()=>{
                  this.getDomEl()
             })
        },
       methods:{
           getAjaxData(){
                 //获取后台数据
           },
           getDomEl(){
            //需要获取DOM元素执行的函数;
            //或者放在mounted中执行的函数
           }
       }
    }

</script>        
                      

官网文档:注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

可以深入了解一下这个响应式原理的相关内容

  

 

vue中nextTick的使用

标签:视图   ret   语法   event   ted   get   原理   习惯   官方文档   

原文地址:https://www.cnblogs.com/bllx/p/11888598.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!