Vue3+Ts+Vite入门

已于 2024-08-01 14:57:59 修改
阅读量227 收藏 4
点赞数 8
文章标签： vue.js
于 2024-08-01 14:37:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67455784/article/details/140847289
版权

vue2 采用的是 vueRouter3 vueX 3 (233) vue3 采用的是 vueRouter4 vueX4(344)

v3对比v2优点

1.首次渲染更加快 v2就算通过路由懒加载 效率也不是非常高(查找各种依赖) v3通过vite构建工具 使渲染速度更快

2.diff算法更快 v2新旧虚拟dom对比然后差异化更新 v3对diff算法进行优化减少不必要的DOM比较

3.内存占用更少 不那么依赖电脑了

4.打包体积变小 响应更快

5.更好的ts支持 Vue 现有的 API 在设计之初没有照顾到类型推导，这使适配 TypeScript 变得复杂 v3 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

6.组合式api！！！

7.数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

解决了数组的更新检测等bug, 大大优化了响应式监听的性能 (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

详情可以参考下方笔记

https://note.youdao.com/ynoteshare/index.html?id=f16747750d503ce4822816ec9faedaf2&type=note&_time=1722494349812

前端界小白
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Nuxt+Vue3+TS+Vite入门教程
宋承佑
03-27 5882
SSR,服务端渲染，nuxt3,nuxt,typescript,vue3,vite
Vite-Vue3-TS-ElementPlus-Starter:Vite + Vue3 + TypeScript + ElementPlus +入门
03-04
Vite-Vue3.x-TypeScript-ElementPlus-启动器技术栈 恶毒 Vue 3.x 打字稿 Vue路由器 威克斯 元素加 触控笔 Axios开始吧项目设置npm install# oryarn add编译和热重装以进行开发npm run dev编译并最小化生产npm run ...
Vue3+TS+Vite 入门指南
Moonoly的博客
05-03 1万+
最近尝试上手 Vue3+TS+Vite，对比起 Vue2 有些不适应，但还是真香~ Vue3 带来的变化主要有以下几个方面：
Vue3+ts+threejs+vite项目搭建
qq_45929977的博客
03-20 957
创建vue3+ts+threejs+vite空项目
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
热门推荐
qq_44423029的博客
08-17 4万+
超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
vue3+ts+vite+electron搭建桌面应用
Bennett_G博客
04-04 1704
提示：开发桌面应用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder构建，发现最新版本也才13,Electron最新版本都23了😅😅😅),随着vite的崛起以及ts,我们也需要与时俱进不是吗😃😃😃ts: ^4.9.3。
Vue3+TS入门（详细）
weixin_69203733的博客
12-21 956
mount('#app')：挂载到id为app的中。createApp.(App)：把容器放到根目录中。//是第三行代码创建的这些容器的根目录。（注意：第5行中蓝色波浪线 是因为vue3推荐用ts写，用js写会出现警告提示）App：每一个应用的根组件(目录)//相当于创建一个个容器。'#app' 容器的位置在index.html中第10行。*第6行代码：createApp：是在创建应用(容器)*第11行：引入mian.ts中的东西。*第10行：也就是摆放容器的位置。
Vue3 + Vite + TS 从入门到入土
Bao59的博客
01-25 450
从零开始学习Vue3 + Vite + TS
vue3：vue3+vite+ts+pinia
snowball的博客
09-09 5628
输入名字后，这里出现了几个选项，不清楚都是干啥的，下来研究。经过测试不需要安装sass-loader，安装了会报错。查看url已经有参数了，，查看查询结果，生效，ok。参数要一致，不一致就会报错。问题得到处理，不报错了。
vite+vue3+ts简单例子todolist
jason_renyu的博客
03-01 4786
vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。 本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。 创建项目 使用vite创建 npm init vite@latest 输入项目名 如 vue-todolist vite可以构建多种框架的项目，这里选用vue 选用vue-ts的组合，如果你对ts还不熟，需要
vite_vue3_demo:vite + vue3 + tsx（试验性框架）
03-27
vue3 + vite2 +元素加 比较超前的试验性框架，基于新一代脚手架建造... 目前vue3生态还在逐步建立中... vue2.x项目不建议直接升级vue3。 入门指南 npm run dev npm运行构建 npm运行报告 风格指南 TS（JS）+模板+ ...
vite-ts-tailwind-starter:自以为是的Vite + Vue 3 + TypeScript + Tailwind CSS入门
05-01
Vue 3 Vuex 4商店（完全键入） 打字稿 带有JIT编译器的Tailwind CSS +已预安装以下插件 @tailwindcss/aspect-ratio @tailwindcss/line-clamp @tailwindcss/typography @tailwindcss/forms PostCSS 8 w / post...
美团旅途 coderwhy的vue3+ts入门项目，技术栈vue3 typescript vantui hooks
04-03
本项目是基于 Vue3 的一个入门级示例，旨在帮助开发者了解如何在实际项目中运用 Vue3 的核心概念和技术，如 Composition API、Suspense、Teleport 等。 TypeScript 是一种静态类型的超集，它为 JavaScript 添加了...
python flask+vue3+sqlite 前后端分离 简单个人博客网站项目源码
06-05
flask+vue3+sqlite 前后端分离 简单个人博客网站项目 Vue3采用新的组件式API开发，axios后端接口请求。 flask采用sqlalchemy管理数据库，采用token验证登陆信息。 已实现文章列表显示，文章内容markdown渲染，文章...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1014
本文介绍了电子签名、图片合成、及预览功能
vue3使用递归组件渲染层级结构
weixin_42234899的博客
07-25 449
vue3使用递归组件渲染层级结构
Vue系列面试题
qq_44186810的博客
07-23 886
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
基于NSGA-II的智能车辆换道轨迹规划与优化_查云飞.caj
最新发布
07-31
基于NSGA-II的智能车辆换道轨迹规划与优化_查云飞
vue3+ts+vite
03-31
Vue 3 is the latest version of the popular JavaScript framework Vue.js, which enables developers to build user interfaces and single-page applications. TypeScript is a superset of JavaScript that adds static typing to the language, making it easier to catch errors and write more robust code. Vite is a build tool that enables fast development and optimized production builds. Combining Vue 3, TypeScript, and Vite is a powerful combination for building modern web applications. With Vue 3, developers can take advantage of the new Composition API, which provides a more flexible and powerful way to organize code. TypeScript adds type checking to Vue components and makes code easier to maintain and scale. Vite enables fast development by providing a lightning-fast development server and optimized production builds. Overall, Vue 3, TypeScript, and Vite are a great choice for building modern web applications that are fast, scalable, and easy to maintain.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值