vue3--组合式api

官网：https://v3.cn.vuejs.org/api/

setup

setup是所有组合式ap表演的舞台！是一个配置项，值为一个函数
组件中所用到的：数据、方法等等，都要配置在setup中

setup函数的两种返回值

1、若返回一个对象，则对象中的属性、方法，在模板中都可以直接使用。

2、若返回一个渲染函数：则可以自定义渲染内容。

vuex的配置（date、methos、computed…）中可以访问到setup中的属性、方法
但在setup中不能访问vue2配置（date、methos、computed…）
setup不能是一个async函数，因为返回值不在是return的对象，而是promise，模板看不到return对象中的属性，但有一种情况可以：

<template>
  <!-- vue3的组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>

export default {
  name: 'App',
  // vue2的写法
  data() {
    return {
      
    }
  },
  methods: {
    
  },
  // 
  // 此处测试一下setup,暂时不考虑响应式
  setup(){
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好！`)
    }

  return{
    name,
    age,
    sayHello
  }

  }
}
</script>

<style>
</style>