这已经是我在调用数据时趟过几次的坑了，索性记录下来防止后面再犯；
一般我们请求数据来渲染一个页面的时候，请求下来的数据基本上都是数组或是对象，再通过列表循环和插值表达式渲染的页面；在data 中提前声明接收数据的变量时若为指定类型，就直接将数据渲染到页面，在浏览器的控制台基本上都会出现 “某某属性未定义” 的英文报错；下面举个例子：
先假设请求的是下面的json 数据：
{
"code": 0,
"data":[
{
"name": "Buccky",
"age": 16,
"score": 77
},
// 。。。。。
]
}
数据请求下来将data的学生分数选项 存到 scoreInfo中，如下：
new Vue({
data(){
return {
scoreInfo: []
}
}
})
这里为了说明问题，不用列表渲染，我们只取第一条数据中的name进行渲染，如果像这样下面这样写的话，就会出现上面说的那种报错：
...
<span>{{ scoreInfo[0].name }}</span>
这样写后，浏览器的控制台就会报错，告诉name 这个属性未定义，究其原因是，我们一般请求数据，虽然在这个组件实例创建的时间就已经请求了，但是，请求数据，一般都是使用异步的，在页面渲染时最开始时，scoreInfo: [] 仅仅是个空数组，故会报name 这个属性确实不存在错误提示；
解决办法：
new Vue({
data(){
return {
scoreInfo: [{}] // 在空数组中加一个空对象
}
}
})
当然我们平时请求的数据，不会这么简单，这里在将要请求的数简单修改一下：
"code": 0,
"data":[
{
"name": "Buccky",
"age": 16,
"score": 77,
"teacher": {
"name": "Miss Li",
"age": 24,
}
},
// 。。。。。
]
}
此时需要将老师的名字渲染出来：
<span>{{ scoreInfo[0].teacher.name }}</span>
要想不报错，还需要像如下修改一下 scoreInfo:
new Vue({
data(){
return {
scoreInfo: [{teacher:{}}]
}
}
})
当然，还可以将数据改的更为复杂，但只需按照这个思路，就可以轻松的解决了
