探索 Vue3.2 语法糖

2023-09-23 02:51:40

在 Vue.js 3.2 版本中，我们引入了一种名为 <script setup> 语法糖的新特性，它为我们提供了更加简洁、直观的方式来编写组件逻辑。本指南将带您深入了解 <script setup> 语法糖，并通过一系列知识点合集帮助您掌握这一强大的特性。

组合API的简化：无需再返回（return）

传统上，在 Vue.js 中使用组合API时，我们需要通过 return 语句显式地返回组件逻辑。<script setup> 语法糖则简化了这一过程，它让我们能够直接在 <script setup> 块中定义组件逻辑，而无需 return 语句。

// 传统组合API写法
export default {
  setup() {
    return {
      count: 0
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  // 变量定义，无需返回（return）
  const count = 0
</script>

代理模式的优势：直接访问this

在 <script setup> 语法糖中，组件实例的 this 对象被自动代理到当前作用域。这意味着您可以直接访问组件实例的属性和方法，而无需使用 this。

// 传统组合API写法
export default {
  setup() {
    const count = 0
    return {
      increment() {
        this.count++
      }
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  const count = 0
  // 直接访问this
  const increment = () => {
    count++
  }
</script>

摆脱.value后缀：更优雅的模板写法

<script setup> 语法糖还允许我们在模板中更优雅地使用组件逻辑。在传统组合API中，我们通常需要在组件逻辑的属性值后添加 .value 后缀。<script setup> 语法糖则让我们可以直接在模板中使用组件逻辑，而无需 .value 后缀。

// 传统组合API写法
<template>
  <button @click="increment.value()">Increment</button>
</template>

<script>
export default {
  setup() {
    const count = 0
    return {
      increment() {
        this.count++
      }
    }
  }
}
</script>

// 使用<script setup>语法糖
<template>
  <button @click="increment">Increment</button>
</template>

<script setup>
  const count = 0
  // 无需.value后缀
  const increment = () => {
    count++
  }
</script>

摆脱defineExpose()：自动暴露数据

<script setup> 语法糖中，您可以直接通过组件逻辑中的变量和函数来暴露数据，而无需使用 defineExpose() 方法。

// 传统组合API写法
export default {
  setup() {
    const count = 0
    return {
      count,
      increment() {
        this.count++
      }
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  // 自动暴露数据，无需defineExpose()
  const count = 0
  const increment = () => {
    count++
  }
</script>

摆脱props()：直接使用props

<script setup> 语法糖中，您可以直接在组件逻辑中使用 props 对象，而无需使用 props() 方法。

// 传统组合API写法
export default {
  setup(props) {
    return {
      count: props.initialCount
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  // 直接使用props
  const count = props.initialCount
</script>

摆脱emits()：直接使用emit

<script setup> 语法糖中，您可以直接在组件逻辑中使用 emit() 方法来触发事件，而无需使用 emits() 方法。

// 传统组合API写法
export default {
  setup() {
    return {
      increment() {
        this.$emit('increment')
      }
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  // 直接使用emit
  const increment = () => {
    emit('increment')
  }
</script>

摆脱watch()：直接使用watchEffect

<script setup> 语法糖中，您可以直接在组件逻辑中使用 watchEffect() 方法来监听数据变化，而无需使用 watch() 方法。

// 传统组合API写法
export default {
  setup() {
    watch(() => this.count, (newValue, oldValue) => {
      // 响应数据变化
    })
    return {
      count: 0
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  const count = 0
  watchEffect(() => {
    // 响应数据变化
  })
</script>

摆脱provide()和inject()：直接使用defineProps和defineEmits

<script setup> 语法糖中，您可以直接在组件逻辑中使用 defineProps() 和 defineEmits() 方法来定义组件的 props 和 emits，而无需使用 provide() 和 inject() 方法。

// 传统组合API写法
export default {
  setup() {
    const props = defineProps(['initialCount'])
    const emit = defineEmits(['increment'])
    return {
      count: props.initialCount,
      increment() {
        emit('increment')
      }
    }
  }
}

// 使用<script setup>语法糖
<script setup>
  const props = defineProps(['initialCount'])
  const emit = defineEmits(['increment'])
  const count = props.initialCount
  const increment = () => {
    emit('increment')
  }
</script>