如何避免 props 和 data 中的数据重复？答案

【问题标题】：How to avoid data duplication in props and data?如何避免 props 和 data 中的数据重复？
【发布时间】：2019-07-09 05:23:09
【问题描述】：

我是 Vue 的新手，但我的背景是使用 Google Polymer 2 大约一年。我想要实现的是构建一个具有自己可变内部状态的自包含组件，并在页面首次从服务器发送到浏览器时通过 HTML 传递初始状态（即不是单页应用程序）。几天来我一直在搞砸道具和数据，共识似乎是：使用道具传入初始值，然后将其复制到数据字段，然后改变数据字段。

但这会造成价值的重复！如果我有一个“标题”值，那么如果我想在组件中对标题进行自包含突变，我就需要该值的道具和数据。（由于其他原因，例如必须首先处理输入的值，我不能将其绑定到输入框。）当我确实改变标题数据字段时，现在已过时的标题道具仍然像代码气味一样徘徊。

有没有办法避免这种信息重复？还是我们在使用 Vue 时必须忍受的东西？还是我看 Vue 组件都错了？？

附：我已经尝试过使用.sync、$emit 等的各种尝试，它们都非常适合改变父组件的数据字段。但我想要的是一个可以监听内部状态变化的单个组件，做一些基于 JS 的工作，然后更新其状态的单个副本，而不会出现上述重复问题。

编辑： 根据要求，这里是一些有效代码的简单示例（我正在使用自定义元素扩展，但这似乎不会影响核心问题）。所以我的问题是：如何对title 和data_title 进行重复数据删除？

<html xmlns:v-bind="http://www.w3.org/1999/xhtml"  lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./vue-custom-element.js"></script>
</head>
<body>

<my-element title="an old title"></my-element>

<script type="application/javascript">
    Vue.customElement('my-element', {
        props: [
            'title'
        ],
        data() {
            return {
                data_title: this.title
            };
        },
        template: `<p @click="handleClick('a new title')">My element's title: <b>{{data_title}}</b></p>`,
        methods: {
            handleClick: function(newTitle) {
                // realistically we would do some work here before setting the new value
                this.data_title = newTitle;
            }
        }
    });
</script>
</body>
</html>

【问题讨论】：

您能向我们展示其中的一些代码吗？或者创建一个小提琴/钢笔，以便我们可以修补它们。
你可以直接在你的方法中改变一个 prop 属性，一个缺点是 prop 的 ref 能力。如果你直接改变一个 prop，任何来自 parent 的更改都会编译到引用它的组件中。顺便说一句，您不能通过 prop 将数据传回给父级。您必须为此使用 emit。
但是如果你直接改变一个道具，你会得到这个警告：避免直接改变一个道具，因为只要父组件重新渲染，这个值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“title”（在组件中找到）

标签： vue.js vuejs2 vue-component

【解决方案1】：

如果您需要组件可以修改的公共属性（父级可以将值传递给的属性），则无法避免重复。对于 Vue 组件中的可变 props 来说，这是必要的邪恶。

【讨论】：

我明白了。不过，出于所有通常的原因，我讨厌数据重复。谢谢。