如何在 Vuejs 中使用 Typescript 创建计算属性答案

【问题标题】：How to create computed properties with Typescript in Vuejs如何在 Vuejs 中使用 Typescript 创建计算属性
【发布时间】：2019-11-07 03:27:57
【问题描述】：

我在浏览器中不断收到此错误Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dataElements"

我的组件中有@Prop() private dataElements: any[];。这个 prop 是由 parent 和 child 改变的，当它改变时它可能需要一个 watcher 来做一些操作。

如何从中创建计算属性？

【问题讨论】：

Avoid mutating a prop directly的可能重复
@Rich 有点是，有点不是。我使用 Typescript，所以我不能使用那里提供的解决方案。我需要 Typescript 中的解决方案，而不是 Javascript 中的解决方案。我会自己进行转换，但我不太了解 Vue。

标签： typescript vue.js

【解决方案1】：

对于 Vue，您永远不必更改 prop（已通过父组件传递给子组件），因为无论您在子组件中做什么 - 父组件总是可以更改和覆盖 @987654322 @s 值（如错误消息中所述）。

要改变传入的prop，您必须在子组件中定义一个本地使用的。在您的情况下，这可以通过 computed 属性完成，该属性仅根据您的 prop 返回一个新创建的数组。

computed: {
    elements() {
        return [...this.dataElements]
    }
}

阵列上的任何更改都应始终通过发出事件报告给父级，该事件最后将处理适当的突变并将prop 再次传递给子级。

【讨论】：

我实际上并没有修改道具。我在构造函数中只有一个初始化器。除此之外，我只是阅读了道具。这个错误太烦人了。我要么得到它没有被初始化的错误，要么得到我正在改变它的错误。没有令编译器满意。
您介意分享您的确切代码行吗？在构造函数中初始化某些东西时 - 你改变了道具吗？由于 Vues 反应系统，即使那样也不应该这样做。
constructor() { super(); this.dataElements = []; }