跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • Vue 响应式属性问题
未分類
10 2 月 2021

Vue 响应式属性问题

Vue 响应式属性问题

資深大佬 : bbsfoo 2

<!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.

请问各位大神,我的理解哪里不对?

大佬有話說 (11)

  • 資深大佬 : yeqizhang

    ???
    waybill 不是吗?

  • 資深大佬 : des

    this.waybill = response.data.waybill;

    所以 waybill 不是吗?

  • 主 資深大佬 : bbsfoo

    @yeqizhang waybill 是,但 waybill.qwert 属性不是,qwert 是后加上去的

  • 主 資深大佬 : bbsfoo

    @des qwert 不是

  • 資深大佬 : yeqizhang

    @bbsfoo waybill 是就行了,对象引用呀。不然 vue 的 data 难道只能单个值来显示?

  • 資深大佬 : des

    @bbsfoo 我说的很明白了
    你要想不通可以试试把 this.waybill.qwert = “aa1”;再包装一层 settimeout,你要还搞不懂我就没法帮你了

  • 主 資深大佬 : bbsfoo

    @des 将 Ajax 请求那一块都注释掉,将 //this.waybill.qwert = “aa2”; 反注释,则 aa2 不显示,为什么?

  • 資深大佬 : cxe2v

    我猜测是这样的

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

    没有 ajax 请求直接赋值的时候,赋值语句 //this.waybill.qwert = “aa2”; 不会更改 waybill 变量存储的内存地址,所以不会触发更新(这部分在 vue 官网说得很明白了,需要使用$set 方法去添加对象的新属性)

  • 資深大佬 : g1f9

    个人观点:更新视图是异步的,会推入到队列中等待执行。this.waybill 触发了更新,更新逻辑推入到队列中,this.waybill.qwert 设置值,因此在更新视图的时候可以访问到 qwert 。但是这个属性依然不是响应式的,单独对它进行赋值无法触发视图更新。

  • 資深大佬 : wish8023

    看这个实例: http://js.jirengu.com/yoxef

  • 資深大佬 : wish8023

    @wish8023 http://js.jirengu.com/yoxef/edit?html,js,output

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具