vue学习（八）nextTick[异步更新队列]的使用和应用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM

<div >
    <h3>{{msg}}</h3>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            msg:'晓强'
        },
    })
    app.msg = '新的数据-晓强'
//    console.log(app.$el.textContent)
//    为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()
    // 在当前的回调函数中能获取最新的DOM
    Vue.nextTick(()=>{
         console.log(app.$el.textContent)
    })
</script>

nextTick的应用

看下面的代码

<div >
<App></App>
</div>
<script>
    /*
    * 需求：
    *       在页面拉取一个接口，这个接口返回一些数据，这些数据是这个页面的一个浮层组件要依赖的，
    *       然后我在接口，一返回数据就展示了这个浮层组件，
    *       展示的同时上报一些数据给后台（这些数据是父组件从接口拿的）
    *       这个时候，神奇的事件发生了，虽然我拿到了数据了，但是浮层展现的时候，
    *       这些数据还未更新到组件上去，上报失败
    * */
    const Pop = {
        data() {
            return {
                isShow: false
            }
        },
        props:{
          name:{
              type: String,
              default:''
          }
        },
        template: `
        <div v-if="isShow">
            {{name}}
        </div>
        `,
        methods: {
            show() {
                this.isShow=true;
                console.log(this.name)
            }
        },
    };
    const App = {
        data() {
            return {
                name: ''
            }
        },
        created() {
            // 模拟异步请求
            setTimeout(()=>{
                this.name='晓强';
                this.$refs.pop.show();
            },1000)
        },
        components: {
            Pop
        },
        template: `<pop ref='pop' :name="name"></pop>`
    };
    let app = new Vue({
        el: '#app',
        components: {
            App
        },
    })
</script>

看下图一秒钟之后 页面显示 但是console.log没有内容

修改如下：

this.$nextTick(()=>{
      this.$refs.pop.show();
 })

以上是 vue学习（八）nextTick[异步更新队列]的使用和应用 的全部内容， 来源链接： utcz.com/z/375728.html

回到顶部