【Vue3】setup语法糖的使用

文章目录

  • setup简介
  • [使用vite-plugin-vue-setup-extend插件 指定组件名字](#使用vite-plugin-vue-setup-extend插件 指定组件名字)

setup简介

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

相比较普通的<script> ,它有以下优势

  • 更少的样板内容,更简洁的代码。
  • 能够使用纯 TypeScript 声明 props 和自定义事件。
  • 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
  • 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

两种代码编写方式,一看就能看出,使用setup语法糖的,代码更加简介和易懂
选项式API写法

bash 复制代码
#script写法
<script>
  export default {
    name: "item",
    data(){
      return {
        isShow:true,
        name:"奥特曼",
        age:"1000",
      }
    },
    methods:{
      handleShowOrHide(){
        this.isShow = !this.isShow;
      },
      handleChangeNameAndAge(){
        this.name="迪加奥特曼"
        this.age = "18"
      }
    }
  }
</script>

组合式API写法(推荐)

bash 复制代码
#添加setup语法糖的写法
<script setup lang="ts">
    import {ref} from "vue"
    let isShow = ref(true);
    let name = ref<string>("奥特曼");
    let age= ref<string>("1000");
    const handleShowOrHide = ()=>{
        isShow.value = !isShow.value;
    }
    const handleChangeNameAndAge = ()=>{
        name.value = "迪加奥特曼";
        age.value = "18";
    }
</script>

使用vite-plugin-vue-setup-extend插件 指定组件名字

1.第一步:安装

bash 复制代码
npm i vite-plugin-vue-setup-extend -D

2.第二部:vite.config.ts文件引入

3.第三步:项目使用

bash 复制代码
<script setup lang="ts" name="自定义组件名字">
  ...
</script>

✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复

如有错误,请多多指教

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss