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
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页面,前台无需做任何赋值操作。
更多推荐
所有评论(0)