Vue 3.2 中的 Setup 语法糖：与 Vue 2.0 Script 的对比

2023-09-25 14:56:32

Vue 3.2 Setup 语法糖：简化组件初始化

在 Vue.js 的演进之旅中，3.2 版本引入了一项革命性的功能：Setup 语法糖。这一创新显著改变了组件初始化和数据暴露的方式，为开发人员带来了诸多好处。

数据暴露

在 Vue 2.0 中，数据是通过 return 语句显式暴露给模板的。这种方法虽简单，却带来了样板代码的冗余。Vue 3.2 的 Setup 语法糖通过将数据声明直接移至 Setup 函数中来简化了这一过程。只需将变量声明为响应式 ref 对象，即可自动暴露给模板。

组件注册

Vue 2.0 要求通过 Vue.component() 方法手动注册组件。而在 Vue 3.2 中，组件不再需要显式注册。Setup 函数中的组件定义会自动注册，省去了额外的配置步骤，使代码更加简洁。

属性和方法

属性和方法的处理方式也发生了变化。在 Vue 2.0 中，它们需要通过 return 语句返回。在 Vue 3.2 中，属性和方法可以直接声明在 Setup 函数中。这不仅减少了样板代码，还增强了代码的可读性。

优点

Vue 3.2 Setup 语法糖带来的优点不胜枚举：

简化代码： Setup 函数将组件初始化逻辑集中在一处，消除冗余代码。
更少样板代码： 无需 return 语句和显式组件注册，代码更加简洁。
更清晰： Setup 函数明确表示组件初始化和状态管理，提高了代码可读性。
更强大： Setup 函数支持响应性和状态管理，为组件提供了更强大的工具。

代码示例

以下是一个 Vue 2.0 组件的示例，它使用 return 语句暴露数据和注册组件：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  created() {
    Vue.component('my-component', this)
  }
}

将其转换为 Vue 3.2 Setup 语法糖，如下所示：

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
})