Vite script setup语法糖的使用

秒速五厘米 2022-10-07 00:51 174阅读 0赞

> Vue3 使用 Composition（**组合式**） API , 同时引入了 setup() 函数，而 script setup 语法糖将更进一步的简化书写。

<template>
      <div>默认count: {
       { iState.count }}</div>
      <div>
        <button @click="increment">增加</button>
        <button @click="decrement">减少</button>
      </div>
      <div>默认num: {
       { num }}</div>
    </template>
    
    <script setup lang="ts"> import { ref, reactive, toRefs, computed, watch, onMounted, watchEffect, provide, inject, } from 'vue'; import { useStore } from 'vuex'; import { useRouter, useRoute } from 'vue-router'; // 定义数据类型 interface IState { count: number; double: number; } /** * 定义变量数据 * ref - 简单数据类型 * reactive - 复杂数据类型 */ const count = ref(0); const iState: IState = reactive({ count, double: computed(() => iState.count * 2), }); // 定义操作方法 const increment = () => iState.count++; const decrement = () => iState.count--; interface INum { num: number; dNum: number; } const iNum: INum = reactive({ num: ref(0), dNum: computed(() => iNum.num * 2), }); // 解构 const { num, dNum } = { ...toRefs(iNum) }; </script>
    
    <style></style>

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 setup语法糖

> 提示： vue3.2 版本开始才能使用语法糖！ 1、如何使用setup语法糖 > 只需在 script 标签上写上 setup 代码如下（示例）： <t

蔚落/ 2024年04月01日 12:37/ 0 赞/ 79 阅读

相关 Vue语法糖＜script setup＞详解，用最快的方式让你看懂和＜script＞的区别

前言 Vue3出来已经3年了，但是前两天在百度上搜索有关setup语法糖的细节时，发现很多博客关于语法糖细节部分，还是讲的很粗糙，因此决定自己来写一篇入门的博客，方便大家

我就是我/ 2024年03月24日 17:51/ 0 赞/ 30 阅读

相关 Vue3生命周期钩子函数使用示例，setup语法糖模式

![5d24ed920f5c48a2b97922546ba62529.png][]Vue3的生命周期钩子函数，有能力的可以看官方示例：[组合式 API：生命周期钩子 | Vue

Love The Way You Lie/ 2023年10月10日 17:49/ 0 赞/ 45 阅读

相关 Vue 3 父子组件互调方法 - setup 语法糖写法

Vue 3 父子组件互调方法 - setup 语法糖写法文章目录 Vue 3 父子组件互调方法 - setup 语法糖写法一、父组件调用子组件方法

爱被打了一巴掌/ 2023年09月29日 09:54/ 0 赞/ 26 阅读

相关 vue script setup语法糖

创建项目 yarn 安装的 vue3.0+vite+ts yarn create @vitejs/app my-vue-ts-vite --template v

我不是女神ヾ/ 2022年10月14日 15:48/ 0 赞/ 214 阅读

相关 Vite script setup语法糖的使用

> Vue3 使用 Composition（组合式） API , 同时引入了 setup() 函数，而 script setup 语法糖将更进一步的简化书写。 <te

秒速五厘米/ 2022年10月07日 00:51/ 0 赞/ 175 阅读

相关 Vue3新的script setup语法糖，拿来吧你！

大家好，我是[小佑@小佐][Link 1]https://blog.csdn.net/Smell\_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的

拼搏现实的明天。/ 2022年08月30日 14:57/ 0 赞/ 195 阅读

相关 Vue 3 script-setup 语法糖应用指南，前端进阶必备

一个前端程序员，说起 Vue 3肯定不会陌生，作为时下最火的前端框架之一，很多人将它作为入门框架。但是尽管 Vue 3很久之前就已经开始投入使用，也不免会有人抱怨 Vue

柔情只为你懂/ 2022年08月30日 11:23/ 0 赞/ 205 阅读

相关基于Vue3 script-setup 语法糖的俄罗斯方块项目实践

一个前端程序员，说起Vue 3肯定不会陌生，作为时下最火的前端框架之一，很多人将它作为入门框架。但是尽管Vue 3很久之前就已经开始投入使用，也不免会有人抱怨Vue 3的知

客官°小女子只卖身不卖艺/ 2022年08月29日 14:50/ 0 赞/ 28 阅读

相关语法糖语法盐

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添

谁践踏了优雅/ 2022年06月02日 23:16/ 0 赞/ 402 阅读