Question

在我的组件中，我有一个prop X，它在创建的钩子上分配给数据Y，因此我可以和平地对Y进行变异。 都是数组。

同时，我在X上放了一块手表，以便在道具更改时更新Y。

尽管如此，每次我使用诸如Y.sort（）之类的方法时，都会触发我的watch语句

看起来像这样（非常简化）：

props: {
    X: Array
},
data: function() {
    return {
        Y: []
    }
},
methods: {
    someFunc() {
        this.Y.sort() // Triggers X's watch
    }
},
watch: {
    X (newVal) {
        this.Y = newVal;
    }
},
created: function() {
    this.Y = this.X;
}

为什么？

我已经从各个角度查看了我的应用。模板中也没有其他方法可以从父级更新道具。

Answer 1

通过this.Y = this.X;，您引用的是X的{{1}}，任何影响Y的更改也会影响Y，因此请避免使用这种情况以下解决方案之一：

或

 this.Y = this.X.slice();

JS示例：

Object.assign(this.Y,this.X)

Answer 2

所有数组函数都不会改变原始数组。

除了sort;）

由于排序会更改项目在数组中的位置，因此会触发观察程序。

道具手表触发无变化

2 个答案: