如何控制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

你可以把初始值复制为空字符串'',然后用v-if或者v-show根据name是否为空来判断是否需要渲染<span>{{ name }}</span>就可以了。要是觉得突然出现的有点突兀，可以加过渡

Answer 2

方法1、name: null
方法2、name: ""
方法3、created(){ this.name=""; }

Answer 3

我也遇到了这样的问题。

有一个折衷的办法。

在new Vue的时候不要挂载 el. 当data获得数据后 再用 vm.$mount("#app") 挂载。
这样页面就不会渲染了。

Answer 4

用 v-cloak
v-cloak

Answer 5

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

Answer 6

1.你不需要显示初始值，你写他干啥？你直接写空字符串不就行了！
2.你可以使用v-show v-if 去控制。
3.你的意思是要一个默认值吗？你可以默认值是‘’，然后 {{name.length > 0 ? name : 'default'}}

Answer 7

name:null
或者
name:""

Answer 8

朋友，试一下created中加载数据，然后赋值给默认属性。