Vue 响应式属性问题 - V2EX
bbsfoo

Vue 响应式属性问题

  •  
  •   bbsfoo Feb 11, 2021 3119 views
    This topic created in 1922 days ago, the information mentioned may be changed or developed.
    <!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.

    请问各位大神,我的理解哪里不对?
    12 replies    2021-02-19 15:23:18 +08:00
    yungo8
        1
    yungo8  
       Feb 11, 2021 via Android
    ???
    waybill 不是吗?
    des
        2
    des  
       Feb 11, 2021 via iPhone
    this.waybill = response.data.waybill;

    所以 waybill 不是吗?
    bbsfoo
        3
    bbsfoo  
    OP
       Feb 11, 2021
    @yeqizhang waybill 是,但 waybill.qwert 属性不是,qwert 是后加上去的
    bbsfoo
        4
    bbsfoo  
    OP
       Feb 11, 2021
    @des qwert 不是
    yungo8
        5
    yungo8  
       Feb 11, 2021 via Android
    @bbsfoo waybill 是就行了,对象引用呀。不然 vue 的 data 难道只能单个值来显示?
    des
        6
    des  
       Feb 11, 2021 via iPhone
    @bbsfoo 我说的很明白了
    你要想不通可以试试把 this.waybill.qwert = "aa1";再包装一层 settimeout,你要还搞不懂我就没法帮你了
    bbsfoo
        7
    bbsfoo  
    OP
       Feb 11, 2021
    @des 将 Ajax 请求那一块都注释掉,将 //this.waybill.qwert = "aa2"; 反注释,则 aa2 不显示,为什么?
    cxe2v
        8
    cxe2v  
       Feb 11, 2021
    我猜测是这样的

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

    没有 ajax 请求直接赋值的时候,赋值语句 //this.waybill.qwert = "aa2"; 不会更改 waybill 变量存储的内存地址,所以不会触发更新(这部分在 vue 官网说得很明白了,需要使用$set 方法去添加对象的新属性)
    g1f9
        9
    g1f9  
       Feb 11, 2021
    个人观点:更新视图是异步的,会推入到队列中等待执行。this.waybill 触发了更新,更新逻辑推入到队列中,this.waybill.qwert 设置值,因此在更新视图的时候可以访问到 qwert 。但是这个属性依然不是响应式的,单独对它进行赋值无法触发视图更新。
    wish8023
        10
    wish8023  
       Feb 11, 2021
    看这个实例: http://js.jirengu.com/yoxef
    DanteYoung
        12
    DanteYoung  
       Feb 19, 2021
    @bbsfoo this.waybill.qwert = "aa2"不是在异步请求外面吗,aa1 确实是最终结果啊
    About     Help     Advertise     Blog     API     FAQ     Solana     935 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 50ms UTC 22:38 PVG 06:38 LAX 15:38 JFK 18:38
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86