javascript - 在数据或设置函数中声明变量有什么区别？

Question

我是 Vue.js 的新手，据我所知，这两个函数都可以用来定义/初始化文件中使用的变量。但从我读到的内容来看，我不清楚这些差异是什么以及何时应该使用哪个来声明/初始化变量。

到目前为止，我只意识到数据函数中声明的变量随后被包装在代理对象中，这在我尝试将对象保存到数据库中时会引起麻烦。现在我在考虑是否应该继续使用数据函数并在需要保存时从代理创建一个普通对象，或者是否应该只使用设置函数。

如果不清楚我在说什么:

示例A:

data() {
  return {
    person: {
      age: 5,
      name: "Peter"
    }
  }
}

示例 B:

setup() {
  return {
    person: {
      age: 5,
      name: "Peter"
    }
  }
}

Answer 1

区别在于 data() 是 Vue.js 选项 API 中使用的语法(Vue.js 2 中的典型方法，在 Vue.js 3 中也有效)，而 setup() sintaxis 是组合 API(在 Vue.js 3 中引入)。这种组合 API 使 Vue.js 组件的 JavaScript block 更加统一和可重用(以及其他优点)。

https://fjolt.com/article/vue-composition-api-vs-options-api#:~:text=What%20is%20the%20difference%20between,like%20in%20the%20Options%20API .