Vue.js 推文按钮渲染太晚

我在我的网站上使用了一个写在Vue.js上的tweet按钮，遇到了这样一个问题：一开始，按钮显示时没有适当的样式，只是一个普通的锚定标签文本，过了一段时间，它变为原来的时尚版本。以下是我编写的组件：

<template>
    <span v-html="tweetButton">
</template>

<script>
    export default {
        name: "MyComponent",
        mounted() {
            this.renderTweetButton()
        },
        watch: {
            twitter(newVal, oldVal) {
                if (newVal.widgets) {
                    newVal.widgets.load()
                }
            }
        },
        data() {
            return {
                tweetButton: null,
                twitter: {}
            }
        },
        methods: {
            renderTweetButton() {
                this.tweetButton = `<a
                    class="twitter-share-button"
                    data-via="Example"
                    data-size="medium"
                    data-text="Check this out!"
                    data-url="https://example.com"
                    href="https://twitter.com/intent/tweet">
                  Tweet</a>`

                this.twitter = (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0],
                        t = window.twttr || {};
                    if (d.getElementById(id)) return t;
                    js = d.createElement(s);
                    js.async = false;
                    js.id = id;
                    js.src = "https://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);

                    t._e = [];
                    t.ready = function(f) {
                        t._e.push(f);
                    };

                    return t;
                }(document, "script", "twitter-wjs"))
            }
        }
    }
</script>

<style scoped>

</style>

导出默认值{
名称：“MyComponent”，
安装的（）{
this.renderTweetButton（）
},
观察：{
推特（newVal，oldVal）{
if（newVal.widgets）{
newVal.widgets.load（）
}
}
},
数据（）{
返回{
tweetButton:null，
推特：{}
}
},
方法：{
RenderWeetButton（）{
this.tweet按钮=``
this.twitter=（函数（d，s，id）{
var js，fjs=d.getElementsByTagName[0]，
t=window.twttr |{}；
if（d.getElementById（id））返回t；
js=d.createElement；
js.async=false；
js.id=id；
js.src=”https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore（js，fjs）；
t、 _e=[]；
t、 就绪=功能（f）{
t、 _e.推动（f）；
};
返回t；
}（文档，“脚本”，“twitter wjs”））
}
}
}

---

因此，我只是想知道是否有一种方法可以在按钮完全加载之前不显示它？

由于目标锚元素在脚本加载时会自动被Twitter小部件替换，因此您可以使用

显示：无

样式隐藏锚，以避免未设置样式的内容闪烁：

---

this.tweetButton=`
由于您似乎正在下载该按钮，因此将下载该按钮的调用包装在一个异步函数中。dl完成后，设置布尔值以使用v-if显示按钮。