首页 > 其他分享 >Vue3+Ts+Vite入门

Vue3+Ts+Vite入门

时间:2024-08-01 14:53:40浏览次数:16  
标签:Ts note 响应 v2 v3 proxy Vue3 diff Vite

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

标签:Ts,note,响应,v2,v3,proxy,Vue3,diff,Vite
From: https://blog.csdn.net/weixin_67455784/article/details/140847289

相关文章

  • 超简单!vue3+vant4+pinia+vue-router+mockjs移动端实现水果商城项目【原创】
    ......
  • 【折腾记录】Ubuntu24.04LTS下安装Windows版微信
    最近装了Win11和Ubuntu双系统,为了能更方便地和朋友交流,遂决定在Ubuntu下安装微信。首先要去网上找教程,经过一番搜索,正当我在wine和deepin-wine之间犹豫不定之时,忽然发现了GitHub上的这个仓库zq1997/deepin-wine据其README描述:deepin-wine环境与应用在Debian/Ubuntu上的移植仓......
  • VUE3 el-Menu + tabs 联动
    我们在项目中会有这种情况,根据点击侧边栏的菜单,来动态实现右侧tabs的增减,那么这种效果怎么实现呢1.模板部分<el-menu:collapse="isCollapse"active-text-color="#ffd04b"background-color="#242424"class="el-menu-vertical-demo":default-active="onRoutes&qu......
  • 在AWS Lightsail建立WordPress Multisite & Route 53 subdomains & Hexo Blog & WordP
    1.0前言玩Startup比賽,因需高效快速地做POC原型產品,所以利用AWS云端服務來更快地開發。你會學到:LightSail建立WordpressmultisiteRoute53註冊WordpressSubdomains&GithubCuostomDomainLightSailCustomDomain&SSLHexo快速搭建GihubPages博客+ Route53 Custom......
  • 60.requests模块
    【一】爬虫初识1)概念爬虫是一种自动化获取互联网数据的技术,通过模拟浏览器行为,向目标网站发送请求并获取响应,然后解析响应中的数据2)工作原理发送HTTP请求,模拟浏览器行为,获取网站的响应,并解析响应中的数据3)分类通用爬虫:对整个互联网进行爬取定向爬虫:只针对特定的网站进......
  • 4、vue3总组件/入口文件/路由设置
    1、安装element-plus依赖包npmielement-plus 2、项目主组件修改(App.vue)<scriptlang="ts"setup>import{ElConfigProvider}from'element-plus'import{ElDialog}from"element-plus"//将ElementPlus的语言设置为中文importzhCnfrom&......
  • Vue3选择框选择不同的值输入框刷新变化
    场景:新增的时候根据选择框的不同来改变输入信息例如:实现方式:这个输入框我做的是业务字典实际的值是0和1,在点击选择框的时候用v-if判断选择的值是1还是0,如果是0则是一个输入信息,如果是1则又是另一个输入信息。实现代码片: <el-row:span="24"v-if="formData.courseTyp......
  • SpringCloud+Vue3主子表插入数据(芋道)
    目的:多表联查获取到每个班级里面所有的学生上课的信息。点击消课插入到消课主表和消课子表,主表记录班级信息,消课人员信息,上课时间。子表记录上课学员的信息,学员姓名、手机号、班级名称、班级类型、上课时间、老师名称前端:<template><Dialog:title="dialogTitle"v-mode......
  • Tokitsukaze and Two Colorful Tapes
    看这篇题解就好了解释一下为什么山谷=山峰证明加强结论:对于每个环,山谷=山峰证:对于任何一种方案,这种方案下的任意一个环,我们断开某条边,他就会长成这个样子:起点和终点连起来,不难发现是山谷=山峰再假设我们已经定下了山谷和山峰的个数\(a\),那么\(2(x-y)\)的上界就是\([1,n]\)中......
  • 开源语音合成库 coqui TTS 使用记录
    1介绍功能:可以克隆声音;可以转换声音。支持多语言。GitHubhttps://github.com/coqui-ai/TTS在线试玩(效果不如本地demo)https://huggingface.co/spaces/coqui/xtts2本地搭建demo搭建环境condacreate-ncoquipython=3.10condaactivatecoquipipinstallTTS(可以自动......