推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 1774 天前的主题，其中的信息可能已经有所发展或是发生改变。
<!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