极客观点
项目管理
HarmonyOS
业务背景
在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外面,这时候,百度地图的容器元素内部会填充内容,但是依然没有被渲染出来
按照道理，元素放到app外面会正常显示，有可能你的元素样式没有生效，尺寸不见了