推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 1407 天前的主题，其中的信息可能已经有所发展或是发生改变。
<!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/[email protected]/dist/vue.js"></script>
<script src="~/js/[email protected]/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.
请问各位大神，我的理解哪里不对？
<html>
<head>
<meta charset="utf-8" />
<title>货单详情</title>
</head>
<body>
<div id="app">
<div id="main">
{{waybill.qwert}}
</div>
</div>
</body>
<script src="~/js/[email protected]/dist/vue.js"></script>
<script src="~/js/[email protected]/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.
请问各位大神，我的理解哪里不对？
 |
1
yeqizhang 2021-02-11 00:25:41 +08:00 via Android
？？？
waybill 不是吗？ |
 |
2
des 2021-02-11 00:31:56 +08:00 via iPhone
this.waybill = response.data.waybill;
所以 waybill 不是吗？ |
|
5
yeqizhang 2021-02-11 00:34:57 +08:00 via Android
@bbsfoo waybill 是就行了，对象引用呀。不然 vue 的 data 难道只能单个值来显示？
|
|
6
des 2021-02-11 00:36:34 +08:00 via iPhone
@bbsfoo 我说的很明白了
你要想不通可以试试把 this.waybill.qwert = "aa1";再包装一层 settimeout，你要还搞不懂我就没法帮你了 |
 |
7
bbsfoo OP @des 将 Ajax 请求那一块都注释掉，将 //this.waybill.qwert = "aa2"; 反注释，则 aa2 不显示，为什么？
|
 |
8
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 方法去添加对象的新属性） |
 |
9
g1f9 2021-02-11 11:06:43 +08:00
个人观点：更新视图是异步的，会推入到队列中等待执行。this.waybill 触发了更新，更新逻辑推入到队列中，this.waybill.qwert 设置值，因此在更新视图的时候可以访问到 qwert 。但是这个属性依然不是响应式的，单独对它进行赋值无法触发视图更新。
|
 |
10
wish8023 2021-02-11 13:31:46 +08:00
看这个实例： http://js.jirengu.com/yoxef
|
|
11
wish8023 2021-02-11 13:33:03 +08:00
|
 |
12
DanteYoung 2021-02-19 15:23:18 +08:00
@bbsfoo this.waybill.qwert = "aa2"不是在异步请求外面吗，aa1 确实是最终结果啊
|
Select Language