vue.js 在数据或设置函数中声明变量有什么区别？

vlju58qv 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(168)

我是Vue.js的新手，在我看来，这两个函数都可以用来定义/初始化文件中使用的变量。但从我所读到的内容来看，我不清楚它们的区别是什么，以及何时应该使用哪一个来声明/初始化变量。
到目前为止，我只意识到在data函数中声明的变量然后被 Package 在代理对象中，这在我试图将对象保存在数据库中时会引起麻烦。现在我在考虑是否应该继续使用data函数，并在需要保存时从代理创建一个普通对象，或者我是否应该只使用setup函数。
如果你不清楚我在说什么
示例A：

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

示例B：

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

vue.js

来源：https://stackoverflow.com/questions/72507930/what-is-the-difference-between-declaring-variables-in-data-or-setup-function

2条答案

按热度按时间

bnlyeluc1#

你可以把例子A想象成：

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

但在示例B中，对象person没有被reactive Package ，因此它不会被监视或reactive。
一个更合适的data -〉setup示例：

import { reactive, toRefs } from 'vue'

setup() {
  const data = reactive({
    person: {
      age: 5,
      name: "Peter"
    }
  })
  return {
    '$data': data,
    ...toRefs(data), // so that `person` can be used in <template />
  }
}

赞(0）回复(0）举报 2023-03-24

polkgigr2#

区别在于data（）是Vue.js的options API中使用的语法（Vue.js 2中的典型方法，在Vue.js 3中也有效），setup（）sintaxis是composition API的一部分（在Vue.js 3中引入）。这个composition API使Vue.js组件的JavaScript块更加统一和可重用（以及其他优点）。
https：//fjolt.com/article/vue-composition-api-vs-options-api#：~：text= What%20is%20the%20difference%20between，like%20in%20the%20Options%20API.

赞(0）回复(0）举报 2023-03-24

我来回答

vue.js 在数据或设置函数中声明变量有什么区别？

2条答案

相关问题

热门标签

最新问答