Site updated: 2023-12-30 23:40:28

u1in · Dec 30, 2023 · d83f0d7 · d83f0d7
1 parent 35d5479
commit d83f0d7
Show file tree

Hide file tree

Showing 8 changed files with 335 additions and 11 deletions.
diff --git a/2023/12/24/搭建Vue3-JSX项目/index.html b/2023/12/24/搭建Vue3-JSX项目/index.html
@@ -64,10 +64,10 @@ <h1 class="title">
     <hr>
   </header>
   <div class="post-content">
-    <h1 id="搭建-Vue3-JSX-函数式组件开发"><a href="#搭建-Vue3-JSX-函数式组件开发" class="headerlink" title="搭建 Vue3 + JSX + 函数式组件开发"></a>搭建 Vue3 + JSX + 函数式组件开发</h1><blockquote>
+    <blockquote>
 <p>一种更加方便的组件开发方式</p>
 </blockquote>
-<h2 id="0-配置-Vite-对-JSX-的支持"><a href="#0-配置-Vite-对-JSX-的支持" class="headerlink" title="0.配置 Vite 对 JSX 的支持"></a>0.配置 Vite 对 JSX 的支持</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm create vite@latest</span><br><span class="line"><span class="built_in">cd</span> vite-project</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>
+<h2 id="0-配置-Vite-对-JSX-的支持"><a href="#0-配置-Vite-对-JSX-的支持" class="headerlink" title="0. 配置 Vite 对 JSX 的支持"></a>0. 配置 Vite 对 JSX 的支持</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm create vite@latest</span><br><span class="line"><span class="built_in">cd</span> vite-project</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>
 
 <p>将项目跑起来之后进入项目中配置 vite 对于 jsx 的支持，根据<a target="_blank" rel="noopener" href="https://cn.vitejs.dev/guide/features.html#jsx">官方文档</a>的说明，下载<a target="_blank" rel="noopener" href="https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx">@vitejs&#x2F;plugin-vue-jsx</a>插件。</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev @vitejs/plugin-vue-jsx</span><br></pre></td></tr></table></figure>
@@ -76,7 +76,7 @@ <h2 id="0-配置-Vite-对-JSX-的支持"><a href="#0-配置-Vite-对-JSX-的支
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&quot;vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&quot;@vitejs/plugin-vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> vueJsx <span class="keyword">from</span> <span class="string">&quot;@vitejs/plugin-vue-jsx&quot;</span>; <span class="comment">// 引入插件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="title function_">vue</span>(), <span class="title function_">vueJsx</span>()], <span class="comment">// 使用插件</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
 
 <p>至此项目配置 JSX 支持完毕。</p>
-<h2 id="1-调整开发方式"><a href="#1-调整开发方式" class="headerlink" title="1.调整开发方式"></a>1.调整开发方式</h2><h3 id="1-1-调整-SFC-为-JSX"><a href="#1-1-调整-SFC-为-JSX" class="headerlink" title="1.1 调整 SFC 为 JSX"></a>1.1 调整 SFC 为 JSX</h3><p>配置了 JSX 之后，我们编写组件不再使用.vue 结尾，即不再编写 SFC 组件。以下是一个 Vue3 函数式组件的示例</p>
+<h2 id="1-调整开发方式"><a href="#1-调整开发方式" class="headerlink" title="1. 调整开发方式"></a>1. 调整开发方式</h2><h3 id="1-1-调整-SFC-为-JSX"><a href="#1-1-调整-SFC-为-JSX" class="headerlink" title="1.1 调整 SFC 为 JSX"></a>1.1 调整 SFC 为 JSX</h3><p>配置了 JSX 之后，我们编写组件不再使用.vue 结尾，即不再编写 SFC 组件。以下是一个 Vue3 函数式组件的示例</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* App.jsx */</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineComponent &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">App</span> = <span class="title function_">defineComponent</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>App<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
 
 <p>其中 defineComponent 接受一个函数作为组件初始化函数，具体详看文档<a target="_blank" rel="noopener" href="https://cn.vuejs.org/api/general.html#function-signature">defineComponent</a>。</p>
@@ -115,7 +115,7 @@ <h3 id="1-6-HOC"><a href="#1-6-HOC" class="headerlink" title="1.6 HOC"></a>1.6 H
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// HOC.js</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineComponent, h, useAttrs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">HOC</span> = (<span class="params">Element</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> <span class="title class_">Wrapper</span> = <span class="title function_">defineComponent</span>(<span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> attrs = <span class="title function_">useAttrs</span>();</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span></span><br><span class="line">      <span class="title function_">h</span>(<span class="title class_">Element</span>, &#123;</span><br><span class="line">        ...attrs,</span><br><span class="line">        <span class="attr">msg</span>: <span class="string">&quot;劫持msg&quot;</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">// 【关键】设置不允许继承，不然props还是会挂到劫持组件的attr中</span></span><br><span class="line">  <span class="title class_">Wrapper</span>.<span class="property">inheritAttrs</span> = <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="title class_">Wrapper</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="variable constant_">HOC</span>;</span><br></pre></td></tr></table></figure>
 
 <p>如上，我在 APP 组件中引入 Foo 组件，Foo 组件受到 HOC.js 的劫持，其中 props 中的 msg 会被篡改成”劫持 msg”。<br>HOC可以实现很多功能，在开发中很方便。</p>
