拉开序幕的setup

最新推荐文章于 2023-05-25 17:31:07 发布

weixin_45842460

最新推荐文章于 2023-05-25 17:31:07 发布

阅读量91

点赞数

分类专栏： Vue3.0从入门到放弃

本文链接：https://blog.csdn.net/weixin_45842460/article/details/119547990

版权

Vue3.0从入门到放弃专栏收录该内容

16 篇文章 1 订阅

订阅专栏

setup 是所有 Composition API ( 组合API) “ 表演舞台”
组件中所有用到的：数据, 方法等等,均要配置在setup中 (data, methos…)
setup函数的两种返回值

# 若返回一个对象，则对象中的属性,方法，在模板中均可以直接使用

<style lang='scss' scoped>
</style>
<template>
  <div>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <button @click="sayHello()">点击</button>
  </div>
</template>
<script>
export default {
  components: {},
  //此处只是测试一下setup,暂时不考虑响应式问题
  setup() {
    let name = "张三";
    let age = 18;
    function sayHello() {
      console.log(name, age);
    }
    return {
      name,
      age,
      sayHello,
    };
  },
};
</script>

注意点

1.尽量不要与Vue2配置混用
vue2配置（data methos , computed）可以访问到setup中的属性和方法

在setup中不能访问Vue2中的配置 （data methos , computed）

setup优先级最高

2.setup不能是一个async 函数 ，因为返回值不在是return的对象，而是一个promise，模板看不到return对象中的属性