vue数据无法响应式

在实际开发过程中，会遇到一个页面分为多个组件。但是后端是放到一个接口里，通过对象的形式返回。如：

resultData:{
    property1: {},
    property: []
}

如果在父组件请求接口，并在data里定义result,用来接收参数,如

data() {
    return{
        resultData: {}
   }
}

可能会遇到即使后端数据返回，前端页面也没有动态渲染。这和vue的响应式原理有关。 vue官网文档，对于响应式的解释是 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染 。

针对以上解释，我们可以理解为，如果数据是需要响应式显示的，那么就需要在data中定义该属性，即使这个对象嵌套的再深，也应该在data中定义该属性，以此来让vue能够写入该定义对象的get/set方法 只需要将接口返回的属性，需要响应式的，定义在data里即可，如下

resultData:{
    property1: {},
    property: []
}

如果遇到无法提前定义变量的情况，那么在请求到数据后，不要进行直接 =号赋值，而应使用解构方式赋值，解构可以将get和set方法一起赋值到新的变量中去