V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
bbsfoo
V2EX  ›  JavaScript

Vue 响应式属性问题

  •  
  •   bbsfoo · 2021-02-11 00:12:31 +08:00 · 2203 次点击
    这是一个创建于 1385 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <!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 条回复    2021-02-19 15:23:18 +08:00
    yeqizhang
        1
    yeqizhang  
       2021-02-11 00:25:41 +08:00 via Android
    ???
    waybill 不是吗?
    des
        2
    des  
       2021-02-11 00:31:56 +08:00 via iPhone
    this.waybill = response.data.waybill;

    所以 waybill 不是吗?
    bbsfoo
        3
    bbsfoo  
    OP
       2021-02-11 00:32:05 +08:00
    @yeqizhang waybill 是,但 waybill.qwert 属性不是,qwert 是后加上去的
    bbsfoo
        4
    bbsfoo  
    OP
       2021-02-11 00:33:44 +08:00
    @des qwert 不是
    yeqizhang
        5
    yeqizhang  
       2021-02-11 00:34:57 +08:00 via Android
    @bbsfoo waybill 是就行了,对象引用呀。不然 vue 的 data 难道只能单个值来显示?
    des
        6
    des  
       2021-02-11 00:36:34 +08:00 via iPhone
    @bbsfoo 我说的很明白了
    你要想不通可以试试把 this.waybill.qwert = "aa1";再包装一层 settimeout,你要还搞不懂我就没法帮你了
    bbsfoo
        7
    bbsfoo  
    OP
       2021-02-11 01:03:03 +08:00
    @des 将 Ajax 请求那一块都注释掉,将 //this.waybill.qwert = "aa2"; 反注释,则 aa2 不显示,为什么?
    cxe2v
        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 方法去添加对象的新属性)
    g1f9
        9
    g1f9  
       2021-02-11 11:06:43 +08:00
    个人观点:更新视图是异步的,会推入到队列中等待执行。this.waybill 触发了更新,更新逻辑推入到队列中,this.waybill.qwert 设置值,因此在更新视图的时候可以访问到 qwert 。但是这个属性依然不是响应式的,单独对它进行赋值无法触发视图更新。
    wish8023
        10
    wish8023  
       2021-02-11 13:31:46 +08:00
    看这个实例: http://js.jirengu.com/yoxef
    wish8023
        11
    wish8023  
       2021-02-11 13:33:03 +08:00
    DanteYoung
        12
    DanteYoung  
       2021-02-19 15:23:18 +08:00
    @bbsfoo this.waybill.qwert = "aa2"不是在异步请求外面吗,aa1 确实是最终结果啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:15 · PVG 05:15 · LAX 13:15 · JFK 16:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.