![](https://img-blog.csdnimg.cn/direct/215d51647c2c48af90c5f1db515cfb82.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3 学习路程
文章平均质量分 66
这不是从零开始,是在vue2的基础上学习了vue3
gitee地址
https://gitee.com/Intostars/vue/tree/master/Vue3
新茶十九
且将新火试新茶,诗酒趁年华
展开
-
vue3+ts项目中.env配置环境变量与情景配置
就是在编码过程中应用这些自定义环境变量的时候,给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件,include配置项加入文件:(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。原创 2024-07-03 14:38:59 · 1145 阅读 · 0 评论 -
vue3项目图片压缩+rem+自动重启等plugin使用与打包配置
不作为软件包的一部分来安装。您必须手动安装它们并将其添加为开发依赖项。这是一个设计决策,所以如果您只想使用。图片都需要写一次相对路径,并且对。图片进行压缩优化也不够方便。一个支持将你的样式表中的。文件内部的代码进行转换。资产,则可以选择跳过安装。图片的话,和图片压缩。原创 2024-07-03 14:34:06 · 541 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(十)Proxy响应式原理
Proxy。原创 2024-01-16 08:47:23 · 802 阅读 · 0 评论 -
Vue学习计划-Vue3--Vue3新组件
受到了影响,不会以浏览器窗口为基准了,这就不会满足我们的需求,此时就需要用到。比如弹窗,我们在父组件中引入了弹窗,但是由于父的容器加了特殊的。原创 2024-01-15 08:36:59 · 536 阅读 · 0 评论 -
Vue学习计划-Vue3--其他API:shallowRef与shallowReactive、readonly与shallowReadonly、toRaw与markRaw、customRef
通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式。原创 2024-01-14 14:02:46 · 998 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(九)slot插槽
插槽:简单说就是父组件内部使用了子组件,但是子组件内部某些结构需要使用者自行定义,此时就需要用到插槽实现。数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。组件中,但使用数据所遍历出来的结构由。原创 2024-01-13 20:36:08 · 485 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(八)组件通信
注意:子组件中不用编写任何东西,是不受到任何打扰的。被子组件自己“消费”了)(相当于:组件中没被。提供的数据名称,第二个参数是默认值(假如未找到。中声明的属性(可以认为声明过的。接收两个参数,第一个参数是。【第二步】孙组件中使用。提供的数据名称就触发)原创 2024-01-12 08:20:44 · 2826 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(七)pinia
1. 安装`pinia`: `npm install pinia`\/`yarn add pinia` 2. 第二步:操作`src/main.ts` ``` import { createApp } from 'vue' import App from './App.vue' /* 引入createPinia,用于创建pinia */ import { createPinia } from 'pinia'原创 2024-01-10 08:38:51 · 635 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(六)路由
缺点: 后期项目上线,需要服务端配合处理路径问题,否则刷新会有。优点: 兼容性更好,因为不需要服务端处理路径。变成了两个`hooks。原创 2024-01-08 08:24:54 · 1013 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(五)生命周期、自定义Hook
Hook什么是hook?————本质是一个函数,把setup函数中使用的进行了封装,类似与Vue2中的mixin自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂hooks文件夹中,每一个功能的hook文件期望是usexxx命名的hook的出现诠释了的终极意义示例代码useSum.ts中内容如下:})})useDog.ts中内容如下:try{getDog()})组件中具体使用:<template><div>原创 2024-01-06 08:23:17 · 1088 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(四)标签的ref属性、props父子通信
用在子组件上,父组件想要访问子组件内的数据,需要使用。原创 2024-01-05 08:18:54 · 928 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(三)computed计算属性、watch监听、watchEffect函数
定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。定义的【基本类型】数据:直接写数据名即可,监视的是其。定义的【对象类型】数据, 默认开启深度监视。作用:根据已有数据计算出新数据(和。定义的【对象类型】数据的。原创 2024-01-04 08:19:20 · 974 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(二)ref、reactive和toRefs、toRef
f是将变量转换成ObjectRefImpl类型的数据,等同于。定义的响应式对象属性过多,解构是比较好的选择,我们不需要。b. 我们想要把解构的变量也变成响应式的,此时就需要用到。定义的响应式对象内的每一项都转换为响应式数据,我们打开浏览器看下控制台,主要看下两个输出,,所以解构出来的变量不是响应式的,定义的响应式数据,所以修改我们需要。a. 但是单纯的结构,相当于。我们在模板中就可以直接使用。定义对象类型的响应式数据和。原创 2024-01-03 08:21:12 · 738 阅读 · 0 评论 -
Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup
可以用函数的方式,更加优雅的组织代码,让相关公告的代码更加有序的组织在一起。,不便于维护和复用Composition API。原创 2024-01-02 08:29:18 · 746 阅读 · 0 评论 -
Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目
性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%源码的升级使用Proxy代替实现响应式重写虚拟DOM的实现和拥抱TypeScriptVue3可以更好的支持TypeScript新的特性(组合Apisetupref和reactivecomputed与watch新的内置组件:FragmentTeleportSuspense其他改变:新的生命周期钩子data选项应始终被声明为一个函数移除keyCode支持作为v-on的修饰符。原创 2023-12-31 22:48:21 · 619 阅读 · 0 评论