zoukankan      html  css  js  c++  java
  • vue中nextTick的使用

          最近使用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

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

      

  • 相关阅读:
    JQuery0007:JQuery跨域无刷新分页
    H5_0034:toast提示
    H5_0032:chrome以窗口模式运行(无地址栏与标签栏)
    H5_0031:浏览器弹窗
    JN_0022:VSCode操作技巧 去除空行 去掉换行付
    JQuery0003:事件触发与解除
    CSS0001: CSS判断手机 平板 PC
    Web_0006:阿里云服务器OSS缓存设置清理
    H5_0030:iframe 全屏嵌入,父级获取iframe中嵌入的dom对象
    JN_0020:Chrome保存整个网页为图片
  • 原文地址:https://www.cnblogs.com/bllx/p/11888598.html
Copyright © 2011-2022 走看看