setup语法糖和setup函数有什么区别

正常开发大家使用vue3一般都会使用setup语法糖,那么setup语法糖到底做了什么,和setup函数有什么区别 首先分别用setup语法糖和setup函数各写一个功能一样的组件

组件A setup语法糖实现

js 复制代码
<template>
  <div>
    <p>setup语法糖</p>
    <p>当前计数: {{ count }}</p>
    <el-button type="primary" @click="increment">增加</el-button>
    <el-button type="danger" @click="decrement">减少</el-button>
  </div>
</template>
<script setup lang="ts">
//写个累加器
import {ref} from "vue";
const count = ref(0)
const increment = () => {
  count.value++;
};

// 定义减少函数
const decrement = () => {
  count.value--;
};

</script>
<style scoped lang="scss">

</style>

组件B setup函数实现

xml 复制代码
<template>
  <div>
    <p>setup函数</p>
    <p>当前计数: {{ count }}</p>
    <el-button type="primary" @click="increment">增加</el-button>
    <el-button type="danger" @click="decrement">减少</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式计数器变量
    const count = ref(0);

    // 定义增加函数
    const increment = () => {
      count.value++;
    };

    // 定义减少函数
    const decrement = () => {
      count.value--;
    };

    // 返回响应式变量和函数
    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

<style>
/* 这里可以添加样式 */
</style>

然后分别引用组件A和B

xml 复制代码
<template>
  <A ref="refsetup"></A>
  <B ref="refscriptsetup"></B>
</template>
<script setup lang="ts">
import A  from './A.vue';
import B  from './B.vue';
const refsetup = ref(null)
const refscriptsetup = ref(null)
import {ref,onMounted} from "vue";
onMounted(()=>{
  console.log(refsetup);
  console.log(refscriptsetup);
})

</script>
<style scoped lang="scss">

</style>

效果如下

代码可以看到我们分别打印了组件A和B的ref 打印结果如下

很容易发现setup语法糖的ref并没有什么东西 ,通过查看查看编译后的结果我们发现,setup函数编译的结果是原封不动的,返回什么,编译后还是返回什么

而setup语法糖呢 编译后多了个expose

这个是vue3新增的一个api 作用就是可以指定想要暴露的对象 不写就默认暴露全部 如果只希望暴露指定属性可以用 defineExpose

编译后

这样就不存在在外部可以使用ref来改变内部数据的可能,也可以通过暴露子组件内部方法,父组件可以直接调用

相关推荐
gnip10 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_11 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61411 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf12 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育12 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94912 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld13 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu13 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子13 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖13 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome