请问如何更新整个vue.$data

Question

我有一个对象代表一张单据

var bill={id:'aaa',store:'bbb'};

完了在new Vue时赋值给$data：

var vm = new Vue(el:'#billinfo', data: bill});

然后在html中呈现单据信息：

<div id='billinfo'>
  <p>单号：{{id}}</p>
  <p>店仓：{{store}}</p>
</div>

在页面的交互中，bill可能会变成另一张单据，而我不想挨个更新单据属性：

bill.id = 'xxx';
bill.store = 'yyy';

我想把bill整个替换掉，但改变bill的指向显然不行：

bill = {id:'xxx', store: 'yyy'};

这样也不行：

vm.$data = {id:'xxx', store: 'yyy'};

固然可以将bill作为$data的某个子属性来构造vm，例如：

var vm = new Vue({el:xx, data: {bill: bill}});

这样在bill更新时便可以像这样操作：

vm.bill = {id:'xxx', store: 'yyy'};

但问题是使用时就只能带上这个属性名来使用：

<p>单号：{{bill.id}}</p>
...

请问怎样才能让$data就是实体本身时，整个更新$data？又或者，即便实体属于$data的某个子属性，也能不带属性前缀来使用？

Answer 1

不能更新根data 可以遍历更新嘛

for (var prop in bill)
{             
    Vue.set(vm, prop, bill[prop] )
}

Answer 2

Vue.set( vm, data, {...bill})