解决vue项目中调用后台接口成功获取到数据但元素渲染报null错误

由于获取到后台数据是个对象，所以我在data里面定义数据的时候给赋的初值是null

假设：

data(){
	return {
		videoObj:null
	}
}

template模板里对应的DOM元素：

<div>{{ videoObj.title}} </div>

由于给videoObj赋了null这个初值，所以在调用接口前初始渲染读取的是null，即div的里面的videoObj初始读取的是null，所以会报 TyperError:Cannot read property of ‘title’ of null

解决方案：

1. 给videoObj初始赋值为{}

2. template模板里读取videos的父元素加一个v-if="videoObj!= null"

PS:在做项目的遇到很多类似的报错，主要是初次渲染的问题，在后台返回的数据data的类型是数组arr或者是对象obj，在template中渲染的时候，如果是数组arr，通过v-for去遍历arr,如果遍历的每一项item是对象，再通过item.xxx去拿数据；如果是对象obj，通过obj.xxx去获取对应数据。
这种形式arr.key / obj.key的形式就会报错，初始渲染找不到对应的key，所以为了解决这个问题，可以在最外层的div加个v-if判断数组arr和对象obj是否为空，如果是空就不渲染。

数组: v-if="arr.length !== 0"
	  v-if="JSON.stringify(arr) !== '{}' "
对象: v-if="JSON.stringify(obj) !== '{}' "
// 注意 : 
// obj的初始值为null的话，JSON.stringify(null) !== '{}'的结果是true

PS：空数组不会遍历