vue3 组件竟能 “暂停” 渲染！

文章预览

前言 有的时候我们想要 从服务端拿到数据后 再去渲染一个组件，为了实现这个效果我们目前有几种实现方式： 将数据请求放到父组件去做，并且使用 v-if 控制拿到子组件后才去渲染子组件，然后将数据从父组件通过 props 传给子组件。 在子组件的 onMounted 中请求数据，并且使用 v-if 在子组件的 template 最外层进行控制，只有拿到数据后才渲染子组件中的内容。 上面这两种方案都有各自的缺点，不够完美。最理想的方案是将从服务端获取数据的逻辑放在子组件中，并且在获取数据的期间让子组件 “暂停” 一下，先不去渲染，等到数据请求完成后再第一次去渲染子组件。 完美的解决方案 第一种方法的缺点是：子组件虽然拿到数据后才开始渲染，但是数据请求的逻辑却放到了父组件上面，我们期望所有的逻辑都封装在子组件内部。 第二种方法的缺点 ………………………………