解决结构正常渲染，控制台报undefined问题

这是前几天在开发中遇到的一个问题，总的来说就是在setup中，我用ref声明了一个变量，然后把请求回来的结果赋值给这个变量。运行的时候报了undefined，并且页面还可以正常渲染

let defalutAddress = ref({});

async function getDefaultAddress() {
    let res = await get('/defalutAddress');
    defaultAddress.value = res.data.result;

    AddressId = res.data.result.id;
}

getDefaultAddress();

 

 这是因为DOM渲染的时候，数据里面一开始是没有东西的，渲染的时候会去找这个变量，请求没有回来，找不到这个area_name，所以会报错(undefined)。

那报错了为什么会正常渲染呢？

那是因为变量使用了ref函数进行声明，它是响应式的，等数据回来了赋值到变量中，Vue就会进行重新渲染，所以看似是正常的渲染，实则不是。

要解决这个问题也很简单，可以给变量这个对象赋一个初始值

let defaultAddress = ref({ area_name: '', desc: '', name: '', phone: '' });

又或者在结构中进行判断

<p>{{ defaultAddress ? defaultAddress.area_name + defaultAddress.desc : '' }}</p>
<p>
    <span>
        {{ defaultAddress ? defaultAddress.name : '' }}
        {{ defaultAddress ? defaultAddress.phone : '' }}
    </span>
</p>

某些情况是用nextTick也是可以解决的。