VUE绑定数据未更新？

VUE绑定

（1）HTML标签绑定数据源：

<div id="DIV_VUE">
{{a}}        
</div>

（2）JS新建VUE对象：

var data_vue={a:"1",b:"2"};

var myVue = new Vue({
    el: "#DIV_VUE",
    data: data_vue
});

现象：

（1）一般情况：修改数据源对象字段：

data_vue.a=123;

结果：div显示从1变成了123

（2）特殊情况：修改数据源对象“引用”：

var data_new={a:"88",b:"99"};
data_vue=data_new;

结果：div显示对象未发生改变！！！

思考：修改了【原】数据源对象引用，但DIV绑定仍指向【原】数据源对象的字段对象。

这句话很拗口，熟悉C指针也就明白了JAVA或者C#等语言中的对象赋值，什么是引用赋值，什么是传值赋值。什么是深拷贝，什么是浅拷贝。

这里不再细说，我已说出了关键词，百度很强大，您可以一个个搜索，知道了以后，您也可以像那些大佬面试官们一样装逼了。

（3）深拷贝

$.extend(true,data_vue,data_new);

结果：div显示对象发生改变！！！

原因：很简单，深拷贝！被绑定字段对象发生了改变，触发了VUE的自动更新。

（4）不想用深拷贝？

myVue = new Vue({
    el: "#DIV_VUE",
    data: data_new
});

结果：div显示对象发生改变！！！

原因：很好理解，竟然都重新新建VUE对象了，重新绑定了，那么VUE自然会帮您更新数据。

那么原来的data_vue需要delete掉吗？C或C++里是需要释放的，但JAVA或者JAVASCRIPT等语言环境具有自动回收机制，会回收掉引用计数为0的对象，因此，你无需担心原来new的js对象会消耗内存。

懂得上面原理后，就可以设计修改最少的前段页面脚本，AJAX从后台获取JSON数据，并将json对象绑定给新的VUE对象，VUE对象自动更新到html页面，前台无需做任何赋值操作。