webfansplz / vuejs-challenges

Collection of Vue.js challenges
https://vuejs-challenges.netlify.app/
MIT License
2.69k stars 188 forks source link

11 - 下一次DOM更新 #2739

Open coderdavi opened 2 months ago

coderdavi commented 2 months ago
// 你的答案
<script setup>
import { ref, watchEffect } from "vue"

const count = ref(0)
const counter = ref(null)

function increment() {
  count.value++

  /**
   * DOM is not yet updated, how can we make sure that the DOM gets updated
   * Make the output be true
  */
  watchEffect(()=>{
    console.log(+counter.value.textContent === 1)   
  },{flush:'post'})
}
</script>

<template>
  <button ref="counter" @click="increment">
    {{ count }}
  </button>
</template>