标签: Vue

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 分钟

🚀VuePress-theme-hope2 搭建个人网站，万字长文保姆级教程，包含自动部署、评论、搜索等功能

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

我的博客地址：https://mmdctjj.github.io/blogs2/

对应仓库地址：https://github.com/mmdctjj/blogs2

萌萌哒草头将军大约 9 分钟

Vue3使用hook封装常见的几种异步请求函数场景，让开发更加丝滑🚀🚀🚀

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

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

🚀 立即请求函数

我们期望的场景是，

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

萌萌哒草头将军大约 4 分钟

分享几个上千✨的React开源库助你玩转React

theme: channing-cyan
highlight: atom-one-dark

文章同步在公众号：萌萌哒草头将军，欢迎关注。

今天分享几个上千⭐的库，助你玩转React学习和开发。

🚀 React学习库

💎 reactjs-interview-questions

git地址：https://github.com/sudheerj/reactjs-interview-questions

萌萌哒草头将军大约 2 分钟

🚀🚀vue3自定义指令实践

文章首发公众号：萌萌哒草头将军，欢迎关注

🚀 关键接口介绍

最近想体验下自定义指令功能，看了看文档和 vue2 差异不大，语法如下：

const myDirective = {
// 在绑定元素的 attribute 前 
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) 
{ // 下面会介绍各个参数的细节 }, 
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {} }

萌萌哒草头将军大约 5 分钟

Vue3使用hook封装媒体查询和事件监听，使Vue的开发更加丝滑🚀🚀🚀

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

js中媒体查询的主要方法是使用window对象下的matchMedia对象，查询语句和CSS媒体查询一样。

封装媒体查询

首先我们先看监听系统主题色的例子

首先创建媒体查询对象
根据查询结果设置对应的值
然后建立监听事件，并且在退出时取消监听

export const useTheme = () => {

  // 首先创建媒体查询对象
  const themeMedia = matchMedia("(prefers-color-scheme: light)")
  // 根据查询结果设置对应的值
  const theme = ref(themeMedia.matches ? 'light' : 'dark')

  const onChange = (e: MediaQueryListEvent) => theme.value = e.matches ? 'light' : 'dark'
  
  watchEffect((onCleanup) => {
    //  然后建立监听事件
    themeMedia.addEventListener('change', onChange)
    // 并且在退出时取消监听
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })

  return theme;
}

萌萌哒草头将军大约 3 分钟

🎉一个demo体验Vue3.3所有新功能🎉

最新文章发布在公众号：萌萌哒草头将军，个人：SunBoy_mmdctjj，欢迎关注，最近关注有🎁，送五本JavaScript的书~

Vue3.3已经发布一个月了，今天我和大家体验下最新功能

💎 准备工作

🚗 创建项目并运行

创建完项目后记得下载最新的包

// 创建
npm create vite vue-demo --template vue-ts
// 下载依赖
cd vue-demo
npm i
// 更新到最新版本
npm i vue@3.3
// 运行
npm run dev

萌萌哒草头将军大约 3 分钟

跳转到:

alien-signals 基本用法

前言

准备工作

1.生成密钥对