Vue3 异步数据渲染模板，ref 获取不到真实节点

获取异步数据，并把数据渲染到模板中，比如 todolist 等。ref 只有在模板渲染之后才可以获取，而异步获取数据期间，模板可能没有被渲染。因此，直接在 setup 执行期间获取 ref、甚至 onMounted 中也同样也是获取失败。

总而言之，模板没有渲染完成，是时机的问题。于是想，有没有其他 API 可以让我们知道模板已经渲染完成？

watchEffect：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

官话看着真的晦涩难懂，总之就是，可以监听到本组件内的响应式数据变化，并触发该函数的回调：

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 输出 0，首先是立即执行，此时已经追踪其依赖，假如发生改变，该函数重新执行。

count.value++
// -> 输出 1，改变响应式数据，重新执行 watchEffect 回调。

总结：如果遇到上诉问题，onMounted 不能解决获取 ref 失败的问题，又数据是异步的。那么，可以使用watchEffect。又或者可以使用watch。

const anchor = ref<any>(null)

// 可以获取
watchEffect(() => console.log(anchor.value))

// 也可以获取
watch(anchor, () => console.log(anchor.value))