Question

我刚刚开始摆弄VueJs，我尝试了一个简单的例子，其中数组有值并在模板中使用它，它工作得很好

<body>
    <div id="app">
        {{operations.join(', ')}}
    </div>
</body>
<a href=""></a>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Understanding Hooks',
            operations: ['One', 'Two'],
        }
    })
</script>

但是，当我尝试动态填充操作（数组）时，页面/浏览器变得无响应（以下是代码）。任何输入都会有所帮助。

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Undstanding Hooks',
            operations: ['One', 'Two'],
        },
        created: function() {
            console.log('=> ', this.operations)
            this.operations.push('CREATED : ');
        },
        mounted: function() {
            this.operations.push('MOUNTED : ');
        },
        updated: function() {
            this.operations.push('UPDATED : ');
        },
        destroyed: function() {
            this.operations.push('DESTROYED : ');
        },
    })
</script>

Answer 1

<强>更新

this.operations.push('UPDATED : ');会使组件updated挂钩运行无限。请尝试删除它。

有一个关于不可变和被动的最佳实践。 this.operations的引用未更改。

你应该使用

this.operations = [...this.operations, 'CREATED : ']

而不是

this.operations.push('CREATED : ');

或

this.operations = this.operations.concat(['CREATED :'])

模板中的Vue.js动态数组无法正常工作

1 个答案: