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 = 18
      let tel = '1231323'

      //方法
      function changeAge(){
        age += 1
        console.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优先。