简单聊聊vue3.0 sfc中setup的变化

下面我就为大家详细讲解一下“简单聊聊vue3.0 sfc中setup的变化”。

一、什么是.vue文件

在介绍.vue文件的地方，就不得不介绍一下 Vue.js 了。Vue.js 是一款非常流行的前端框架，主要用于构建用户界面以及单页应用程序（SPA）。而.vue文件则是 Vue.js 在开发中所使用的组件文件格式，它可以包括 HTML、CSS 和 JavaScript 代码，是一个全新的组件化开发方式。

一个简单的.vue文件包括三个部分：template、script 和 style。其中 template 部分是模板语法，用于渲染内容；style 部分是样式，用于控制组件的外观；script 部分则是 JavaScript 代码，用于控制组件的行为。在 Vue.js 2.x 版本中，script 部分主要包括 data、methods、computed、watch 等配置项，而在 3.0 版本中，这些配置项被替换成了 setup 配置项。

二、setup 配置项

在 Vue.js 3.0 中，setup 配置项被引入作为一个新特性。它可以用来替代 Vue.js 2.x 版本中的 data、methods、computed 和 watch 等配置项。setup 配置项是一个函数，它接收两个参数：props 和 context。

接下来我们以App.vue文件为例，来详细了解一下在.vue文件中使用 setup 的注意事项：

首先，我们需要引入 defineComponent 函数，该函数是 Vue.js 3.0 中定义组件的函数。

<template>
  <div>{{ msg }}</div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  setup(props, context) {
    const msg = 'Hello, Vue 3.0!'
    return { msg }
  }
})
</script>

我们可以看到，在上述代码中，我们使用了 defineComponent 函数来定义组件。其中包括 setup 配置项，它的作用是初始化组件中的数据和状态。在 setup 函数中，我们可以使用 reactive、ref、computed 等内置函数来定义组件中的状态。比如，我们可以使用 reactive 函数来定义一个复杂的状态对象，也可以使用 ref 来定义一个简单的状态值。

<template>
  <div>{{ user.name }}的年龄是{{ age }}</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  setup(props, context) {
    const user = reactive<User>({ name: 'Tom', age: 20 })
    const age = ref<number>(user.age)
    return { user, age }
  }
})
</script>

然后，我们可以将定义的状态数据通过 return 语句返回到模板中进行渲染。

三、setup 的优点

更好的逻辑复用：使用 setup 函数可以将组件的逻辑从模板中抽离出来，便于进行逻辑复用。
更好的类型推断：在 Vue.js 3.0 中，使用 TypeScript 开发会更加友好。因为 setup 函数可以使 TypeScript 更好地推断 props 和组件的类型。
更好的性能优化：Vue.js 3.0 中使用了 Proxy 对象来实现响应式数据，使得在访问数据时能够进行更加精准的追踪和过滤，从而提高了性能。