加载外部脚本后运行Vue组件的方法答案

【问题标题】：Run the method of the Vue component after the external script is loaded加载外部脚本后运行Vue组件的方法
【发布时间】：2018-01-18 03:56:42
【问题描述】：

我正在使用谷歌地图 API，并创建了一个组件来显示地图。

index.html:

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
window.show_google_map = false;
console.log(window.show_google_map);
function initMap() {
    console.log('map loaded');
    window.show_google_map = true;
    console.log(window.show_google_map);
}
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap"
        type="text/javascript"></script>
</body>
</html>

GoogleMap.vue：

<template>
    <div class="google_map" :id="map_name"></div>
</template>

<script>
    export default {
        name: 'google_map',
        props: ['map_id'],
        data() {
            return {
                map_name: this.map_id + '-map',
            }
        },
        methods: {
            create_map() {
                const element = document.getElementById(this.map_name);
                const options = {
                    zoom: 14,
                    center: new google.maps.LatLng(51.501527, -0.1921837)
                };
                const map = new google.maps.Map(element, options);
                const position = new google.maps.LatLng(51.501527, -0.1921837);
                const marker = new google.maps.Marker({
                    position,
                    map
                });
            }
        },
        mounted() {
            this.create_map();
        }
    }
</script>

问题是，组件是在加载 google maps API 之前渲染的。 google maps API 加载后如何显示？

【问题讨论】：

标签： javascript google-maps vue.js

【解决方案1】：

第一次挂载组件时，使用 vue.mounted 生命周期方法并手动加载 gmaps 脚本。这样您就可以在加载 gmaps api 后启动您的代码（甚至适用于 google auth api）

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}

【讨论】：

【解决方案2】：

如果我是你，我会在数据对象上创建一个名为googleMapsReference 的属性，并将window.google 分配给它。然后使用观察者通过 typeof 检查它的值。如果它是未定义的，那么你知道它还没有加载。如果你得到“对象”，那么你就知道它有，你可以调用该函数来创建地图。

对不起，我会写代码，但我在用手机。

这里是文档：https://vuejs.org/v2/guide/computed.html

【讨论】：

是的，我正在尝试这种方式。但是计算的属性在加载时不会触发。我已经更新了我的问题。请看一看。
哦，我不是在建议计算属性。而是一个旁观者。它与计算属性的不同之处在于它是双向绑定的。
您无法查看未定义的变量。