最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

  • 1、创建 Vue3 工程
    • 基于 `vue-cli` 创建(基于webpack实现)
    • 基于 `vite` 创建(推荐)
  • 2、Vue3 项目开发 `vscode` 插件推荐
  • 3、`Vue3` 核心语法
    • 【optionsAPI】与【CompositionAPI】
      • Options API 的弊端
      • Composition API 的优势
  • 4、【拉开序幕的 setup】
  • 5、`Vue3` 自定义组件命名插件推荐
  • 6、`ref` 创建:响应式数据
  • 7、`reactive` 创建:对象类型的响应式数据
  • 8、`ref` 对比 `reactive`
  • 9、`toRefs` 与 `toRef`
  • 10、计算属性

1、创建 Vue3 工程

基于 vue-cli 创建(基于webpack实现)

备注:目前 vue-cli 已处于维护模式,官方推荐基于 Vite 创建项目。

// 查看 @vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version// 安装或者升级你的@vue/cli
npm install -g @vue/cli// 执行创建命令
vue create vue_demo

基于 vite 创建(推荐)

  • vite 是新一代前端构建工具,官网地址:https://vitejs.cn
  • vite 的优势如下:
    • 轻量快速的热重载(HMR),能实现极速的服务启动。
    • TypeScriptJSXCSS 等支持开箱即用。
    • 真正的按需编译,不再等待整个应用编译完成。
  • 创建项目请看上面笔记
  • https://blog.csdn.net/qq_33365152/article/details/132917242

2、Vue3 项目开发 vscode 插件推荐

在这里插入图片描述
自动补充 ref 变量 value 插件配置方法
在这里插入图片描述

在这里插入图片描述

3、Vue3 核心语法

【optionsAPI】与【CompositionAPI】

  • Vue2API 设计是 Options(配置)风格的。(选项式API)
  • Vue3API 设计是 Composition(组合)风格的。

Options API 的弊端

  • Options 类型的 API ,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

Composition API 的优势

  • 可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

4、【拉开序幕的 setup】

  • setup概念
  • setupVue3 中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台”,组合中所用到的:数据、方法、计算属性、监听…等等,均配置在 setup 中。
  • 特点如下:
    • setup 函数返回的对象中的内容,可直接在模板中使用
    • setup 中访问 thisundefined
    • setup 函数会在 beforeCreate 之间调用,它是“领先”所有钩子执行的。

5、Vue3 自定义组件命名插件推荐

  • 插件名称 vite-plugin-vue-setup-extend
  • 安装
