Vue的nextTick

nextTick

vue的数据修改之后视图是立即更新吗?

Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

 

<u>vue.nexttick 等待 Vue 完成更新 DOM 可以在数据变化之后立即调用</u>

vue.nexttick 等待 Vue 完成更新 DOM 可以在数据变化之后立即调用

vue.nexttick 等待 Vue 完成更新 DOM 可以在数据变化之后立即调用

vue.nexttick 等待 Vue 完成更新 DOM 可以在数据变化之后立即调用

vue.nexttick 等待 Vue 完成更新 DOM 可以在数据变化之后立即调用

 

<template>
<div>
    <h1>nexttick</h1>
    <!-- vue的数据修改之后视图是立即更新吗?
      vue中数据变了视图不是立即更新的
      -->
    <h1 ref="demoh">{{text}}</h1>
    <button @click="fun()">点我修改text数据</button>
</div>
</template>

<script>
export default {
  data(){
      return {
          text:"我是默认值"
      }
  },
  methods:{
      fun(){
          this.text="变了"
          // 我现在就是想当数据变了 直接从视图中取出改变之后的数据
          // console.log(this.$refs.demoh.innerHTML)
          this.$nextTick(()=>{
              // 我会在数据修改之后把视图也改变了之后立即调用
              console.log(this.$refs.demoh.innerHTML)
          })
      }
  }
}
</script>

<style>

</style>

原理:

1.首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及DOM. 2.Vue开启一个异步队列,并缓冲在此事件循环中发生的所有数据变化。 3.同步任务执行完毕,开始执行异步队列的任务,更新DOM

上一篇:2021/12/6-2021/12/10


下一篇:VUE面试题系列03(带数字,带序号)