Vue3.0教程003：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/TS
    export 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/TS
    export 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>

注意：vue3.3版本以上的，不需要安装插件，可以直接修改script代码即可。

比较推荐，写两个script标签。