跳至主要內容
🍍Pinia党福音,🍍Pinia伴侣:🍍pinia-colada

前言

pinia-colada 是一个基于 Pinia 的状态管理库的插件。官方的功能介绍如下:

  • ⚡️ 自动缓存:智能的客户端缓存,支持请求去重
  • 🗄️ 异步状态管理:轻松处理任何异步状态
  • 🔌 插件系统:强大的插件系统
  • 乐观更新:轻松实现乐观更新
  • 💡 合理的默认配置:提供合理的默认值,同时支持完全自定义
  • 开箱即用的插件:一组可组合的函数,用于处理数据获取
  • 📚 TypeScript 支持:完全支持 TypeScript
  • 💨 小体积:基础大小约 2kb,完全支持 Tree Shaking
  • 📦 零依赖:除了 Pinia 外,没有任何其他依赖
  • ⚙️ SSR 支持:开箱即用的服务端渲染支持

萌萌哒草头将军大约 4 分钟前端Vue
alien-signals为啥可以打败proxy🚀🚀🚀

上篇文章主要是对尤雨溪在 2025 vue.js nation 大会的分享内容总结。分享中提到 vue3.6 将会使用 alien-signals 替换 proxy 响应式系统。

今天我们仔细盘盘 alien-signals

alien-signals 基本用法

alien-signals 是一个非常轻量级的响应式信号系统库,提供了标准的响应式三件套:signalcomputedeffect


萌萌哒草头将军大约 10 分钟前端Vue
vuePress-thmee-hope2部署服务器教程

前言

这篇文章主要是完善上篇文章部署服务器的部分,由于最近刚买了服务器,所以才有了今天的内容。废话不多说,下面是正文。

文章同步在公众号:萌萌哒草头将军,欢迎关注

准备工作

1.生成密钥对

在服务器或者其他电脑生成一堆ssh密钥对,命令如下:


萌萌哒草头将军大约 4 分钟前端Vue
🚀超详细解读vue3.2源码——组件渲染流程

欢迎关注我的公众号:萌萌哒草头将军

入口->全局初始化->生成 vnode->挂载

入口函数

export const createApp = (...args) => {
  // 1.创建实例
  const app = ensureRenderer().createApp(...args);

  // 2. 重写实例的 mount 方法
  const { mount } = app;
  app.mount = (containerOrSelector) => {
    const container = normalizeContainer(containerOrSelector);
    if (!container) return;

    const component = app._component;
    if (!isFunction(component) && !component.render && !component.template) {
      // __UNSAFE__
      // Reason: potential execution of JS expressions in in-DOM template.
      // The user must make sure the in-DOM template is trusted. If it's
      // rendered by the server, the template should not contain any user data.
      component.template = container.innerHTML;
      // 2.x compat check
      if (__COMPAT__ && __DEV__) {
        for (let i = 0; i < container.attributes.length; i++) {
          const attr = container.attributes[i];
          if (attr.name !== "v-cloak" && /^(v-|:|@)/.test(attr.name)) {
            compatUtils.warnDeprecation(
              DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
              null
            );
            break;
          }
        }
      }
    }

    // clear content before mounting
    container.innerHTML = "";
    const proxy = mount(container, false, resolveRootNamespace(container));
    if (container instanceof Element) {
      container.removeAttribute("v-cloak");
      container.setAttribute("data-v-app", "");
    }
    return proxy;
  };

  return app;
};

萌萌哒草头将军大约 7 分钟前端Vue
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀

文章同步在公众号:萌萌哒草头将军,欢迎关注

今天继续上次的内容,使用hook封装几种的异步请求函数场景。

🚀 立即请求函数

我们期望的场景是,

  • 初始化一个请求函数,然后根据初始参数,立即发送请求
  • 返回请求结果,并且返回请求回调函数,方便我们根据新的参数再次调用
  • 要求返回值包含加载中状态,错误信息以及正常的数据类型。

萌萌哒草头将军大约 4 分钟前端JavaScriptVue
2