Vue 及其周边生态
文章平均质量分 58
Vue 及其周边生态
秀秀_heo
一个学习前端开发的大学生,博客为自己的学习笔记,仅供个人学习使用。
展开
-
用户头像(图片文件)上传(Vue + nodejs 前后端)
先计算原本有没有图片,有则展示原图片的 url,没有则展示 icon点击上传组件从本地选取图片,单个图片上传可以控制选取后自动上传和之后手动上传当统一手动上传时,选择完图片之后将选择的图片file文件转换为URL地址进行前端页面的回显,并将其原本file格式的文件赋值给form表单内容对象,不修改头像默认使用原图片的 url将form表单内容对象转化为 FormData 的格式,并设置 FormData 请求头,作为参数传递给后端。原创 2024-02-19 17:43:37 · 1634 阅读 · 1 评论 -
【Vue】Vue3 的初始化过程
核心流程是patch,然后Patch有一个分支,分别处理组件和浏览器原生标签。分别对应processElement和processComponent,从上到下插入,知道处理完成,才把顶层div插入到浏览器。“一次性渲染,而不是一个个一个渲染”原创 2024-09-26 22:10:41 · 163 阅读 · 0 评论 -
【Vue】为什么 Vue 不使用 React 的分片更新?
第三,React 为了解决更新的时候进行过多计算的问题引入了时间分片,但同时又带来了额外的计算开销,就是任务协调的计算,虽然 React 也使用最小堆等的算法进行优化,但相对 Vue 还是多了额外的性能开销,因为 Vue 没有时间分片,所以没有这方面的性能担忧。第一,首先时间分片是为了解决 CPU 进行大量计算的问题,因为 React 本身架构的问题,在默认的情况下更新会进行很多的计算,就算使用 React 提供的性能优化 API,进行设置,也会因为开发者本身的问题,依然可能存在过多计算的问题。原创 2024-09-26 22:02:56 · 199 阅读 · 0 评论 -
Composition API 与 React Hook 的区别
从 React Hook 的实现角度看,React Hook 是根据 useState 调用的顺序来确定下一次重渲染时的 state 是来源于哪个 useState,所以出现了以下限制:而 Composition API 是基于 Vue 的响应式系统实现的,与 React Hook 的相比:原创 2024-09-26 21:20:19 · 281 阅读 · 0 评论 -
commitlint
当我们 commit 提交信息时,就不能再随意写了,必须是 git commit -m ‘fix: xxx’ 符合类型的才可以,对于我们的 commit 信息,也是有统一规范的,不能随便写,要让每个人都按照统一的标准来执行,我们可以利用。在生成的commit-msg文件中添加下面的命令。信息的时候,前面就需要带着下面的。中配置scripts命令。配置结束,现在当我们填写。原创 2024-01-25 16:05:17 · 619 阅读 · 0 评论 -
一文拿下长列表渲染(分页、懒加载、虚拟列表)
最终测试,除了普通长列表渲染,其他渲染都使得 10w 条数据渲染时间由 4s 变为 0.4 s。以下长列表渲染均通过代码示例进行讲解。虚拟列表库使用(Vue3版本)原创 2024-09-05 15:57:03 · 852 阅读 · 0 评论 -
【Vue】Vue3.5 新特性
useTemplateRef 是对 ref 对 dom 获取或者组件实例的一个改动,以便区分使用 ref 获取响应式数据和 dom。原创 2024-09-04 10:38:52 · 776 阅读 · 1 评论 -
【Pinia】快速入门及数据持久化
只会将数据(state,getters,插件添加的状态)做转换响应式(proxy代理),不会对方法进行响应式。pinia 的解构不具有 响应式。因此为了解决这个问题,我们需要使用 storeToRefs。其中 persist 为持久化插件,刷新页面 store 数据不丢失。// 调用useXxxxxStore得到对应的store。中的数据,需要经过处理后再使用时,可以使用。第二种修改方式: $patch 批量修改。第三种修改方式: $store 直接覆盖。第一种修改方式,直接修改。第四种修改方式:借助。原创 2023-12-31 09:15:08 · 632 阅读 · 0 评论 -
【Nuxt】编写接口和全局状态共享
pinia/nuxt会处理state 同步问题,比如不需要关心序列化或XSS攻击等问题。原创 2024-08-07 21:48:49 · 441 阅读 · 0 评论 -
【Nuxt】发送请求
以下方式只能在 setup / 生命周期钩子 里面使用。原创 2024-08-06 20:58:13 · 313 阅读 · 0 评论 -
【Nuxt】自定义插件和生命周期
方式一:app.vue// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)// 方式一:})// vue 实例创建的时候 插件会被注册return {provide: {})插件注册顺序文件加数字来确定,比如:1.prive.ts。原创 2024-08-06 14:08:17 · 397 阅读 · 0 评论 -
【Nuxt】Layout 布局和渲染模式
此外 NuxtLayout 还有一个属性 name, 可以指定某个样式作为内部 NuxtPage 的布局,但是它的优先级要高于 definePageMeta.layout。这样所有页面都使用了 默认布局,slot 插槽里面内容是路由变化带来的。所以如果给上述加上 name,则 login 页面的自定义布局失效。下面,其他自定义的布局也在写在 layouts 目录下。然后默认的布局 需要 写在。原创 2024-08-06 10:00:40 · 498 阅读 · 0 评论 -
【Nuxt】路由中间件和 definePageMeta
在页面中使用definePageMeta函数的 middleware 属性定义,可监听局部路由。Nuxt 提供了一个可定制的路由中间件,用来监听路由的导航,包括:局部和全局监听(支持再服务器和客户端执行)definePageMeta是一个编译器宏,可以用它为位于pages/目录中的页面组件设置元数据。我们也可以自定义 404 页面,只需在根目录下创建一个 error.vue 的组件即可。在middleware目录下定义,并会自动加载中间件。命名规范(kebab-case)优先级最高,支持两端。原创 2024-08-05 15:57:48 · 640 阅读 · 0 评论 -
【Nuxt】404 页面 和 嵌套路由
router.params 也可以获取动态参数 slug,为一个数组,比如上面的 [‘about’, ‘fdsf’, ‘fdsfs’, ‘fsdfsfsdf’, ‘…此时包含三个页面组件:/about, /about/about-fdsfsdf, /about/fdsf/fdsfs/fsdfsfsdf/…具体 404 路由页面可以写成某个路径下的 404,也可以直接写在 pages 下,作为根目录的 404。原创 2024-08-05 09:59:45 · 382 阅读 · 0 评论 -
【Nuxt】编程式导航和动态路由
除了可以使用navigateTo,还支持 useRouter(用法相同) 进行编程式导航。通过 useRoute() 可以获取动态参数(route.params)。查询字符串参数通过 route.query 获取。原创 2024-08-05 08:35:00 · 359 阅读 · 0 评论 -
【Nuxt】约定式路由和 NuxtLink
【代码】【Nuxt】约定式路由和内置组件。原创 2024-08-04 22:00:34 · 393 阅读 · 0 评论 -
【Nuxt】资源导入
public 通常用于存放静态资源。assets 通常用于存放样式表、字体或者 svg 的资源。原创 2024-08-04 20:33:21 · 292 阅读 · 0 评论 -
【Nuxt】内置组件和全局样式使用
以上的情况配置中导入了 css 文件和 scss 全局样式文件,在单个组件中导入了 全局变量文件。如果不在单个组件中导入 全局变量文件,也是可以在配置中导入的。原创 2024-08-04 10:31:27 · 611 阅读 · 0 评论 -
【Nuxt】配置
实际项目中会将这两种方法合并,如果存在相同的,则 app.config.ts 文件的优先级更高。方法四:直接在 app.config.ts 中(defineAppConfig)配置。来获取,项目运行会自动读取该文件。这里的 appKey 变量值就会变为: ‘DDDDDD’。方法一:在 nuxt.config.ts 中进行配置。而且上述的配置字符串也支持动态替换(ref)。内置组件形式的 app 配置是三者里面最高的。可以使用 useAppConfig 获取。env 环境变量的优先级更高,如果使用。原创 2024-08-03 10:56:18 · 465 阅读 · 0 评论 -
【Nuxt】初识 Nuxt 和目录说明
Nuxt3 支持 Vue3 及其周边生态,提供前后端功能,支持 CSR(SPA),SSR,SSG 渲染模式的应用。混合渲染(每条路由缓存策略)- SSR+CSR+SSG。通用渲染(服务器端渲染和水合) - SSR。仅客户端渲染(SPA) - CSR。全静态站点生成 - SSG。原创 2024-08-03 10:01:16 · 604 阅读 · 0 评论 -
【Nuxt】服务端渲染 SSR
服务器端渲染全称是:Server Side Render,在服务器端渲染页面,并将渲染好HTML返回给浏览器呈现。SSR应用的页面是在服务端渲染的,用户每请求一个SSR页面都会先在服务端进行渲染,然后将渲染好的页面,返回给浏览器呈现。构建SSR应用常见的库和框架有:Vue Nuxt, React Next.js等,SSR应用也称同构应用。原创 2024-08-02 19:18:00 · 370 阅读 · 0 评论 -
【Vue】权限控制
用户登录后,服务端返回一个权限树(用树形结构呈现权限数据),然后我们去解析这个树形结构,得到我们需要的路由表(动态路由对象),本质上就是一个由路由对象为元素的数组。然后通过 vue 中的动态路由,也就是 addRoutes,动态的添加路由。最后根据路由去渲染多级菜单栏。服务端返回的权限树中包含了指定页面下指定按钮的数据,可以通过 v-if 或者 disable 来控制按钮权限。原创 2024-07-29 11:45:48 · 1006 阅读 · 0 评论 -
【Vue2源码】v-model 双向绑定
/ // 这里需要改变 this 的指向,否则获取不到 $data。原创 2024-07-19 11:07:53 · 278 阅读 · 0 评论 -
【Vue2源码】视图更新
/ // 这里需要改变 this 的指向,否则获取不到 $data。原创 2024-07-18 17:00:45 · 266 阅读 · 0 评论 -
【Vue2源码】data 劫持
/ // 这里需要改变 this 的指向,否则获取不到 $data。原创 2024-07-18 16:08:45 · 225 阅读 · 0 评论 -
【Vue2源码】添加事件
/ // 这里需要改变 this 的指向,否则获取不到 $data。原创 2024-07-18 12:48:41 · 391 阅读 · 0 评论 -
【Vue2源码】生命周期
/ 需要改变 this 的指向,否则获取不到 $data。原创 2024-07-18 11:48:04 · 132 阅读 · 0 评论 -
【Vue2源码】模板解析
下面只是一个最简单的类源码,主要便于理解vue 如何进行模板解析。原创 2024-07-18 11:19:01 · 195 阅读 · 0 评论 -
【Webpack】使用 Webpack 构建 Vue3+TS 项目
shim.d.ts 文件是一个类型声明文件,用于告诉 TypeScript 编译器如何处理 Vue 的单文件组件(SFC)和其他自定义模块。为 Vue 的单文件组件和其他非 TypeScript 模块提供类型信息,以便在 TypeScript 项目中使用它们时能够正确地进行类型检查和代码提示。webpack5 以上的版本需要安装 webpack-cli。webpack-dev-server 开启一个本地服务。原创 2024-06-14 20:16:09 · 753 阅读 · 0 评论 -
【Vue】性能优化
从另一方面来说,由于可以通过保持属性引用稳定来避免子组件的重渲染,那么我们应该细分组件来尽量避免多余的渲染(只要组件对应的对象 地址不发生改变,则不会重新渲染)。当使用v-mode1绑定一个表单项时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重渲染(rerender),这会带来一些性能的开销。我们可以通过使用lazy或不使用v-model的方式解决该问题,但要注意,这样可能会导致在某一个时间段内数据和表单项的值是不一致的。但是这种也会存在问题,就是数据不是实时的。原创 2024-05-22 12:06:42 · 592 阅读 · 0 评论 -
【Vue】computed 和 methods 的区别
在使用时,computed 当做属性使用,而 methods 则当做方法调用computed 可以具有 getter 和 setter,因此可以赋值,而 methods 不行computed 无法接收多个参数,而 methods 可以computed 具有缓存,而 methods 没有。原创 2024-05-22 12:06:10 · 675 阅读 · 0 评论 -
【Vue】diff 算法
当组件创建和更新时,vue均会执行内部的update函数,该函数使用render函数生成虚拟dom树,将新旧两树进行对比,找到差异点,最终更新到真实dom。对比差异的过程叫diff,Vue在内部通过一个叫patch的函数完成该过程。在对比时,Vue采用深度优先、同层比较的方式进行比对。在判断两个节点是否相同时,vue是通过虚拟节点的key和tag来进行判断的。具体来说,首先对根节点进行对比,如果相同则将旧节点关联的真实 dom 的引用挂到新节点上,然后根据需。原创 2024-05-22 12:05:40 · 565 阅读 · 0 评论 -
【Vue2】详解 Vue2 响应式原理
数据变化,视图会自动变化。侵入式就是调用一些api使得当数据变化的时候,视图会跟着变化。然后Vue使用的是非侵入式。响应式数据的目标就是,当对象本身或者对象属性发生变化时,就会运行一些函数,比如 render 函数。基础使用:封装:接下来就要上强度了(😥呜呜呜~)。这个方法像上面讲的一样,就是用来做数据劫持的。用observe方法监视子节点的变化(数据劫持),就是为子节点设置对象属性,而这个属性其实就是Observer类的实例对象。index.jsobserve.js为传入的对象配置监听(劫原创 2024-03-21 21:01:13 · 2440 阅读 · 1 评论 -
【Vue2】slot 插槽全家桶
v-slot写起来太长,vue给我们提供一个简单写法。一个组件内有多处结构,需要外部传入标签,进行定制。外部使用组件时,不传东西,则slot会显示后备内容。外部使用组件时,传东西了,则slot整体会被换掉。插槽只有两种,作用域插槽不属于插槽的一种分类。给 slot 标签, 以 添加属性的方式传值。所有添加的属性, 都会被收集到一个对象中。接收,默认插槽名为 default。定义slot 插槽的同时, 是可以。插槽提供后备内容(默认内容)。封装组件时,可以为预留的。,所以需要使用具名插槽。原创 2024-03-14 19:23:38 · 858 阅读 · 0 评论 -
【Vue2】v-model
可以看到 .sync 和 v-model 所能达到的效果是一样的,应用场景:封装弹框类的基础组件, visible属性 true显示 false隐藏。// 将默认的 prop 名 value 改为 title。// 注意 template 代码中也要修改为 title。// 将默认的事件名 input 改为 change。// 默认接收一个名为 value 的 prop。原创 2024-03-14 18:49:55 · 745 阅读 · 0 评论 -
【Vue2】组件通信
当然,子组件可以通过 inheritAttrs: false 进行配置,禁止将 attribute 附在子组件的根元素上,但仍然可以通过。父组件传递一些属性到子组件中,但是子组件并没有声明这些属性,则它们成为 attribute ,这些属性直接附在子元素的根元素上。此时父组件的事件会直接挂载到子组件的根元素上,所以点击子组件根div 会打印 1。子组件的根元素可以合并自身的和父元素传递过来的 class 和 style。通过父组件的两个事件控制子组件数据和视图变化。用于获取当前组件的父组件和子组件。原创 2024-03-14 17:27:12 · 545 阅读 · 0 评论 -
【Vue2】指令修饰符和 v-bind 控制样式
通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码。原创 2024-03-14 09:21:16 · 277 阅读 · 0 评论 -
【Vue3】函数式编程(h 函数)
h 函数的原理就是 createVNode。可以使用 h 函数封装一些小组件。setup返回的render函数优先级高于template。原创 2024-03-02 17:11:28 · 494 阅读 · 2 评论 -
【Vue3】全局切换字体大小
发现刷新后失效,此时我们可以保留修改到localStorage中。如果想要全局修改颜色,底层也是一样的道理。原创 2024-03-02 14:20:51 · 1727 阅读 · 0 评论 -
【Vue3】PostCss 适配
利用插件进行 px(设计稿)=> viewport。vite 内置了 PostCss。原创 2024-03-02 14:05:53 · 911 阅读 · 0 评论