vue3——setup

setup是所有Composition API（组合API）“表演舞台”
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的两种返回值：

• 若返回一个对象，则对象中的属性、方法，在模板中均可直接使用
• 若返回一个渲染函数：则可以定义渲染内容 需引入import {h} from ‘vue’ （不常用）
  例如

 import {h} from 'vue'
 export default {
   name: 'App',
   setup(){
     let name = '啊O'
     let age = 18
     function sayHello(){
       alert(`我叫${name}，我${age}岁了，你好啊`)
     }

     // 返回一个对象（常用）
     return {
       name,
       age,
       sayHello
     }

     // 返回一个函数（渲染函数）
     // return ()=>{return h('h1','hello Word')}
   }
 }

<template>
<!-- vue3中的组件节点可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

注意

• vue2配置（data、methods、computed……）可以访问- vue3 setup中的属性、方法
• 但在setup中不能访问到vue2的配置
• 如有重名setup优先
  setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性