gpt4 book ai didi

javascript - 为什么 vue 中监视的对象没有更新

转载 作者:行者123 更新时间:2023-12-03 04:12:49 25 4
gpt4 key购买 nike

我知道有很多类似的问题,但这个问题有点不同。我看了一下reactivity in depth我认为我对这个主题有一个公平的理解,但我无法理解的一件事是:

tl;博士

为什么使用 currentValue = Object.assign=({}, currentValue, initValue) 初始化时监视的属性寄存器会发生变化,但使用直接赋值 currentValue = initValue; 则不会发生变化>?

我在 vue 组件的模型上有一个注册对象 scoreRules

mounted钩子(Hook)中,

  1. 我使用重新初始化模型的 scoreRules

this.$data.scoreRules = initScoreRules;

(initScoreRules 作为 prop 传入,但我将其声明为本地为了这个问题的目的,下面的变量)。

  • 观察 scoreRules 的变化,并在对象变化时记录“分数已更改”。
  • 此片段显示了此场景

    new Vue({
    el: '#app',
    data() {
    return {
    scoreRules: {
    type: "number",
    minimum: null,
    maximum: null
    }
    }
    },
    mounted() {
    let initScoreRules = {type: "number"};
    this.$data.scoreRules = initScoreRules;
    this.$watch('scoreRules', ()=>{console.log("score has been changed")}, {deep: true});
    }
    });
    <html>

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
    </head>

    <body>
    <div id="app">
    <span>Minimum score</span>
    <input type="number" name="minimumScore" v-model.number="scoreRules.minimum" />
    </body>

    </html>

    现在,当我在输入中输入某些内容时, watch 不会捕获此更改,并且控制台不会记录任何内容。

    如果我现在重新初始化 scoreRules 使用this.$data.scoreRules = Object.assign({}, this.$data.scoreRules, initScoreRules);

    new Vue({
    el: '#app2',
    data() {
    return {
    scoreRules: {
    minimum: null
    }
    }
    },
    mounted() {
    let initScoreRules = {};
    this.$data.scoreRules = Object.assign({}, this.$data.scoreRules, initScoreRules);
    this.$watch('scoreRules', () => {
    console.log("score has been changed")
    }, {
    deep: true
    });
    }
    });
    <html>

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
    </head>

    <body>
    <div id="app2">
    <span>Minimum score</span>
    <input type="number" v-model.number="scoreRules.minimum" />
    </div>
    </body>

    </html>

    更改已注册并将输出记录到控制台。为什么?我怀疑这与 JS 本身的内部结构有关,但我不确定到底是怎么回事。

    最佳答案

    初始对象包含属性minimummaximum。然后,在 mounted 中,执行以下操作:

    let initScoreRules = {type: "number"};
    this.$data.scoreRules = initScoreRules;

    这意味着现在 scoreRules 对象不具有这些属性。

    Vue 只能观察以下属性的更改:

    • data() 中预定义(您已执行此操作,但随后在 mounted 中取消执行)
    • 使用 Vue.set()/this.$set()
    • 设置
    • 存在于分配给响应式(Reactive)属性的对象上。

    最后一点也是为什么第二个示例有效的解释:在这里,本质上你这样做(省略 Object.assign 冗长的内容,因为它会分散注意力):

    this.$data.scoreRules = { minimum: null }; 

    此属性将是 react 性的。

    在这里阅读更多内容:

    https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

    关于javascript - 为什么 vue 中监视的对象没有更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44260178/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com