vue中实现先请求数据再渲染dom

最新推荐文章于 2025-06-30 12:25:16 发布
最新推荐文章于 2025-06-30 12:25:16 发布
阅读量6.1w 收藏 36
点赞数 9
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20777797/article/details/78805533
本文探讨了在Vue项目中如何正确地获取DOM元素的问题。作者最初尝试直接在组件内部获取DOM，但发现由于数据加载和DOM渲染的时间差导致获取DOM失败。最终采用将数据请求放在created钩子内，并利用$nextTick确保DOM更新后再进行操作的方法解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中遇到了一个问题，下面是vue    template中的代码：


 

我之前的写法是


这样做的结果是下面取dom的操作，取到的dom都是undefined，也就是没有取到。

原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行，实际的执行顺序是 先获取dom，而此时数组option中还是空的，上面的v-for循环也就没有渲染出dom，所以根本取不到（不理解是为什么）

后来我又把请求数据写在了created函数中，把取dom的操作写在mounted函数中，竟然还是先执行取dom的操作（是通过alert的顺序来判断执行的顺序），我也很绝望啊



最后终于找到了解决的办法：


看到一个别人的回答是：“在数据请求的回调中使用nextTick，在nextTick的回调里试试～”

还有一个人的回答是：“如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面”（这种之前我试过，我太好用，不懂为什么）


我把这两种方法综合起来，其实主要是第一种方法，发现好用了！

