vue3.2中的setup语法糖

发表于 更新于 分类于

script setup 是 vue3 的新语法糖，并不是新增的功能模块，只是简化了以往的组合式 API 必须返回(return)的写法，并且有更好的运行时性能。

什么是 setup 语法糖

起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  import Foo from "./Foo.vue";
  import Bar from "./Bar.vue";
  export default {
    setup(props) {
      console.log(props);
      return {
        ok: Math.random(),
        Foo,
        Bar
      };
    }
  };
</script>

vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下是 setup() 函数中。
所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。
组件只需引入不用注册，属性和方法也不用返回，也不用写 setup 函数，也不用写 export default ，甚至是自定义指令也可以在我们的 template 中自动获得。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <my-component :num="num" @click="addNum" />
</template>

<script setup>
  import { ref } from "vue";
  import MyComponent from "./MyComponent .vue";

  // 像在平常的setup中一样的写,但是不需要返回任何变量
  const num = ref(0); //在此处定义的 num 可以直接使用
  const addNum = () => {
    //函数也可以直接引用,不用在return中返回
    num.value++;
  };
</script>

// 必须使用驼峰命名

使用 setup 组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过 components 进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写 name 属性了。示例：

1
2
3
4
5
6
7
<template>
  <zi-hello></zi-hello>
</template>

<script setup>
  import ziHello from "./ziHello";
</script>

使用 setup 后新增 API

因为没有了 setup 函数，那么 props，emit 怎么获取呢

setup script 语法糖提供了新的 API 来供我们使用

defineProps

用来接收父组件传来的 props

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello :name="name"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from "./ziHello";

  import { ref } from "vue";
  let name = ref("赵小磊========");
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div> 我是子组件{{name}} // 赵小磊======== </div>
</template>

<script setup>
  import { defineProps } from "vue";

  defineProps({
    name: {
      type: String,
      default: "我是默认值"
    }
  });
</script>

defineEmits

子组件向父组件事件传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    我是子组件{{name}}
    <button @click="ziupdata">按钮</button>
  </div>
</template>

<script setup>
  import { defineEmits } from "vue";

  //自定义函数，父组件可以触发
  const em = defineEmits(["updata"]);
  const ziupdata = () => {
    em("updata", "我是子组件的值");
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from "./ziHello";

  const updata = (data) => {
    console.log(data); //我是子组件的值
  };
</script>

defineExpose

组件暴露出自己的属性，在父组件中可以拿到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div> 我是子组件 </div>
</template>

<script setup>
  import { defineExpose, reactive, ref } from "vue";
  let ziage = ref(18);
  let ziname = reactive({
    name: "赵小磊"
  });
  //暴露出去的变量
  defineExpose({
    ziage,
    ziname
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="die">
    <h3 @click="isclick">我是父组件</h3>
    <zi-hello ref="zihello"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from "./ziHello";
  import { ref } from "vue";
  const zihello = ref();

  const isclick = () => {
    console.log("接收ref暴漏出来的值", zihello.value.ziage);
    console.log("接收reactive暴漏出来的值", zihello.value.ziname.name);
  };
</script>

vue3 项目如何开启 setup 语法糖

  1. 首先要将编辑器的 vetur 插件关闭，打开 Volar
  2. 再新建一个 tsconfig.json / jsconfig.json 文件 ，在 compilerOptions 里面加上 "strict": true，和 "moduleResolution": "node" 配置项就可以啦