nextTick

作者: 未来在奋斗 | 来源:发表于2019-12-07 14:53 被阅读0次

DOM的改变,会触发事件。事件是同步执行的。

数据的更新,不会立刻触发视图的更新。在Vue中,DOM的变动是异步的。

如果想要得到数据更新后的dom对象,并执行操作。初始化时可以写在mounted中,此外可以写在nextTick这个api中。

Vue.nextTick(callback,执行上下文环境的this) --接收两个参数

Vue.nextTick里面有三个重要变量:callback(回调) pending(是否正在执行回调) timefunc(触发回调的函数)

   <div ref="msgDiv">{{msg}}</div>
        <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
        <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
        <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
        <button @click="changeMsg">
          Change the Message
        </button>
      </div>
    <script>
    new Vue({
        el: '.app',
        data: {
            msg: 'Hello Vue.',
            msg1: '',
            msg2: '',
            msg3: ''
        },
        methods: {
            changeMsg() {
            this.msg = "Hello word."
            this.msg1 = this.$refs.msgDiv.innerHTML
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML
            })
            this.msg3 = this.$refs.msgDiv.innerHTML
            }
        }


相关文章

网友评论

      本文标题:nextTick

      本文链接:https://www.haomeiwen.com/subject/ugemgctx.html