npm install vite-plugin-vue-setup-extend -D
  • 配置,在 vite.config.ts 文件中
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "node:url";
import VueSetupExtend from "vite-plugin-vue-setup-extend";export default defineConfig({plugins: [vue()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/260532.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

提取游戏音频文件.bnk

提取游戏音频文件.bnk 什么是.bnk准备Wwise-Unpacker工具使用Wwise-Unpacker工具总结 什么是.bnk .bnk其实是一种对音频的加密方式,一个.bnk文件中通常包含了多个语音文件,一般可以使用Wwise-Unpacker来解码.bnk格式文件 准备Wwise-Unpacker工具 Wwis…

《Go 简易速速上手小册》第7章:包管理与模块(2024 最新版)

文章目录 7.1 使用 Go Modules 管理依赖 - 掌舵向未来7.1.1 基础知识讲解7.1.2 重点案例:Web 服务功能描述实现步骤扩展功能 7.1.3 拓展案例 1:使用数据库功能描述实现步骤扩展功能 7.1.4 拓展案例 2:集成 Redis 缓存功能描述实现步骤扩展功能…

OpenAI 发布文生视频大模型 Sora,AI 视频要变天了,视频创作重新洗牌!AGI 还远吗?

一、一觉醒来,AI 视频已变天 早上一觉醒来,群里和朋友圈又被刷屏了。 今年开年 AI 界最大的震撼事件:OpenAI 发布了他们的文生视频大模型 Sora。 OpenAI 文生视频大模型 Sora 的横空出世,预示着 AI 视频要变天了,视…

python 笔记:shapely(形状篇)

主要是点(point)、线(linestring)、面(surface) 1 基本方法和属性 object.area 返回对象的面积(浮点数) object.bounds 返回一个(minx, miny, maxx, maxy)元…

MySQL - 增量同步和全量同步

增量同步和全量同步是数据同步过程中常用的两种方式,它们在定义、区别以及适用场景上有一些明显的差异。 一、定义 增量同步是指在数据同步中仅同步更新或新增的数据,而不包括已经同步过的数据。全量同步则是指将所有数据进行一次完整的同步&#xff0c…

网络原理 - HTTP/HTTPS(3)

HTTP请求 认识请求"报头" header的整体的格式也是"键值对"的结构. 每个键值对占一行,键和值之间使用分号进行分割. 报头的种类有很多,此处仅介绍几个常见的. Host 表示服务器主机的地址和端口.(Host和URL中的ip地址端口啥的,绝大部分情况下都是一样的,少…

智慧城市驿站:智慧公厕升级版,打造现代化城市生活的便捷配套

随着城市化进程的加速,人们对城市生活质量的要求也越来越高。作为智慧城市建设的一项重要组成部分,多功能城市智慧驿站应运而生。它集合了信息技术、设计美学、结构工艺、系统集成、环保节能等多个亮点,将现代科技与城市生活相融合&#xff0…

qt - 19种精美软件样式

qt - 19种精美软件样式 一、效果演示二、核心程序三、下载链接 一、效果演示 二、核心程序 #include "mainwindow.h"#include <QtAdvancedStylesheet.h> #include <QmlStyleUrlInterceptor.h>#include "ui_mainwindow.h" #include <QDir&g…

OpenCV 4基础篇| 色彩空间类型转换

目录 1. 色彩空间基础2. 色彩空间类型2.1 GRAY 色彩空间2.2 BGR 色彩空间2.3 CMY(K) 色彩空间2.4 XYZ 色彩空间2.5 HSV 色彩空间2.6 HLS 色彩空间2.7 CIEL*a*b* 色彩空间2.8 CIEL*u*v* 色彩空间2.9 YCrCb 色彩空间 3. 类型转换函数3.1 cv2.cvtColor3.2 cv2.inRange 1. 色彩空间…

你真的了解—————NumPy吗

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;opencv &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于IT的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x1f601; 喜欢的…

Linux 基础/子目录分配/文件路径

在Linux系统中&#xff0c;整个系统只具有一个根目录“/”&#xff0c;用斜杠表示。根目录是整个文件系统的顶层目录&#xff0c;在他下面可以创建其他的目录和文件。 Linux中的子目录分配&#xff1a; /bin - 基本命令的二进制文件&#xff0c;这些命令可供所有用户使用&am…

行人重识别综述

Deep Learning for Person Re-identification: A Survey and Outlook 论文地址https://arxiv.org/pdf/2001.04193 1. 摘要 we categorize it into the closed-world and open-world settings. closed-world&#xff1a;学术环境下 open-world &#xff1a;实际应用场景下 2…

Linux 驱动开发基础知识——APP 怎么读取按键值(十二)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

【Linux】Linux权限

Linux权限 Linux下用户的分类切换用户su 和 su - 的区别 对命令提权 权限的概念Linux权限管理文件访问者的分类&#xff08;人&#xff09;1️⃣拥有者u→user2️⃣其他人o→others3️⃣所属组group 文件类型和访问权限&#xff08;事物属性&#xff09;文件文件类型文件的基本…

基于RBAC的权限管理的理论实现和权限管理的实现

权限管理的理论 首先需要两个页面支持&#xff0c;分别是角色管理和员工管理&#xff0c;其中角色管理对应的是角色和权限的配合&#xff0c;员工管理则是将登录的员工账号和员工所处的角色进行对应&#xff0c;即通过新增角色这个概念&#xff0c;让权限和员工并不直接关联&a…

Unity求物体关于平面镜像对称后坐标以及旋转

前言&#xff1a;如题&#xff0c;我在已知一个平面L和物体A&#xff0c;我希望得到镜像后的物体B的位置和旋转。 效果&#xff1a; 推导&#xff1a; 首先我们需要知道物体的对称坐标A&#xff0c;我们现在能已知A坐标以及平面L的法线&#xff0c;如果我们能得到B的坐标&…

【后端高频面试题--Linux篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;后端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 后端高频面试题--Linux篇 往期精彩内容Windows和Linux的区别&#xff1f;Unix和Linux有什么区别…

利用nbsp设置空格

想要实现上面效果&#xff0c;一开始直接<el-col :span"8" >{{ item.name }} </el-col> 或者<el-col :span"8" >{{ item.name }}</el-col>或者<el-col :span"8" >{{ item.name }}</el-col> 都无…

生产力工具——JNPF开发平台

风流数年&#xff0c;只看今朝&#xff0c;Linux 让我们看到了开源驱动下的生产力&#xff0c;其实低代码和它一样&#xff0c;都是提高效率、降低成本的工具。 近 10 年间&#xff0c;JNPF 低代码平台如火如荼的发展起来&#xff0c;堪称黑马也不为过。这款广受好评的低代码平…

数据结构---字典树(Tire)

字典树是一种能够快速插入和查询字符串的多叉树结构&#xff0c;节点的编号各不相同&#xff0c;根节点编号为0 Trie树&#xff0c;即字典树&#xff0c;又称单词查找树或键树&#xff0c;是一种树形结构&#xff0c;是一种哈希树的变种。 核心思想也是通过空间来换取时间上的…