数据（）与创建（）中添加数据之间的Vue差异

Question

以下是否有区别？我看过这两个例子，我不确定为什么你会选择一个而不是另一个。

Vue.component('test', {

        data() {
           return { myDataA: 10 };
        }

        //vs

        created() {
           this.myDataB = 10;
        }
    }

Answer 1

在组件中，您可以在三个位置定义数据：

1. 数据属性
2. 计算属性
3. 道具

created属性是Vue中的生命周期钩子。这意味着，Vue将在创建组件时运行此功能。您可以使用Vue中的其他生命周期挂钩，例如mounted或beforeMount或beforeCreate等。

现在考虑到这一点，让我们回答你的问题。

当您在myDataA属性中定义data时，Vue会自动为此数据属性创建一些“观察者”，因此，只要您将新值设置为myDataA，使用它，将再次调用。但是当您直接在Vue实例（this）上定义属性时，您将失去这个“观察者”功能。 （顺便说一句，这只是一些吸气者和制定者！）

正如我所说，根据您的需要，我提到的最好的方法和正确的方法来定义数据属性是在我提到的三个地方中的任何一个。 （因为他们每个人都有不同的用例）。

Answer 2

在created() this上设置的变量不会被动。为了使它们具有反应性，您必须在data()返回的对象中定义它们。

示例（注意文本在输出中的变化方式）： https://jsfiddle.net/oyf4quyL/