Vue 动画内置组件
Transition 动画效果:star: 匿名使用 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。 以下是最基本用法的示例： 默认CSS class 1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。 2. v-enter-active：进…
Read articleThe archive
The Journal
Notes on frontend development, engineering, and everyday ideas. Find a subject and start reading.
Vue3渲染机制
带编译时信息的虚拟 DOM 静态提升、更新类型标记、树结构打平 虚拟 DOM 在 React 和大多数其他实现中都是纯运行时的：更新算法无法预知新的虚拟 DOM 树会是怎样，因此它总是需要遍历整棵树、比较每个 vnode 上 props 的区别来确保正确性。另外，即使一棵树的某个部分从未改变，还是会在每次重渲染时…
Read article编写跨平台友好的代码
区分生命周期 代码守卫 使用跨平台的 API 只在某一端引入模块 避免交叉请求引起的状态污染 ClientOnly 组件
Read article构建Vite知识体系-项目性能优化
对于项目的加载性能优化而言，常见的优化手段可以分为下面三类: 1. 网络优化。包括 HTTP2、DNS 预解析、Preload、Prefetch等手段。 2. 资源优化。包括构建产物分析、资源压缩、产物拆包、按需加载等优化方式。 3. 预渲染优化，本文主要介绍服务端渲染(SSR)和静态站点生成(SSG)两种手段。…
Read articleKeepAlive 使用及其原理
非活跃的组件将会被缓存，即保存被包裹组件的状态（保活） 在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 内置组件将这些动态组件包装起来： 现在，在组件切换时状态也能被保留了： component 动态组件： 被传给 :is 的…
Read articleSSR 异步数据获取
pinia onServerPrefetch() 钩子 注册一个异步函数，在组件实例在服务器上被渲染之前调用。 类型 详细信息 如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。 这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 示例
Read articleVite Vue & React模版
Vue 3 Vitesse - Opinionated starter template. vite-ts-tailwind-starter - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI. vue-vben-admin - Background man…
Read articleVue 3 深入组件笔记
组件注册 Vue.js 组件基础 Vue.js DOM 模板解析注意事项 大小写区分 HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写。这意味着当你使用 DOM 内的模板时，无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件…
Read articleVue 3 性能优化
分析工具 生产检测： PageSpeed Insights WebPageTest 用于本地开发期间的性能分析： Chrome 开发者工具“性能”面板 Vue 开发者扩展 页面加载 页面加载优化有许多跟框架无关的方面 - 这份 web.dev 指南提供了一个全面的总结。 渲染方式 如果你的用例对页面加载性能很敏感…
Read article前端路由 hash 与 history 差异
储备知识 SPA SPA，即单页面应用(Single Page Application)。所谓单页 Web 应用，就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML 、 CSS 和 J…
Read article自定义 Hook（组合式函数）、指令
自定义 Hook（组合式函数） 官方重新定义了“组合式函数”(Composables)，而不是自定义Hook（React内的定义）。在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。 约定和最佳实践 命名 组合式函数约定用驼峰命…
Read article组件自定义v-model以及自定义修饰符
组件 v-model Vue.js
Read articleNo matching articles
Try another keyword or reset your filters.