Vue3 ref 模板引用获取不到节点

ref模板引用必须要在组件实例挂载完成之后才可以访问。如果你是在组合式 API 里面写的组件，那么 setup 函数比任何周期函数都早，所以不可能在该函数中执行时获取得到ref——组件实例。

官网关于ref获取组件实例有两个案例：onMounted、watchEffect 中获取 ref。其中 onMounted有的说：

如果此时在setup函数里写了一个异步函数，毫无疑问，该异步任务不影响组件执行周期函数，也就是说onMounted确实能获取得到模板引用。但如果模板中某个节点是要获取了数据之后才更新 DOM，假如我需要的正是这个 DOM 的高度呢？有可能是 0，因为数据是异步的，而周期函数执行时间一般都快于异步函数的执行。

// setup

const todolist = ref(null);

const data = ref(await getData());

onMounted(() => {

  todolist.value; // => null

});

<div ref="todolist">

  <ul v-for="item in data">

    <li>{{ item }}</li>

  </ul>

</div>

针对于异步数据，onMounted不行，那watchEffect行不行呢？答案是当然可以，但是watchEffect不管有没有等到 DOM 异步之后更新，都要执行，也就是它第一次可能是获取 null 值，所以也不合适。

const count = ref(0)

watchEffect(() => console.log(count.value))

// -> 输出 0，首先是立即执行，此时已经追踪其依赖，假如发生改变，该函数重新执行。

count.value++

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

最好的是使用watch，监听ref发生的变化，因为 DOM 更新，模板引用也会更新，但不会像watchEffect那样，有可能第一次会得到一个 null 值：

// setup

const todolist = ref(null);

const data = ref(await getData());

watch(todolist, () => {

  todolist.value;

});

巴特西

Vue3 ref 模板引用获取不到节点

最新文章

热门文章