在 vue3 中什么时候使用 data() 什么时候使用 setup()？

Question

我还是 Vue 的新手，当我使用 vue 2 时，我总是使用这个：

data() {
        return {
           ....
        }
}
methods: {
  ....
}

但现在我看到很多文档

setup() {
 const .....
 return { ... }

}

这些本质上是一样的吗？ data() 和 setup() 什么时候用例？

Answer 1

在Vue.js2你一直在使用so-calledOptions API。 Vue.js 3自带的Composition API可以用来代替Options API.

这两种方式本质上是一样的，你可以选择任何一种。但是，您应该了解其中的区别（例如，this 不引用 setup() 方法中的组件，您不应该使用它）。

由于各种原因，Composition API 方法更好in the official FAQ。简而言之，它提供：

您仍然可以使用 Options API，它不会被弃用并且非常适合小型项目。

我强烈建议阅读这篇文章：Why I Love Vue 3's Composition API。

when to use data() and when to use setup() in vue3?