Vue 响应式属性问题

2021-02-11 00:12:31 +08:00
 bbsfoo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>货单详情</title>
</head>
<body>
<div id="app">
<div id="main">

{{waybill.qwert}}

</div>
</div>
</body>

<script src="~/js/vue@2.6.12/dist/vue.js"></script>
<script src="~/js/axios@0.21.1/dist/axios.js"></script>
<script>


var app = new Vue({
el: '#app',
data: function () {
return {
waybill: {

},

}
},
methods: {

doQuery:function () {


axios.post("@Url.Content("~/Waybill/GetWaybillInfo")", { waybill_id: 26 })
.then(response => {

this.waybill = response.data.waybill;
this.waybill.qwert = "aa1";

});


//this.waybill.qwert = "aa2";

},

},
mounted() {

this.doQuery();

}
})
</script>
</html>

===================================================================
按照我的理解 qwert 属性不是响应性属性，我在 chrome 调试看过也是没有 getter 和 setter 的，所以逻辑上说，qwert 不应该在页面上有显示，但事实却相反，显示 aa1.

请问各位大神，我的理解哪里不对？
1969 次点击
所在节点    JavaScript
12 条回复
yeqizhang
2021-02-11 00:25:41 +08:00
？？？
waybill 不是吗？
des
2021-02-11 00:31:56 +08:00
this.waybill = response.data.waybill;

所以 waybill 不是吗？
bbsfoo
2021-02-11 00:32:05 +08:00
@yeqizhang waybill 是，但 waybill.qwert 属性不是，qwert 是后加上去的
bbsfoo
2021-02-11 00:33:44 +08:00
@des qwert 不是
yeqizhang
2021-02-11 00:34:57 +08:00
@bbsfoo waybill 是就行了，对象引用呀。不然 vue 的 data 难道只能单个值来显示？
des
2021-02-11 00:36:34 +08:00
@bbsfoo 我说的很明白了
你要想不通可以试试把 this.waybill.qwert = "aa1";再包装一层 settimeout，你要还搞不懂我就没法帮你了
bbsfoo
2021-02-11 01:03:03 +08:00
@des 将 Ajax 请求那一块都注释掉，将 //this.waybill.qwert = "aa2"; 反注释，则 aa2 不显示，为什么？
cxe2v
2021-02-11 01:35:21 +08:00
我猜测是这样的

ajax 请求的时候，你赋值的语句 this.waybill = response.data.waybill; 会触发 waybill 的更新，但是 vue 对于数据更新到 dom 不是立即执行，而是会累积一定量再执行 patch 方法去更新 dom，你的两条赋值语句在同一个 patch 里面，所以触发了更新，

没有 ajax 请求直接赋值的时候，赋值语句 //this.waybill.qwert = "aa2"; 不会更改 waybill 变量存储的内存地址，所以不会触发更新（这部分在 vue 官网说得很明白了，需要使用$set 方法去添加对象的新属性）
g1f9
2021-02-11 11:06:43 +08:00
个人观点：更新视图是异步的，会推入到队列中等待执行。this.waybill 触发了更新，更新逻辑推入到队列中，this.waybill.qwert 设置值，因此在更新视图的时候可以访问到 qwert 。但是这个属性依然不是响应式的，单独对它进行赋值无法触发视图更新。
wish8023
2021-02-11 13:31:46 +08:00
看这个实例： http://js.jirengu.com/yoxef
wish8023
2021-02-11 13:33:03 +08:00
@wish8023 http://js.jirengu.com/yoxef/edit?html,js,output
DanteYoung
2021-02-19 15:23:18 +08:00
@bbsfoo this.waybill.qwert = "aa2"不是在异步请求外面吗，aa1 确实是最终结果啊

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/752886

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX