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

文章目录

- 简介
- 基本语法
- 变量和方法多的使用
- 注册组件
- 动态组件
- 使用外部文件方法
- 组件通信
- - props与defineProps、emit
  - defineEmits
  - defineExpose
- 获取 attrs、slots 和useAttrs、useSlots 方法
- 与普通的 < script > 一起使用
- v-bind() CSS变量注入
- style的新特性之global
- 对await异步的支持
- 没有 Src 导入

简介

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 = lowercase
    return { 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 的情况应该是很罕见的，因为可以在模板中通过 $s l o t s 和$ 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>