Question

我是Vue.js的新手，所以我似乎只是在这里遗漏了一些东西，但我无法理解为什么这里有三种不同方法中的一种在值变化时不会更新。（这段代码只是我学习Vue.js.）建议最佳实践的奖励积分。

这是HTML：

<div id="app">
    <p>
        <span v-for="(count, state) in stateChanges">{{state}}: {{count}} </span>
    </p>
    <div>
        <state-changes
            :states='["created", "mounted", "updated"]'
            :counters='stateChanges'
        >
        </state-changes>
    </div>
    <div>
        <state-bar
            :counters='stateChanges'
        >
        </state-bar>

    </div>
</div>

以下是JavaScript：

<script>
Vue.component('state-changes', {
    props: ['states', 'counters'],
    template: '\
    <p>\
        <span v-for="state in states">{{state}}: {{counters[state]}} </span>\
    </p>\
    ',
});

Vue.component('state-bar', {
    props: ['counters'],
    template: '\
    <p>\
        <span v-for="(count, state) in counters">{{state}}: {{counters[state]}} </span>\
    </p>\
    ',
})

var vapp = new Vue({
    el: '#app',
    data: {
        stateChanges: {
            created: 0,
            mounted: 0,
            updated: 0,
            destroyed: 0
        },
    },
    created: function() {this.stateChanges.created++},
    mounted: function() {this.stateChanges.mounted++},
    updated: function() {this.stateChanges.updated++},
    destroyed: function() {this.stateChanges.destroyed++},
    }
</script>

我尝试的三种方法是：

<span v-for="(count, state) in stateChanges">{{state}}: {{count}} </span>输出：

创建：1已安装：1已更新：6已销毁：0
<state-changes>组件输出：

创建：1已安装：1已更新：6
<state-bar>组件输出

创建：1已挂载：1已更新：0已销毁：0

我希望这三种方法都能正常工作，但最后一种方法不会更新值。

编辑：我认为这里有一些明显的东西，所以我在代码中排除了一些我不应该拥有的位，特别是导致各种状态更新的操作。

以下是jsfiddle完整的工作示例。要生成更新，请单击切换计数（在原始代码中切换内容）。

我有什么不对？

vuejs如何确定要更新的组件道具？

0 个答案: