setup语法糖，梦开始的地方

少年姜太公
658 阅读4分钟

前言

一个多月没写文章了，手有点生，笔者最近也是在广投简历准备面试，接下来立个小小的flag，每天写一到两篇文章。好了言归正传，相信大多数掘友都是从setup开始了解vue3的，下面本文将详细介绍vue3中的setup 语法糖，使用方法以及它与传统Options API的关系，并介绍如何通过“语法糖”简化代码编写。让我们一起走进vue3的奇妙世界。

setup概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API  “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

它的特点如下：

  • setup函数返回的对象中的内容可直接在模板中使用
  • setup中访问this是undefined
  • setup函数会在beforeCreate之前调用。

在Vue 3中，setup是一个新的配置项，其值是一个函数，充当Composition API的“表演舞台”。在这个函数内部，你可以定义数据、方法、计算属性、监视器等组件所需的所有逻辑。重要的是，setup函数返回的对象中的内容可以直接在模板中使用，而且它会在beforeCreate钩子之前被调用，这意味着它是所有生命周期钩子中最先执行的部分。

代码示例

请看以下示例，它充分展示了如何在setup函数中定义数据和方法：

<template>
  <div class="person">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">点击年龄+1</button>
  </div>
</template>

<script lang="ts">
export default{
  name:'Person',
  beforeCreate(){
    console.log('beforeCreate')
  },
  setup(){
    console.log('setup')
    let name = '张三'
    let age = 18
    function changeName(){
      name = '李四'
      console.log(name)
    }
    function changeAge(){
      age += 1
      console.log(age)  
    }
    // 返回一个对象，对象中的属性和方法会被暴露给模板
    return {name,age,changeName,changeAge}
  }
}
</script>
vue3.gif

从这里可以看到，当点击了修改姓名和年龄按钮以后，并不会触发视图更新，因为它们不是响应式的，在控制台上就可以看到它的值其实是发生了改变的。为了确保数据是响应式的，我们应该使用Vue提供的ref或reactive函数，由于和setup无关，故本文暂不深入讨论

返回对象 vs 返回函数

setup函数可以返回一个对象或者一个函数。返回对象的方式最为常见，允许你在模板中直接使用对象中的属性和方法。而返回一个函数则提供了自定义渲染内容的可能性，不过这种用法较为少见。

setup与Options API的关系

虽然setup函数为组件逻辑带来了新的组织方式，但它并不排斥传统的Options API（如data、methods等）。也就是说Vue 2中的配置仍然可以在Vue 3中访问到setup中的属性和方法。然而，在setup函数内部，你无法访问到这些旧有的配置。当两者发生冲突时，setup优先。

请看如下代码：

<template>
  <div class="person">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h1>你好， 我是{{c}}</h1>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">点击年龄+1</button>
  </div>
</template>

<script lang="ts">
export default{
  name:'Person',
  beforeCreate(){
    console.log('beforeCreate')
  },
  data() {
    return{
      c:this.name
    }
  },
  
  setup(){
    console.log('setup')
    let name = '张三'
    let age = 18
    function changeName(){
      name = '李四'
      console.log(name)
    }
    function changeAge(){
      age += 1
      console.log(age)  
    }
    // 返回一个对象，对象中的属性和方法会被暴露给模板
    return {name,age,changeName,changeAge}
  }
}
</script>

<style scoped>

</style>
image.png

可以看到，在vue2中确实访问到了setup中的name，由于本文主讲vue3，就不把反向验证的写在这篇文章里了，有兴趣的jym可以自己去试一试。

使用<script setup>语法糖

Vue 3还引入了<script setup>语法糖，进一步简化了代码编写。这种方式允许你将setup函数独立出来，同时保持模板中的使用习惯不变。例如：

<script setup lang="ts">
console.log(this) // undefined
let name = '张三'
function changName() { name = '李四' }
</script>

这种写法跟上面的代码实现的效果是一模一样的，我们可以充分使用setup语法糖从而减少冗余代码。

小结

Vue 3的setup函数及Composition API代表了Vue框架的一次重大飞跃，使得组件逻辑的组织和复用变得更加直观和高效。无论是对于新手还是有经验的开发者而言，掌握setup函数及其相关概念都是迈向Vue 3开发的关键一步。通过合理利用setup函数和<script setup>语法糖，开发者能够创建出更具可维护性和扩展性的应用。

avatar
文章
阅读
粉丝