vue3中的单文件组件＜script setup＞和setup函数区别 详解

简介

setup函数

setup函数原理说明
由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法 阶段。
setup 返回的结果集 作为 (传统写法)data 和 method 的值，确切点说是绑定到 组件对象的属性。

< script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 < script > 语法，具有以下特点：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
  简单来说＜script setup＞ 就是 setup函数的一个语法糖，我们来看这个糖甜不甜…

基本语法

要启用该语法，需要在

<script setup>
console.log('hello script setup')
</script>

这个脚本块将被预处理为组件的 setup() 函数，这意味着：每次组件实例被创建的时候执行。< script setup> 中的顶层绑定都将自动暴露给模板。

变量和方法多的使用

响应式状态需要明确使用响应式 API 来创建。和 setup() 函数的返回值一样，ref 在模板中使用的时候会自动解包

**使用setup函数**

<template><div>{{ num }}</div>
</template><script>
import { ref } from "vue";
export default {name: "Home",setup() {const num = ref("setup函数形式");return { num };},
};
</script>

**使用＜script setup＞**

<template><div>{{ num }}</div>
</template>
<script setup>
import { ref } from "vue";
const num = ref(10784512);
</script>

当使用 < script setup> 的时候，任何在 < script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

注册组件

使用setup函数形式

<template><div><Child></Child></div>
</template><script>
import Child from "./Child.vue";
export default{components:{Child}
}
</script>

使用setup语法糖形式

<template><div><Child></Child></div>
</template><script setup>
import Child from "./Child.vue";
</script>

当使用语法糖形式，不需要在component 在注册了，直接引入使用组件即可。强烈建议使用 PascalCase （驼峰式）格式以保持一致性。同时也有助于区分原生的自定义元素。

动态组件

<template><component :is="someCondition ? Child : ToRef" />
</template><script setup>
import {ref} from 'vue'
import Child from "./Child.vue";
import ToRef from "./Toref.vue";
const someCondition=ref('1')
</script>

由于组件是通过变量引用而不是基于字符串组件名注册的，
在 < script setup> 中要使用动态组件的时候，应该使用*动态的 :is 来绑定

使用外部文件方法

setup函数形式

<template><div class="home"><h1>使用了setup函数</h1><h2> {{lowercase1(name)}}</h2></div>
</template>
<script>
import { ref } from 'vue'
import { lowercase } from '@/utils/lowercase.js'
export default {setup () {const name = ref('MYNAME')const lowercase1 = lowercasereturn { name, lowercase1 }}
}
</script>

setup语法糖形式

<template><div class="about"><h1>使用了script setup</h1><h2>1.使用变量 {{lowercase(name)}}</h2></div>
</template><script setup>
import { lowercase } from '@/utils/lowercase.js'
import { ref } from 'vue'
const name = ref('MYNAME')
</script>

不需要在定义成一个方法，script setup格式直接使用即可

组件通信

props与defineProps、emit

setup函数形式

在 Setup 函数会接收两个参数，第一个参数就是组件的 Props传递过来的参数。和标准的组件一致，Setup 函数的 Props 是响应式的，并且会在传入新的 Props 时同步更新。
第二个参数是 content中有四个参数：
1、attrs: 该参数接受的是父组件传值到子组件的时候，子组件中未在props中配置的值;
2、emit: 该参数作为子父组件传值使用，传递给父组件需要使用到该字段,;

<!-- 父组件 -->
<template><div class="demo">我是script setup的父组件<hr /><Child :list="list" :msg="msg" @change="handleChange"></Child></div>
</template><script>
import { ref, defineProps, reactive } from "vue";
import Child from "./Child.vue";
export default {components: { Child },setup() {let list = ref("张三");let msg = ref("123");const handleChange = (e) => {console.log(e);};return {list,msg,handleChange,};},
};
</script>

<!-- 子组件 --><template><div><h3>我是子级组件</h3><h4>我接收到父组件的 数据 => {{ list }}</h4><hr /><button @click="handleClick">子组件传值到父组件</button></div>
</template><script>
import { onMounted } from 'vue';
export default {props: {// 注意：父组件传到子组件的字段必须要在这里定义list: String,},setup(props, context) {/**props:content中有四个参数：1、attrs: 该参数接受的是父组件传值到子组件的时候，子组件中未在props中配置的值;2、emit: 该参数作为子父组件传值使用，传递给父组件需要使用到该字段;*/console.log( context.attrs, "12");  //打印attrs 查看其他未定义接收的变量const handleClick = () => {context.emit("change", "来自子组件的消息");   //子传父方法：emit(‘自定义事件名称’,'传递的参数')};return {props,handleClick,};},
};
</script>

setup语法糖

<!-- 父组件 -->
<template><div class="demo">我是script setup的父组件<hr><!-- 子组件的内容在父组件显示 --><Child :list="list"></Child> </div>
</template><script setup>
import {ref, onMounted, reactive } from 'vue';
import Child from "./Child.vue";
const list = reactive([{name: 'zl'}])  
</script>

<!-- 子组件 -->
<template><div class="demo"><div>我是script setup子组件 :{{ props.list[0].name }}</div></div>
</template><script setup>
import { onMounted } from "vue";
// 子组件中， 接收 Props 参数 Vue 提供了一个 新的 API 函数 defineProps()方法，就和我们在 Vue2 的子组件中 定义 Props 待接收参数配置一样。
// 必须要使用defineProps进行配置传入的属性，否则无法获取到传入的值.
const props = defineProps({list: {type: Array,required: true, //  是否必传default: "备用数据", //默认数据},
});
onMounted(() => {console.log(props.list, "123");
});
</script>

defineEmits

  <!-- 父组件 -->
<template><div class="demo">我是script setup的父组件<hr><Child @exposeData="getData"></Child> </div>
</template><script setup>
import {ref, onMounted, reactive } from 'vue';
import Child from "./Child.vue";
const getData = (val)=>{console.log("接收子组件的值",val)
}
</script>

<template><div class="demo"><h3>子组件</h3><button @click="toValue">触发子组件数据</button></div>
</template><script setup>
// setup 语法糖写法
//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法','参数'])
const emit = defineEmits(['exposeData'])
const toValue = ()=>{emit('exposeData','张三 -- 18')
}
</script>

defineExpose

setup函数形式

<!-- 父组件 -->
<template><!-- 方法一 --><Child ref="childRef" /><!-- 方法二 --><Child ref="childRefTwo" />
</template><script>
import { ref, onMounted, getCurrentInstance } from "vue";
import Child from "./Child.vue";
export default {components: { Child },setup() {const childRef = ref(null); // 当前变量必须要与子组件上绑定的ref对应起来,(不需要使用defineExpose将方法暴露出来，可以直接使用ref获取）const instance = getCurrentInstance(); //获取当前组件实例onMounted(() => {// 方法一childRef.value.open(); // 调用子组件中的open方法// 方法二instance.proxy.$refs.childRefTwo.open(); // 调用子组件中的open方法});return { childRef, instance };},
};
</script>

<!-- 子组件 -->
<!-- 子组件 --><template><div><div @click="open">子组件传值到父组件</div></div>
</template><script>
import { onMounted } from "vue";
export default {props: {list: String,},setup() {const open = () => {console.log("open点击了");};return { open };// setup函数定义的函数，不需要使用defineExpose将方法暴露出来，可以直接使用ref获取},
};
</script>

setup语法糖形式

<!-- 父组件 -->
<template><Child ref="childRef" /><Child ref="childRefTwo" />
</template><script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import Child from "./Child.vue";
const childRef = ref(null);
const instance = getCurrentInstance();   //获取当前组件实例// 扩展讲解
// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
// 方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
// const { ctx }  = getCurrentInstance();// //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// const { proxy }  = getCurrentInstance();
// // ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
// console.log(instance,'555');onMounted(() => {// 方法一childRef.value.open(); // 调用子组件中的open方法// 方法二instance.proxy.$refs.childRefTwo.open(); // 调用子组件中的open方法
});
</script>

<!-- 子组件 -->
<template><div><div @click="open">子组件传值到父组件</div></div>
</template><script setup>
import { onMounted,defineExpose } from "vue";const open = () => {console.log("open点击了");};defineExpose({ open }); // 必须要注册进来// vue3中,语法糖中定义的方法，默认是不会暴露给ref进行调用的，必须要注册到defineExpose里面，// ref才能正常访问，如果没有注册到defineExpose中，通过ref调用子组中的方法，会报错</script>

• defineProps 和 defineEmits 都是只在 < script setup>
  中才能使用的编译器宏。他们不需要导入且会随着< script setup> 处理过程一同被编译掉。
• defineProps 接收与 props 选项相同的值，defineEmits也接收 emits选项相同的值。
• defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推断。
• 传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在
  setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内

获取 attrs、slots 和useAttrs、useSlots 方法

在 < script setup> 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中通过 $slots和$attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

<script setup>
import { useSlots, useAttrs } from 'vue'const slots = useSlots()
const attrs = useAttrs()
</script>

useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用

与普通的 < script > 一起使用

< script setup >可以和普通的< script >一起使用。普通的< script >在有这些需要的情况下或许会被使用到：

• 无法在< script setup>声明的选项，例如inheritAttrs【vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute应用在子组件的根元素上。如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs:false】或通过插件启用的自定义的选项；
• 声明命名导出，< script setup>定义的组件默认以组件文件的名称作为组件名；
• 运行副作用或者创建只需要执行一次的对象。

在同一组件中将 < script setup> 与 < script > 结合使用的支持仅限于上述情况。具体来说：
不要为已经可以用 < script setup> 定义的选项使用单独的 < script > 部分，如 props 和 emits。
在 < script setup> 中创建的变量不会作为属性添加到组件实例中，这使得它们无法从选项式 API 中访问。我们强烈反对以这种方式混合 API。
如果你发现自己处于以上任一不被支持的场景中，那么你应该考虑切换到一个显式的 setup() 函数，而不是使用 < script setup>。

v-bind() CSS变量注入

 <template><span>Jerry</span>
</template><script setup>
import { ref, reactive } from "vue";
// prop接收样式
const props = defineProps({border: {type: String,default: "5px solid yellow",},
});// 常量声明样式
const background = "red";// 响应式数据声明样式
const color = ref("blue");
const style = reactive({opacity: "0.5",
});
</script><style scoped>
span {display: block;width: 50px;height: 50px;background: v-bind(background);/* 使用响应式数据声明的样式 */color: v-bind(color);opacity: v-bind("style.opacity");/* 使用prop接收的样式 */border: v-bind("props.border");
}
</style>

style的新特性之global

如果需要声明全局样式，可以使用一下方式

<template><div><p>1223465</p></div>
</template>
<script setup>
import { defineProps } from "vue";</script>
<style scoped >
:global(p){ /* //声明了一个全局类型p */color: red;
}
</style>

对await异步的支持

setup函数的形式

使用suspense 包裹你的组件 需要在setup函数前面async声明。

<template><suspense><router-view></router-view>
</suspense>
</template>export default {async setup() {// 在 `setup` 内部使用 `await` 需要非常小心// 因为大多数组合式 API 函数只会在// 第一个 `await` 之前工作const data = await loadData()// 它隐性地包裹在一个 Promise 内// 因为函数是 `async` 的return {// ...}}

setup语法糖形式

不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup

<script setup>const post = await fetch('/api').then(() => {})
</script>

没有 Src 导入

由于模块执行语义的差异，< script setup > 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因而

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></template>
//禁止这样混用
<script setup></script>