Vue3.0教程003：setup语法糖

文章目录

- 3.1 OptionsAPI与CompositionAPI
- - Options API的弊端
  - Composition API的优势
- 3.2 拉开序幕的setup
- 3.3 setup语法糖

3.1 OptionsAPI与CompositionAPI

vue2的API设计是Options风格的
vue3的API设计是Composition（组合）风格的

Options API的弊端

Options类型的API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

3.2 拉开序幕的setup

修改Person.vue的代码

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">// JS/TSexport default{name: 'Person',setup(){// 数据let name = '张三'; // 此时的name不是响应式的let age = 18; // 此时的age不是响应式的let tel = '13838386996'; // 此时的tel不是响应式的// 方法function changeName(){name = '李四'; // name确实改了，但是不是响应式的}function changeAge(){age += 1; // age确实改了，但是不是响应式的}function showTel(){alert(tel);}// 把数据和方法交出去，才能用return {name, age, changeName, changeAge, showTel}}}
</script><style scoped>/* 样式 */.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

注意1：

// 把数据和方法交出去，才能用
return {name, age, changeName, changeAge, showTel}

注意2：

刷新浏览器，发现点击【修改姓名】和【修改年龄】按钮，发现页面无变化，这是因为此时的数据定义式不是响应式的，点击按钮之后，name和age确实修改了，但是因为不是响应式的，所以页面无变化。后续会解决这个问题。

注意3：

setup的返回值也可以是一个渲染函数：

return ()=> '嘿嘿'

注意4：

setup data ：

data可以访问到setup中的数据
setup访问不到data中的数据

3.3 setup语法糖

当定义的数据和方法较多的时候，都要用return进行返回，就显得十分不方便。接下来介绍setup语法糖，来解决问题。

通过定义如下代码，直接在其中定义数据和方法，然后用{{}}可以直接访问到，避免了用return返回：

<!--配置组合式API-->
<script lang="ts" setup>let a = 7;
</script>

完整代码：

<template><div class="person"><h2>{{a}}</h2></div>
</template><!--配置组件名-->
<script lang="ts">// JS/TSexport default{name: 'Person',}
</script><!--配置组合式API-->
<script lang="ts" setup>let a = 7;
</script><style scoped>/* 样式 */.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

实现效果：

在这里插入图片描述

注意：

上面定义了两个script标签，一个用来配置组件名，一个用来配置组合式API。

那么如果，想要只写一个script标签，不写配置组件名的标签，可以通过如下方法解决：

安装插件：

npm install vite-plugin-vue-setup-extend -D

然后在vite.config.js中配置如下代码：

在这里插入图片描述

接着修改script代码即可：

<!--&lt;!&ndash;配置组件名&ndash;&gt;-->
<!--<script lang="ts">-->
<!--    // JS/TS-->
<!--    export default{-->
<!--        name: 'Person',-->
<!--    }-->
<!--</script>--><!--配置组合式API-->
<script lang="ts" setup name="Person">let a = 7;
</script>