vue3中的单文件组件＜script setup＞和setup函数区别 详解
文章目录
-
- 简介
- 基本语法
- 变量和方法多的使用
- 注册组件
- 动态组件
- 使用外部文件方法
- 组件通信
-
- props与defineProps、emit
- defineEmits
- defineExpose
- 获取 attrs、slots 和useAttrs、useSlots 方法
- 与普通的 < script > 一起使用
- style的新特性之 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 setuph1>
<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
父组件要想通过ref获取子组件的变量或函数，子组件须使用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 和 slots 和 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 setup> 中的顶层绑定都将自动暴露给模板。
<script>
// 普通