vue3中的单文件组件<script setup>和setup函数区别 详解(一)

简介: 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 = 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>


相关文章
|
6天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
1天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
20 11
|
4天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
6天前
|
JavaScript API
模块化妙用!用vue3实现一个鼠标追踪器和异步加载组件
该文章展示了如何使用Vue3的Composition API实现鼠标追踪器功能,并介绍了创建异步加载组件的方法,利用TS泛型增强了组件的灵活性与可维护性。
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
74 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
|
JavaScript
vue 组件传值
vue 组件传值
74 0
|
JavaScript
vue父子组件传值
vue父子组件传值
|
JavaScript
vue兄弟组件传值 方便快捷
vue兄弟组件传值 方便快捷
下一篇
无影云桌面