Vite script setup语法糖的使用

秒速五厘米 2022-10-07 00:51 128阅读 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 条评论，128人围观）

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

相关阅读

相关 setup语法糖

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

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

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

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

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

相关 vue script setup语法糖

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

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

相关 Vite script setup语法糖的使用

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

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

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

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

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

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

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

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

相关语法糖2

语法糖，意指那些没有给计算机语言添加新功能，而只是对人类来说更“sweet”的语法，意在使得编程风格更易读。C\2.0，3.0发布的新特性，除了泛型不是语法糖，其他所有的新特性

深藏阁楼爱情的钟/ 2022年08月27日 06:55/ 0 赞/ 201 阅读

相关 JS——语法糖

//https://www.cnblogs.com/lhl66/p/8025782.html //解构 let [a,b,c,d]=[1,'aa

快来打我*/ 2022年06月03日 01:36/ 0 赞/ 217 阅读

相关语法糖语法盐

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

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

相关 Java语法糖

> 语法糖（Syntactic Sugar），也称糖衣语法，指在计算机语言中添加的某种语法，这种语法对语言本身功能来说没有什么影响，只是为了方便程序员的开发，提高开发效率。说白

￡神魔★判官ぃ/ 2022年05月19日 14:23/ 0 赞/ 330 阅读