-<h2 id="2-函数式组件"><a href="#2-函数式组件" class="headerlink" title="2 函数式组件"></a>2 函数式组件</h2><p>函数式组件就是使用函数编写的一种组件，组件由一个函数构成，接收 props，返回 vnode。在 React 中通过 React Hook 可以编写出很多功能强大的组件。<strong>但是在 Vue 中，函数式组件没有生命周期，无法使用 Vue 的 Hooks。</strong></p>
+<h2 id="2-函数式组件"><a href="#2-函数式组件" class="headerlink" title="2. 函数式组件"></a>2. 函数式组件</h2><p>函数式组件就是使用函数编写的一种组件，组件由一个函数构成，接收 props，返回 vnode。在 React 中通过 React Hook 可以编写出很多功能强大的组件。<strong>但是在 Vue 中，函数式组件没有生命周期，无法使用 Vue 的 Hooks。</strong></p>
 <p>以下是一个函数式组件的例子</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.jsx</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>App<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
 
@@ -163,7 +163,7 @@ <h2 id="4-结束语"><a href="#4-结束语" class="headerlink" title="4. 结束
 
   <div id="toc" class="toc-article">
     <strong class="toc-title">目录</strong>
-    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA-Vue3-JSX-%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91"><span class="toc-text">搭建 Vue3 + JSX + 函数式组件开发</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#0-%E9%85%8D%E7%BD%AE-Vite-%E5%AF%B9-JSX-%E7%9A%84%E6%94%AF%E6%8C%81"><span class="toc-text">0.配置 Vite 对 JSX 的支持</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E8%B0%83%E6%95%B4%E5%BC%80%E5%8F%91%E6%96%B9%E5%BC%8F"><span class="toc-text">1.调整开发方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E8%B0%83%E6%95%B4-SFC-%E4%B8%BA-JSX"><span class="toc-text">1.1 调整 SFC 为 JSX</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E8%B0%83%E6%95%B4-css-%E7%9A%84%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="toc-text">1.2 调整 css 的引入方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E5%BC%95%E5%85%A5-less"><span class="toc-text">1.3 引入 less</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-%E8%B0%83%E6%95%B4-less-%E7%9A%84%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="toc-text">1.4 调整 less 的引入方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-%E6%8F%92%E6%A7%BD"><span class="toc-text">1.5 插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-6-HOC"><span class="toc-text">1.6 HOC</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6"><span class="toc-text">2 函数式组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-JSX-%E7%9A%84%E7%88%B6%E5%AD%90%E9%80%9A%E8%AE%AF%E6%96%B9%E5%BC%8F"><span class="toc-text">3. JSX 的父子通讯方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E7%BB%93%E6%9D%9F%E8%AF%AD"><span class="toc-text">4. 结束语</span></a></li></ol></li></ol>
+    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#0-%E9%85%8D%E7%BD%AE-Vite-%E5%AF%B9-JSX-%E7%9A%84%E6%94%AF%E6%8C%81"><span class="toc-text">0. 配置 Vite 对 JSX 的支持</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E8%B0%83%E6%95%B4%E5%BC%80%E5%8F%91%E6%96%B9%E5%BC%8F"><span class="toc-text">1. 调整开发方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E8%B0%83%E6%95%B4-SFC-%E4%B8%BA-JSX"><span class="toc-text">1.1 调整 SFC 为 JSX</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E8%B0%83%E6%95%B4-css-%E7%9A%84%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="toc-text">1.2 调整 css 的引入方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E5%BC%95%E5%85%A5-less"><span class="toc-text">1.3 引入 less</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-%E8%B0%83%E6%95%B4-less-%E7%9A%84%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="toc-text">1.4 调整 less 的引入方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-%E6%8F%92%E6%A7%BD"><span class="toc-text">1.5 插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-6-HOC"><span class="toc-text">1.6 HOC</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6"><span class="toc-text">2. 函数式组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-JSX-%E7%9A%84%E7%88%B6%E5%AD%90%E9%80%9A%E8%AE%AF%E6%96%B9%E5%BC%8F"><span class="toc-text">3. JSX 的父子通讯方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E7%BB%93%E6%9D%9F%E8%AF%AD"><span class="toc-text">4. 结束语</span></a></li></ol>
   </div>