如何使用道具值初始化数据属性

Question

在 VueJS 中仍然有点年轻，但我喜欢它的每一点。但现在，固定在某个地方。
我想使用通过props 传递的值初始化data() 中的一些值。这样我就可以在以后改变它们，因为不建议在组件内改变 props。事实上official docs 推荐使用prop 值初始化这个属性，如下所示：

{
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

我有类似下面的东西：

<template>
<div class="well">
    <!-- Use Prop value directly on the template: works (but of no help in initializing data) -->
    Department: {{department.name}}
    <!-- Use prop value but gotten via computed property: Works inside the template but not in the initialization -->
    Department: {{fetchDepartment.name}}
    <!-- Use the array I initialized with the prop value: Does not work -->
    Department: {{this_department.name}}
</div>
</template>

<script>
    export default {
        name: 'test',
        props: ['department'],
        data() {
            return {
                this_department: this.department
                // below does not work either
                //this_department: this.fetchDepartment
            }
        },
        created() {
            // shows empty array
            console.log(this.department)
        },
        mounted() {
            // shows empty array
            console.log(this.department)
        },
        computed: {
            fetchDepartment() {
                return this.department
            }
        }
    }
</script>

从上面的注释部分可以看出，初始化不成功。 this.department 的值也不会出现在 created() 或 mounted() 挂钩中。请注意，我可以看到它是使用 Chrome Vue Devtools 定义的。所以我的问题是，我应该如何使用 props 值初始化 data() 属性，或者哪种是解决这个问题的最佳方法？

Answer 1

我知道我的答案来晚了，但它对我有帮助，希望其他人来这里。当 props 的数据异步时：

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

这样，您可以在 props 可用时渲染组件，从而更安全地按照指南推荐的方法使用 props 初始化数据值：

props: ['initialCounter'],
data: function () {
    return {
       counter: this.initialCounter
    }
}

编码愉快！

Answer 2

计算属性是提供可变版本道具的最简单方法，但您可能不希望在道具更新时丢失数据。您可以使用显式手表。

观察者

虽然计算属性在大多数情况下更合适，但有 是需要自定义观察者的时候。这就是为什么 Vue 提供 通过 watch 选项对数据更改做出反应的更通用的方式。 当您想要执行异步或昂贵时，这是最有用的 响应数据变化的操作。

这在你想执行异步或昂贵的时候最有用 响应数据变化的操作。

Answer 3

您可以修改道具。使用'.sync' 修饰符。我经常使用它，因为它既方便又直观。这需要发出一个事件来更新父级的值。我不确定它如何导致维护问题的警告。

如果我想修改一个值而不更新父级，我使用的另一种方法是使用 Lodash 克隆。例如（假设它在挂载时可用）

mounted(){
    this_department = _.clone(this.department)
}

如果你一直想改变 prop 并让它随父元素一起改变，那么使用计算属性。但是，在大多数情况下，您将希望依赖组件中该数据的状态并使用其他函数对其进行更改，因此计算属性将不是您所需要的。