Vue3 – 拉开序幕的setup

1.拉开序幕的setup

  1. 理解:Vue3.0中一个新的配置项,值为一个函数。
  2. setup是所有Composition API(组合API)“ 表演的舞台 ”
  3. 组件中所用到的:数据、方法等等,均要配置在setup中。
  4. setup函数的两种返回值:
    1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)
    2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)
  5. 注意点:
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

示例

<template>
  <h1>姓名:{{ name }}</h1>
  <h1>年龄:{{ age }}</h1>
  <h1>性别:{{ sex }}</h1>
  <button @click="sayWelcome">vue2的sayWelcome</button>
  <button @click="sayHello">vue3的sayHello</button>
  <button @click="getVue2">获取vue2的配置项</button>
  <button @click="getVue3">获取vue3的配置项</button>
</template>

<script>
export default {
  name: "App",
  data() {
    return { sex: "男" };
  },
  methods: {
    sayWelcome() {
      alert("hello vue2");
    },
    getVue3() {
      console.log("vue2中获取vue3的配置");
      console.log(this.name);
      console.log(this.age);
      console.log(this.sex);
      console.log(this.sayHello);
    },
  },
  setup() {
    // 数据
    let name = "云淡风轻";
    let age = "18";

    // 方法
    function sayHello() {
      alert("hello vue3");
    }

    function getVue2() {
      console.log("vue3中获取vue2的配置");
      console.log(name);
      console.log(age);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }

    // 返回对象
    return {
      name,
      age,
      getVue2,
      sayHello,
    };
  },
};
</script>

<style></style>

Snipaste_2021-10-21_20-20-39.png

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>