vue渲染原理问题 百度地图初始化代码放在vue实例化之前无法生效
业务背景
在vue项目中使用百度地图js文件
如果把百度地图
实例化代码放在vue
实例化之前
百度地图就渲染不出来(地图容器元素会被自动设置样式,但是容器元素里面没有填充内容)
但是
如果把百度地图
实例化代码放在vue
实例化之后或者mounted
钩子里面
地图就能够渲染出来了
问题
vue的渲染原理到底是怎么样的?
为什么会产生这样的问题?
代码
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G0sNwSjvOiFRQD4oCR0wQG2aL5rovn8h"></script>
<div id="app">
<p>hello</p>
<p>{{isDisabled}}</p>
<div id="baidumap" style="width: 300px;height: 300px;"></div>
</div>
<script>
// 实例化百度地图
const map = new BMap.Map('baidumap');
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 实例化vue
const vue = new Vue({
el: '#app',
data: {
isDisabled: false
}
});
</script>
尝试
- 将
百度地图
的代码替换成简单的DOM文本替换
(异步/同步都有尝试),浏览器进行文本替换 - 查看了请求,百度地图的请求都执行了,只是大部分请求都是在
mounted
钩子之后执行的 - 将
百度地图
的容器#baidumap
元素放在vue
的容器元素#app
外面,这时候,百度地图的容器元素内部会填充内容,但是依然没有被渲染出来
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
按照道理,元素放到app外面会正常显示,有可能你的元素样式没有生效,尺寸不见了
vue会把#app当成它的模板,重新渲染
或者这样也是可以的
楼上说的差不多,百度地图初始化的时候,vue还没有吧dom渲染好,就会这样。