vue渲染原理問(wèn)題百度地圖初始化代碼放在vue實(shí)例化之前無(wú)法生效

業(yè)務(wù)背景

在vue項(xiàng)目中使用百度地圖js文件
如果把百度地圖實(shí)例化代碼放在vue實(shí)例化之前
百度地圖就渲染不出來(lái)(地圖容器元素會(huì)被自動(dòng)設(shè)置樣式,但是容器元素里面沒(méi)有填充內(nèi)容)

但是
如果把百度地圖實(shí)例化代碼放在vue實(shí)例化之后或者mounted鉤子里面
地圖就能夠渲染出來(lái)了

問(wèn)題

vue的渲染原理到底是怎么樣的?
為什么會(huì)產(chǎn)生這樣的問(wèn)題?

代碼

<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>
    // 實(shí)例化百度地圖
    const map = new BMap.Map('baidumap');
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    // 實(shí)例化vue
    const vue = new Vue({
        el: '#app',
        data: {
            isDisabled: false
        }
    });
</script>

嘗試

將百度地圖的代碼替換成簡(jiǎn)單的DOM文本替換(異步/同步都有嘗試),瀏覽器進(jìn)行文本替換
查看了請(qǐng)求,百度地圖的請(qǐng)求都執(zhí)行了,只是大部分請(qǐng)求都是在mounted鉤子之后執(zhí)行的
將百度地圖的容器#baidumap元素放在vue的容器元素#app外面,這時(shí)候,百度地圖的容器元素內(nèi)部會(huì)填充內(nèi)容,但是依然沒(méi)有被渲染出來(lái)

回答

編輯回答

小曖昧

vue會(huì)把#app當(dāng)成它的模板，重新渲染

<div id="app">
    <p>hello</p>
    <p>{{isDisabled}}</p>
    <div  ref="baidumap" style="width: 300px;height: 300px;"></div>
</div>

    // 實(shí)例化vue
    const vue = new Vue({
        el: '#app',
        data: {
            isDisabled: false
        },
        mounted:function(){
            // 實(shí)例化百度地圖
            const map = new BMap.Map(this.$refs.baidumap);
            const point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 15);
        }
    });

或者這樣也是可以的


<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>

<body>
    <div id="app">
        <p>hello</p>
        <p>{{isDisabled}}</p>
        <div ref="baidumap" style="width: 300px;height: 300px;"></div>
    </div>
    <div id="baidumap" style="width: 300px;height: 300px;"></div>
</body>

<script>
    // 實(shí)例化百度地圖
    const map = new BMap.Map("baidumap");
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    // 實(shí)例化vue
    const vue = new Vue({
        el: '#app',
        data: {
            isDisabled: false
        },
        mounted: function () {
            const map = new BMap.Map(this.$refs.baidumap);
            const point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 15);
        }
    });
</script>

2017年7月28日 11:13

編輯回答