Vue 3 之语法糖，箭头函数、函数声明

作者：System 时间：2024年08月09日分类：所有,vue.js 字数：686

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

在Vue 3中，可以使用多种语法糖来简化代码，提高开发效率。这些语法糖包括箭头函数、函数声明等。




// 传统函数定义
methods: {
  increment() {
    this.count++
  }
}
 
// 箭头函数
methods: {
  increment: () => this.count++
}




// 传统函数声明
methods: {
  greet() {
    return 'Hello, Vue 3!'
  }
}
 
// setup函数内声明
setup() {
  function greet() {
    return 'Hello, Vue 3!'
  }
}

请注意，在Vue 3的<script setup>语境中，可以直接使用函数，不需要先声明。




<script setup>
import { ref } from 'vue'
 
const count = ref(0)
 
function increment() {
  count.value++
}
</script>

以上代码展示了如何在Vue 3中使用语法糖来简化代码。