如何控制vue不渲染data中的初始值？

Question

按照国际惯例，我首先 new 了一个 Vue 实例

let vm = new Vue({

    

    data: {

        name: 'xxx'

    },

    

    methods: {

        getData(){

            let that = this;

            $.ajax({

                ...,

                success: function(res){

                    that.name = res;

                }

            });

        }

    },

    

    mounted(){

        this.getData();

    }

});

如上，在 data 中定义了一个变量 name, 将获取数据的函数挂载在 mounted 中，用异步返回的值去变更 name。 ok，现在将 name渲染在页面上：

<span>{{ name }}</span>

现在的问题是，页面上会快速显示 name 的初始值 'xxx'，随后才更新为异步获得的数据，很影响体验 

有没有方法可以不渲染初始值？（只展示异步获得的数据）

补充：设置初始值为空依然会渲染在页面上，撑开父元素

比如，渲染结构如下：

<span>({{ name }})</span>

Answer 1

我也遇到了这样的问题。有一个折衷的办法。在new Vue的时候不要挂载 el. 当data获得数据后 再用 vm.$mount("#app") 挂载。这样页面就不会渲染了。

Answer 2

你可以让他不渲染啊，字符串初始化为空，模版那边用v-if