3.vue3核心语法

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】

setup 概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。
以上解释来自尚硅谷，下面开始setup

<template><div class="preson"><h2>姓名：{{ a }}</h2><h2>年龄：{{ b }}</h2><button @click="changeAge">修改年龄 </button><button @click="showTel">点击查看联系方式</button></div>
</template>
<script lang="ts">export default {name:'PreSon3',setup(){//数据let name = '张三'let age = 18let tel = '1231323'//方法function changeAge(){age += 1console.log(age)}function showTel(){alert(tel)}return{a:name,b:age,tel,changeAge,showTel}}}</script><style scoped>.preson {background-color:  skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}</style>

这里的修改年龄并不会修改页面的年龄
注意：此时这么修改age页面是不变化的
修改修改年龄数据为响应式的

setup 的返回值

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){return ()=> '你好啊！'
}

setup 与 Options API 的关系

• Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos…）。
• 如果与Vue2冲突，则setup优先。