Vue3.0 setup函数

setup

1、Vue3.0中一个新的配置项，值为一个函数。
2、setup是所有Composition API(组合API)“表演舞台”。
3、组件中所用到的：数据、方法等等，均要配置在setup中。
4、setup函数的两种返回值：
- ①若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点）
- ②若返回一个渲染函数：则可以自定义渲染内容。（了解）
5、注意点：
- ①尽量不要与Vue2.x配置混用
* Vue2.x配置（data、methods、computed…）中可以访问到setup中的属性、方法。
* 但在setup中不能访问到Vue2.x配置（data、method、computed…）。
* 如果有重名，setup优先
- ②setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ sex }}</h2>
  <button @click="sayHello">你好</button>
  <button @click="sayWelcome">欢迎</button>
</template>

<script>
// import { h } from "@vue/runtime-core";

export default {
  name: "App",
  data() {
    return {
      sex: "男",
    };
  },
  methods: {
    sayWelcome() {
      alert("欢迎光临");
    },
  },
  //此处测试setup,暂时不考虑响应式
  setup() {
    //数据
    let name = "张三";
    let age = 18;

    //方法
    function sayHello() {
      alert("我叫" + name + ",我" + age + "岁了。你好啊！");
      //模板字符串
      // alert("我叫${name},我${age}岁了。你好啊！");
    }

    //返回对象
    return {
      name,
      age,
      sayHello,
    };

    //返回渲染函数
    // return () => {
    //   return h("h1", "渲染内容");
    // };
    // return () => h("h1", "渲染内容");
  },
};
</script>

<style>
</style>