qq_20777797
关注
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
资深程序员
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ulv-for="(item,index)ingetData()":key="index"> <li>{{item.name}}</li> </ul> </template> getData(){ apidata... } 由于模板（templat
在Vue中异步加载数据渲染到Dom
weixin_43246843的博客
04-22 1932
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text item">{{o}}</div> 前提是，resmessage初始值为空，我想根据后台返回值来动态添加数据,我的做法是通过axios请求获取数据,拿到数据后赋值给resmessage 进行完以上操作发现根本不行，数据可以拿...
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
$nextTick —— vue中实现请求数据后渲染dom
提莫拌一团蘑菇
03-31 1439
我们先看下面代码示例效果1）示例 <body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div>...
Vue 快速入门
最新发布
分享我的点点滴滴，在成长路上与你同行！
06-30 1315
Vue 快速入门
使用vue，如何让模板等待接口请求数据完成后再进行页面渲染？
王铁柱666的博客
11-19 697
在Vue中，我们通常使用生命周期钩子来处理异步操作，如接口请求。为了确保模板等待接口请求数据完成后再进行页面渲染，你可以在Vue组件的。生命周期钩子中发起请求，并在数据返回后更新组件的数据。Vue会自动跟踪数据的变化，并在数据更新时重新渲染模板。在请求完成并返回数据后，我们更新组件的。的值来决定显示加载提示还是实际的内容。在这个示例中，我们在。
vue.js实现请求数据的方法示例
10-20
本文详细讲解了如何在Vue.js的不同版本中实现数据请求，具体包括Vue 1.x和Vue 2.x版本中的实现方式。 在Vue 1.x版本中，开发者通常使用`ready`方法来处理页面的初始化逻辑。页面加载完成后，`ready`方法会被自动...
vue异步axios获取的数据渲染到页面的方法
10-18
综上所述，通过结合Vue的生命周期钩子、Axios的异步请求处理、VueX的状态管理以及计算属性的响应式渲染，我们可以高效且稳定地在Vue项目中使用Axios异步获取数据，并渲染到页面中。希望上述内容能够帮助大家在开发...
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
它擅长于构建用户界面，可以便捷地实现数据的动态绑定和组件化开发。本文将重点介绍如何使用Vue.js将JSON格式的数据库数据渲染到HTML页面上，该过程涉及前后端数据交互、Vue.js数据绑定与DOM操作等重要知识点。 ###...
解析从 Vue 初始化到首次渲染生成 DOM 以及从 Vue 数据修改到页面更新 DOM 的流程
Bule_daze的博客
08-10 2690
https://mp.weixin.qq.com/s/G5nwszLRk0W51Ui_IykJxQ Vue 初始化 从最简单的一段 Vue 代码开始： <template> <div> {{ message }} </div> </template> <script> new Vue({ data() { return { message: "hello world", }; }, }); &.
Vue--DOM渲染的方式
CC卡卡西
05-25 1359
DOM渲染 1. 指定被挂载元素 el选项用于指定Vue实例的挂载目标，其方式大概有以下3点 CSS选择器方式 let app = new Vue({ el:'#app', //选择器 data(){ return{ msg:'挂载成功。。。' } } }); DOM节点方式 let app2 = new
vue 页面重新加载渲染nextTick
yuguang的博客
10-09 5177
当vue的页面需要重新渲染，不仅仅是数据的更新，div的高度要变化的时候就要用nextTick来重新渲染页面。Vue.nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
vue还未获取到数据就渲染dom的问题
weixin_47327288的博客
03-23 4402
今天在用vue写自己的博客网站的时候，被一个问题所困扰，就是有时候刷新页面在Ajax请求数据还没返回的时候，dom结构就已经刷新了。对于这个问题，其实有两种解决方法，但是个人更偏向于后者。 第一种：setTimeOut 这种方法其实就是在你需要异步请求的数据的dom结构中设一个v-show='变量为false'（v-if也可），然后在mounted设置setTimeOut延迟多久后将此变量改为true，但这种方法其实不好，因为你每个异步请求的时间都是不一样的，你无法知道具体的时间。 第二种： 第二种思路其实
vue 重新渲染dom
中老年程序员
03-19 1240
如果需要强制重新渲染一个组件，可以使用key属性。当key改变时，Vue会认为这是一个不同的元素，并且会创建一个新的DOM节点替换旧的节点。 下面是一个简单的例子，在这个例子中，每当你点击按钮时，componentKey的值会增加，因此key属性会变化，Vue会认为需要被重新渲染。这种方法可以强制Vue去重新渲染一个组件，从而更新其DOM。
Vue2项目运行在浏览器时的渲染顺序详细介绍
weixin_52960369的博客
04-26 1342
4. 渲染阶段：Vue执行渲染函数，生成虚拟DOM对象，并与上一次的虚拟DOM对象进行差异比较，计算出需要更新的部分。6. 销毁阶段：当Vue实例被销毁时，Vue会清除所有相关的事件监听和定时器，以及与该实例关联的DOM元素和数据。3. beforeMount：组件挂载之前被调用，此时组件的模板已经编译完成，但尚未挂载到页面上。2. 模板编译阶段：Vue会对模板进行解析和编译，生成渲染函数，并将渲染函数挂载到Vue实例上。4. mounted：组件挂载完成后被调用，此时组件已经完全被渲染到页面中。
vue 想要先加载完所有数据再渲染页面、异步请求回来数据了，但是页面没有渲染
热门推荐
qq_40683441的博客
06-11 1万+
先设置showCard为false，内容card为"" 请求成功后设置showCard为true，内容card为请求得到的数据res.data <div v-if="showCard"><div> data() { return { card:"", showCard:false, } } created() { this.$vux.loading.show({ text: "正在加载" }); this.$api.cardInterfa
Vue 3渲染DOM节点的几种方式
一起学习
10-16 1875
本文主要介绍在vue3中渲染DOM节点的几种方式。
Vue3解决Vuex异步获取数据，页面先渲染问题
weixin_67560997的博客
03-05 5747
Vue3解决Vuex异步获取数据，页面先渲染问题
【Vue】请求动态渲染数据
qq_39921135的博客
06-10 348
准备actions 和 mutations。请求获取数据存入 vuex, 映射渲染。页面中调用 action, 获取数据。验证数据是否存储成功。
vue先加载数据再渲染dom
06-01
在Vue中，可以使用生命周期钩子函数来实现先加载数据再渲染DOM的效果。具体来说，可以在created或mounted钩子函数中发起数据请求，然后将请求到的数据存储到组件的data选项中，最后在模板中使用这些数据渲染DOM。 例如，以下示例代码展示了如何使用Vue的created钩子函数先加载数据再渲染DOM： ``` <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { list: [] }; }, created() { // 发起数据请求 fetchData().then((data) => { // 将数据存储到组件的data选项中 this.list = data; }); } }; </script> ``` 在上述示例中，组件在created钩子函数中发起数据请求，然后将请求到的数据存储到组件的data选项中，最后在模板中使用这些数据渲染DOM。注意，模板中使用v-for指令渲染列表时，需要指定每个列表项的key属性，以便Vue能够正确地跟踪列表项的变化。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值