https://blog.wayne-project.com/tags/vue/Recent content in Vue on Wayne's blog | 偉恩的部落格 | 技術博客Hugo -- gohugo.iozh-twFri, 10 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-10/petite-vue-introduction/Fri, 10 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-10/petite-vue-introduction/<img src="https://live.staticflickr.com/65535/52736941727_b3a1dcf3c3_o.jpg" alt="Featured image of post 【Petite-Vue】大小只有 ~6KB 的 mini Vue！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="http://fsjohnhuang.gitee.io/petite-vue-source-reading/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7168777403337015310" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7058539192304795661" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7093357600284082207" target="_blank" rel="noopener" >參考網站</a></p> <p>Vue 可以作為獨立的腳本文件使用，無需構建步驟！如果你有一個非前後端分離的歷史項目，並且它已經渲染了大部分的 HTML，或者你的前端邏輯並不復雜，不需要構建步驟，Vue 也提供了另一個適用於此類無構建步驟場景的替代版 <a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue</a>，主要為漸進式增強已有的 HTML 作了特別的優化。功能更加精簡，十分輕量。</p> <ul> <li><a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue (GitHub)</a></li> <li><a class="link" href="https://gitee.com/mirrors/petite-vue" target="_blank" rel="noopener" >Petite-Vue (Gitee)</a></li> </ul> <hr> <h2 id="petite-vue-的特點">Petite-Vue 的特點</h2> <p>相對 Vue3 而言，Petite-Vue 有如下特點：</p> <ol> <li>提供精簡版的與 Vue3 語法和表現一致的模板語言</li> <li>僅由渲染模塊和響應式系統模塊組成</li> <li>渲染模塊沒有採用虛擬 DOM，而是採用在線解析渲染的方式</li> <li>響應式系統模塊對外暴露 reactive 接口提供構建全局狀態管理器的能力</li> <li>代碼庫體積在 gzip 壓縮後 ~6KB，十分適合與項目已有的 LayUI、MiniUI 等 UI 庫搭配使用</li> </ol> <hr> <h2 id="什麼是-petite-vue">什麼是 Petite-Vue？</h2> <p>根據官方解釋，Petite-Vue 是專門為非前後端分離的歷史項目提供和 Vue 相近的響應式開發模式。與完整的 Vue 相比最大的特點是，面對數據的變化 Petite-Vue 採取直接操作 DOM 的方式重新渲染。</p> <p>具體的使用方式請參考 <a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >GitHub</a>，在這裡我想展示兩個示例：</p> <h3 id="代碼庫結構介紹">代碼庫結構介紹</h3> <ul> <li>examples 各種使用示例</li> <li>scripts 打包發布腳本</li> <li>tests 測試用例</li> <li>src <ul> <li>directives <code>v-if</code> 等內置指令的實現</li> <li>app.ts <code>createApp</code> 函數</li> <li>block.ts 塊對象</li> <li>context.ts 上下文對象</li> <li>eval.ts 提供 <code>v-if=&quot;count === 1&quot;</code> 等表達式運算功能</li> <li>scheduler.ts 調度器</li> <li>utils.ts 工具函數</li> <li>walk.ts 模板解析</li> </ul> </li> </ul> <p>若想構建自己的版本只需在控制台執行 <code>npm run build</code> 即可。</p> <h3 id="範例一---在線渲染">範例(一) - 在線渲染</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">[</span><span class="nt">v-cloak</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;App&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">App</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span v-cloak v-if=&#34;status === &#39;offline&#39;&#34;&gt; OFFLINE &lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span v-else&gt; ONLINE &lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">&#39;online&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;[v-scope]&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>上述代碼最終輸出結果為 <code>&lt;div&gt;&lt;span&gt; ONLINE &lt;/span&gt;&lt;/div&gt;</code>，但渲染過程是直接在 DOM Tree 上進行(分為如下4個步驟)，當瀏覽器資源緊張時整個渲染過程將會被用戶一覽無餘：</p> <ol> <li>生成模板</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-cloak</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-else</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>移除 v-cloak 屬性</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-else</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>解析 v-if 和 v-else 指令</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="4"> <li>最終渲染</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼用戶很有可能會看到閃屏現象：ONLINE ➡️ OFFLINE ONLINE ➡️ OFFLINE ➡️ EMPTY ➡️ ONLINE</p> <h3 id="範例二---組件化">範例(二) - 組件化</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;App&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;div v-scope=&#34;Counter(1)&#34;&gt;&lt;/div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;div v-scope=&#34;Message()&#34;&gt;&lt;/div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="nx">initialCount</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span&gt;&lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;button @click=&#34;handleAdd&#34;&gt;ADD&lt;/button&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="nx">initialCount</span> <span class="o">||</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="nx">handleAdd</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Message</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">`&lt;div&gt;&lt;/div&gt;`</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">App</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">Message</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;[v-scope]&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Petite-Vue 雖然沒有提供明確的組件構建方式，但通過 v-scope 屬性我們依然可以採取組件化構建我們的頁面。</p> <p>但上述例子有明顯的問題採取全局組件註冊機制，如例子中即使 Message 組件不需要還是能引用 Counter 組件，假如註冊的不是 Counter 組件的構造函數，那麼 Counter 的狀態將會被意外修改。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="o">:</span> <span class="nx">Counter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="快速上手">快速上手</h2> <h3 id="自動初始化">自動初始化</h3> <p>Petite-Vue 無需構建流程即可使用。只需從 <a class="link" href="https://unpkg.com/petite-vue" target="_blank" rel="noopener" >CDN</a> 加載它：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/petite-vue&#34;</span> <span class="na">defer</span> <span class="na">init</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- 頁面任意位置 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ count: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> {{ count }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;count++&#34;</span><span class="p">&gt;</span>inc<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol> <li>用 v-scope 標記頁面上應由 Petite-Vue 控制的區域，同時也是聲明 data 與 methods。</li> <li>該 defer 屬性使腳本在 HTML 內容被解析後執行。</li> <li>該 init 屬性告訴 Petite-Vue 自動查找和初始化頁面上的所有包含 v-scope 的元素。</li> </ol> <blockquote> <ul> <li>這裡的 init 其實也就是 <code>PetiteVue.createApp().mount()</code> 的簡潔寫法；</li> <li>閱讀源碼可知： <ul> <li>const s = document.currentScript;</li> <li>如果 ( s &amp;&amp; s . hasAttribute ( &lsquo;init &rsquo; )) {</li> <li>createApp().mount();</li> <li>}</li> </ul> </li> <li>如果不想自動初始化，那麼移除 init 屬性，且在 script 標籤中，增加 <code>PetiteVue.createApp().mount()</code>。</li> </ul></blockquote> <h3 id="手動初始化">手動初始化</h3> <p>如果您不想要自動初始化，請刪除該 init 屬性並將腳本移動到 <code>&lt;body&gt;</code> 末尾：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/petite-vue&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">PetiteVue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">().</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者，使用 ES 模塊構建：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">().</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>重點：在開發時期，CDN 地址可以是 <code>https://unpkg.com/petite-vue</code> 這樣簡短的，但對於生產使用時，應該要使用完整解析的 CDN URL。<br> 如：<code>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js</code> 或者 <code>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js</code> (ES 模塊引用時)，避免解析和重定向文本之外，還有避免版本不同導致項目出現意外情況。</p></blockquote> <p>使用終端命令可以快速簡單下載代碼到本地：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">curl unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js --output petite-vue@0.4.1-iife.js </span></span></code></pre></td></tr></table> </div> </div><h3 id="根作用域-root-scope--作用域-scope">根作用域 (Root Scope) / 作用域 (Scope)</h3> <p>這裡的作用域和我們編寫 JavaScript 時說的作用域是一致的，作用是限定函數和變量的可用範圍，減少命名衝突。具有如下特點：</p> <ol> <li>作用域之間存在父子關係和兄弟關係，整體構成一顆作用域樹。</li> <li>子作用域的變量或屬性可覆蓋祖先作用域同名變量或屬性的訪問性。</li> <li>若對僅祖先作用域存在的變量或屬性賦值，將賦值給祖先作用域的變量或屬性。</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 全局作用域 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">globalVariable</span> <span class="o">=</span> <span class="s1">&#39;hello&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">message1</span> <span class="o">=</span> <span class="s1">&#39;there&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">message2</span> <span class="o">=</span> <span class="s1">&#39;bye&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 局部作用域 A </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">message1</span> <span class="o">=</span> <span class="s1">&#39;局部作用域A&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">message2</span> <span class="o">=</span> <span class="s1">&#39;see you&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVariable</span><span class="p">,</span> <span class="nx">message1</span><span class="p">,</span> <span class="nx">message2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 輸出：hello 局部作用域 A see you </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 局部作用域 B </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVariable</span><span class="p">,</span> <span class="nx">message1</span><span class="p">,</span> <span class="nx">message2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 輸出：hello there see you </span></span></span></code></pre></td></tr></table> </div> </div><p><code>createApp()</code>，它接收一個數據對像作為根範圍中的變量，供模版中使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// getters </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">get</span> <span class="nx">plusOne</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- v-scope value can be omitted --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ plusOne }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;increment&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣在模版中就可以使用 <code>count</code> 變量、<code>increment</code> 方法了。</p> <h3 id="掛載元素-mount">掛載元素 (Mount)</h3> <p><code>mount()</code> 沒有傳入掛載元素時，Petite-Vue 作用於整個頁面，但當傳入掛載元素時，那麼僅作用於掛載元素及其內的元素。</p> <p>這也意味著，我們可以在同一頁面掛載多個 Petite-Vue 應用，每一個應用都有其獨立的根變量範圍。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// root scope for app one </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app1&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// root scope for app two </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app2&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="生命週期">生命週期</h3> <p>在 Petite-Vue 中，可以監聽每一個元素的掛載和卸載事件。</p> <p>在 v0.4.0 開始，綁定生命週期事件需要加上 <code>@vue:</code> 前綴。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- v0.4.0 以下 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="err">@</span><span class="na">mounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;mounted on: &#39;, $el)&#34;</span> <span class="err">@</span><span class="na">unmounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;unmounted: &#39;, $el)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> some node </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- v0.4.0 以上 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="err">@</span><span class="na">vue:mounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;mounted on: &#39;, $el)&#34;</span> <span class="err">@</span><span class="na">vue:unmounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;unmounted: &#39;, $el)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> some node </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="v-effect">v-effect</h3> <p>用 <code>v-effect</code> 執行響應式內聯語句：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ count: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-effect</span><span class="o">=</span><span class="s">&#34;$el.textContent = count&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;count++&#34;</span><span class="p">&gt;</span>++<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>effect 響應式的追蹤其依賴，並在依賴更改時重新執行，因此每當更改 count 時它都會重新運行。</p> <h3 id="組件-component">組件 (Component)</h3> <p><strong>組件</strong>的概念在 Petite-Vue 中有所不同，因為它更加簡單。</p> <p>組件有兩種方式來創建，分別是<code>純數據的函數組件</code>和<code>帶有模板的函數組件</code>。</p> <p>使用組件，是需要在元素中用 <code>v-scope</code> 來調用函數。</p> <h4 id="純數據的函數組件">純數據的函數組件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">Counter</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`I&#39;m mounted!`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 1 })&#34;</span> <span class="err">@</span><span class="na">vue:mounted</span><span class="o">=</span><span class="s">&#34;mounted&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 2 })&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="帶有模板的函數組件">帶有模板的函數組件</h4> <p>如果還需要模板的話，相比函數組件是多了一個字段來聲明模板：<code>$template</code>，該字段的值可以是一個模板字符串，也可以是 <code>&lt;template&gt;</code> 元素的 ID 選擇器。(推薦用 <code>template</code> 元素)。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">Counter</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="s1">&#39;#counter-template&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// $template: ` </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// My count is {{count}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// &lt;button @click=&#34;inc&#34;&gt;+aaa+&lt;/button&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// `, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;counter-template&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> My count is {{ count }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>++<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- reuse it --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 1 })&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 2 })&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="全局狀態管理">全局狀態管理</h3> <p>沒錯，即便是簡單的 mini Vue，也可以有全局狀態管理。這裡使用的是 vue3 的 <code>reactive</code> API，來實現全局狀態管理。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span><span class="p">,</span> <span class="nx">reactive</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// manipulate it here </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">store</span><span class="p">.</span><span class="nx">inc</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// share it with app scopes </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">store</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ localCount: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Global {{ store.count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;store.inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Local {{ localCount }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;localCount++&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="指令-directive">指令 (Directive)</h3> <h4 id="內建指令">內建指令</h4> <ul> <li>v-model</li> <li>v-if / v-else / v-else-if</li> <li>v-for</li> <li>v-show</li> <li>v-on(别名：<code>@</code>)</li> <li>v-bind(别名：<code>:</code>)</li> <li>v-html / v-text / v-pre</li> <li>v-once</li> <li>v-cloak (可用來配合 CSS 做未渲染時隱藏)</li> </ul> <h4 id="自定義指令">自定義指令</h4> <p>Petite-Vue 的自定義指令與 vue 有些不同，那麼怎麼註冊一個指令？</p> <ul> <li>指令聲明：一個函數，<code>const myDirective = (ctx) =&gt; {};</code> <ul> <li>ctx 是一個對象，裡面有 <code>el</code>、<code>arg</code>、<code>get</code>、<code>effect</code> 等屬性，具體可以<a class="link" href="https://github.com/vuejs/petite-vue#custom-directives" target="_blank" rel="noopener" >參考文檔</a>或者<a class="link" href="https://github.com/vuejs/petite-vue/blob/main/src/directives/index.ts" target="_blank" rel="noopener" >閱讀源碼</a></li> <li>函數 return，是在指令卸載時候會觸發。</li> </ul> </li> <li>註冊指令：<code>createApp().directive('dir-name', dirFn).mount()</code></li> </ul> <p><code>v-html</code> 指令的實現：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">html</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">get</span><span class="p">,</span> <span class="nx">effect</span> <span class="p">})</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// effect 每次 get() 更改後就會執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">effect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>自定義指令範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myDirective</span> <span class="o">=</span> <span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// the element the directive is on </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">el</span> </span></span><span class="line"><span class="cl"> <span class="c1">// the raw value expression </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// e.g. v-my-dir=&#34;x&#34; then this would be &#34;x&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">exp</span> </span></span><span class="line"><span class="cl"> <span class="c1">// v-my-dir:foo -&gt; &#34;foo&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">arg</span> </span></span><span class="line"><span class="cl"> <span class="c1">// v-my-dir.mod -&gt; { mod: true } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">modifiers</span> </span></span><span class="line"><span class="cl"> <span class="c1">// evaluate the expression and get its value </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="c1">// evaluate arbitrary expression in current scope </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">ctx</span><span class="p">.</span><span class="nx">exp</span><span class="si">}</span><span class="sb"> + 10`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// run reactive effect </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">effect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// this will re-run every time the get() value changes </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// cleanup if the element is unmounted </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// register the directive </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">createApp</span><span class="p">().</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;my-dir&#39;</span><span class="p">,</span> <span class="nx">myDirective</span><span class="p">).</span><span class="nx">mount</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自定義模板">自定義模板</h3> <p>這個可以通過給 <code>createApp</code> 的配置項增加屬性 <code>$delimiters: ['${', '}']</code> 來實現，通常在服務器端模板語言一起使用時比較有用。</p> <h3 id="petite-vue-vs-vue">Petite-Vue vs Vue</h3> <p>Petite-Vue 僅有的特性：</p> <ul> <li>v-scope</li> <li>v-effect</li> <li>@vue:mounted、@vue:unmounted 事件</li> </ul> <p>不同的功能：</p> <ol> <li>在表達式中，<code>$el</code> 指向指令綁定到的當前元素（而不是組件根元素）</li> <li><code>createApp()</code> 接受全局狀態而不是組件</li> <li>組件被簡化為函數返回對象</li> <li>自定義指令有不同的語法</li> </ol> <p>共用的特性：</p> <table> <thead> <tr> <th>共有的特性</th> </tr> </thead> <tbody> <tr> <td><code>{{ }}</code></td> </tr> <tr> <td>v-bind</td> </tr> <tr> <td>v-on</td> </tr> <tr> <td>v-model</td> </tr> <tr> <td>v-if / v-else / v-else-if</td> </tr> <tr> <td>v-for</td> </tr> <tr> <td>v-show</td> </tr> <tr> <td>v-html</td> </tr> <tr> <td>v-text</td> </tr> <tr> <td>v-pre</td> </tr> <tr> <td>v-once</td> </tr> <tr> <td>v-cloak</td> </tr> <tr> <td>reactive()</td> </tr> <tr> <td>nextTick()</td> </tr> <tr> <td>Template refs</td> </tr> </tbody> </table> <p>Petite-Vue 不支持的特性：</p> <p>一些特性因為它們在漸進增強的背景下具有相對較低的使用頻率而被丟棄。</p> <p>如果你需要這些特性，你可能應該只使用標準的 Vue：</p> <ol> <li><code>ref()</code>、<code>computed()</code> 等組合式API</li> <li><code>Render functions</code> ( Petite-Vue 沒有 Virtual DOM)</li> <li><code>Reactivity</code> 響應式數據類型(Map、Set、&hellip;等，為了體積更小而刪除)</li> <li><code>Transition</code>、<code>KeepAlive</code>、<code>Teleport</code>、<code>Suspense</code></li> <li><code>v-for</code> 的深解構</li> <li><code>v-on=&quot;object&quot;</code> 對象語法</li> <li><code>v-is</code> 動態組件</li> <li><code>v-bind:style</code> 自動前綴</li> </ol> <hr> <h2 id="總結">總結</h2> <p>總結來說，<a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue</a> 這個項目，挺適合「用不到 Vue、React 等這些偏大的前端框架的簡單頁面」，或是「既有的非前後端分離的歷史項目」來做使用的，有著 Vue 的開發體驗，也能不增加項目的複雜度，簡直是一個完美的體驗！</p> <hr>https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/Mon, 16 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/<img src="https://live.staticflickr.com/65535/52630283696_c93e29e870_o.png" alt="Featured image of post 【Nuxt3】實戰練習 - 實作部落格" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10292483" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/users/20152617/ironman/5934" target="_blank" rel="noopener" >參考網站</a></p> <p>大家經過 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記</a> 這篇文章，應該對於 Nuxt 3 有初步的理解，接下來我們將進入實戰部分，我將會以 Nuxt 3 來實作部落格網站，讓已經註冊的使用者可以在網站上發布文章，實作這個網站的程式碼可能不會講解得非常仔細，但一些實務開發上會需要注意的細節我會把個人經驗做一個紀錄，大家可以再參考看看，文末也都會附上完整的範例程式。接下來，讓我們開始吧！</p> <hr> <h2 id="資料庫與會員系統">資料庫與會員系統</h2> <h3 id="資料庫-database">資料庫 (Database)</h3> <p>這篇文章實作的部落格，會把會員與文章等資料儲存於伺服器的資料庫之中，大家可以選擇自己習慣或合適的資料庫來做儲存。為了方便及後續的展示，我最終決定使用 <a class="link" href="https://www.prisma.io/" target="_blank" rel="noopener" >Prisma</a> 搭配本地的 <strong>SQLite</strong> 來當作儲存體，讓大家測試時不用再煩惱怎麼架設資料庫，可以快速的執行範例程式碼。</p> <blockquote> <p>你可以在自己的 Nuxt 專案或從新專案開始進行，若你已經有自己的資料庫，也可以直接跳過此段介紹後續實作自己的後端 API 來接續我們的實作系列。</p></blockquote> <h3 id="安裝-prisma">安裝 Prisma</h3> <p><a class="link" href="https://www.prisma.io/" target="_blank" rel="noopener" >Prisma</a> 操作起來很像 ORM (Object-Relational Mapping)，但實際上依據<a class="link" href="https://www.prisma.io/docs/concepts/overview/prisma-in-your-stack/is-prisma-an-orm" target="_blank" rel="noopener" >官網的說明</a>，其實不大依樣，Prisma 透過撰寫並根據 <code>Schema</code> 來建立或操作資料庫，在進行 <strong>CRUD</strong> 的操作時，都是透過 Prisma Client 進行，這也是最方便的地方，此外也支援多種資料庫的來源，只要操作 Model 就可以映射到資料庫的資料，不再需要寫 SQL，在一些情境之下是非常方便的。</p> <p>首先，使用 NPM 安裝 <code>prisma</code> 與 <code>@prisma/client</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prisma @prisma/client </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prisma @prisma/client</span> </span></span></code></pre></td></tr></table> </div> </div><p>打開終端機 (Terminal) 於 Nuxt 專案目錄中， 使用下列指令，初始化一個 <strong>Prisma</strong> 的 <code>Schema</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma ini </span></span></code></pre></td></tr></table> </div> </div><p>初始化完成後，會建立一個 <code>schema.prisma</code> 檔案。</p> <p><img src="https://live.staticflickr.com/65535/52630762803_78afc17ebe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>./prisma/schema.prisma</code> 檔案內容如下，這裡就是定義我們資料庫位置與 <code>Schema</code> 的地方，之後我們就可以透過 <strong>Prisma</strong> 的 <strong>Client</strong> 使用 ORM 來操作資料庫。</p> <h5 id="prismaschemaprisma">prisma/schema.prisma</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;postgresql&#34; </span></span><span class="line"><span class="cl"> url = env(&#34;DATABASE_URL&#34;) </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>我們調整 <code>./prisma/schema.prisma</code> 檔案內容，將 <code>datasource</code> 替換為 SQLite 並儲存在本地的 <code>./dev.db</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>你也可以將 provider 替換為 PostgreSQL 或 MySQL 等，可以參考<a class="link" href="https://www.prisma.io/docs/concepts/database-connectors" target="_blank" rel="noopener" >這裡</a>，但要注意可能後面定義的 Schema 語法會略微不同。</p></blockquote> <p>接下來我們定義一個 <code>User</code> 的資料表，在 <code>schema.prisma</code> 撰寫如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>這張 <code>User</code> 資料表，將用作於部落格的登入使用者做使用，也可以視為是會員系統使用的資料表，大家也可以依據需求來擴增欄位，以下稍微講述一下各個欄位將作為何用。</p> <ul> <li>id: 預設為 UUID，為使用者的唯一識別。</li> <li>providerName: 作為第三方登入的供應商記錄使用，例如該名使用者使用 Google OAuth 註冊登入，我會在欄位就會填上 google。如果為空值 (null) 表示使用者用電子信箱註冊登入。</li> <li>providerUserId: 與 providerName 搭配使用，第三方供應商通常也會有一組專屬於使用者的 Id，以此我們就可以來比對登入的是哪位使用者。如果為空值 (null) 表示使用者用電子信箱註冊登入。</li> <li>nickname: 使用者暱稱，預設值為字串 User。</li> <li>email: 使用者登入的電子信箱，這裡我將欄位設定為 @unique 表示，電子信箱是系統中唯一。</li> <li>password:使用者密碼的雜湊值，如果使用第三方註冊登入，則該欄位為 空值 (null)。</li> <li>avatar: 使用者的頭像，存放圖片網址。</li> <li>emailVerified: 布林值，預設為 false，表示使用者的電子信箱是尚未通過驗證。</li> <li>createdAt: 使用者建立時間，預設為插入該筆資料的時間。</li> <li>updatedAt: 使用者更新個人資料的時間，預設為更新該筆資料的時間。</li> </ul> <p><code>./prisma/schema.prisma</code> 檔案內容看起來如下：</p> <h5 id="prismaschemaprisma-1">prisma/schema.prisma</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>當我們調整好 schema 後，就可以執行下列指令，來初始化資料庫，Prisma 會依照 <code>schema.prism</code> 來幫我們建立對應的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma db push </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630762818_df25ebac5c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>初始化完畢後，你可以登入你的資料庫查看是否建立成功，也可使用 Prisma 提供的 <a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 來快速的檢視與操作資料庫內的資料。<a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 已經內建在 prisma 套件中，執行以下指令後，就會啟動一個 Web 服務，如 <a class="link" href="http://localhost:5555" target="_blank" rel="noopener" >http://localhost:5555</a>，我們就可以在網頁中查看資料庫內的資料囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma studio </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630533384_49e793de57_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以在 <a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 看到我們建立的 <code>User</code> 資料表，也將是我們稍後使用 Prisma 操作 ORM 所對應的 <strong>User Model</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52629765912_5000672fc2_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>最後記得執行下列指令來產生 Prisma Client，這樣我們就可以在 Nuxt 3 中使用 Prisma Client 操作資料庫囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma generate </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630723465_bd7f83c262_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-操作-prisma-client-建立一個使用者至資料庫">Nuxt 3 操作 Prisma Client 建立一個使用者至資料庫</h3> <p>我們接下來就能使用如下程式碼建立 Prisma Client，後續可以用來來操作 <strong>Model</strong>，更多的 Prisma Client API 可以參考<a class="link" href="https://www.prisma.io/docs/reference/api-reference/prisma-client-reference" target="_blank" rel="noopener" >官方文件</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;@prisma/client&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prismaClient</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們建立一隻 Server API，新增 <code>./server/api/test-create-user.get.js</code>，用來測試收到請求後建立一個測試使用者，詳細的程式碼如下：</p> <h5 id="serverapitest-create-usergetjs">server/api/test-create-user.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@prisma/client&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prismaClient</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">prismaClient</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;ryanchien8125@gmail.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">&#39;這裡要放密碼的雜湊值&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們送出 <code>/api/test-create-user</code> 後，後端會使用 Prisma Client 操作 User Model，我們就能使用 ORM 來建立出使用者的資料庫記錄。</p> <p><img src="https://live.staticflickr.com/65535/52630723535_2ec455193c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-使用者註冊帳號">Nuxt 3 使用者註冊帳號</h3> <p>我們將 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e5%af%a6%e4%bd%9c%e7%b7%b4%e7%bf%92" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記</a> 這篇文章，所串接的 Google OAuth 及 Cookie 做一個結合，讓使用者透過 Google Auth 登入後可以自動的註冊建立使用者或登入產生 Access Token。</p> <p><code>./server/api/auth/google.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthgooglepostjs">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span><span class="lnt">69 </span><span class="lnt">70 </span><span class="lnt">71 </span><span class="lnt">72 </span><span class="lnt">73 </span><span class="lnt">74 </span><span class="lnt">75 </span><span class="lnt">76 </span><span class="lnt">77 </span><span class="lnt">78 </span><span class="lnt">79 </span><span class="lnt">80 </span><span class="lnt">81 </span><span class="lnt">82 </span><span class="lnt">83 </span><span class="lnt">84 </span><span class="lnt">85 </span><span class="lnt">86 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span> <span class="o">===</span> <span class="s1">&#39;google&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> <span class="o">===</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">)</span> <span class="o">===</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;This email address does not apply to this login method&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">createUser</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="s1">&#39;google&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>程式碼內容稍微有一點多，但講解一下流整與概念：</p> <ol> <li>當前端 Google OAuth 登入成功後，將回傳的 Google access_token 傳送至這隻 API，並使用 Google API 取得使用者資訊。</li> <li><code>db.user.getUserByEmail</code> 這個是我封裝的方法，裡面對應著 Prisma 的 ORM 操作，如果你想也可以在這邊替換你的資料庫操作邏輯，主要這個方法，就是依照使用者的 Email 回傳資料庫內<code>是否存在一筆符合的使用者記錄</code>。</li> <li>如果存在，我會判斷 provider 是否符合 Google 的使用者資訊，否則判斷為應該是用電子信箱註冊的使用者。</li> <li>如果不存在，則建立一個新的使用者至資料庫內，建立時不需要傳入 id 資料庫因為設定為自動產生 UUID。</li> <li>最後就是產生使用者的 JWT 並設定在 cookie 之中。</li> </ol> <p>另外，我也實作了使用電子信箱直接註冊的方式，<code>./server/api/auth/register.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthregisterpostjs">server/api/auth/register.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">bcrypt</span> <span class="nx">from</span> <span class="s1">&#39;bcrypt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;A user with that email address already exists&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">createUser</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="nx">bcrypt</span><span class="p">.</span><span class="nx">hashSync</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用電子信箱與密碼註冊的流程很簡單，就是判斷是否存在相同信箱的使用者，不存在的話就為它建立一筆紀錄。</p> <p>這邊要注意的是，會員系統或牽扯到帳號密碼相關的，請一律使用雜湊演算法，例如 <strong>BCrypt</strong> 或 <strong>Argon2</strong>，為使用者的密碼做 Hash，不要再存明碼在資料庫之中囉，以免發生資安事件時，造成不可挽回的悲劇。</p> <p>順便也實作一下使用電子信箱與密碼登入的 API，<code>./server/api/auth/login.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthloginpostjs">server/api/auth/login.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">bcrypt</span> <span class="nx">from</span> <span class="s1">&#39;bcrypt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Email or password is incorrect&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">((</span><span class="kr">await</span> <span class="nx">bcrypt</span><span class="p">.</span><span class="nx">compare</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">,</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">password</span><span class="p">))</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Email or password is incorrect&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>使用 Google OAuth 登入</li> </ul> <p><img src="https://live.staticflickr.com/65535/52630723565_6ddcf3d4bb_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>使用電子信箱與密碼登入</li> </ul> <p><img src="https://live.staticflickr.com/65535/52629766447_e4b4472475_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="結合-pinia-儲存使用者資料">結合 Pinia 儲存使用者資料</h3> <p>我們可以結合 Pinia 來將使用者的資料持久話儲存在 Local Storage 之中，這樣就可以在前端儲存使用者登入的狀態，例如導覽列的頭像、信箱，就可以從 Store 中拿出來囉。</p> <p>建立 <code>./server/profile.get.js</code> 檔案，用來取得使用者資料：</p> <h5 id="serverprofilegetjs">server/profile.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserById</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not find user.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個 <strong>user</strong> 的 <strong>store</strong>，<code>./stores/user.js</code> 內容如下：</p> <h5 id="storesuserjs">stores/user.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useUserStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;user&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">profile</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">refreshUserProfile</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">error</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/user/profile&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">initialCache</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">error</span><span class="p">.</span><span class="nx">value</span><span class="o">?</span><span class="p">.</span><span class="nx">data</span><span class="o">?</span><span class="p">.</span><span class="nx">message</span> <span class="o">??</span> <span class="s1">&#39;未知錯誤&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接使用 <code>refreshUserProfile()</code> 來發送請求至 <code>/api/user/profile</code> 取得最新的使用者資料來更新 store。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">userStore</span><span class="p">.</span><span class="nx">refreshUserProfile</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630533839_b540b524b0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用伺服器中間件來驗證-jwt">使用伺服器中間件來驗證 JWT</h3> <p>我們的會員系統在登入後，會產生一組 JWT 放置於 cookie 之中，在後端 API 使用時都要在呼叫 <code>getCookie()</code> 來解析 cookie，所以我們可以將驗證 JWT 的流程，放置在伺服器中間件 (middleware) 之中，後端收到的每個請求就會經過這個中間件，只要有夾帶 <code>access_token</code> 的 cookie 就會進行驗證解析出 JWT 所含的 <code>payload</code> id，即為使用者的 ID。</p> <p>建立 <code>./server/middleware/auth.js</code> 檔案，內容如下：</p> <h5 id="servermiddlewareauthjs">server/middleware/auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">jwtToken</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userInfo</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">auth</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Invalid token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>伺服器的中間件只要定義在 <code>./server/middleware</code> 目錄下就會自動被載入，之後在每個 Server API 收到請求，中間件只要有成功驗證並解析 JWT，就會在 <code>event.context.auth</code> 添加使用者資訊，之後在 Server API 的處理函數中，就可以以下列程式碼進行使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整後的 <code>./server/profile.get.js</code> 檔案，就會乾淨許多囉！</p> <h5 id="serverprofilegetjs-1">server/profile.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">user</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserById</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">user</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not find user.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>為了實作部落格，我們使用 Prisma 快速的建立資料庫環境，也方便大家可以下載範例程式碼，就可以在自己的電腦上運作 SQLite。也結合 Pinia 來將使用者的資料進行持久化的儲存，這樣我們就可以實作出如判斷使用者是否登入或是建立導覽列上的登入狀態。</p> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day21/nuxt-app-blog-prisma" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 實作部落格資料庫與會員系統</a></p> <hr> <h2 id="導覽列模板與新增文章">導覽列模板與新增文章</h2> <p>上面我們完成了基本的會員登入，接下來將進入網站的切版，以下會使用布局模板來實現，上方導覽列與下方顯示網站內容的排版方式，接下來就會快速的進入到新增一篇部落格的文章，該如何實現 Server API 與前端進行串接。</p> <h3 id="預設布局模板">預設布局模板</h3> <p>首先，建立一個預設布局模板，我們預計使每個頁面於上方顯示導覽列，下方則是依據不同的頁面來顯示，大概如下所示。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">+---------------------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> 導覽列 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> 不同頁面的內容顯示的位置 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+---------------------------+ </span></span></code></pre></td></tr></table> </div> </div><p>我們可以建立一個 <code>default.vue</code> 於 <code>layouts</code> 目錄中，作為預設的佈局模板，模板內約會實作下面的程式碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">導覽列</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>&lt;header&gt;</code> 裡面就是我們可以實作導覽列的位置，下方的 <code>&lt;slot /&gt;</code> 插槽，即會是我們可以放置頁面的容器。</p> <p>完整的 <code>./layouts/default.vue</code> 程式碼如下：</p> <h5 id="layoutsdefaultvue">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex w-full justify-center px-8 xl:px-0&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex w-full max-w-7xl items-center justify-between py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">aria</span><span class="nt">-label</span><span class="err">=&#34;</span><span class="na">TailwindBlog</span><span class="err">&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex items-center justify-between&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mr-3&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-12 w-12&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;logos:nuxt-icon&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hidden h-6 text-2xl font-semibold text-gray-700 sm:block&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">Nuxt</span> <span class="mi">3</span> <span class="nx">Blog</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex items-center text-base leading-5&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-row items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-3 py-2 text-gray-700 transition hover:text-emerald-500&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/login&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登入</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userProfile</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著記得調整 <code>app.vue</code> 內容，添加一個 <code>&lt;NuxtLayout&gt;</code> 元件來顯示預設的布局模板，包裹著的 <code>&lt;NuxtPage /&gt;</code> 即會放置於 <code>default.vue</code> 預設插槽之中，如此就能顯示路由的頁面。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們就完成的第一個導覽列，可以由導覽列提供的「登入」，切換至登入頁面，並且在每個頁面中，都使用預設的布局模板，所以都會顯示導覽列。</p> <p><img src="https://live.staticflickr.com/65535/52630283636_1b4a7e4a8d_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="取消或替換特定頁面的布局模板">取消或替換特定頁面的布局模板</h3> <p>在<a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e5%b8%83%e5%b1%80%e6%a8%a1%e6%9d%bf-layouts" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記 - Nuxt 3 布局模板 (Layouts)</a> 內有介紹到，我們可以建立多個布局模板，而 Nuxt 也提供我們可以為頁面元件取消使用或選擇特定的布局模板。</p> <p>例如，我們想將登入與註冊頁面，取消套用預設的布局模板，我們就可以使用 <code>definePageMeta()</code> 來傳入 <code>layout: false</code> 屬性來取消布局模板的使用。</p> <p>調整登入頁面 <code>./pages/login.vue</code></p> <h5 id="pagesloginvue">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來，登入頁面將不會使用布局模板，導覽列也就不會顯示。</p> <p><img src="https://live.staticflickr.com/65535/52629766332_32a030f2f1_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立使用者選單">建立使用者選單</h3> <p>為了豐富導覽列，我們可以為已登入的使用者，建立一個使用者頭像，點擊後可以顯示使用者專用的選項，例如登出等功能。</p> <h4 id="安裝-headless-ui">安裝 headless UI</h4> <p>我們的使用的是 Tailwind CSS 來做樣式的處理，<a class="link" href="https://headlessui.com/" target="_blank" rel="noopener" >headless UI</a> 已經封裝一些實用且好看的元件，元件基於 Tailwind CSS 可以讓我們的風格更一致，也能更彈性的自訂成自己喜歡的樣式。</p> <p>使用 NPM 安裝 <code>@headlessui/vue</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @headlessui/vue </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @headlessui/vue</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>nuxt.config.ts</code>，將 <code>@headlessui/vue</code> 新增至 <code>build.transpile</code> 屬性之中。</p> <h5 id="nuxtconfigts">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">build</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transpile</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@headlessui/vue&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立使用者頭像選單元件">建立使用者頭像選單元件</h3> <p>新增 <code>./components/NavigationBar/NavigationBarAvatarMenu.vue</code> 內容如下：</p> <h5 id="componentsnavigationbarnavigationbaravatarmenuvue">components/NavigationBar/NavigationBarAvatarMenu.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Menu</span> <span class="na">as</span><span class="o">=</span><span class="s">&#34;div&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;relative inline-block text-left&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuButton</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex w-full justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-block h-10 w-10 rounded-full bg-white/90 object-cover object-center p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=128&amp;q=80&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;使用者選單&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuButton</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">transition</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-active-class</span><span class="err">=&#34;</span><span class="na">transition</span> <span class="na">duration</span><span class="nt">-100</span> <span class="na">ease</span><span class="nt">-out</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-from-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-95</span> <span class="na">opacity</span><span class="nt">-0</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-to-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-100</span> <span class="na">opacity</span><span class="nt">-100</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-active-class</span><span class="err">=&#34;</span><span class="na">transition</span> <span class="na">duration</span><span class="nt">-75</span> <span class="na">ease</span><span class="nt">-in</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-from-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-100</span> <span class="na">opacity</span><span class="nt">-100</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-to-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-95</span> <span class="na">opacity</span><span class="nt">-0</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuItems</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-1 py-1&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuItem</span> <span class="nt">v-slot</span><span class="o">=</span><span class="s">&#34;{ active }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="o">:</span><span class="na">class</span><span class="o">=</span><span class="s">&#34;[ </span></span></span><span class="line"><span class="cl"><span class="s"> active ? &#39;bg-emerald-500 text-white&#39; : &#39;text-gray-900&#39;, </span></span></span><span class="line"><span class="cl"><span class="s"> &#39;group flex w-full items-center rounded-md px-2 py-2 text-sm&#39; </span></span></span><span class="line"><span class="cl"><span class="s"> ]&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> </span></span><span class="line"><span class="cl"> <span class="nt">:active</span><span class="o">=</span><span class="s">&#34;active&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mr-2 h-5 w-5 text-emerald-400&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">name</span><span class="o">=</span><span class="s">&#34;ri:logout-box-line&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">aria</span><span class="nt">-hidden</span><span class="err">=&#34;</span><span class="na">true</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登出</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuItem</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuItems</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">transition</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Menu</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Menu</span><span class="p">,</span> <span class="nx">MenuButton</span><span class="p">,</span> <span class="nx">MenuItems</span><span class="p">,</span> <span class="nx">MenuItem</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@headlessui/vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將 <code>&lt;NavigationBarAvatarMenu&gt;</code> 元件添加至導覽列之中，我們就可以擁有一個使用者頭像的選單囉。</p> <p><img src="https://live.staticflickr.com/65535/52630283566_d85ef1e3bd_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="結合使用者-store-來控制顯示的時機">結合使用者 Store 來控制顯示的時機</h3> <p>使用者頭像選單的元件應該控制於<code>使用者登入之後再顯示</code>，所以我們可以結合 <strong>Pinia</strong> 進行狀態管理，來檢查使用者資訊的 <strong>store</strong> 是否具有資料且符合我們的判定依據再進行顯示，否則，我們僅需要渲染出登入的按鈕即可。</p> <p>例如，我們從 User Store 取出使用者資訊 (Profile)，並判斷是否有 <code>id</code> 來決定要顯示<strong>使用者頭像選單</strong>或<strong>登入</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NavigationBarAvatarMenu</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;userProfile?.id&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-else</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-3 py-2 text-gray-700 transition hover:text-emerald-500&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/login&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登入</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userProfile</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>整個完成後，介面看起來就會比較乾淨也符合<strong>登入</strong>與<strong>未登入</strong>時，應該顯示的介面樣子。</p> <p><img src="https://live.staticflickr.com/65535/52629766292_716565c416_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="新增部落格文章">新增部落格文章</h3> <p>當我們處理好登入後，就開可以開始來實作使用者建立部落格的文章囉！</p> <h4 id="建立文章資料表">建立文章資料表</h4> <p>我們的資料庫，是透過 Prisma 的 Schema 來自動產生資料表，我們可以建立如下的 Schema，來作為儲存文章內容的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">model Article { </span></span><span class="line"><span class="cl"> id Int @id @default(autoincrement()) </span></span><span class="line"><span class="cl"> title String </span></span><span class="line"><span class="cl"> content String </span></span><span class="line"><span class="cl"> cover String </span></span><span class="line"><span class="cl"> tags String </span></span><span class="line"><span class="cl"> authorId String? </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>欄位相對簡單，各個欄位的用途與說明如下：</p> <ul> <li>id: 文章的 ID，採用自動遞增的數字。</li> <li>title: 文章的標題。</li> <li>content: 文章的內容。</li> <li>cover: 文章的封面圖片。</li> <li>tags: 文章的標籤。</li> <li>authorId: 對應 <code>User</code> 資料表的 <code>id</code> 欄位，表示文章的作者。</li> <li>createdAt: 文章建立時間，預設為插入該筆資料的時間。</li> <li>updatedAt: 使用者更新文章資料的時間，預設為更新該筆資料的時間。</li> </ul> <p>另外，我想讓 <code>Article</code> 具有關聯性，所以我們可以使用 Prisma 提供的語法，來建立與 <code>User</code> 的外鍵 (Foreign Key)，最後完整的 <code>schema.prisma</code> 如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl"> Article Article[] </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model Article { </span></span><span class="line"><span class="cl"> id Int @id @default(autoincrement()) </span></span><span class="line"><span class="cl"> title String </span></span><span class="line"><span class="cl"> content String </span></span><span class="line"><span class="cl"> cover String </span></span><span class="line"><span class="cl"> tags String </span></span><span class="line"><span class="cl"> authorId String? </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl"> User User? @relation(fields: [authorId], references: [id]) </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>記得執行以下指令，來讓 Prisma 建立新的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma db push </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立新增文章的-api">建立新增文章的 API</h3> <p>建立 <code>./server/api/manage/articles.post.js</code>，內容如下：</p> <h5 id="serverapimanagearticlespostjs">server/api/manage/articles.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">user</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">authorId</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">article</span><span class="p">.</span><span class="nx">createArticle</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">content</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cover</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">cover</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">tags</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">authorId</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">articleRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Create article failed. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecord</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>整個 Server API 的運作流程如下：</p> <ol> <li>使用者將欲新增的文章資料以 POST 發送至 <code>/api/manage/article</code>，伺服器中間件，將會解析 JWT 來得到 user。</li> <li>判斷 user.id 來決定是否具有權限，如果正確解析 JWT，表示請求為一個已登入的使用者發送，也將放行給予新增文章。</li> <li>處理函數將解析 Body 內的資料，並建構出往資料庫新增文章記錄的內容。</li> <li>判斷是否新增成功，回傳新增的文章資料。</li> </ol> <p>建立文章的 Prisma Client 操作如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="nx">createArticle</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">article</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">create</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">content</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cover</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cover</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tags</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">authorId</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">authorId</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not create article. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecord</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就完成了建立文章的 API 囉！</p> <p><img src="https://live.staticflickr.com/65535/52629766247_47662d0614_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="取得部落格文章">取得部落格文章</h3> <p>使用 Prisma Client 來取得文章，也非常方便，如下程式碼，我們就能取出文章資料並以建立時間遞減排序囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="nx">getArticles</span><span class="p">(</span><span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecords</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">article</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">findMany</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">orderBy</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">createdAt</span><span class="o">:</span> <span class="s1">&#39;desc&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">skip</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">?</span> <span class="nx">options</span><span class="p">.</span><span class="nx">page</span> <span class="o">*</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">:</span> <span class="kc">undefined</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">take</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not create user. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecords</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>./server/api/articles.get.js</code> 是實作取得文章的 API，我們期望任何人都可以瀏覽這個部落格的文章，所以這隻 API 我們無需驗證使用者即可放行，程式碼如下：</p> <h5 id="serverapiarticlesgetjs">server/api/articles.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articlesRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">article</span><span class="p">.</span><span class="nx">getArticles</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articlesRecord</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們也可以在 <code>./server/api/articles.get.js</code> 處理函數內，添加資料的分頁或為文章資料進行加工，以利前端顯示。</p> <p><img src="https://live.staticflickr.com/65535/52630723890_b20d0977bf_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們建立好了部落個的版面，有了導覽列和使用者選單，網站看起來也更專業了一些，結合布局模板，我們可以控制每個頁面所顯示的布局，在未來有更多頁面的時候能具有可控性。最後也實作了新增文章的 API，完成了第一篇文章的新增與瀏覽。</p> <hr> <h2 id="頁面的導航守衛與切換效果">頁面的導航守衛與切換效果</h2> <p>我們完成了新增文章的頁面與流程，在網站開發的過程中，有些頁面是具有瀏覽的限制，例如，我們不希望一般的使用者能進到管理者頁面專用的頁面進行操作，這時候我們就需要做一些權限的驗證與限制，在 Nuxt 的頁面提供了路由中間件可以在我們導航至頁面之前，執行一些處理函數，就實作<strong>導航守衛 (Navigations Guards)</strong> 的效果。最後會介紹一下在 Nuxt 3 所提供的頁面和布局切換時的<strong>進度條 (Progress bar)</strong> 與<strong>轉場效果 (Transitions)</strong>。</p> <h3 id="頁面間的導航守衛">頁面間的導航守衛</h3> <h4 id="只允許已登入使用者新增文章">只允許已登入使用者新增文章</h4> <p>首先，我們新增一個路由中間件 <code>./middleware/manage-auth.js</code> 內容如下：</p> <h5 id="middlewaremanage-authjs">middleware/manage-auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">client</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在頁面元件中使用 <code>definePageMeta()</code> 來套用 <code>manage-auth</code> 中間件。調整 <code>./pages/manage/articles/create.vue</code> 內容：</p> <h5 id="pagesmanagearticlescreatevue">pages/manage/articles/create.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;manage-auth&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們首頁新增一個可以導向至 <code>/manage/articles/create</code> 頁面的按鈕。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-md mt-12 rounded-sm bg-emerald-500 py-2 px-4 font-medium text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/manage/articles/create&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">前往撰寫文章</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們處於未登入的情況，點擊前往後，會經由中間件判斷 <code>process.client</code> 是否是在客戶端，進而從 User Store 取出使用者資訊進行判斷，當不存在 <code>userStore.profile.id</code> 時，表示未登入，我們將導航至登入頁面 <code>/login</code>；當登入完成後，就可以使用按鈕成功導航至新增文章的頁面。如果 <code>process.client</code> 為 <code>false</code>，表示導航是在伺服器端觸發的，例如，我們直接透過網址進入新增文章頁面，將會一律被重新導航至首頁。</p> <p><img src="https://live.staticflickr.com/65535/52630723865_fe7bb3a049_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="登入完成後導回至登入前瀏覽的頁面">登入完成後導回至登入前瀏覽的頁面</h4> <p>當使用者在瀏覽網站時被引導或準備登入時，我們可以將使用者目前的頁面進行記錄，以便登入完成後，可以重新導向至使用者登入前的頁面，以此提供使用者更棒的體驗。</p> <p>首先，我們新增一個路由中間件 <code>./middleware/logged-in-redirect.js</code> 內容如下：</p> <h5 id="middlewarelogged-in-redirectjs">middleware/logged-in-redirect.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">from</span> <span class="o">&amp;&amp;</span> <span class="nx">to</span><span class="p">.</span><span class="nx">path</span> <span class="o">!==</span> <span class="nx">from</span><span class="p">.</span><span class="nx">path</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">to</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> </span></span><span class="line"><span class="cl"> <span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">=</span> <span class="kc">undefined</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="nx">from</span><span class="p">.</span><span class="nx">fullPath</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">to</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">=</span> <span class="nx">redirectTo</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="nx">to</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個 <code>logged-in-redirect</code> 中間件的處理邏輯，我們接收 <code>to</code> 與 <code>from</code>，分別為目標頁面與來源頁面，當使用者目標頁面 <code>/login</code> 還未帶上了 Query 參數 <code>redirect_to</code>，我們就將來源的完整路徑添加上去 <code>from.fullPath</code>，最後進行導向。</p> <blockquote> <p>這裡需要進行判斷 <code>redirect_to</code>，否則會重複發生重新導向。</p></blockquote> <p>在登入頁面中使用 <code>definePageMeta()</code> 來套用 <code>logged-in-redirect</code> 中間件。調整 <code>./pages/login.vue</code> 內容：</p> <h5 id="pagesloginvue-1">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;logged-in-redirect&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在登入完成的地方，我們就可以使用 <code>navigateTo()</code> 導向至 <code>redirect_to</code> 給的頁面路徑。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleEmailLogin</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">navigateTo</span><span class="p">(</span><span class="nx">route</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">??</span> <span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>完成後，我們從首頁點擊登入後．當登入完成後就會導向回首頁；而從文章頁面點擊登入，完成後則會導向回文章頁面。</p> <p><img src="https://live.staticflickr.com/65535/52630533679_f91d6355c5_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="頁面載入進度元件">頁面載入進度元件</h3> <p>Nuxt 3 提供一個 <code>&lt;NuxtLoadingIndicator&gt;</code> 元件，用作頁面導航後顯示載入的進度，會在頁面上方有一個進度條 (Progress bar)。</p> <p>只需要將 <code>&lt;NuxtLoadingIndicator&gt;</code> 元件添加至 <code>app.vue</code> 或布局之中，調整 <code>app.vue</code> 內容如下：</p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLoadingIndicator</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>元件可以傳入的屬性 (Props) 如下：</p> <ul> <li>color：進度條的顏色，可以傳入CSS 支援的<code>色碼</code>或 <code>repeating-linear-gradient()</code> 函数，預設為 <code>repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)</code>。</li> <li>height：進度條的高度數值，單位： <code>px</code>，預設值為 <code>3</code>。</li> <li>duration：進度條載入的持續時間，單位： <code>毫秒</code>，預設值為 <code>2000</code>。</li> <li>throttle：進度條的隱藏與顯示，限制在特定時間內僅觸發一次，單位： <code>毫秒</code>，預設值為 <code>200</code>。</li> </ul> <p>當我們從首頁切換頁面時，網頁上方就會出現一個進度條，表示頁面正在載入中。</p> <p><img src="https://live.staticflickr.com/65535/52630763173_598b9351b6_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="頁面切換的轉場效果">頁面切換的轉場效果</h3> <p>除了載入的進度條，頁面切換之間，也可以使用轉場效果 (Transitions) 來讓頁面之間的銜接更柔順，Nuxt 利用了 Vue 內建的 <code>&lt;Transition&gt;</code> 元件來幫助處理轉場和動畫，用以響應不斷變化的頁面與狀態。</p> <p>Nuxt 預設為所有頁面 (Pages) 都設置了轉場，如果要啟用，請將以下 CSS 添加至 <code>app.vue</code> 中：</p> <h5 id="appvue-1">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">active</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transition</span><span class="o">:</span> <span class="nx">all</span> <span class="mf">0.4</span><span class="nx">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">from</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">opacity</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">filter</span><span class="o">:</span> <span class="nx">blur</span><span class="p">(</span><span class="mi">1</span><span class="nx">rem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>每個頁面的 <code>pageTransition</code> 預設屬性皆為 <code>{ name: 'page', mode: 'out-in' }</code>，<strong>name</strong> 為 <code>page</code> 也就對應了 CSS 類別的開頭；<strong>mode</strong> 有 <strong>in-out</strong>、<strong>out-in</strong> 及 <strong>default</strong> 三種參數可選。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-enter-active</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-leave-active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.4</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-enter-from</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-leave-to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">blur</span><span class="p">(</span><span class="mi">1</span><span class="kt">rem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>套用好頁面的轉場，就會有切換頁面時有模糊的效果。</p> <p><img src="https://live.staticflickr.com/65535/52630533604_548626fe62_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="自訂頁面的轉場">自訂頁面的轉場</h3> <p>既然知道 <code>pageTransition</code> 的 <strong>name</strong> 會對應頁面轉場的 CSS 名稱，我們就可以來自定義更多轉場，讓不同頁面套用不同的效果。</p> <p>例如在 <code>app.vue</code> 添加 <strong>rotate</strong> 為前綴的類別名稱 CSS。</p> <h5 id="appvue-2">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="cm">/* ... */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">active</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transition</span><span class="o">:</span> <span class="nx">all</span> <span class="mf">0.4</span><span class="nx">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">from</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">opacity</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">:</span> <span class="nx">rotate3d</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">15</span><span class="nx">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在頁面中使用 <code>definePageMeta()</code> 來設定 <code>pageTransition.name</code> 為 <code>rotate</code>。調整 <code>./pages/login.vue</code> 添加如下程式碼。</p> <h5 id="pagesloginvue-2">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;rotate&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當頁面切換時，皆會使用預設的模糊轉場效果，當切換至登入頁面就會套用指定的 <code>rotate</code> 頁面轉場，而有旋轉的轉場效果。</p> <p><img src="https://live.staticflickr.com/65535/52630763038_308b2983b9_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局的轉場效果">布局的轉場效果</h3> <p>Nuxt 同樣為所有布局 (Layouts) 都設置了轉場，如果要啟用，請將以下 CSS 添加至 <code>app.vue</code> 中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-enter-active</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-leave-active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.4</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-enter-from</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-leave-to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">grayscale</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./layouts/teal.vue</code> 布局，程式碼如下：</p> <h5 id="layoutstealvue">layouts/teal.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-screen bg-teal-50&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將登入頁面的布局套用 <code>teal</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;teal&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./layouts/green.vue</code> 布局，程式碼如下：</p> <h5 id="layoutsgreenvue">layouts/green.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-screen bg-teal-50&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將註冊頁面的布局套用 <code>green</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;green&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在登入頁面與註冊頁面切換時，因為兩個頁面使用了不同的布局，布局的轉場效果，使背影顏色會有灰階效果的轉場。</p> <p><img src="https://live.staticflickr.com/65535/52630533474_082235081d_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以像自訂頁面轉場一樣，來使用 <code>definePageMeta()</code> 設定 <code>layoutTransition.name</code> 屬性，來指定自訂的轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;green&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;slide-in&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="禁用轉場效果">禁用轉場效果</h3> <p>頁面與布局的轉場效果，都可以透過 <code>definePageMeta</code> 來設定 <code>pageTransition</code> 或 <code>layoutTransition</code> 為 <code>false</code> 來禁止套用轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="全域預設的轉場效果">全域預設的轉場效果</h3> <p>你也可以在 <code>nuxt.config.ts</code> 設置預設的頁面與轉場效果，例如：</p> <h5 id="nuxtconfigts-1">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;fade&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mode</span><span class="o">:</span> <span class="s1">&#39;out-in&#39;</span> <span class="c1">// default </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;slide&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mode</span><span class="o">:</span> <span class="s1">&#39;out-in&#39;</span> <span class="c1">// default </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然要將所有頁面與布局預設禁用也可以設置如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>pageTransition</code> 與 <code>layoutTransition</code> 接受的屬性可以參考 <a class="link" href="https://vuejs.org/api/built-in-components.html#transition" target="_blank" rel="noopener" >TransitionProps</a>。</p> <h3 id="元件屬性傳入-transition">元件屬性傳入 transition</h3> <p>在 <code>app.vue</code> 中使用 <code>&lt;NuxtPage /&gt;</code> 時，你可以將 <strong>TransitionProps</strong> 作為元件的 Props 來啟用全域預設的轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="o">:</span><span class="na">transition</span><span class="o">=</span><span class="s">&#34;{ </span></span></span><span class="line"><span class="cl"><span class="s"> name: &#39;bounce&#39;, </span></span></span><span class="line"><span class="cl"><span class="s"> mode: &#39;out-in&#39; </span></span></span><span class="line"><span class="cl"><span class="s"> }&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>當使用此方法設定轉場效果時，就不能在頁面中使用 <code>definePageMeta()</code> 來覆蓋這裡的頁面轉場設置。</p></blockquote> <p>以上我們主要實作了導航守衛，來為特定頁面添加瀏覽的權限，我們除了使用客戶端的 User Store 驗證外，也可以搭配 Cookie 再後端進行驗證，甚至為每個請求解析使用者，並查詢資料庫是否具有權限瀏覽，以此來控制使用者瀏覽頁面的權限，除了前端的阻擋外，更重要的是後端 API 也需要搭配進行權限驗證，才能有要的防止網頁漏洞產生，否則可能會發生，使用者無權瀏覽新增或管理的頁面，但是可以透過打 API 來進行相關操作，這樣是非常危險的。最後，我們將頁面切換時設置了進度條與轉場效果，使得整體網站能提供使用者更好的操作體驗，更多的轉場設置，也可以參考 <a class="link" href="https://nuxt.com/docs/getting-started/transitions" target="_blank" rel="noopener" >Nuxt 官方文件</a>。</p> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day23/nuxt-app-blog-navigation-guards" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 設置導航守衛與頁面切換效果範例</a></p> <hr> <h2 id="添加-html-meta-tag">添加 HTML Meta Tag</h2> <p>詳細 Nuxt3 添加 HTML Meta Tag 的說明，可以參考 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e6%90%9c%e5%b0%8b%e5%bc%95%e6%93%8e%e6%9c%80%e4%bd%b3%e5%8c%96-seo-%e8%88%87-html-meta-tag" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記 - 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag</a>，這邊我們說明為實作的部落格文章添加 Meta，調整 <code>./pages/articles/[id].vue</code> 檔案，添加以下程式碼：</p> <h5 id="pagesarticlesidvue">pages/articles/[id].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">summary</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;keywords&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">tags</span><span class="si">}</span><span class="sb">`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:title&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">summary</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:image&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">cover</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>其中 <code>article</code> 是我們從 Server API 回傳的指定貼文的資料並具有響應性，最後看看成果。</p> <p><img src="https://live.staticflickr.com/65535/52630723575_6dd0823515_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Nuxt 3 提供了一些可以設置網頁屬性與 <strong>Meta</strong> 的組合式函數，更能動態的調整與響應，結合 SSR 讓這些標記在伺服器端就能渲染出來，對網站做搜尋引擎最佳化 (SEO) 非常得友善，也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的的標記外，也有 <strong>OG Tag</strong> 可以加強網頁的連結預覽效果，雖然 <strong>OG Tag</strong> 與 SEO 沒有絕對的關係，但是透過伺服器端渲染調整這些 <strong>Meta</strong> 對搜尋引擎或網站都非常的方便，我們只要根據需求及指引做設定，就能對網站的能見度有所提升。</p> <hr> <h2 id="邁向國際化實作多國語系i18n">邁向國際化實作多國語系I18n</h2> <p>當一個網站需要面向不同國家或不同語言的使用者，我們就需要做<strong>國際化 (Internationalization)</strong>，將網站內容進行翻譯或語言的對應，讓使用者能理解網頁上的操作或內容，I18n 意謂著「Internationalization」這個單字中，I 和 n 之間有 18 個字母，也正是各個框架的實作多國語系套件的一個常用名稱，例如 Vue 生態就有 <a class="link" href="https://kazupon.github.io/vue-i18n" target="_blank" rel="noopener" >vue-i18n</a>，而這篇文章將講述如何在 Nuxt 3 中整合 Vue I18n 來協助實作多國語系。</p> <h3 id="nuxt-3-使用-vue-i18n">Nuxt 3 使用 Vue I18n</h3> <p>想要在 Vue 3 使用 Vue I18n 獲得比較好的支援度需要使用正處於 Beta 階段的 <a class="link" href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener" >v9 版本</a>，因此有幾種方式可以在 Nuxt 整合 Vue I18n，分別是依照 <a class="link" href="https://vue-i18n.intlify.dev/guide/integrations/nuxt3.html" target="_blank" rel="noopener" >Vue I18n 官方指引</a>、使用 Nuxt Community提供的 <a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >@nuxtjs/i18n@next</a> 模組及 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 模組。</p> <p>比較早以前，Nuxt 3 社群模組還沒有支援比較新的 Vue I18n，所以需要自己額外的製作插件來安裝，後來也有一些相容性的問題，所以 Vue I18n v9 的作者 <a class="link" href="https://github.com/kazupon" target="_blank" rel="noopener" >kazupon</a> 發布了 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 模組來方便 Nuxt 3 整合 <a class="link" href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener" >vue-i18n-next</a> (Vue I18n v9)，目前仍然可以使用 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 來進行整合，但我最後選擇使用 <a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >@nuxtjs/i18n@next</a> 模組，除了看好是由 Nuxt Community 提供的支援及未來的發展外，也能使用到 <strong>@nuxtjs/i18n</strong> 提供的一些組合函數等。</p> <h3 id="nuxt-3-整合-nuxtjsi18n">Nuxt 3 整合 @nuxtjs/i18n</h3> <p>目前 <code>@nuxtjs/i18n</code> 模組的穩定版本在 v7.3.0，而使用 Vue 3 和 Vue I18n v9 的模組則是<a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >下一個迭代版本</a> v8，所以使用 NPM 安裝的時候需要稍微注意一下。</p> <blockquote> <p>下圖於 2020/10/10 擷取自 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/i18n?activeTab=versions" target="_blank" rel="noopener" >NPM - @nuxyjs/i18n</a></p></blockquote> <p><img src="https://live.staticflickr.com/65535/52658265884_72ff895ee1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="step-1-安裝-nuxtjsi18n">Step 1. 安裝 @nuxtjs/i18n</h4> <p>目前有 A 或 B 兩種方式可以安裝 @nuxtjs/i18n v8 分別如下，可以選擇其中一種即可：</p> <p><strong>A. 使用 next 標籤來安裝 v8 版本</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @nuxtjs/i18n@next </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @nuxtjs/i18n@next</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>B. 安裝 @nuxtjs/i18n-edge (Edge Version)</strong></p> <ol> <li>添加 <strong>&quot;@nuxtjs/i18n&quot;: &ldquo;npm:@nuxtjs/i18n-edge&rdquo;</strong> 至 <code>package.json</code> 的 <code>dependencies</code> 或 <code>devDependencies</code> 依賴中，看起來可能像這樣：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;@nuxtjs/i18n&#34;</span><span class="p">:</span> <span class="s2">&#34;npm:@nuxtjs/i18n-edge&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>執行 npm install</li> </ol> <p>這邊我使用的是用 <code>next</code> 標籤來安裝。</p> <h4 id="step-2-添加模組">Step 2. 添加模組</h4> <p>於 <code>nuxt.config.ts</code> 中的 <code>modules</code> 屬性添加 <code>'@nuxtjs/i18n'</code>，參考如下：</p> <h5 id="nuxtconfigts-2">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-設定-i18n-參數">Step 3. 設定 i18n 參數</h4> <p>當添加完模組後，我們可以先設置 <strong>@nuxhjs/i18n</strong> 模組的選項，來測試是否能正常運作，於 <code>nuxt.config.ts</code> 中，添加 <code>i18n</code> 屬性，用以設置**@nuxhjs/i18n** 模組；<code>i18n.vueI18n</code> 設置的選項也可以參考 <a class="link" href="https://vue-i18n.intlify.dev/api/general.html#createi18n" target="_blank" rel="noopener" >Vue I18n v9 官方文件</a>。</p> <h5 id="nuxtconfigts-3">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueI18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">legacy</span>: <span class="kt">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">messages</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">en</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="s1">&#39;Hello!&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">language</span><span class="o">:</span> <span class="s1">&#39;Language&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">zh</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="s1">&#39;你好!&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">language</span><span class="o">:</span> <span class="s1">&#39;語言&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>記得設置 <code>i18n.vueI18n.legacy</code> 為 <code>false</code> 來關閉使用較舊的 API 模式。</p></blockquote> <h4 id="step-4-確認專案下的-pages-目錄">Step 4. 確認專案下的 pages 目錄</h4> <p>當完成 Step 3. 的模組設置後，就可以啟動伺服器來看看效果；不過若是 Nuxt 3 專案目錄下缺少了 <code>pages</code> 目錄，可能會無法啟用 Vue Router 自動產生路由，而出現下圖的錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52658429590_5f6755628e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們只需要新增 <code>./pages/ingex.vue</code> 路由頁面，就可以解決錯誤囉！</p> <h3 id="建立英語和繁體中文的語系切換">建立英語和繁體中文的語系切換</h3> <p>我們安裝與配置好 <strong>@nuxtjs/i18n</strong> 後，可以嘗試建立頁面來看看效果，以下以 <code>en</code> 與 <code>zh</code> 作為英語和繁體中文兩個語系的使用範例。</p> <p>新增 <code>./pages/index.vue</code> 內容如下：</p> <h5 id="pagesindexvue">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以使用 <code>$t()</code> 來傳入我們在 <code>nuxt.config.ts</code> 中的 <code>i18n.vueI18n.messages</code> 定義語系與對應的文字，而我們預設是 <code>zh</code> 繁體中文語系，畫面上就出現 <strong>hello: &lsquo;你好!&rsquo;</strong> 對應的「你好!」文字囉！</p> <p><img src="https://live.staticflickr.com/65535/52657492347_b9e6e46d40_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>新增按鈕來實現切換不同的語系，完整的程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setLocale(&#39;en&#39;)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">English</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setLocale(&#39;zh&#39;)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">繁體中文</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若沒有特殊需求，切換語系你可以選擇直接設定 <code>locale</code> 來自動響應或使用 <code>setLocale()</code> 來設定語系。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">setLocale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;en&#39;</span> </span></span><span class="line"><span class="cl"><span class="c1">// or </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setLocale</span><span class="p">(</span><span class="s1">&#39;en&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>完成後我們就可以切換 <code>en</code> 與 <code>zh</code> 語系，當然你也可以製作成選單來放置更多的語系來支援切換。</p> <p><img src="https://live.staticflickr.com/65535/52658265989_72dbc51a8e_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="獨立存放語系檔案">獨立存放語系檔案</h3> <p>隨著專案增大，語系的翻譯數量也會增多，而全部放在 <code>nuxt.config.ts</code> 中也實在太過冗長，所以我習慣獨立放置在一個資料夾內做處理。</p> <p>稍微調整一下 <code>nuxt.config.ts</code> 如下：</p> <h5 id="nuxtconfigts-4">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">defaultLocale</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">langDir</span><span class="o">:</span> <span class="s1">&#39;locales&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">locales</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">code</span><span class="o">:</span> <span class="s1">&#39;en&#39;</span><span class="p">,</span> <span class="nx">file</span><span class="o">:</span> <span class="s1">&#39;en.json&#39;</span><span class="p">,</span> <span class="nx">iso</span><span class="o">:</span> <span class="s1">&#39;en-US&#39;</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;English&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">code</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> <span class="nx">file</span><span class="o">:</span> <span class="s1">&#39;zh.json&#39;</span><span class="p">,</span> <span class="nx">iso</span><span class="o">:</span> <span class="s1">&#39;zh-TW&#39;</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;繁體中文&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategy</span><span class="o">:</span> <span class="s1">&#39;no_prefix&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueI18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">legacy</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們就可以建立各個語系放置的資料夾對應著 <code>i18n.langDir</code> 屬性，目錄名稱為 <code>locales</code>，再依序建立 <code>en.json</code> 與 <code>zh.json</code> 檔案，最終目錄的結構大概會長這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── ... </span></span><span class="line"><span class="cl">├── locales/ </span></span><span class="line"><span class="cl">│ ├── en.json </span></span><span class="line"><span class="cl">│ └── zh.json </span></span><span class="line"><span class="cl">├── ... </span></span><span class="line"><span class="cl">└── nuxt.config.ts </span></span></code></pre></td></tr></table> </div> </div><p>./locales/en.json 內容如下：</p> <h5 id="localesenjson">locales/en.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;hello&#34;</span><span class="p">:</span> <span class="s2">&#34;Hello!&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;language&#34;</span><span class="p">:</span> <span class="s2">&#34;Language&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>./locales/zh.json 內容如下：</p> <h5 id="localeszhjson">locales/zh.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;hello&#34;</span><span class="p">:</span> <span class="s2">&#34;你好!&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;language&#34;</span><span class="p">:</span> <span class="s2">&#34;語言&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>翻譯的語系檔案，也可以在根據需求使用 <strong>.js</strong>、<strong>yaml</strong> 或 <strong>json</strong> 格式的檔案，來搭配接受參數來產生翻譯文字。</p> <h3 id="持久化語系設定">持久化語系設定</h3> <p>當使用者切換語系之後，我們希望儲存這個語系設定，讓使用者下次瀏覽網站時，能套用儲存的語系，而不用再次切換，我們可以藉由瀏覽器的 <strong>LocalStorage</strong> 或 <strong>Cookie</strong> 來持久化。</p> <h4 id="localstorage-來儲存語系設定">LocalStorage 來儲存語系設定</h4> <p>我們可以在變更語系時，同時將語系儲存至 LocalStorage 之中，下次瀏覽網站時，再從中取出套用語系。</p> <p>例如，我們調整 <code>./pages/index.vue</code> 程式碼如下，在我們自訂的 <code>changeLanguage()</code> 方法內，同時呼叫 <code>localStorage.setItem('i18n-lang', localeCode)</code> 來儲存語系。</p> <h5 id="pagesindexvue-1">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;localeItem in locales&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="nt">:key</span><span class="o">=</span><span class="s">&#34;localeItem.code&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;changeLanguage(localeItem.code)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">localeItem</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;i18n-lang&#39;</span><span class="p">,</span> <span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>app.vue</code> 從 LocalStorage 讀取 <code>i18n-lang</code> 的設定值</p> <h5 id="appvue-3">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">defaultLocaleCode</span> <span class="o">=</span> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">client</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;i18n-lang&#39;</span><span class="p">)</span> <span class="o">??</span> <span class="nx">defaultLocaleCode</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當下次我們瀏覽網站時，就會查看 LocalStorage 中的語系設定並套用。</p> <p><img src="https://live.staticflickr.com/65535/52657982231_da9975d14a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="cookie-來儲存語系設定">Cookie 來儲存語系設定</h4> <p>Nuxt 3 的伺服器渲染，會導致第一次的請求無法在伺服器端取得 LocalStorage 的設定，所以上面的例子，仔細看會發現，雖然正確的套用儲存的 <code>en</code> 英語語系設定，但畫面是先從預設的 <code>zh</code> 繁體中文再切換過去，導致語系切換時閃了一下。</p> <p>我們可以透過使用 cookie 的方式來儲存語系，這樣伺服器端在接受第一次請求時也能解析出使用者的偏好設定，回傳正確的語系翻譯文字。</p> <p>你可以自己使用 Nuxt 3 提供 useCookie 等方式操作 cookie 來實現這套流程，不過呢，<strong>@nuxtjs/i18n</strong> 模組預設是啟用 cookie 相關的設定，提供的 <code>setLocaleCookie()</code> 與 <code>getLocaleCookie()</code> 可以來協助儲存語系設定至 cookie。</p> <p>調整 <code>./pages/index.vue</code> 程式碼如下，在我們自訂的 <code>changeLanguage()</code> 方法內，同時呼叫 <code>setLocaleCookie(localeCode)</code> 來儲存語系。</p> <h5 id="pagesindexvue-2">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;localeItem in locales&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="nt">:key</span><span class="o">=</span><span class="s">&#34;localeItem.code&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;changeLanguage(localeItem.code)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">localeItem</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocaleCookie</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>app.vue</code> 呼叫 <code>getLocaleCookie()</code> 從 cookie 解析的設定值，並再進行套用。</p> <h5 id="appvue-4">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">getLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">defaultLocaleCode</span> <span class="o">=</span> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">getLocaleCookie</span><span class="p">()</span> <span class="o">??</span> <span class="nx">defaultLocaleCode</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們使用 <code>setLocaleCookie()</code> 儲存語系至 cookie，會將 localeCode 儲存在 cookie 的 <code>i18n_redirected</code> 值上，當我們重新進入網頁，cookie 也將自動夾帶了這個 cookie 過去給伺服器端，並由 <code>getLocaleCookie()</code> 解析再由我們進行語系套用。</p> <p><img src="https://live.staticflickr.com/65535/52657492437_ee15a398eb_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其實 <strong>@nuxtjs/i18n</strong> 因為已將 detectBrowserLanguage.useCookie 預設為 true 等啟用了 cookie 儲存的相關設定，當使用者進入網站時，就會嘗試檢查瀏覽器的 cookie 來將使用者儲存的偏好語言進行套用或重定向。</p> <p>因此，我們在 <code>app.vue</code> 也不需要特別從 cookie 取出再進行套用，<strong>@nuxtjs/i18n</strong> 會自動幫我們完成。</p> <h5 id="appvue-5">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 除非你有特需的需求，不然這邊都不需要自己來了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// import { useI18n } from &#39;vue-i18n&#39; </span></span></span><span class="line"><span class="cl"><span class="c1">// const { locale, getLocaleCookie } = useI18n() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// const defaultLocaleCode = locale.value </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// locale.value = getLocaleCookie() ?? defaultLocaleCode </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而當使用者調整語系時，在第一個範例有提到，如果沒有特別需求，我們可以直接使用 <code>locale</code> 來設定語系，來自動響應變更語系，再使用 <code>setLocaleCookie(localeCode)</code> 將語系保存至 cookie 之內。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocaleCookie</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>但我們只要使用 <code>setLocal()</code> 方法來套用語系，就會一同更新至 cookie 中進行儲存，非常方便。最後我們將 <code>./pages/index.vue</code> 中的 調整如下，一樣可以達到在 cookie 中儲存使用者語系並在下次瀏覽網頁時自動套用。</p> <h5 id="pagesindexvue-3">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocale</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>setLocaleCookie()</code> 與 <code>getLocaleCookie()</code> 操作的預設設定，我們可以透過 <code>nuxt.config.ts</code> 中的 <code>i18n.detectBrowserLanguage</code> 進行調整，例如，調整 <code>cookieKey</code> 來變更儲存的名稱 <code>i18n_redirected</code> 等，更多選項可以<a class="link" href="https://v8.i18n.nuxtjs.org/options/browser/" target="_blank" rel="noopener" >參考這裡</a>。</p> <h5 id="nuxtconfigts-5">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">detectBrowserLanguage</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">useCookie</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cookieKey</span><span class="o">:</span> <span class="s1">&#39;i18n_redirected&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>@nuxtjs/i18n</strong> 模組提供的 cookie 操作語系持久化，甚至能做到一些重導向等行為，較 Nuxt 3 提供 useCookie 等方式自己來實現這套流程能更擁有更多功能。</p> <hr> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day24/nuxt-app-meta" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 搜尋引擎最佳化 (SEO) 之設定網頁 Meta 及 OG Tag 範例</a></p> <hr>https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/Sat, 14 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/<img src="https://live.staticflickr.com/65535/52616698791_b7b8bbce05_o.jpg" alt="Featured image of post 【Nuxt3】開箱即用的 Nuxt3 玩轉筆記" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10292483" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/users/20152617/ironman/5934" target="_blank" rel="noopener" >參考網站</a></p> <p>在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境，為了解決該情境問題，你可能會找到使用 Vite 做預渲染或其他方式，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 也是其中一個解決方案，且有更多強大的功能，目前 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 已經正式發布穩定版，就讓我們開始嘗鮮上手吧！</p> <p>本篇會著重在 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 的特色與功能學習，所以你可能需具備些 Vue 3 基礎，我將從搭建 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 開發環境、頁面路由與佈局一直到使用 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 建立 SEO 所需的資訊做些筆記及介紹，讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG，進而解決 Vue 3 SPA 不好做 SEO 的問題。</p> <hr> <h2 id="nuxt-3-介紹">Nuxt 3 介紹</h2> <h3 id="前言">前言</h3> <p>採用 SSR + SPA，將第一個畫面透過 SSR 產生，其他就交給 CSR 來做處理，既能兼具 SEO 還能擁有 SPA 的使用者體驗，不是很完美嗎？沒有錯，但在沒有任何框架輔助之下，同一個頁面你可能就需要實作兩次程式碼，也就是前後端各一次的渲染邏輯，這也就是相應的代價。在介紹 Nuxt 3 之前就稍微提一下 <strong>Isomorphic JavaScript</strong> 與 <strong>Universal JavaScript</strong>。</p> <h3 id="isomorphic-javascript-與-universal-javascript">Isomorphic JavaScript 與 Universal JavaScript</h3> <h4 id="isomorphic-javascript">Isomorphic JavaScript</h4> <p>隨著 Node.js 的出現，讓客戶端瀏覽器之外的伺服器也能執行 JavaScript 程式碼，使得 JavaScript 成為一種同構語言 (Isomorphic Language)。Isomorphic JavaScript 即稱之為<strong>同樣的 JavaScript 程式碼可以在客戶端及伺服器端運行</strong>；也就是說同一份 Code 除了能在前端瀏覽器也能在後端執行。</p> <p>然而 <code>Isomorphic JavaScript</code> 與 <code>Universal JavaScript</code> 的名詞存有一些爭議與差異，如今，<code>Isomorphic JavaScript</code> 多以稱<strong>相同的程式碼元件，可以在客戶端與伺服器端用來組裝或渲染出頁面的技術</strong>。</p> <h4 id="universal-javascript">Universal JavaScript</h4> <p>Michael Jackson 的<a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >文章</a>提到，Isomorphic 這個詞的含義「corresponding or similar in form and relations」為兩個實體不相同，但具有相似的操作或對應的關係，換句話說就是，兩個看起來不一樣的使用方法或語法，但最終的執行結果是一樣的，例如 jQuery 或 Zepto 操作 DOM 的語法長的不大一樣，但是最終也都是對應 JavaScript 的 <code>document.querySelector</code> 等方法。</p> <p>所以說，為了描述相同的程式碼但能在不同環境中運行的名詞，就有了 <code>Universal JavaScript</code> 一詞，這個名字告訴人們 JavaScript 它<strong>不僅可以在服務器和瀏覽器上運行，還可以在本機設備和嵌入式架構上運行</strong>。</p> <p>那麼 Isomorphic JavaScript 和 Universal JavaScript 與我們又有什麼關係呢？</p> <p>有的，因為 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 正是一個 <code>Isomorphic JavaScript</code> 框架，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 是目前你使用 Vue 3 在開發網站時，會需要採用 SSR 技術或優化 SEO 問題所可以使用的解決方案。</p> <h3 id="nuxt-3">Nuxt 3</h3> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官方在 2022/11/16 正式發布穩定版本 <a class="link" href="https://github.com/nuxt/framework/releases/tag/v3.0.0" target="_blank" rel="noopener" >Nuxt 3.0 stable</a>。</p> <p><img src="https://live.staticflickr.com/65535/52617186163_0145c6b0f2_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官網的標語 <code>The Intuitive Web Framework</code>，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 將讓你更直覺的體驗混合渲染等新功能，讓在使用 Vue 3 開發時變得更加簡單！</p> <h4 id="nuxt-3-的新特性">Nuxt 3 的新特性</h4> <p>從 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官網的提供訊息所列，簡單說明一下 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 的新特性，共有下列 12 個：</p> <p><img src="https://live.staticflickr.com/65535/52616188037_f6476e512d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>Lighter：更輕量，針對現在瀏覽器，伺服器部署與客戶端打包能減少最高 75 倍之多。</li> <li>Faster：更快速，通過 Nitro 提供支持的動態伺服器端程式碼拆分來優化冷啟動問題。</li> <li>Hybird：動態的靜態頁面生成和其他高級模式，現在這些都將成為可能。</li> <li>Suspense：在導航觸發的前後，皆可以在任何元件中取得數據資料。</li> <li>Composition API：使用 Composition API 和 Nuxt 3 的 Composables 實現真正的程式碼可重用性。</li> <li>Nuxt CLI：全新的零依賴體驗，幫助你輕鬆建立專案與模組整合。</li> <li>Nuxt Dev Tools：專屬開發除錯工具，提供更多的資訊與快速修復，讓工作更高效。</li> <li>Nuxt Kit：具備基於 TypeScript 和跨版本兼容性的全新模組開發。</li> <li>webpack 5：更快速的打包時間與打包出更小的體積，並且無需任何配置。</li> <li>Vite：使用 Vite 作為打包工具，體驗閃電般快速的 HMR。</li> <li>Vue 3：完全支持 Vue 3。</li> <li>TypeScript：使用 TypeScript 與 ESM 構建而成，無需額外的配置步驟。</li> </ul> <h4 id="nitro">Nitro</h4> <p>Nuxt 3 由一個全新的伺服器引擎 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 提供支持，它具有以下幾個特點：</p> <ul> <li>跨平台支持，支持 Node.js 與瀏覽器等。</li> <li>Serverless 支持。</li> <li>API 路由，使用 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >unjs/h3</a>。</li> <li>自動程式碼拆分 (code-splitting) 與異步加載 chunk (async-loaded chunks)。</li> <li>混合渲染模式，供靜態 (static)與無伺服器 (serverless) 網站。</li> <li>開發伺服器上的 HMR (hot module reloading)。</li> </ul> <p>簡單來說，<a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 已經是 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 包含的全新伺服器引擎，無需再進行配置。<a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 除了支援 SPA、建立靜態的網站，甚至能在後端打 API 時直接調用相關函數，從而降低 API Request，整體來說是非常強大的伺服器引擎。</p> <h4 id="nuxt-3-渲染模式">Nuxt 3 渲染模式</h4> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 目前支援兩種渲染模式，<code>Client-side Only Rendering</code> 與 <code>Universal Rendering</code>。之後將會推出更先近的渲染模式，<code>混合渲染 (Hybrid Rendering)</code> 與<code>邊緣渲染 (Edge-Side Rendering)</code>。</p> <ul> <li>Client-side Only Rendering</li> </ul> <p>Nuxt 3 設定為該模式，如同單純使用 Vue 3 建置出的 SPA，瀏覽器下載並載入完 Vue 程式碼後，<code>渲染 HTML 的所有動作皆在客戶端執行</code>，也就是客戶端渲染 CSR。</p> <ul> <li>Universal Rendering</li> </ul> <p>Universal Rendering 是 <code>Nuxt 3 預設的渲染模式</code>，在這個模式之下，無論頁面是預先產生並緩存還是動態渲染，Nuxt 都會在伺服器環境中執行 Vue 程式碼，並渲染 HTML，也就是如同 SSR，伺服器會向瀏覽器返回一個完整呈現的 HTML 頁面。當瀏覽器完整呈現的頁面出現後，也會開始載入 Vue 程式碼，以因應後續的動態頁面與路由跳轉等，即轉換為 SPA 開始由客戶端進行渲染。也就是說 Nuxt 3 的 <code>Universal Rendering</code> 即是指 <code>SSR + SPA</code>。</p> <ul> <li>混合渲染 (Hybrid Rendering)</li> </ul> <p>我們在使用 Vue 開發 SPA 網站時，通常是會設置路由 (Route) 讓網頁能夠到達不同的頁面再來請求資料，此為 CSR。在使用 Nuxt 開發時能讓能網站擁有 SSR + SPA 的 Universal Rendering 渲染方式，除此之外，Nuxt 3 還提供了一種更先進的渲染模式——<code>混合渲染 (Hybrid Rendering)</code>，可以<code>為每個路由設置不同的渲染與緩存的規則</code>，讓部分頁面使用 CSR 在客戶端進行渲染，另一部分使用 SSR 在伺服器端進行渲染。</p> <ul> <li>邊緣渲染 (Edge-Side Rendering)</li> </ul> <p>Nitro 為 Nuxt 3 提供支持的全新伺服器端渲染引擎，它為 Node.js、Deno、Worker 等提供跨平台的支持，讓 Nuxt <code>可以在 CDN Edge Workers 進行渲染</code>，故稱為<code>邊緣渲染 (Edge-Side Rendering)</code>，能有效分擔在伺服器端渲染時的資源負荷，將其提升到另一個層次，從而減少網路延遲及成本。</p> <h4 id="nuxt-3-的建構工具">Nuxt 3 的建構工具</h4> <p>Nuxt 3 預設的建構工具如下：</p> <ul> <li>預設使用 <a class="link" href="https://vitejs.dev/" target="_blank" rel="noopener" >Vite</a> 也可以切換成 <a class="link" href="https://webpack.js.org/" target="_blank" rel="noopener" >webpack</a></li> <li><a class="link" href="https://rollupjs.org/" target="_blank" rel="noopener" >Rollup</a></li> <li><a class="link" href="https://postcss.org/" target="_blank" rel="noopener" >PostCSS</a></li> <li><a class="link" href="https://esbuild.github.io/" target="_blank" rel="noopener" >esbuild</a></li> </ul> <p>Nuxt 3 已經幫我們配置好一堆設定啦，真的是開箱即用，而且 Nuxt 也支援 TypeScript。如果說真的要調整配置，也可以再 <code>nuxt.config</code> 中進行調整，非常方便貼心。</p> <hr> <h2 id="使用-nuxi-建立第一個專案">使用 nuxi 建立第一個專案</h2> <h3 id="線上玩玩看">線上玩玩看</h3> <p>如果你還在觀望或是從隔壁棚過來的，還不想安裝相關工具與環境，那麼可以點擊下面其一連結，在 StackBlitza 或 CodeSandbox 的線上編輯器環境稍微玩玩，直接線上體驗 Nuxt 3。</p> <ul> <li><a class="link" href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" target="_blank" rel="noopener" >Play on StackBlitz</a></li> <li><a class="link" href="https://codesandbox.io/p/github/nuxt/starter/v3-codesandbox" target="_blank" rel="noopener" >Play on CodeSandbox</a></li> </ul> <h3 id="開始建立第一個專案">開始建立第一個專案</h3> <h4 id="先決條件">先決條件</h4> <p>開始之前，依照 Nuxt 3 官網的<a class="link" href="https://nuxt.com/docs/getting-started/installation" target="_blank" rel="noopener" >起手式</a>我們有幾個項目需要做一下檢查，我們這裡僅先注意一下 Node.js 的版本，建議使用目前<a class="link" href="https://nodejs.org/zh-tw/download/" target="_blank" rel="noopener" >最新 LTS 版本</a> <code>v16.17.0</code> (包含 NPM v8.15.0)。</p> <h4 id="使用-nuxi-建立-nuxt-3-專案">使用 nuxi 建立 Nuxt 3 專案</h4> <p><a class="link" href="https://www.npmjs.com/package/nuxi" target="_blank" rel="noopener" >nuxi</a> 全名為 <strong>Nuxt Command Line Interface</strong>，是由 Nuxt 提供開發的標準工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 專案，我們當然也就可以使用 Nuxt CLI 來建立 Nuxt 的專案。</p> <p>首先，打開終端機 (Terminal)，將目錄切換至自己習慣的工作區，接著輸入如下的 nuxi 提供指令並執行，來初始化建立一個 Nuxt 3 專案。在此，我們的專案名為 <code>nuxt-app</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init nuxt-app </span></span></code></pre></td></tr></table> </div> </div><p>如下圖，npx 會詢問你是否安裝最新版本的套件 <code>nuxi@3.0.0-rc.10</code> 輸入 <code>y</code> 即可。</p> <p><img src="https://live.staticflickr.com/65535/52616697991_767a632430_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>執行完指令後直到出現如下提示，代表專案已經初始建立成功，完成後可以發現目前目錄下多了一個名為 <code>nuxt-app</code> 的資料夾，這個資料夾也就是 Nuxt 3 專案的根目錄。</p> <p><img src="https://live.staticflickr.com/65535/52616964239_b438581d8d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來，我們可以進入專案目錄 <code>nuxt-app</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">cd</span> nuxt-app </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>nuxt-app</code> 專案目錄下可以看到熟悉的 <code>package.json</code>，我們就可以開始安裝 Nuxt 3 專案的相關依賴套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt CLI 如同 Vue CLI 已經在建立專案時幫我們初始完成許多事情，再安裝完相關依賴套件後輸入下列指令，我們就可以在開發環境下啟動 Nuxt 了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run dev -- -o</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果沒有意外，可以看到 Nitro 幫我們啟動了 Nuxt 3 的服務。</p> <p><img src="https://live.staticflickr.com/65535/52617186213_f7a11b0b5a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>根據提示，我們可以在瀏覽器輸入網址 <a class="link" href="http://localhost:3000/" target="_blank" rel="noopener" >http://localhost:3000/</a> 看看服務是否正常運作。</p> <p>如果看到如下圖的歡迎畫面，恭喜你！我們已經成功建立第一個 Nuxt 3 專案囉！</p> <p><img src="https://live.staticflickr.com/65535/52616964264_faa521ed78_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在你可以嘗試打開在專案目錄下的 <code>app.vue</code> 檔案之中，<code>app.vue</code> 是我們 Nuxt 專案的進入點，它的內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現它與 Vue 3 的單一元件檔 (Single File Component, SFC) 相比，好像少了點什麼，怎麼有用了 <code>&lt;NuxtWelcome /&gt;</code> 卻沒看見在哪邊 import 的呢？</p> <p>其實呢，<code>&lt;NuxtWelcome /&gt;</code> 這個元件就是我們前面瀏覽器看到的歡迎畫面，是 Nuxt 框架自帶的一個元件，而且 Nuxt 自動導入元件的更是其特色之一，後面的系列我們會再提到<strong>自動導入 (Auto Imports)</strong>。</p> <p>在這裡直接移除 <code>&lt;NuxtWelcome /&gt;</code> 就可以了，我們將 app.vue 調整如下，並保存檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span> <span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看見因為 Nuxt 預設 Vite 建構並支援 <a class="link" href="https://vitejs.dev/guide/features.html#hot-module-replacement" target="_blank" rel="noopener" >HMR</a> (Hot Module Replacement)，我們可以在瀏覽器快速的看見修改後的結果。</p> <p><img src="https://live.staticflickr.com/65535/52616698026_1bf03d908a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>至此，大家就可以先簡單的玩玩 Nuxt 3，接下來我將補充一些 nuxi 的指令與參數簡介。</p> <h3 id="nuxt-cli-常用指令">Nuxt CLI 常用指令</h3> <p>以下將簡單介紹一些常用的指令，若您在專案目錄下記得使用 <code>npx</code> 來執行 <code>nuxi</code>。</p> <p>另外在此提醒，下面所列的指令<code>部分參數會進行省略</code>，若有興趣翻翻完整的指令與參數說明，可以參考 <a class="link" href="https://v3.nuxtjs.org/api/commands/add" target="_blank" rel="noopener" >Nuxt 3 官方文件</a>。</p> <h4 id="nuxi-init">nuxi init</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init<span class="p">|</span>create <span class="o">[</span>dir<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個 <code>nuxi init</code> 指令是用來初始化一個 Nuxt 專案，等同 <code>nuxi create</code> 指令，<code>dir</code> 你可以填字串作為專案與資料夾名稱，也可以填寫完整路徑來建立專案目錄。</p> <h4 id="nuxi-dev">nuxi dev</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi dev <span class="o">[</span>--open, -o<span class="o">]</span> <span class="o">[</span>--port, -p<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們在本地端進行開發時，需要運行開發環境，當我們執行 <code>npm run dev -- -o</code> 時，依據 <code>package.json</code> 中的 scripts 所列，其實就是在執行 <code>nuxi dev -o</code>，其中的 <code>-o</code> 表示<strong>服務啟動後開啟瀏覽器</strong>。</p> <p>如果啟動服務發現 Port 衝突，你也可以透過 <code>-p</code> 來將預設的監聽的 Port: 3000 調整為其他數值。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxi dev -p <span class="m">3001</span> </span></span><span class="line"><span class="cl"><span class="c1"># 或</span> </span></span><span class="line"><span class="cl"><span class="c1"># npm run dev -- -o -p 3001</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="nuxi-cleanup">nuxi cleanup</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi clean<span class="p">|</span>cleanup </span></span></code></pre></td></tr></table> </div> </div><p><code>nuxi cleanup</code> 等同 <code>nuxi clean</code> 指令，用來刪除 Nuxt 自動產生的檔案和緩存包括：</p> <ul> <li>.nuxt</li> <li>.output</li> <li>node_modules/.vite</li> <li>node_modules/.cache</li> </ul> <h4 id="nuxi-upgrade">nuxi upgrade</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi upgrade <span class="o">[</span>--force<span class="p">|</span>-f<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個指令可以用來將目前專案的 Nuxt 3 升級至最新的版本，如果有一些可能行為調整或不相容的情況，可以再依據實際情境搭配 <code>-f</code> 參數來強制更新。</p> <p>如下圖，只要一行指令 <code>npx nuxi upgrade</code> 就可以將專案版本由 <code>3.0.0-rc.9</code> 升級至 <code>3.0.0-rc.10</code>，在 RC 階段或之後想定期升級版本來說非常好用，但也請記得<code>升級前可以先看一下官方的 Changelog</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617186283_00309ed597_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="nuxt-3--typescript--eslint--prettier-環境建置">Nuxt 3 + TypeScript + ESLint + Prettier 環境建置</h2> <p>在我們使用完 Nuxt CLI 建立完專案後，其實就可以開始進行專案的開發，但是呢，相信不少人對於程式碼的排版都有自己的風格，不同人的 Coding Style 肯定也都不一樣，然而在團隊協作需要標準或為了整體一致且美觀下，Linter 就是你的好幫手，此外，TypeScript 在 Nuxt 3 已經有內建支援，我也建議及推薦使用 TypeScript，接下來分享我自己在使用 Nuxt 3 開發時的 Linter 環境配置，包含了 <code>TypeScript</code>、<code>ESLint</code> 與 <code>Prettier</code>。</p> <h3 id="typescript-類型檢查">TypeScript 類型檢查</h3> <p><img src="https://live.staticflickr.com/65535/52616964289_0dbc29572e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Nuxt 3 已經有內建支援 TypeScript，一些 TypeScript 設定都可以在專案根目錄下配置 <code>tsconfig.json</code>，例如，在開發過程中針對 TypeScript 我會在開發環境下啟動類型檢查，可以參考以下進行配置。</p> <h4 id="step-1-安裝-vs-code-插件">Step 1. 安裝 VS Code 插件</h4> <p>首先，推薦大家安裝下列兩個 VS Code 插件：</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" target="_blank" rel="noopener" >Vue Language Features (Volar)</a>：寫 Vue 3 強力推薦必裝的插件，包含了上色、語法提示、編輯器快速分割等強大功能，而且也是 Nuxt 3 推薦的編輯器插件。</li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin" target="_blank" rel="noopener" >TypeScript Vue Plugin (Volar)</a>：Vue 的 TypeScript 插件。</li> </ul> <h4 id="step-2-安裝-vue-類型檢查套件">Step 2. 安裝 Vue 類型檢查套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue-tsc typescript </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue-tsc typescript</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-調整-nuxtconfigts-設定">Step 3. 調整 nuxt.config.ts 設定</h4> <p>根據 nuxt3 官方文件<a class="link" href="https://nuxt.com/docs/guide/concepts/typescript" target="_blank" rel="noopener" >說明</a>，我們可以在 <code>nuxt.config.ts</code> 中，設置 <code>typescript.typeCheck: true</code> 來讓開發時期能執行類型檢查。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-重新啟動開發環境服務">Step 4. 重新啟動開發環境服務</h4> <p>我們重新執行 <code>npm run dev -- -o</code> 來重啟開發環境的服務，這樣就配置完成囉！</p> <h4 id="看看效果">看看效果</h4> <p>如果我們在 <code>app.vue</code> 寫了以下程式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="s1">&#39;2022&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現終端機 (Terminal) 就<code>指出了一個錯誤的類型指派</code>，並告知你有錯誤程式碼的位置。</p> <p><img src="https://live.staticflickr.com/65535/52616964299_7ee542dbc3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="eslint-設置-linter">ESLint 設置 Linter</h3> <p><img src="https://live.staticflickr.com/65535/52616698096_7b89a76f54_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>ESLint 是一個 <code>JavaScript Linter</code>，它用來檢查 JavaScript Coding Style 的工具，主要能幫你<code>分析並找到語法錯誤</code>，也能用來<code>統一風格</code>，例如：縮排空白數、字串要用單引號或雙引號等，提醒你刪掉多餘程式碼或遵照最佳的實踐方式，確保程式碼能具有一定的水準。在團隊協作下 ESLint 更能讓大家撰寫程式碼時遵照規則，確保程式碼品質。ESLint 除了提供你可以使用大公司如 Google、Airbnb 等的規則配置來作為檢查基準，也可以客製自訂出自己喜好或團隊共識的規則來分析與提醒你校正語法。</p> <h4 id="step-1-安裝-eslint-套件">Step 1. 安裝 ESLint 套件</h4> <p>現在我們至 Nuxt 專根目錄下，開始安裝 ESLint 相關套件，當然，你也可以挑自己喜歡的進行配置，不過在這裡選擇以 Nuxt 3 官方提供的 ESLint 設定來做標準配置，並添加支援 Vue 3 的 ESLint 設定。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置-eslint-設定檔">Step 2. 配置 ESLint 設定檔</h4> <p>安裝完所需套件後，接下來我們就可以來設定 ESLint，我們在專案根目錄下建立 <code>.eslintrc.js</code> 檔案，內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">browser</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">es2021</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="kr">extends</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/eslint-config-typescript&#39;</span><span class="p">,</span> <span class="s1">&#39;plugin:vue/vue3-recommended&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">parserOptions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ecmaVersion</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sourceType</span><span class="o">:</span> <span class="s1">&#39;module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">overrides</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">files</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/pages/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/layouts/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/app.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/error.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;vue/multi-word-component-names&#39;</span><span class="o">:</span> <span class="s1">&#39;off&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>在我們建立的 <code>.eslintrc.js</code> 檔案中 <code>extends</code> 可以是一個陣列，主要是來放置<code>擴展</code> ESLint 的規則的配置，這裡稍微注意一下順序如下：</p> <ol> <li> <p><strong>@nuxtjs/eslint-config-typescript</strong>：對應 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config-typescript" target="_blank" rel="noopener" >@nuxtjs/eslint-config-typescript</a> 套件，由 Nuxt 官方提供用於 Nuxt 的 ESLint 規則配置。如果你不是使用 TypeScript 可以使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a>。</p> </li> <li> <p><strong>plugin:vue/vue3-recommended</strong>：對應 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-vue" target="_blank" rel="noopener" >eslint-plugin-vue</a> 套件，由 Vue.js 官方提供的 ESLint <a class="link" href="https://github.com/vuejs/eslint-plugin-vue" target="_blank" rel="noopener" >插件</a>，包含了能配合 Vue SFC 語法及特性的規則，也可以參考<a class="link" href="https://eslint.vuejs.org/user-guide/#bundle-configurations" target="_blank" rel="noopener" >官方文件</a>，依據需求稍作調整。</p> </li> </ol> <p>將特定目錄下的檔案關閉 <code>vue/multi-word-component-names</code> 規則，以此來因應 nuxt 的開發避免提示錯誤。</p> <blockquote> <p>因為目前 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config-typescript" target="_blank" rel="noopener" >@nuxtjs/eslint-config-typescript</a> 是基於 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a> 來擴展 TypeScript 的設定，而且 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a> 包含的是 Vue 2 的 ESLint 設定，所以我們需要再額外安裝 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-vue" target="_blank" rel="noopener" >eslint-plugin-vue</a> 來擴展 Vue 3 規則配置，並覆寫 <strong>vue/multi-word-component-names</strong> 規則。</p></blockquote> <h4 id="用-eslint-來嘗試檢查">用 ESLint 來嘗試檢查</h4> <p>首先，我們編輯 <code>app.vue</code> 檔案內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">2022</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們執行下列指令來使用 eslint 檢查 <code>app.vue</code> 這個檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx eslint -- app.vue </span></span></code></pre></td></tr></table> </div> </div><p>可以看到下圖，ESLint 指出 <code>app.vue</code> 的問題，在第 9 行中的 <code>title</code> 這個變數已經宣告了卻沒有被使用。</p> <p>這個錯誤訊息正是依據上面我們的 ESLint 配置所被檢視出來的，在 ESLint 規則定義好後，也有分成錯誤 (Error) 與警告 (Warning)，我們可以再依據 ESLint 給予的提示進行調整與修正。</p> <p><img src="https://live.staticflickr.com/65535/52616188177_46465e3ffe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們嘗試修正一下 <code>app.vue</code> 這個檔案，在 template 中使用 title 這個變數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">2022</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>再一次執行 <code>npx eslint -- app.vue</code>，就會發現沒有錯誤訊息產生囉！</p> <h3 id="在-packagejson-設置腳本">在 package.json 設置腳本</h3> <p>我們除了逐個檔案做檢查，也可以設置腳本來檢查整個專案目錄下的程式碼。</p> <p>在 <code>package.json</code> 的 scripts 腳本中，我們可以新增一個指令 <code>&quot;lint&quot;: &quot;eslint --ext .ts,.js,.vue .&quot;</code>，這樣一來我們就可以使用如下指令來檢查專案目錄下的所有包含 <strong>.ts</strong>、<strong>.js</strong>、<strong>.vue</strong> 副檔名的檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run lint </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run lint</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="在-vs-code-中顯示-eslint-錯誤或警告">在 VS Code 中顯示 ESLint 錯誤或警告</h3> <p>推薦大家安裝 VS Code 的 ESLint 插件：</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="noopener" >ESLint</a>：讓你在編輯器開發時就能有指令檢查，更可以做到全域或特定工作區開啟儲存或快捷鍵自動修正程式碼等設置。</li> </ul> <blockquote> <p>安裝完畢後，建議重啟 VS Code 來重新載入相關設定。</p></blockquote> <p>現在，你會發現在 VS Code 中編輯程式的過程中，如果有 ESLint 檢查到的錯誤或建議，就會出現<code>紅色或黃色的波浪底線</code>，當滑鼠指標移動至波浪底線處，就會發現有個小視窗提示你錯誤或警告的原因是什麼。</p> <p><img src="https://live.staticflickr.com/65535/52617186373_67101210bd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在-vs-code-中自動修正-eslint-錯誤或警告">在 VS Code 中自動修正 ESLint 錯誤或警告</h3> <p>在某些情況，ESLint 可以幫助你做自動修正程式碼，甚至在存擋時將錯誤部分直接進行修正。</p> <h4 id="手動快速修正">手動快速修正</h4> <p>我們可以在編輯器將滑鼠指標移動至波浪底線點擊「<strong>快速修正 (Quick Fix)&hellip;</strong>」，你也可以使用編輯器建議的快捷鍵 <strong>Command + . (macOS)</strong>，此時就能選擇要修復或關閉略過錯誤原因；這裡我們選擇「<strong>Fix all auto-fixable problems</strong>」，來修復所有可能可以被自動修復的問題。</p> <p><img src="https://live.staticflickr.com/65535/52617134545_8b88fdc93b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="存擋自動修正">存擋自動修正</h4> <p>除了手動快速修正外，你也可以透過添加 VS Code 的設定檔，如專案目錄下新增 <code>.vscode/settings.json</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.formatOnSave&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;prettier.semi&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;files.trimTrailingWhitespace&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.defaultFormatter&#34;</span><span class="p">:</span> <span class="s2">&#34;esbenp.prettier-vscode&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.codeActionsOnSave&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;source.fixAll.eslint&#34;</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.format.enable&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.validate&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;javascript&#34;</span><span class="p">,</span> <span class="s2">&#34;javascriptreact&#34;</span><span class="p">,</span> <span class="s2">&#34;html&#34;</span><span class="p">,</span> <span class="s2">&#34;vue&#34;</span><span class="p">,</span> <span class="s2">&#34;typescript&#34;</span><span class="p">,</span> <span class="s2">&#34;typescriptreact&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.enable&#34;</span><span class="p">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們編輯完程式碼，並保存檔案或快捷鍵存擋 <strong>Command + S (macOS)</strong>，就會觸發 ESLint 自動修復囉。</p> <p><img src="https://live.staticflickr.com/65535/52616698136_f967028caa_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="prettier-設置">Prettier 設置</h3> <p><img src="https://live.staticflickr.com/65535/52617186383_1c8d988fe4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Prettier 是程式碼格式化的工具，也可以與 ESLint 進行搭配，ESLint 與 Prettier 就能各司其職將 JaveScript 與 Vue 等檔案依照配置進行檢查與排版。</p> <h4 id="step-1-安裝-prettier-套件">Step 1. 安裝 Prettier 套件</h4> <p>我們直接安裝 prettier、eslint-config-prettier 與 eslint-plugin-prettier 三個套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prettier eslint-config-prettier eslint-plugin-prettier </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prettier eslint-config-prettier eslint-plugin-prettier</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置-prettier-設定檔案">Step 2. 配置 Prettier 設定檔案</h4> <p>我們在專案根目錄下建立 <code>.prettierrc.js</code> 檔案，內容如下，這些配置都可以自己設定來配合 ESLint，更多選項或說明可以參考 <a class="link" href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener" >Prettier 官方說明文件</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">printWidth</span><span class="o">:</span> <span class="mi">120</span><span class="p">,</span> <span class="c1">// 每行文字數量達 100 字元就換到新的一行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">semi</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 每個語句的結尾不需要分號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">singleQuote</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 字串使用單引號，而不是雙引號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">trailingComma</span><span class="o">:</span> <span class="s2">&#34;none&#34;</span><span class="p">,</span> <span class="c1">// 如 Object、Array 內的元素不需要尾隨逗號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">endOfLine</span><span class="o">:</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueIndentScriptAndStyle</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-配置-eslint-設定檔案">Step 3. 配置 ESLint 設定檔案</h4> <p>我們在安裝時多裝了兩個 ESLint 相關套件，分別為 <a class="link" href="https://github.com/prettier/eslint-config-prettier" target="_blank" rel="noopener" >eslint-config-prettier</a> 及 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-prettier" target="_blank" rel="noopener" >eslint-plugin-prettier</a>。</p> <p>對此我們需要將其添加至 ESLint 的 <code>.eslintrc.js</code> 設定檔內，在 <code>extends</code> 添加字串 <code>prettier</code> 表示使用 <a class="link" href="https://github.com/prettier/eslint-config-prettier" target="_blank" rel="noopener" >eslint-config-prettier</a> 擴充配置，主要用來防止 Prettier 排版與 ESLint 發生衝突，讓其可以用來禁用 ESLint 的格式化；接著在 <code>plugins</code> 中添加 <code>prettier</code> 字串表示使用 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-prettier" target="_blank" rel="noopener" >eslint-plugin-prettier</a> 套件擴充，讓 ESLint 可以提示我們格式有錯誤的地方。</p> <p>為了讓 Prettier 與 ESLint 有更好的搭配，在 <code>rules</code> 的參數中記得添加 <code>'prettier/prettier': 'error'</code> 讓 ESLint 可以提示 Prettier 的排版異常提示供我們做修正，至此 <code>.eslintrc.js</code> 設定檔應該會如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">browser</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">es2021</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="kr">extends</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;@nuxtjs/eslint-config-typescript&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;plugin:vue/vue3-recommended&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">parserOptions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ecmaVersion</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sourceType</span><span class="o">:</span> <span class="s1">&#39;module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;prettier&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier/prettier&#39;</span><span class="o">:</span> <span class="s1">&#39;error&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">overrides</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">files</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/pages/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/layouts/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/app.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/error.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;vue/multi-word-component-names&#39;</span><span class="o">:</span> <span class="s1">&#39;off&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-安裝-vs-code-的-prettier-插件">Step 4. 安裝 VS Code 的 Prettier 插件</h4> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener" >Prettier - Code formatter</a>：提供我們做程式碼的格式化，最重要的是來協助我們自動載入 <code>.prettierrc.js</code> 配置。</li> </ul> <blockquote> <p>安裝完畢後，建議重啟 VS Code 來重新載入相關設定。</p></blockquote> <p>我們完成了 TypeScript 與 Linter 的配置，雖然配置有些繁瑣，但寫程式的風格有個標準及規則依循，肯定能協助你寫出令人讚嘆的完美的程式碼。</p> <hr> <h2 id="使用-tailwind-css">使用 Tailwind CSS</h2> <p><img src="https://live.staticflickr.com/65535/52617186403_1fa6ef95d7_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為了後續範例程式在頁面呈現上能有比較好看的樣式，原先有想過使用 UI 框架或純寫 CSS，但是總覺得好像不夠潮，所以呢，我決定帶入近年滿熱門的 CSS 框架 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a>，在本篇文章我就不再多花篇幅介紹 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind</a> 的語法及指令等，主要針對 Nuxt 3 如何導入 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 至專案內使用。</p> <p>其實有稍微糾結一下要不要使用 <a class="link" href="https://css.master.co/tw" target="_blank" rel="noopener" >Master CSS</a>，雖然最後決定先緩緩，但我認為它非常有淺力成為這類框架的霸主，大家有空也可以支持一下或玩玩這個由臺灣團隊開發的 CSS 框架哦！</p> <p><a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 是近年滿熱門的 <code>Utility-First CSS</code> 框架，曾掀起一番論戰說 Class 不是讓你這樣用的之類的批評及缺點，但如果你深入暸解它後，確實不可否認它能為你帶來更好的生產效率等諸多優點。</p> <p>接下來，我會分別介紹兩種導入 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 方式，分別為 <strong>Nuxt Community 釋出的 Tailwind CSS 整合模組</strong> 及 <strong>Tailwind CSS 官方指引步驟</strong>，以下的 <strong>A</strong> 或 <strong>B</strong> 兩種導入方式，大家只要<code>擇一</code>就可以了。</p> <h3 id="使用-nuxt-tailwind-模組">使用 Nuxt Tailwind 模組</h3> <h4 id="step-1-安裝相關套件">Step 1. 安裝相關套件</h4> <p>首先安裝 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @nuxtjs/tailwindcss </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @nuxtjs/tailwindcss</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-添加模組至-nuxtconfigts">Step 2. 添加模組至 nuxt.config.ts</h4> <p>打開 <code>./nuxt.config.ts</code> 將 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 模組添加至 <code>modules</code> 設定參數中，完成後看起來會像下面這樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// https://v3.nuxtjs.org/api/configuration/nuxt.config </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/tailwindcss&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-重啟-nuxt-服務">Step 3. 重啟 Nuxt 服務</h4> <p>重新啟動我們的 Nuxt 服務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run dev -- -o</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 只需要兩個步驟就完成了 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 的配置，這個模組已經包含手動安裝時需要建立的 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 指令 <code>tailwindcss.css</code> 需要的全域設定與 PostCSS 參數選項，同時也預設了 <code>tailwind.config.js</code> 的相關 <strong>content</strong> 目錄路徑，詳細可以參考 <a class="link" href="https://github.com/nuxt-modules/tailwindcss" target="_blank" rel="noopener" >Nuxt Tailwind</a>。</p> <h4 id="擴充或覆寫-nuxtjstailwindcss-配置">擴充或覆寫 @nuxtjs/tailwindcss 配置</h4> <blockquote> <p>如果你沒有特別需要擴充或覆寫設定可以跳過這一段。</p></blockquote> <p>專案內若使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 模組，這兩個 <code>tailwind.css</code> 與 <code>tailwind.config.js</code> 檔案其實模組已經有預設，不需要手動建立，<code>tailwind.css</code> 對應模組內的 <strong>tailwind.css</strong> 可以參考專案檔案內容 <a class="link" href="https://github.com/nuxt-modules/tailwindcss/blob/main/src/runtime/tailwind.css" target="_blank" rel="noopener" >tailwind.css</a>，<code>tailwind.config.js</code> 則是透過模組動態新增配置。</p> <p>倘若想要修改也可以透過建立設定檔案來新增或覆寫預設定，例如在專案下分別建立 <code>tailwind.css</code> 與 <code>tailwind.config.js</code> 兩個檔案：</p> <ul> <li>tailwind.css</li> </ul> <p>專案目錄下若存在路徑檔名一致的 <code>./assets/css/tailwind.css</code> 檔案，<a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 就會以這個檔案取代模組內預設的 <code>tailwind.css</code> 檔案。</p> <p><code>tailwind.css</code> 預設內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">base</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">components</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">utilities</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果有成功覆蓋配置，在重啟 Nuxt 3 服務時，Terminal 會提示下列字串，表示使用了自訂的 <code>tailwind.css</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">Using Tailwind CSS from ~/assets/css/tailwind.css </span></span></code></pre></td></tr></table> </div> </div><ul> <li>tailwind.config.js</li> </ul> <p>專案目錄下若存在 <code>tailwind.config.js</code> 檔案就會以新的配置拓展或覆寫 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 預設的 <code>tailwind.config</code>。</p> <p>例如，我們想拓展或覆寫 content 的配置：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/** @type {import(&#39;tailwindcss&#39;).Config} */</span> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./components/**/*.{vue,js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./layouts/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./pages/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./composables/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./plugins/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./app.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">extend</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="tailwind-css-官方指引步驟">Tailwind CSS 官方指引步驟</h3> <blockquote> <p>如果你已經使用了 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 進行配置，則可以跳過這一段。</p></blockquote> <h4 id="step-1-安裝相關套件-1">Step 1. 安裝相關套件</h4> <p>首先進入我們的 Nuxt 專案目錄，並安裝 Tailwind CSS 會使用到的一些相關套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D tailwindcss postcss@latest postcss-custom-properties@latest autoprefixer@latest </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D tailwindcss postcss@latest postcss-custom-properties@latest autoprefixer@latest</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立-tailwindconfigjs">Step 2. 建立 tailwind.config.js</h4> <p>安裝完套件後，可以執行下列指令進行初始化，完成後會在專案根目錄下產生一個名為 <code>tailwind.config.js</code> 的 Tailwind CSS 設定檔。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx tailwindcss init </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-調整-tailwindconfigjs">Step 3. 調整 tailwind.config.js</h4> <p>打開剛剛產生的設定檔 <code>tailwind.config.js</code>，在配置中的 <code>content</code> 陣列添加一些路徑，這些路徑皆是跟 Nuxt 有關的資料夾目錄與檔案，完成後檔案內容如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/** @type {import(&#39;tailwindcss&#39;).Config} */</span> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./components/**/*.{vue,js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./layouts/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./pages/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./composables/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./plugins/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./app.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">extend</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-建立-tailwindcss">Step 4. 建立 tailwind.css</h4> <p>接著我們在專案建立目錄 <strong>assets</strong> 與子目錄 <strong>css</strong> 用來放置 Tailwind CSS 的自定義指令，我們將其放置在 <strong>tailwind.css</strong> 供後續做使用，<strong>tailwind.css</strong> 的路徑應會是 <code>./assets/css/tailwind.css</code> 檔案內容如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">base</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">components</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">utilities</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-5-配置全域共用-css">Step 5. 配置全域共用 CSS</h4> <p>上面我們建立好 <strong>tailwind.css</strong> 後，為了讓每個頁面都可以吃得到 Tailwind CSS，我們修改專案根目錄的 <code>nuxt.config.ts</code> 檔案，在 <code>css</code> 參數陣列內新增 <code>tailwind.css</code> 路徑，讓 Nuxt 可以配置全域共用的 CSS，並添加 <code>postcss</code> 選項及我們剛才安裝的套件作為插件，最後 <code>nuxt.config.ts</code> 檔案看起來如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// https://v3.nuxtjs.org/api/configuration/nuxt.config </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">postcss</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;postcss-import&#39;</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;tailwindcss/nesting&#39;</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">tailwindcss</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">autoprefixer</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">css</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@/assets/css/tailwind.css&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們專案目錄檔案如下結構。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app </span></span><span class="line"><span class="cl">├── .nuxt/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">│ └── css/ </span></span><span class="line"><span class="cl">│ └── tailwind.css // 手動新增的檔案，用於設置 Tailwind CSS 指令並讓全部頁面引用 </span></span><span class="line"><span class="cl">├── node_modules/ </span></span><span class="line"><span class="cl">├── .eslintrc.js </span></span><span class="line"><span class="cl">├── .gitignore </span></span><span class="line"><span class="cl">├── .prettierrc.js </span></span><span class="line"><span class="cl">├── app.vue </span></span><span class="line"><span class="cl">├── nuxt.config.ts </span></span><span class="line"><span class="cl">├── package-lock.json </span></span><span class="line"><span class="cl">├── package.json </span></span><span class="line"><span class="cl">├── README.md </span></span><span class="line"><span class="cl">├── tailwind.config.js // Tailwind 初始化指令產生的設定檔 </span></span><span class="line"><span class="cl">└── tsconfig.json </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-6-重啟-nuxt-服務">Step 6. 重啟 Nuxt 服務</h4> <p>重新啟動我們的 Nuxt 服務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span></code></pre></td></tr></table> </div> </div><h3 id="開始感受-tailwind-css-的魅力">開始感受 Tailwind CSS 的魅力</h3> <p>當我們配置完 Tailwind CSS 並重啟 Nuxt 服務後，我們編輯 <code>app.vue</code> 檔案內容，撰寫以下程式碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-blue-600&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-900&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>重新瀏覽一次網頁，可以發現排版、顏色、字型都有出現我們設定的效果了。</p> <p><img src="https://live.staticflickr.com/65535/52616188202_d650c12b2b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="自動排序-tailwind-css-的-class">自動排序 Tailwind CSS 的 Class</h3> <p><img src="https://live.staticflickr.com/65535/52616964384_7ac2dd7e78_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當我們在寫 Tailwind CSS 時終究會碰到類型過多，第一眼不確定是否包含某個 class，或者對於順序上有強烈統一的要求，那麼這個 Prettier 的<a class="link" href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noopener" >插件</a>，<code>prettier-plugin-tailwindcss</code> 插件是 Tailwind 推出的，目的在於可以使用官方推薦的 class 順序，來實現<code>自動排序 class</code> 來做到統一程式碼風格。</p> <h3 id="tailwind-x-prettier">Tailwind x Prettier</h3> <h4 id="step-1-安裝插件">Step 1. 安裝插件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prettier-plugin-tailwindcss </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prettier-plugin-tailwindcss</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>如果你不是照著前面的步驟建置專案，請記得確認已經有安裝 prettier 套件。</p></blockquote> <h4 id="step-2-配置設定檔">Step 2. 配置設定檔</h4> <p>開啟 <code>.prettierrc.js</code> 檔案，添加 <code>'prettier-plugin-tailwindcss'</code> 至 <code>plugins</code> 陣列中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier-plugin-tailwindcss&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">printWidth</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="c1">// 每行文字數量達 100 字元就換到新的一行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">semi</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 每個語句的結尾不需要分號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">singleQuote</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 字串使用單引號，而不是雙引號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">trailingComma</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span> <span class="c1">// 如 Object、Array 內的元素不需要尾隨逗號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-自動修正效果">Step 3. 自動修正效果</h4> <p>你可以在編輯器內移至錯誤波浪底線使用「<strong>快速修復 (Quick Fix)&hellip;</strong>」功能，或設置 <code>&quot;editor.codeActionsOnSave&quot;</code> 中 <code>&quot;source.fixAll.eslint&quot;: true</code> 來達到保存後自動修正 prettier 引發的 ESLint 錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52616698186_25eebdd0f7_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="小結">小結</h3> <p>相較於 Tailwind CSS 官方指引的安裝方式，使用 Nuxt Community 幫我們整理好的 <code>@nuxtjs/tailwindcss</code> 模組，可以省去繁瑣的設定步驟，也解決了一些目前 Nuxt 3 專案中，導入 Tailwind CSS 使用 HMR 可能無法自動編譯並重新套用等問題。</p> <hr> <h2 id="使用-pug">使用 Pug</h2> <p><img src="https://live.staticflickr.com/65535/52616698191_9faacb41c6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 為 html 模板語言，可支援撰寫 JS 邏輯。寫法上，省略了 HTML 的開、閉合標籤，能夠大大的提升工程師開發速度，看上去也更為簡潔。</p> <p>在本篇文章我依舊不再多花篇幅介紹 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 的語法，主要針對 Nuxt 3 如何導入 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 至專案內使用。</p> <p>為了之後開發能少打一點 Code，這邊加入 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 到專案。</p> <h3 id="安裝-vite-plugin-pug">安裝 @vite-plugin-pug</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vite-plugin-pug </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vite-plugin-pug</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="直接開始體驗-pug">直接開始體驗 Pug</h3> <p>直接將原先的 <code>app.vue</code> 改用 pug 語法來撰寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;pug&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">div</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">bg</span><span class="o">-</span><span class="nx">white</span><span class="p">.</span><span class="nx">py</span><span class="o">-</span><span class="mi">24</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">flex</span><span class="o">-</span><span class="nx">col</span><span class="p">.</span><span class="nx">items</span><span class="o">-</span><span class="nx">center</span><span class="p">.</span><span class="nx">flex</span> </span></span><span class="line"><span class="cl"> <span class="nx">h1</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="mi">6</span><span class="nx">xl</span><span class="p">.</span><span class="nx">font</span><span class="o">-</span><span class="nx">semibold</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="nx">blue</span><span class="o">-</span><span class="mi">600</span> <span class="mi">2022</span> <span class="nx">iThome</span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">mt</span><span class="o">-</span><span class="mf">4.</span><span class="nx">text</span><span class="o">-</span><span class="mi">9</span><span class="nx">xl</span><span class="p">.</span><span class="nx">font</span><span class="o">-</span><span class="nx">bold</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="nx">gray</span><span class="o">-</span><span class="mi">900</span> <span class="nx">鐵人賽</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="s2">&#34;2022&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這邊推薦一款 VS Code 的套件 - <a class="link" href="https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug" target="_blank" rel="noopener" >html2pug</a>，將 HTML 反白後點選 VS Code 上方的 <strong>View</strong> &gt; <strong>Command Palette&hellip;</strong>，尋找並執行 <strong>&quot;&gt; html2pug: Transform&quot;</strong>，即可將反白的 HTML 自動轉換成 pug 語法。</p> <p>不用管 HTML 的結尾符號，寫起來整個就是舒服阿~~~</p> <hr> <h2 id="目錄結構與自動載入-auto-imports">目錄結構與自動載入 (Auto Imports)</h2> <p>隨著整個專案的開發，目錄與元件勢必也會越來越多，如同 Vue 3 的專案可能會有專門放置元件目錄 components 等，在 Vue 3 我們可能不太需要去在意目錄的名稱，但在 Nuxt 3 的專案下，有一些目錄與名稱其實有一些基本的規定與名稱，只要照著 Nuxt 3 約定好的方式進行開發，就能更好利用 Nuxt 3 幫你完成許多貼心的功能。</p> <h3 id="nuxt-3-的目錄結構">Nuxt 3 的目錄結構</h3> <p>當我們 Nuxt CLI 建立第一個 Nuxt 3 專案並第一次啟動開發伺服器後，專案目錄結構會長得像這樣：</p> <p><img src="https://live.staticflickr.com/65535/52616964404_21aac96f76_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果你是跟著這個系列安裝了 TypeScript、Linter、Tailwind CSS 及 Pug 等套件，那麼專案目錄結構會長得像這樣：</p> <p><img src="https://live.staticflickr.com/65535/52616698211_e29e8f9352_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>雖然我們能依照需求建立檔案及目錄，但 Nuxt 3 在<code>目錄的結構與命名其實有一定的規則與模式</code>，以下針對 Nuxt 3 來講述一下目錄的結構與遵循的方式。</p> <h3 id="nuxt-3-預設的目錄結構">Nuxt 3 預設的目錄結構</h3> <p>Nuxt 3 框架希望我們可以專注在開發而不是在配置，所以在預設的情況專案的目錄架構已經有一個不錯的結構可以遵循。</p> <p>依據<a class="link" href="https://nuxt.com/docs/guide/concepts/auto-imports" target="_blank" rel="noopener" >官方文件</a>，一個完整的 Nuxt 3 專案，它的目錄結構如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── .nuxt/ </span></span><span class="line"><span class="cl">├── .output/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">├── components/ </span></span><span class="line"><span class="cl">├── composables/ </span></span><span class="line"><span class="cl">├── content/ </span></span><span class="line"><span class="cl">├── layouts/ </span></span><span class="line"><span class="cl">├── middleware/ </span></span><span class="line"><span class="cl">├── node_modules/ </span></span><span class="line"><span class="cl">├── pages/ </span></span><span class="line"><span class="cl">├── plugins/ </span></span><span class="line"><span class="cl">├── public/ </span></span><span class="line"><span class="cl">└── server/ </span></span><span class="line"><span class="cl"> ├── api/ </span></span><span class="line"><span class="cl"> ├── routes/ </span></span><span class="line"><span class="cl"> └── middleware/ </span></span><span class="line"><span class="cl">├── .gitignore </span></span><span class="line"><span class="cl">├── .nuxtignore </span></span><span class="line"><span class="cl">├── app.config.ts </span></span><span class="line"><span class="cl">├── app.vue </span></span><span class="line"><span class="cl">├── nuxt.config.ts </span></span><span class="line"><span class="cl">├── package.json </span></span><span class="line"><span class="cl">└── tsconfig.json </span></span></code></pre></td></tr></table> </div> </div><h4 id="nuxt-目錄">.nuxt 目錄</h4> <p>開發環境下由 Nuxt 產生出 Vue 的網站，.nuxt 目錄是<code>自動產生</code>的，<strong>你不應該任意的調整裡面檔案</strong>。</p> <h4 id="output-目錄">.output 目錄</h4> <p>當你的網站準備部署至正式環境時，每次編譯建構專案時，皆會<code>自動重新產生</code>這個目錄，<strong>你不應該任意的調整裡面檔案</strong>。</p> <h4 id="assets-目錄">assets 目錄</h4> <p>顧名思義，這是靜態資源檔案所放置的位置，目錄內通常包含以下類型的檔案：</p> <ul> <li>CSS 樣式檔案 (CSS、SASS 等&hellip;)</li> <li>字型</li> <li>圖片</li> </ul> <p>這些靜態資源，最終在專案編譯建構時，由 Vite 或 webpack 進行編譯打包。</p> <h4 id="components-目錄">components 目錄</h4> <p>放置 Vue 元件的地方，Nuxt 會自動載入這個目錄中的任何元件。</p> <h4 id="composables-目錄">composables 目錄</h4> <p>組合式函數放置的目錄，簡單來說可以把常用或通用的功能寫成一個共用的函數或 JS 檔案，放置在這個目錄視為組合式函數，Nuxt 也會自動載入這些組合式函數，讓需要使用的頁面或元件可以直接做使用。</p> <h4 id="content-目錄">content 目錄</h4> <p>透過使用 <a class="link" href="https://content.nuxtjs.org/" target="_blank" rel="noopener" >Nuxt Content</a>，我們可以在這個目錄下建立 <strong>.md</strong>、<strong>.yml</strong>、<strong>.csv</strong> 和 <strong>.json</strong> 檔案，Nuxt Content 會讀取並解析這些文件並進行渲染，用來建立基於文件的<strong>內容管理系統</strong>(Content Management System，簡稱：CMS)。</p> <h4 id="layouts-目錄">layouts 目錄</h4> <p>用於放置通用或可能重複使用到的佈局模板，提供程式碼的可重複使用性。</p> <h4 id="middleware-目錄">middleware 目錄</h4> <p>Nuxt 3 提供了路由中間件的概念，用於導航到下一個頁面之前執行一些程式碼如<strong>權限驗證</strong>&hellip;等。</p> <h4 id="node_modules-目錄">node_modules 目錄</h4> <p>通常有使用 Node.js 的套件管理，例如 NPM，對此目錄應該有一些印象，使用 Nuxt 3 及專案所需要的相依套件都會存放在這個目錄。</p> <h4 id="pages-目錄">pages 目錄</h4> <p>這個目錄主要是用來配置我們的頁面，你也可以只使用 <strong>app.vue</strong> 來完成你的網站，但如果建立了 <strong>pages</strong> 這個目錄，Nuxt 3 會自動整合 <code>vue-router</code>，並會依據目錄及檔案結構規則來<code>自動產生出對應路由</code>，也是 Nuxt3 產生路由的方式。</p> <h4 id="plugins-目錄">plugins 目錄</h4> <p>Nuxt 會自動載入這個目錄檔案，作為插件使用，在檔案名稱可以使用後綴 <code>.server</code> 或 <code>.client</code>，例如，<code>plugin.server.ts</code> 或 <code>plugin.client.ts</code> 來決定只讓伺服器端或客戶端載入這個插件。</p> <h4 id="server-目錄">server 目錄</h4> <p>用於建立任何後端的邏輯如後端 API，這個目錄下還包含了 <code>api</code>、<code>server</code> 和 <code>middleware</code> 來區分功能，不具有自動載入，但支援 HMR。</p> <h4 id="gitignore-檔案">.gitignore 檔案</h4> <p>在使用 Git 版本控制時，可以設置一些不需要或忽略關注變動的檔案及目錄。</p> <h4 id="nuxtignore-檔案">.nuxtignore 檔案</h4> <p>可以設置讓 Nuxt 編譯建構時，忽略一些不需要或欲忽略的檔案。</p> <h4 id="appconfigts-檔案">app.config.ts 檔案</h4> <p>提供服務運行時暴露給客戶端使用的設定，因此，請不要在 <strong>app.config.ts</strong> 檔案中添加任何機密資訊。</p> <h4 id="appvue-檔案">app.vue 檔案</h4> <p>Nuxt 3 網站的入口點元件。</p> <h4 id="nuxtconfigts-檔案">nuxt.config.ts 檔案</h4> <p>用於配置 Nuxt 專案的設定檔。</p> <h4 id="packagejson-檔案">package.json 檔案</h4> <p>這個檔案裡面定義了專案資訊、腳本、相依套件及版本號，通常有使用 Node.js 套件管理工具建置的專案都會包含此檔案。</p> <h4 id="tsconfigjson-檔案">tsconfig.json 檔案</h4> <p>Nuxt 3 會在 <strong>.nuxt</strong> 目錄下<code>自動產生</code>一個 <code>tsconfig.json</code> 檔案，其中已經包含了一些解析別名等預設配置；你可以透過<code>專案目錄</code>下的 <code>tsconfig.json</code> 來配置擴展或覆蓋 Nuxt 3 預設的 TypeScript 設定檔。</p> <h3 id="自訂目錄名稱">自訂目錄名稱</h3> <p>前面簡介了 Nuxt 3 的預設目錄結構與用途，在目錄名稱上 Nuxt 3 也提供了可以調整目錄名稱的方式，只要在 <code>nuxt.config.ts</code> 修改對應的參數，就可以自訂目錄的名稱。不過呢，也並不是所有的目錄都能修改，目前<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config#dir" target="_blank" rel="noopener" >官方提供</a>的 dir 參數共有以下四個目錄參數選項供修改：</p> <ul> <li>layouts</li> <li>middleware</li> <li>pages</li> <li>public</li> </ul> <p>例如我想將 <strong>pages</strong> 目錄名稱調整為 <strong>views</strong> 就可以新增下列 <code>dir</code> 設定添加至 <code>nuxt.config.ts</code>，就可以將 <strong>pages</strong> 目錄功能及規則調整為 <strong>views</strong> 目錄來實現。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">dir</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">pages</span><span class="o">:</span> <span class="s1">&#39;views&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自動載入-auto-imports">自動載入 (Auto Imports)</h3> <p>在介紹目錄結構時有提到，某些目錄下的檔案是具有<code>自動載入 (Auto Imports)</code>的功能，意思就是說，當我們在這些特定的目錄 <code>components</code>、<code>composables</code>、<code>layouts</code>、<code>plugins</code> 添加檔案時，Nuxt 3 會自動載入這些元件或函數。</p> <p>Nuxt 3 的自動載入具體有以下三種：</p> <ul> <li>Nuxt 常用元件與函數</li> <li>Vue 3 的 API</li> <li>基於目錄的自動載入</li> </ul> <h4 id="nuxt-常用元件與函數的自動載入">Nuxt 常用元件與函數的自動載入</h4> <p>Nuxt 會自動載入一些元件或組合式函數，用以讓開發時可以在全部頁面或定義組件和插件可以使用。</p> <p>Nuxt 自動載入的元件就好比 <strong>app.vue</strong> 程式碼內，一開始在 <strong>template</strong> 就有的 <code>&lt;NuxtWelcome /&gt;</code> 歡迎頁面元件，其他還包含了 <code>&lt;NuxtPage&gt;</code>、<code>&lt;NuxtLayout&gt;</code> 和 <code>&lt;NuxtLink&gt;</code> 等，詳細可以參考<a class="link" href="https://nuxt.com/docs/api/components/client-only" target="_blank" rel="noopener" >官方文件</a>。</p> <p>例如，下面程式碼中的 <code>useAsyncData</code> 與 <code>$fetch</code> 就是 Nuxt 自動載入的組合式函數，在各個頁面或元件都能做使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">refresh</span><span class="p">,</span> <span class="nx">pending</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span><span class="s1">&#39;/api/hello&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/hello&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="vue-3-api-的自動載入">Vue 3 API 的自動載入</h4> <p>例如，Vue 3 中會使用到的 <code>ref</code>、<code>computed</code> 等這類的 helpers 或 lifecycle hooks，在 Nuxt 3 也都將會自動的載入，不需要在 import。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 不需要在 import ref 或 computed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="基於目錄的自動載入">基於目錄的自動載入</h4> <p>如前面所提及的，Nuxt 會自動載入定義在特定目錄的檔案，例如：</p> <ul> <li>components: 相對於 Vue 的組件。</li> <li>composables: 相對於 Vue 的組合式函數。</li> </ul> <h3 id="建立一個自動導入的元件">建立一個自動導入的元件</h3> <p>我們建立一個 <strong>./components/IronManWelcome.vue</strong> 檔案：</p> <h5 id="componentsironmanwelcomevue">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <strong>app.vue</strong> 檔案中，新增 <code>&lt;IronManWelcome /&gt;</code> 元件。</p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>現在，瀏覽器可以看見我們添加的元件效果。</p> <p><img src="https://live.staticflickr.com/65535/52616188282_4d52db7fc1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以發現，我們不需要添加 <code>import IronManWelcome from './components/IronManWelcome'</code> 就可以直接在 template 直接使用 <code>&lt;IronManWelcome /&gt;</code> 元件，這就是 Nuxt 3 基於目錄的自動載入功能。</p> <h3 id="關閉自動載入">關閉自動載入</h3> <p>如果想<code>關閉</code> Nuxt 的自動載入元件或函數的功能，可以修改專案目錄下的 <code>nuxt.config.ts</code> 檔案，將 <code>imports.autoImport</code> 設定為 <code>false</code>。</p> <h5 id="nuxtconfigts">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">imports</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">autoImport</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="顯式載入-explicit-imports">顯式載入 (Explicit Imports)</h3> <p>Explicit (顯式、明確的)，當我們需要手動載入，就可以用 <code>#import</code> 這個 Nuxt 釋出的別名，來個別載入那些具有自動載入的元件或函數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;#imports&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>Nuxt 3 的專案目錄與結構已經有一個規定可以遵守，Nuxt 3 規劃的目錄及檔案架構，讓我們可以不用再煩惱該如何配置，只需要專注開發，當你熟悉這些目錄檔案規則與自動載入的特性，肯定能更快上手 Nuxt 3。</p></blockquote> <hr> <h2 id="頁面-pages-與路由-routing">頁面 (Pages) 與路由 (Routing)</h2> <p>在 Vue 中，我們會使用到 <a class="link" href="https://router.vuejs.org/" target="_blank" rel="noopener" >Vue Router</a> 來實現切換頁面或路由的需求，而在 Nuxt 3 中，預設是沒有使用路由相關套件，直至建立了 <strong>pages</strong> 目錄，Nuxt 將會自動載入 Vue Router 來管理路由，並且具有一定的規則需要遵循，以下將介紹頁面目錄與路由之間的關係。</p> <h3 id="基於檔案的路由-file-based-routing">基於檔案的路由 (File-based Routing)</h3> <p>在 Nuxt 3 專案的 <strong>pages</strong> 目錄下，當我們建立了一個頁面檔案，就會以該檔案建立出相對應的路由，Nuxt 3 基於檔案的路由，也使用了程式碼拆分將每個頁面需要的程式碼梳理出來，並以動態載入的方式載入最小所需要的程式碼。因為是以<strong>目錄結構</strong>與<strong>檔案命名</strong>方式來約定，也稱之為約定式路由。</p> <h4 id="建立第一個頁面">建立第一個頁面</h4> <p>Nuxt 3 的 <strong>pages</strong> 目錄，是用來建立頁面並放置的目錄，當專案下有存在 <strong>pages</strong> 目錄，Nuxt 將會自動載入 Vue Router 來實現路由效果，目錄下的檔案通常是 Vue 的元件，也允許具有 <strong>.vue</strong>、<strong>.js</strong>、<strong>.jsx</strong>、<strong>.ts</strong> 或 <strong>.tsx</strong> 副檔名的檔案。</p> <p>當我們建立 <strong>./pages/index.vue</strong>，檔案內容如下，則表示路由 <code>/</code> 對應到這個頁面檔案，我們只需要建立檔案，路由的配置將會由 Nuxt 3 自動產生。</p> <h5 id="pagesindexvue">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若你還記得 Vue Router 中的 <code>&lt;router-view /&gt;</code>，這是路由需要的進入點，同樣的在 Nuxt 3 我們需要使用 <code>&lt;NuxtPage /&gt;</code> 來顯示我們建立的路由頁面，<code>這裡非常重要，否則路由及頁面將無法正確運作</code>。</p> <p>修改 <strong>./app.vue</strong>，檔案內容如下：</p> <h5 id="appvue-1">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器瀏覽 <code>/</code> 路由，如 <code>http://localhost:3000/</code>，就可以看到我們在 <strong>./pages/index.vue</strong> 頁面內寫的標題文字「這是首頁」囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186498_fb79e37a84_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="多個路由頁面">多個路由頁面</h3> <p>在實務上，通常一個網站會有多個頁面，並分別對應到不同的路由，接下來我們嘗試建立 About 與 Contact 兩個頁面。</p> <h4 id="建立多個路由頁面">建立多個路由頁面</h4> <p>建立 <strong>./pages/about.vue</strong>，內容如下：</p> <h5 id="pagesaboutvue">pages/about.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-yellow-400&#34;</span><span class="p">&gt;</span><span class="nx">大家好</span><span class="err">！</span><span class="nx">我是</span> <span class="nx">Ryan</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">about</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/contact.vue</strong>，內容如下：</p> <h5 id="pagescontactvue">pages/contact.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-rose-400&#34;</span><span class="p">&gt;</span><span class="nx">如果沒事不要找我</span> <span class="nx">xDDD</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">contact</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器分別瀏覽 <strong>/about</strong> 或 <strong>/contact</strong>，就可以看到我們路由效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186538_a097e76893_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52616188307_6a7217ce85_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以發現所建立的<code>檔案名稱</code>，最終就會<code>自動對應產生</code>出 <strong>/about</strong> 及 <strong>/contact</strong> 路由。</p> <h4 id="自動產生的路由">自動產生的路由</h4> <p>如果你有興趣想看看 Nuxt 自動產生出來的路由配置長什麼樣子，可以使用 <code>npm run build</code> 或 <code>npx nuxt build</code> 來建構出 <code>.output</code> 目錄，並打開 <strong>.output/server/chunks/app/server.mjs</strong>，搜尋 <code>const _routes =</code> 或剛剛建立的檔案名稱 <code>about.vue</code>，就可以找到下面這一段程式碼：</p> <p><img src="https://live.staticflickr.com/65535/52616964449_0da965dc38_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這段程式碼與 Vue 中的路由配置非常相像，其實這就是 Nuxt 3 檢測到 <strong>pages</strong> 目錄，自動幫我們載入 Vue Router 與依據 <strong>pages</strong> 目錄下的檔案結構，自動產生出所需的路由配置。</p> <h3 id="建立路由連結">建立路由連結</h3> <p>在 Vue Router 我們可以使用 <code>&lt;router-link&gt;</code> 來建立路由連結，以此來導航至其他頁面，而在 Nuxt 3 的路由中，則是使用 <code>&lt;NuxtLink&gt;</code> 來建立路由連結來進行頁面的跳轉，我們嘗試在首頁新增幾個路由連結來進行頁面導航。</p> <p>調整 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-1">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">About</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/contact&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Contact</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器瀏覽首頁，點擊「前往 About」或「前往 Contact」就可以看見路由導航效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617134125_7f1f7071b0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>使用 <code>&lt;NuxtLink&gt;</code> 時，可以就把它想像為 <code>&lt;router-link&gt;</code> 的替代品，像 <code>to</code> 這個 Pros 控制路由位置的用法基本上一樣，其他更多的 Pros 用法及說明可以參考官網的<a class="link" href="https://nuxt.com/docs/api/components/nuxt-link#props" target="_blank" rel="noopener" >文件</a>。</p> <p>如果想要使用像 Vue Router 提供的 <code>router.push</code> 方法於 Vue 中直接呼叫來導航至其他頁面，在 Nuxt 中你可以使用 <code>navigateTo</code>，參數可以參考<a class="link" href="https://nuxt.com/docs/api/utils/navigate-to#navigateto" target="_blank" rel="noopener" >官方文件</a>。</p> <h3 id="約定式路由中的-indexvue">約定式路由中的 index.vue</h3> <p>在開頭有提到，Nuxt 3 提供了一個基於檔案的路由，從上述例子你或許能發現，基本上檔案名稱就是對應著路由名稱，但 <strong>index.vue</strong> 比較特別，它所對應的是路由 <code>/</code>。</p> <blockquote> <p><strong>index.[ext]</strong> 這個效果和特性，其實是與 Node.js 底層核心有關，在此就不贅述。</p></blockquote> <p>舉例來說，我可以在 <strong>pages</strong> 下建立一個 <strong>docs.vue</strong> 表示對應路由 <strong>/docs</strong>，也可以將檔案放置在 <strong>docs</strong> 目錄下並重新命名為 <strong>index.vue</strong> 即 <strong>./pages/docs/index.vue</strong>，這樣也可以透過 <strong>/docs</strong> 瀏覽到相同的頁面。</p> <p>所以當 <strong>index.vue</strong> 存在於 <strong>pages</strong> 目錄下，已經位於網站頁面的第一層，所以我們瀏覽 <a class="link" href="http://localhost:3000/" target="_blank" rel="noopener" >http://localhost:3000/</a> 就可以做出首頁的效果。</p> <h3 id="帶參數的動態路由匹配">帶參數的動態路由匹配</h3> <p>在實務上，我們可能需要將路徑作為參數傳遞給同一個元件，例如，我們有一個 <strong>users</strong> 頁面元件，在 <strong>/users/ryan</strong> 或 <strong>/users/jennifer</strong> 路徑，都能匹配到同一個 <strong>users</strong> 元件，並將 <strong>ryan</strong> 或 <strong>jennifer</strong> 當作參數傳遞給 <strong>users</strong> 頁面元件使用，那麼我們就需要動態路由來做到這件事。</p> <p>在 Vue 3 使用 Vue Router 我們可能會寫出如下路由配置：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;users&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/users/:id&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/users.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就能達到進入 <strong>/users/ryan</strong> 路由將 ryan 當作 <strong>id</strong> 參數傳入 <strong>users</strong> 元件中，路徑參數用冒號 <code>:</code> 表示，這個被匹配的參數 (params)，會在元件中可以使用 <strong>useRoute()</strong> 與 <strong>route.params.id</strong> 取得。</p> <p>在 Nuxt 3 中，我們要實現這個效果，需要將檔案名稱添加中括號 <code>[]</code>，其中放入欲設定的參數名稱，譬如下面的目錄結構與檔案名稱。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── users/ </span></span><span class="line"><span class="cl"> └── <span class="o">[</span>id<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./pages/users/[id].vue</code> 檔案，內容如下：</p> <h5 id="pagesusersidvue">pages/users/[id].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="nx">Users</span> <span class="nx">動態路由頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">id</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">id</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在 <strong>script</strong> 就可以從 <strong>route.params</strong> 拿到我們所設定的參數名稱 <strong>id</strong>，並將其在 <strong>template</strong> 中渲染出來。瀏覽 <a class="link" href="http://localhost:3000/users/ryan" target="_blank" rel="noopener" >http://localhost:3000/users/ryan</a> ，看看效果，Nuxt 3 就能匹配到使用者的 <strong>id</strong> 參數 <strong>ryan</strong>，並傳入 <strong>users</strong> 頁面元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186583_c117eb473b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以在 <strong>template</strong> 直接使用 <code>{{ $route.params.id }}</code> 來渲染出 <strong>id</strong> 參數。</p> <h3 id="匹配所有層級的路由">匹配所有層級的路由</h3> <p>如果你需要匹配某個頁面下的所有層級的路由，你可以在參數前面加上 <code>...</code> ，例如，<code>[...slug].vue</code>，這將匹配該路徑下的所有路由。</p> <p>建立 <strong>./catch-all/[&hellip;slug].vue</strong> 檔案：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── catch-all/ </span></span><span class="line"><span class="cl"> └── <span class="o">[</span>...slug<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p><strong>./catch-all/[&hellip;slug].vue</strong> 檔案內容如下：</p> <h5 id="catch-allslugvue">catch-all/[&hellip;slug].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="k">catch</span><span class="o">-</span><span class="nx">all</span><span class="o">/</span><span class="p">...</span> <span class="nx">下的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">匹配到的</span> <span class="nx">Params</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 text-5xl font-semibold text-violet-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">$route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">slug</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-xl text-gray-400&#34;</span><span class="p">&gt;</span><span class="nx">每個陣列元素對應一個層級</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以輸入 <strong>/catch-all/hello</strong> 及 <strong>/catch-all/hello/world</strong>，路由的參數 <strong>slug</strong> 就會是一個陣列，陣列的每個元素對應每一個層級。</p> <p><img src="https://live.staticflickr.com/65535/52616964479_ab69ffff26_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立-404-not-found-頁面">建立 404 Not Found 頁面</h3> <p>Nuxt 3 提供一個配置來處理 <strong>404 Not Found</strong> 的頁面，當我們建立 <strong>./pages/[&hellip;slug].vue</strong> 頁面， Nuxt 3 所有未匹配的路由，將會交由這個頁面元件做處理，並同時使用 <code>setResponseStatus(404)</code> 函數設定 <strong>404 HTTP Status Code</strong>。</p> <h5 id="pagesslugvue">pages/[&hellip;slug].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-8xl font-semibold text-red-500&#34;</span><span class="p">&gt;</span><span class="mi">404</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">Not</span> <span class="nx">Found</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">真的是找不到這個頁面啦</span> <span class="o">&gt;</span><span class="c1">///&lt;&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">setResponseStatus</span><span class="p">(</span><span class="mi">404</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>/omg</strong> 這個是不存在的頁面，未匹配的路由就會交由 <strong>./pages/[&hellip;slug].vue</strong> 頁面來處理。</p> <p><img src="https://live.staticflickr.com/65535/52616188362_24b6c38fab_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立多層的目錄結構">建立多層的目錄結構</h3> <p>如果理解了動態路由的中括號 <code>[]</code> 用法，那我們就可以建立更複雜的頁面目錄結構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── posts/ </span></span><span class="line"><span class="cl"> ├── <span class="o">[</span>postId<span class="o">]</span>/ </span></span><span class="line"><span class="cl"> │ ├── comments/ </span></span><span class="line"><span class="cl"> │ │ └── <span class="o">[</span>commentId<span class="o">]</span>.vue </span></span><span class="line"><span class="cl"> │ └── index.vue </span></span><span class="line"><span class="cl"> ├── index.vue </span></span><span class="line"><span class="cl"> └── top-<span class="o">[</span>number<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p>這四個 Vue 頁面的參考程式碼如下：</p> <h5 id="pagespostsindexvue">pages/posts/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">Posts</span> <span class="nx">首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/8&#34;</span><span class="p">&gt;</span> <span class="nx">前往指定的文章</span> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/8/comments/1&#34;</span><span class="p">&gt;</span><span class="nx">前往指定的文章留言</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/top-3&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Top</span> <span class="mi">3</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/top-10&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Top</span> <span class="mi">10</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespoststop-numbervue">pages/posts/top-[number].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="nx">top</span><span class="o">-</span><span class="p">[</span><span class="nx">number</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Top</span> <span class="nb">Number</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-rose-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">number</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">number</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespostspostidindexvue">pages/posts/[postId]/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="p">[</span><span class="nx">postId</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Post</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">postId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">postId</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespostspostidcommentscommentidvue">pages/posts/[postId]/comments/[commentId].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="p">[</span><span class="nx">postId</span><span class="p">]</span><span class="o">/</span><span class="nx">comments</span><span class="o">/</span><span class="p">[</span><span class="nx">commentId</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Post</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">postId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Comment</span> <span class="nx">Id</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-purple-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">commentId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">postId</span><span class="p">,</span> <span class="nx">commentId</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>來看看實際路由及匹配效果。</p> <p><img src="https://live.staticflickr.com/65535/52617186598_0c9c996bdc_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為了方便理解，整理了以下表格，來表示頁面結構及期望匹配的模式與參數：</p> <p><strong>./pages/posts/index.vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts</td> <td>/posts</td> <td>無</td> </tr> </tbody> </table> <p><strong>./pages/posts/top-[number].vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/top-:number</td> <td>/posts/top-3</td> <td>{ number: 3 }</td> </tr> <tr> <td>/posts/top-:number</td> <td>/posts/top-5</td> <td>{ number: 5 }</td> </tr> </tbody> </table> <p><strong>./pages/posts/[postId]/index.vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/:postId</td> <td>/posts/8</td> <td>{ postId:8 }</td> </tr> </tbody> </table> <p><strong>./pages/posts/[postId]/comment/[commentId].vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/:postId/comments/:commentId</td> <td>/posts/8/comments/1</td> <td>{ postId: 8, commentId: 1 }</td> </tr> </tbody> </table> <p>到這裡應該對於如何使用檔案名稱與目錄結構，來製作動態路由與匹配參數有一些概念了。</p> <h3 id="巢狀路由-nested-routes">巢狀路由 (Nested Routes)</h3> <p>巢狀路由 (Nested Routes) 或稱嵌套路由，顧名思義，當我們想要在一個頁面鑲嵌另一個頁面時，就需要巢狀路由來幫助我們。</p> <p>例如，我們想要在 <strong>docs</strong> 頁面元件中顯示 <strong>doc-1</strong> 或 <strong>doc-2</strong> 頁面元件，並在切換 <strong>doc-1</strong> 或 <strong>doc-2</strong> 頁面時，只是在 <strong>docs</strong> 下的嵌套頁面進行切換。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">/docs/doc-1 /docs/doc-2 </span></span><span class="line"><span class="cl">+------------------+ +-----------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> docs <span class="p">|</span> <span class="p">|</span> docs <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +--------------+ <span class="p">|</span> <span class="p">|</span> +-------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> doc-1 <span class="p">|</span> <span class="p">|</span> +------------&gt; <span class="p">|</span> <span class="p">|</span> doc-2 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +--------------+ <span class="p">|</span> <span class="p">|</span> +-------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+------------------+ +-----------------+ </span></span></code></pre></td></tr></table> </div> </div><p>在 Vue 3 使用 Vue Router 實作上述巢狀路由時，即 <strong>docs</strong> 頁面要能顯示 <strong>doc-1</strong>，我們在路由配置可能就會寫 <code>path: '/docs'</code> 與 <code>children</code>，並在 <code>children</code> 加入 <code>path: '/doc-1'</code>，其中 <strong>docs</strong> 頁面包含 <code>&lt;router-view /&gt;</code>，最終瀏覽路由路徑 <code>/docs/doc-1</code> 就可以看到嵌套頁面的效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="err">()</span> <span class="err">=&gt;</span> <span class="err">import(</span><span class="nt">&#34;./pages/docs.vue&#34;</span><span class="err">)</span> </span></span><span class="line"><span class="cl"> <span class="err">children</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;doc-1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="err">()</span> <span class="err">=&gt;</span> <span class="err">import(</span><span class="nt">&#34;./pages/docs/doc-1.vue&#34;</span><span class="err">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>而在 Nuxt 3 頁面的約定式路由機制下，我們即是透過目錄結構與頁面元件實做出嵌套路由的效果。</p> <p>舉例來說，當我們建立了下面的目錄頁面結構：</p> <blockquote> <p>這裡需要注意，一定要有 <strong>docs.vue</strong> 與 <strong>docs</strong> 同名的目錄</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">├── docs/ </span></span><span class="line"><span class="cl">│ ├── doc-1.vue </span></span><span class="line"><span class="cl">│ └── doc-2.vue </span></span><span class="line"><span class="cl">└── docs.vue </span></span></code></pre></td></tr></table> </div> </div><p>頁面元件的參考程式碼如下：</p> <h5 id="pagesdocsvue">pages/docs.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="nx">Docs</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/docs/doc-1&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Doc</span> <span class="mi">1</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/docs/doc-2&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Doc</span> <span class="mi">2</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;border-b-2 border-gray-100&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagesdoc-1vue">pages/doc-1.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-blue-500&#34;</span><span class="p">&gt;</span><span class="nx">這是我的第一份文件</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagesdoc-2vue">pages/doc-2.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-green-500&#34;</span><span class="p">&gt;</span><span class="nx">這是我的第二份文件</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 3 在自動生成路由時，實際上幫我們做出了類似這樣子的路由結構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/docs.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">children:</span> <span class="err">[</span> </span></span><span class="line"><span class="cl"> <span class="err">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;docs-first-doc&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;doc-1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/docs/doc-1.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="err">]</span> </span></span><span class="line"><span class="cl"><span class="err">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>一定要記得在 <strong>docs</strong> 頁面加上 <code>&lt;NuxtPage /&gt;</code>，來作為顯示巢狀頁面的容器，接著分別瀏覽 <code>/docs</code>、<code>/docs/doc-1</code> 與 <code>/docs/doc-2</code>，可以發現在兩個頁面中上方的皆有顯示標題「這裡是 Docs」，該文字是由 <code>docs.vue</code> 元件提供的標題文字，而頁面下方則是 <strong>doc-1</strong> 與 <strong>doc-2</strong> 子頁面顯示的地方，以此就可以實現巢狀路由效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52616964494_bc91598456_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過目錄檔案的結構與名稱及中括號 <code>[]</code> 我們就可以完成多數路由的情境，確實方便很多，也足以應付大部分實務上的需求，如果真的需要手動建立路由規則可以在參考<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#router" target="_blank" rel="noopener" >官方文檔</a>或等待釋出更好解決方案。</p> <hr> <h2 id="布局模板-layouts">布局模板 (Layouts)</h2> <p>Nuxt 3 提供了一個布局模板 (Layouts) 的功能，可以讓你定義好布局模板後，在整個 Nuxt 中使用，舉例來說就很適合如上方有導覽列，下方是網頁主體內容的這種排版方式，將其構建成一個布局模板後，我們就可以重複使用這種布局方式。</p> <p>布局模板通常放置在 <strong>./layouts</strong> 目錄之下，也具有異步自動導入的效果，當新增好布局檔案後，我們就可以在 <strong>app.vue</strong> 中，添加 <code>&lt;NuxtLayout /&gt;</code> 元件來表示使用布局模板，也可以通過 <strong>name</strong> 設定不同的模板名稱。</p> <h3 id="建立一個預設的布局模板">建立一個預設的布局模板</h3> <p>布局模板在 Nuxt 3 中有約定一個名稱為 <code>default.vue</code> 作為預設的模板，如果在頁面元件中未特別指定要使用哪個模板或 <code>&lt;NuxtLayout /&gt;</code> 沒有設定 <strong>name</strong> 屬性，那麼都將會使用 <strong>default</strong> 作為預設的布局。</p> <h4 id="step-1-建立預設布局模板">Step 1. 建立預設布局模板</h4> <p>新增 <strong>./layouts/default.vue</strong> 檔案內容如下：</p> <h5 id="layoutsdefaultvue">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-sky-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">這是預設的布局</span><span class="err">，</span><span class="nx">全部頁面都會使用到</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在布局模板中，通常會包含一個 <code>&lt;slot /&gt;</code> 插槽，這個未命名的插槽 (slot) 即為預設插槽，這將會是採用這個布局模板的頁面元件，顯示的內容容器位置。</p> <h4 id="step-2-添加-元件">Step 2. 添加 元件</h4> <p>調整 <strong>app.vue</strong> 檔案，內容如下，我們添加 <code>&lt;NuxtLayout&gt;</code> 作為布局模板顯示的位置，<strong>name</strong> 屬性預設是 <strong>default</strong>，不過我們還是寫上 <code>name=&quot;default&quot;</code> 避免誤會，這個 <strong>name</strong> 屬性值對應的即是布局模板的名稱。</p> <p>下圖可以看見，我們在 <strong>app.vue</strong> 所寫的文字「這裡是最外層 app.vue」，會是在最外層，而緊接著的 <code>&lt;NuxtLayout name=&quot;default&quot;&gt;&lt;/NuxtLayout&gt;</code>，就是布局頁面 <code>default.vue</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617134195_02b2a3944c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局模板中的插槽">布局模板中的插槽</h3> <p>如果你有注意到，<strong>default.vue</strong> 檔案內程式碼內，有一個插槽 <code>&lt;slot /&gt;</code>，這裡就會是 <code>&lt;NuxtLayout&gt;</code> 內的元素所顯示的位置。</p> <p>例如，我們在 <strong>app.vue</strong> 稍作調整：</p> <h5 id="appvue-2">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-slate-800&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">被</span> <span class="nx">NuxtLayout</span> <span class="nx">包裹的元件將會放置到</span> <span class="nx">Layout</span> <span class="nx">的</span> <span class="nx">slot</span> <span class="nx">中</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>被 <code>&lt;NuxtLayout name=&quot;default&quot;&gt;</code> 包裹的元素，就會在布局模板中的插槽 <code>&lt;slot /&gt;</code> 顯示。</p> <p><img src="https://live.staticflickr.com/65535/52616188382_5a181ede48_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在布局模板中建立多個插槽">在布局模板中建立多個插槽</h3> <p>當然，你也可以在布局模板中添加多個插槽，並給予名稱，這樣就可以將內容安排到特定的位置。</p> <h4 id="step-1-建立兩個具名的插槽-slot分別為-header-與-footer">Step 1. 建立兩個具名的插槽 (Slot)，分別為 <strong>header</strong> 與 <strong>footer</strong></h4> <blockquote> <p>如果插槽沒有給予 <strong>name</strong> 屬性，預設為 <code>default</code>。</p></blockquote> <h5 id="layoutsdefaultvue-1">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-sky-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">這是預設的布局</span><span class="err">，</span><span class="nx">全部頁面都會使用到</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;header&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;footer&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-將不同內容顯示於指定的插槽位置">Step 2. 將不同內容，顯示於指定的插槽位置。</h4> <h5 id="appvue-3">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-green-500&#34;</span><span class="p">&gt;</span><span class="nx">這段會放置在</span> <span class="nx">header</span> <span class="nx">插槽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-cyan-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">被</span> <span class="nx">NuxtLayout</span> <span class="nx">包裹的元件將會放置到</span> <span class="nx">Layout</span> <span class="nx">的預設</span> <span class="nx">slot</span> <span class="nx">中</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">footer</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-blue-500&#34;</span><span class="p">&gt;</span><span class="nx">這段會放置在</span> <span class="nx">footer</span> <span class="nx">插槽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>下圖可以看見，我們就可以依此來安排各個元件，於布局模板插槽的所在位置。</p> <p><img src="https://live.staticflickr.com/65535/52617186618_5d72657e32_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局模板與路由頁面">布局模板與路由頁面</h3> <p>當你熟悉了插槽配置，你也可以在其中添加 <code>&lt;NuxtPage /&gt;</code> 與建立 <strong>pages</strong> 下的頁面元件，以達到不同的路由頁面，使用相同的布局方式。</p> <p>如果布局模板結合了路由頁面，整體網站就會如下的巢狀顯示方式，網站的入口點 <strong>app.vue</strong> 放置布局模板，模板內的內容則使用路由的 <code>&lt;NuxtPage /&gt;</code>，最後各個路由的頁面就會在 <code>&lt;NuxtPage /&gt;</code> 容器中顯示。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">+---------------------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> app.vue <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> layout <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> +-------------------+ <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> page <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> +-------------------+ <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+---------------------------+ </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立布局模板與路由頁面">建立布局模板與路由頁面</h3> <h4 id="step-1-調整-appvue-入口點">Step 1. 調整 app.vue 入口點</h4> <p>將 <strong>app.vue</strong> 調整為以下內容：</p> <h5 id="appvue-4">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立路由頁面">Step 2. 建立路由頁面</h4> <p>建立 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-2">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-6 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就可以來讓路由頁面共用相同的布局模板。</p> <p><img src="https://live.staticflickr.com/65535/52617186638_b40c944d07_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="多個路由頁面共用預設布局模板">多個路由頁面共用預設布局模板</h3> <p>承上，我們建立好預設的布局模板，讓它負責顯示路由的頁面。</p> <h4 id="step-1-新增路由頁面">Step 1. 新增路由頁面</h4> <p>新增 <strong>./pages/about.vue</strong>，內容如下：</p> <h5 id="pagesaboutvue-1">pages/about.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-yellow-400&#34;</span><span class="p">&gt;</span><span class="nx">大家好</span><span class="err">！</span><span class="nx">我是</span> <span class="nx">Ryan</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">about</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/contact.vue</strong>，內容如下：</p> <h5 id="pagescontactvue-1">pages/contact.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-rose-400&#34;</span><span class="p">&gt;</span><span class="nx">如果沒事不要找我</span> <span class="nx">xDDD</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">contact</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-新增路由連結">Step 2. 新增路由連結</h4> <p>調整 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-3">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">About</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/contact&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Contact</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，現在首頁 <code>/</code>、<code>/about</code> 與 <code>/contact</code> 都套用上了預設布局。</p> <p><img src="https://live.staticflickr.com/65535/52616964569_b4e67e211a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立多個布局模板">建立多個布局模板</h3> <p>你也可以建立多個布局模板，再依據不同的情境，使用不同的布局模板。</p> <h4 id="step-1-建立新的布局模板">Step 1. 建立新的布局模板</h4> <p>新增 <strong>./layouts/custom.vue</strong>，內容如下：</p> <h5 id="layoutscustomvue">layouts/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-rose-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-rose-500&#34;</span><span class="p">&gt;</span><span class="nx">Custom</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">布局</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-新增一個路由頁面">Step 2. 新增一個路由頁面</h4> <p>新增 <strong>./pages/custom.vue</strong>，內容如下：</p> <h5 id="pagescustomvue">pages/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-6 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-使用指定布局模板">Step 3. 使用指定布局模板</h4> <p>在 <strong>./pages/custom.vue</strong> 中的 <strong>script</strong> 使用 <code>definePageMeta</code> 方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;custom&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>definePageMeta</code> 方法，提供我們可以設定特定的布局模板，<code>layout</code> 參數值所對應的名稱，即為 <strong>./layouts</strong> 目錄下的布局模板。</p> <blockquote> <p>注意，布局模板的命名被規範使用 <strong>Kebab Case</strong> 命名法，若檔案名稱為 <strong>customLayout.vue</strong>，它將會以 <code>custom-layout</code> 作為 <strong>name</strong> 屬性傳遞給</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52616188442_127e72da50_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="更進階的指定布局模板">更進階的指定布局模板</h3> <p>我們能使用 <strong>layout: false</strong> 來禁止使用預設的布局模板，並在 <strong>template</strong> 添加 <code>&lt;NuxtLayout name=&quot;custom&quot;&gt;</code> 來使用 <strong>custom</strong> 布局模板。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;custom&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當布局模板可以在 <strong>template</strong> 中設定使用，我們就能結合插槽甚至動態的調整 <strong>name</strong> 屬性，做出更多樣靈活的布局效果。</p> <p><img src="https://live.staticflickr.com/65535/52616964574_0e7759f29b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>上圖的參考程式碼：</p> <h5 id="layoutscustomvue-1">layouts/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-rose-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-rose-500&#34;</span><span class="p">&gt;</span><span class="nx">Custom</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">布局</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;footer&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagescustomvue-1">pages/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;custom&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">footer</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">感謝您閱讀</span> <span class="nx">Nuxe</span> <span class="mi">3</span> <span class="nx">學習筆記</span><span class="err">～</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當你使用 <strong>definePageMeta</strong> 方法，禁止使用預設的布局模板後，你也能使用 <code>setPageLayout</code> 方法來動態改變布局。</p> <p>例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="o">=</span> <span class="nx">enableCustomLayout</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setPageLayout</span><span class="p">(</span><span class="s1">&#39;custom&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當你看過了這篇內容後，你會發現 Nuxt 3 所提供的布局模板非常的好用，布局模板規劃好後，爾後頁面所使用到的相同布局，只需要更改同一個布局模板，如果再結合元件化技巧，更是讓你的程式碼兼具重複使用性與維護性。</p> <hr> <h2 id="元件-components">元件 (Components)</h2> <p>在建立 Vue 的網站開發過程中，我們可能會自己封裝元件 (Component) 讓程式碼可以被重複使用，也方便開發者維護，這些一個個的元件，可以透過<code>全域註冊 (Global Registration)</code> 讓整個 Vue 應用程式中都可以使用這個元件，也可以透過<code>區域註冊 (Local Registration)</code> 於特定的元件再載入使用。接下來我們將介紹 Nuxt 3 使用元件時應該遵循的規範及特色。</p> <h3 id="元件自動載入">元件自動載入</h3> <p>在 Vue 中，雖然區域註冊使得元件間的依賴關係更加明確也對於 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking" target="_blank" rel="noopener" >Tree shaking</a> 更加友好，但我們在使用元件時，就得在需要的地方個別載入及註冊。而 Nuxt 3 提供在 <strong>components</strong> 目錄下專門放至這些元件，並具有自動載入及延遲載入等功能特色。</p> <h4 id="建立與使用元件">建立與使用元件</h4> <p>新增 <strong>./components/IronManWelcome.vue</strong>，內容如下：</p> <h5 id="componentsironmanwelcomevue-1">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-5">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們建立了 <strong>./components/IronManWelcome.vue</strong> 檔案後，Nuxt 會自動載入 <strong>./components</strong> 目錄中的<code>任何元件</code>，在使用時的元件名稱也對應著檔案名稱，所以我們只需直接添加 <code>&lt;IronManWelcome /&gt;</code> 就可以直些使用這個元件。</p> <h3 id="元件名稱">元件名稱</h3> <p>Nuxt 所自動載入 <strong>./components</strong> 目錄下的元件，在使用時的元件名稱也對應著檔案名稱，而當你在巢狀的目錄結構下的元件，<code>元件的名稱將會基於目錄的路徑與檔案名稱，並刪除重複的字段</code>。</p> <p>舉例來說，如果 <strong>./components</strong> 目錄結構如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">components/ </span></span><span class="line"><span class="cl">└── base/ </span></span><span class="line"><span class="cl"> └── apply/ </span></span><span class="line"><span class="cl"> └── Button.vue </span></span></code></pre></td></tr></table> </div> </div><p><strong>./components/base/apply/Button.vue</strong> 元件的名稱就會是由目錄與檔案名稱組合出的 <code>&lt;BaseApplyButton&gt;</code>。</p> <p>為了開發上能更清楚辨別，建議將檔案名稱設置與使用元件時的名稱相同，所以我們重新命名 <strong>./components/base/apply/</strong> 下的 <strong>Button.vue</strong> 為 <code>BaseApplyButton.vue</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">components/ </span></span><span class="line"><span class="cl">└── base/ </span></span><span class="line"><span class="cl"> └── apply/ </span></span><span class="line"><span class="cl"> └── BaseApplyButton.vue </span></span></code></pre></td></tr></table> </div> </div><p>你也不用擔心元件名稱會不會變成 <code>&lt;BaseApplyBaseApplyButton&gt;</code> 看起來有點醜醜的，因為 Nuxt 會幫我們<code>刪除重複的字段</code>，所以在使用時元件名稱為 <code>&lt;BaseApplyButton&gt;</code>。</p> <h4 id="元件名稱的命名規則">元件名稱的命名規則</h4> <p>Vue 在註冊元件時，可以使用大駝峰式命名法 (Pascal Case) 或烤肉串命名法 (Kebab Case) 來為元件命名，並在 <strong>template</strong> 也可以自由使用兩種命名方式作為使用元件的標籤。</p> <p>例如，以 <code>&lt;base-apply-button&gt;</code> 來表示使用 <strong>./components/base/apply/BaseApplyButton.vue</strong> 元件。</p> <p>抑或建立 <strong>./components/base/apply/base-apply-button.vue</strong> 元件，使用時以 <code>&lt;BaseApplyButton&gt;</code> 表示。</p> <p>兩種方式 Nuxt 都支援，可以根據自己的習慣做選擇，而我個人是以大駝峰式命名法 (Pascal Case) 為主，以此區別為自己建立的元件。</p> <h3 id="動態元件-dynamic-components">動態元件 (Dynamic Components)</h3> <p>如果想要使用像 Vue 中的 <code>&lt;component :is=&quot;someComputedComponent&quot;&gt;</code> 來<a class="link" href="https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components" target="_blank" rel="noopener" >動態</a>的切換不同的元件，則需要使用 Vue 提供的 <code>resolveComponentVue</code> 方法來進行輔助。</p> <p>例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">component</span> <span class="o">:</span><span class="na">is</span><span class="o">=</span><span class="s">&#34;show ? DynamicComponent : &#39;div&#39;&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">DynamicComponent</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;BaseApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立動態元件">建立動態元件</h3> <h4 id="step-1-建立元件">Step 1. 建立元件</h4> <p>新增 <strong>./components/base/apply/BaseApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsbaseapplybaseapplybuttonvue">components/base/apply/BaseApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./components/round/apply/RoundApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsroundapplyroundapplybuttonvue">components/round/apply/RoundApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-full bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-使用-resolvecomponent">Step 2. 使用 resolveComponent()</h4> <p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-6">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> </span></span><span class="line"><span class="cl"> <span class="na">id</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;useRound&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-5 w-5&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 block text-base text-slate-800&#34;</span><span class="p">&gt;</span><span class="nx">使用圓角按鈕</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">component</span> <span class="o">:</span><span class="na">is</span><span class="o">=</span><span class="s">&#34;useRound ? RoundButton : BaseButton&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">useRound</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">BaseButton</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;BaseApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">RoundButton</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;RoundApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>呈現效果：</p> <p><img src="https://live.staticflickr.com/65535/52617134245_0c359ab608_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="動態載入-dynamic-imports">動態載入 (Dynamic Imports)</h3> <p>動態載入 (Dynamic Imports) 元件也稱之為<code>延遲載入 (lazy-loading)</code>，如果頁面中不需要立刻使用或顯示某個元件，透過動態載入的方式可以<code>延遲元件載入的時間點</code>，有助於優化 JavaScript 首次載入時的檔案大小。</p> <p>使用的方式也非常簡單，只需要在使用元件時，加上前綴 <code>Lazy</code> 就可以有延遲載入的效果。</p> <h4 id="建立一個動態載入的按鈕">建立一個動態載入的按鈕</h4> <h4 id="step-1-建立按鈕元件">Step 1. 建立按鈕元件</h4> <p>新增 <strong>./components/base/apply/BaseApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsbaseapplybaseapplybuttonvue-1">components/base/apply/BaseApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-添加-lazy-前綴">Step 2. 添加 Lazy 前綴</h4> <p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-7">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;show&#34; name=&#34;show-button&#34; type=&#34;checkbox&#34; class=&#34;h-5 w-5&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 block text-base text-slate-800&#34;</span><span class="p">&gt;</span><span class="nx">顯示報名按鈕</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">LazyBaseApplyButton</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>看看延遲載入的效果：</p> <p>在頁面上有一個核取方塊，使用者勾選時才顯示按鈕，我們透過瀏覽器的開發者工具觀察網路 (Network) 的使用情況，可以發現只有首次勾選後才請求了 <strong>BaseApplyButton.vue</strong> 按鈕元件 JS。當這個按鈕元件被設置為 <code>Lazy</code> 動態載入時，頁面首次載入其實不會包含這個按鈕的程式碼，而是等待需要這個元件時才去請求下載，以此達到<code>延遲載入</code>的效果，同時也降低首次進入網頁時需要下載的 JavaScript 程式碼大小。</p> <p><img src="https://live.staticflickr.com/65535/52616698371_6fc18a0e8b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="控制伺服器端或客戶端渲染元件">控制伺服器端或客戶端渲染元件</h3> <h4 id="clientonly-元件"><code>&lt;ClientOnly&gt;</code> 元件</h4> <p>Nuxt 3 提供了一個 <code>&lt;ClientOnly&gt;</code> 元件，可以控制被包裹的元件僅在客戶端進行渲染。</p> <p>例如，我們建立 <strong>./components/IronManWelcome.vue</strong> 檔案，內容如下：</p> <h5 id="componentsironmanwelcomevue-2">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>&lt;ClientOnly&gt;</code> 元件包裹 <code>&lt;IronManWelcome&gt;</code>。</p> <p>調整 <strong>./app.vue</strong> 中，內容如下：</p> <h5 id="appvue-8">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣就可以將 <code>&lt;IronManWelcome&gt;</code> 元件設定為僅在客戶端進行渲染，首次請求頁面時將不會包含這個元件的 HTML。</p> <p><code>&lt;ClientOnly&gt;</code> 元件中提供了一個名為 <code>fallback</code> 的插槽 (Slot)，可以用作於在伺服器渲染的預設內容，等到客戶端載入完成才接手渲染被包裹的 <code>&lt;IronManWelcome&gt;</code> 元件。</p> <p>調整 <strong>./app.vue</strong> 中，內容如下：</p> <h5 id="appvue-9">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex justify-center&#34;</span><span class="p">&gt;[</span><span class="nx">IronManWelcome</span><span class="p">]</span> <span class="nx">載入中</span><span class="p">...&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當進入首次網頁，會先渲染 <code>fallback</code> 插槽內的元素，所以瀏覽器先顯示 <strong>[IronManWelcome] 載入中&hellip;</strong> 文字，接著客戶端載入完 JS 後接手渲染 <code>&lt;IronManWelcome&gt;</code> 元件。</p> <p><img src="https://live.staticflickr.com/65535/52616188487_a1bc229272_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以透過瀏覽器頁面中點擊右鍵後展開選單的「檢視網頁原始碼」功能，所看到的網頁原始碼，發現伺服器端僅先回應了 <code>&lt;p class=&quot;my-6 flex justify-center&quot;&gt;[IronManWelcome] 載入中...&lt;/p&gt;</code>，表示這是由伺服器端渲染 <code>&lt;ClientOnly&gt;</code> 元件 <code>fallback</code> 插槽的內容。</p> <p><img src="https://live.staticflickr.com/65535/52616964604_68d7e7bf6a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="client-與-server">.client 與 .server</h4> <p>Nuxt 3 的元件，也可以透過元件的檔案名稱來控制僅顯示在客戶端或伺服器端。</p> <p>如果元件僅在客戶端呈現，則可以將 <code>.client</code> 加入元件檔名的後綴中。</p> <p>建立一個 <strong>./components/JustClient.client.vue</strong> 元件檔案，表示 <code>&lt;JustClient&gt;</code> 元件，僅會在客戶端進行渲染。</p> <p>而添加 <code>.server</code> 後綴的元件檔案，則會是這個元件在伺服器端渲染的內容。</p> <h4 id="控制伺服器端或客戶端渲染元件範例">控制伺服器端或客戶端渲染元件範例</h4> <p>我們使用 <code>&lt;ClientOnly&gt;</code> 元件、<code>.client</code> 與 <code>.server</code> 做一個範例來看呈現的效果。</p> <h5 id="componentsironmanwelcomevue-3">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsjustclientclientvue">components/JustClient.client.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-green-100 p-4 text-sm text-green-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">JustClient</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span><span class="nx">這是只有在</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold&#34;</span><span class="p">&gt;</span><span class="nx">Client</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">才會渲染的元件</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsclientandserverclientvue">components/ClientAndServer.client.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">ClientAndServer</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">這是從</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-red-500&#34;</span><span class="p">&gt;</span><span class="nx">Client</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">渲染出來的元件</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsclientandserverservervue">components/ClientAndServer.server.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">ClientAndServer</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">這是從</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-red-500&#34;</span><span class="p">&gt;</span><span class="nx">Server</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">渲染出來的元件</span><span class="err">，</span><span class="nx">請等待</span> <span class="nx">Client</span> </span></span><span class="line"><span class="cl"> <span class="nx">接手渲染</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue-10">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex justify-center&#34;</span><span class="p">&gt;[</span><span class="nx">IronManWelcome</span><span class="p">]</span> <span class="nx">載入中</span><span class="p">...&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">JustClient</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientAndServer</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們重新瀏覽網頁，可以發現到由伺服器渲染的插槽元素 <strong>[IronManWelcome] 載入中&hellip;</strong> 文字與 <strong>ClientAndServer.server.vue</strong> 元件，率先被顯示了出來。接著當 JS 載入完畢後，被 包裹的元件 <code>&lt;IronManWelcome&gt;</code> 也接手並覆蓋了「<strong>[IronManWelcome] 載入中&hellip;</strong>」文字，<strong>ClientAndServer.client.vue</strong> 與 <strong>JustClient.client.vue</strong> 僅在客戶端渲染的元件，也分別的覆蓋與顯示出來。</p> <p><img src="https://live.staticflickr.com/65535/52617186703_ecb68732a9_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過元件我們能更好的整理可重複使用的程式碼，也提升了可維護性，而 Nuxt 中的動態載入更是能將非必要使用的元件延遲載入，大大提升了首次進入網頁所需要下載的檔案大小，最後我們也介紹了如何控制伺服器端或客戶端渲染元件，熟悉了之後就能針對網站需求設定元件的載入及渲染方式囉！</p> <hr> <h2 id="組合式函數-composables">組合式函數 (Composables)</h2> <p>組合式函數 (Composables) 是一種利用 Vue 3 的 <strong>Composition API</strong> 來封裝和複用<code>有狀態邏輯</code>的函數，在 Nuxt 我們可以將一些通用的商業邏輯放置在 <code>composables</code> 來建立組合式函數，這樣一來就可以在各個頁面共用這個組合式函數。</p> <h3 id="options-api-與-composition-api">Options API 與 Composition API</h3> <ul> <li>選項式 API (Options API)：</li> </ul> <p>下列這段是 Vue 依據 Options API 撰寫出來的程式碼，也是 Vue 2 處理邏輯的寫法，所謂 Options (選項、可選的) 指的就是以程式碼的性質來分割程式碼，所有設定資料初始值的都會在 <strong>data</strong> 這邊處理，這個元件所需要的方法則會在 <strong>methods</strong> 這裡建立，<strong>data</strong> 及 <strong>methods</strong> 也就是使用者需要的<strong>選項</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">incrementByTwo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">doubleCount</span> <span class="o">+=</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>組合式 API (Composition API)：</li> </ul> <p>目前在 Vue 3 你仍可以繼續使用 Vue 2 的 Options API，但隨著程式碼邏輯的增加，看似有條理的分類，其實對於理解及維護上沒有想像中便利。</p> <p>Vue 3 提出的<strong>組合式 API (Composition API)</strong> 則是以邏輯功能來進行分類，你可以將所有與某個功能的 <strong>data</strong>、<strong>computed</strong>、<strong>methods</strong> 與 <strong>watch</strong> &hellip;等，寫在同一個段落行程一個區塊。</p> <p>詳細說明可閱讀先前撰寫的<a class="link" href="https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/" >圖解 Option API vs Composition API</a>文章。</p> <h3 id="mixins-與-composables">Mixins 與 Composables</h3> <p>在 Options API 可以使用 <code>mixin</code> 來引入可以重複使用的程式碼，讓不同的元件可以共用函數方法，但隨著專案變大，同一個元件可能使用 mixin 同時來引用許多的共用函數，這將導致容易產生命名衝突、元件間的耦合與來源不夠清晰等問題（詳細原因請參考<a class="link" href="https://blog.wayne-project.com/2022-12-30/why-use-hooks/" >淺談為什麼 Vue 和 React 都選擇了 Hooks？</a>）。</p> <p>Vue 3 為我們帶來了組合式 API，實現了更乾淨的程式碼編排與高效的邏輯重用，**組合式函數 (Composables)**也基於組合式 API 來進行封裝這些可複用的邏輯，更解決了使用 mixin 實現共用函數的缺點。</p> <h3 id="組合式函數-composables-1">組合式函數 (Composables)</h3> <p>在 Nuxt 3 中要建立一個<code>組合式函數 (Composables)</code> 我們可以在 <code>composables</code> 目錄下編寫，這些常用的函數，將會被 Nuxt 3 自動載入做使用，實現在各個元件使用這些函數方法。</p> <h4 id="建立組合式函數">建立組合式函數</h4> <p>首先，我們新增 <strong>./composables/useCounter.js</strong>，內容如下：</p> <h5 id="composablesusecounterjs">composables/useCounter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 自動導入的特性，現在我們就能在其他元件中使用 <strong>useCounter</strong> 組合式函數。</p> <p>新增 <strong>./pages/count.vue</strong>，內容如下：</p> <h5 id="pagescountvue">pages/count.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 text-4xl text-gray-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 rounded-sm bg-sky-600 py-2 px-4 text-base font-medium text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;increment&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="nx">increment</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="composables-組合式函數的名稱">Composables 組合式函數的名稱</h3> <p>前面範例使用的 <code>useCounter()</code> 是 Nuxt 3 從 <strong>./composables/useCounter.js</strong> 自動載入的，而且 Nuxt 3 的組合式函數的名稱，有兩種方式會影響使用時的函數名稱，不過也建議在建立組合式函數可以使用 <code>use</code> 作為開頭來加以識別。</p> <h4 id="1-使用預設匯出-default-export">1. 使用預設匯出 (Default export)</h4> <p>如果在檔案內使用的是預設匯出，那麼這個組合式函數在使用時，即<code>對應檔案名稱</code>，檔案名稱可以是小寫駝峰式 (Camel case) 或烤肉串 (Kebab case)，例如建立 <strong>./composables/useCounter.js</strong> 或 <strong>./composables/use-counter.js</strong> 檔案內容如下，使用時組合式函數為小寫駝峰式(Camel case) 名為 <code>useCounter</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-使用具名匯出-named-export">2. 使用具名匯出 (Named export)</h4> <p>如果建立組合式函數時，使用的是有具名的匯出，那麼<code>組合式函數對應的名稱，就不是檔案名稱，而是檔案內 export 出來的名稱</code>。</p> <p>例如，建立 <strong>./composables/count.js</strong>，檔案內容如下，組合式函數名稱就不會是檔案名稱 count，而是具名導出的名稱 <code>useCounter</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounter</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="composables-自動載入的規則">Composables 自動載入的規則</h3> <p><strong>composables</strong> 目錄下，Nuxt 3 會自動掃描 <strong>.js</strong>、<strong>.ts</strong> 與 <strong>.vue</strong> 副檔名的檔案，但只有<code>最上層的檔案</code>，才會自動的被載入為組合式函數，以下面這個目錄結構為例，只有 <strong>./composables/useCounter.js</strong> 才會被正確的自動載入。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">composables/ </span></span><span class="line"><span class="cl">├── time/ </span></span><span class="line"><span class="cl">│ └── useDateFormat.js </span></span><span class="line"><span class="cl">└── useCounter.js </span></span></code></pre></td></tr></table> </div> </div><p>下列這種形式，<strong>./composables/time/index.js</strong> 也能正確的自動載入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">composables/ </span></span><span class="line"><span class="cl">├── time/ </span></span><span class="line"><span class="cl">│ └── index.js </span></span><span class="line"><span class="cl">└── useCounter.js </span></span></code></pre></td></tr></table> </div> </div><p>如果你想讓巢狀的目錄結構下也能被 Nuxt 自動掃描載入，那麼你可以使用下面兩種方法：</p> <h4 id="一重新匯出-推薦">一、重新匯出 <span class="focus">[推薦]</span></h4> <p>配置 <strong>./composables/index.js</strong> 將目錄下的函數於這裡整理並匯出你需要的作為組合式函數。</p> <h4 id="二配置掃描巢狀目錄">二、配置掃描巢狀目錄</h4> <p>修改 <code>nuxt.config.ts</code> 檔案，配置自動載入額外掃描 <code>composables</code> 下的巢狀目錄。</p> <h5 id="nuxtconfigts-1">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">imports</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">dirs</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描 composables 目錄頂層 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描深度一層的特定檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables/*/index.{ts,js,mjs,mts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描整個 composables 目錄下的檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables/**&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>不論在 Nuxt 3 或是 Vue 3，組合式函數 (Composables) 都是能幫助你在整個網站可以共用函數的方法，目前也有專案 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 提供了常用與實用的組合式函數集合，能幫我們省去不少開發時間與提升重複使用性，<a class="link" href="https://blog.wayne-project.com/2022-12-30/npm-vueuse/" >VueUse的介紹請點我前往</a>。</p> <hr> <h2 id="插件-plugins">插件 (Plugins)</h2> <p>在開發時，為了不重複造輪子，我們可能會在網路上找看看有沒有現成的套件可以做使用，如果這個套件在 Nuxt 3 沒有專用的模組或插件，那麼我們就只能依照套件的支援與安裝方式嘗試添加至 Nuxt 中使用。這邊將會介紹在 Nuxt 插件的規則與特性，如何建立自己的插件及安裝 Vue 的插件。</p> <p>說到插件 (Plugins)，Chrome 或 Firefox 等瀏覽器的使用者，一定都聽過也安裝過插件；如果瀏覽器中的功能不夠滿足你的需求，那麼你可以透過安裝插件來嘗試解決你的問題，而插件做的就是幫助你的瀏覽器或是網站，添加一些功能或是配置，做一個擴充的動作。在 Nuxt 3 指的插件，道理也是一樣的，我們可以透過插件來協助我們擴充功能。</p> <h3 id="nuxt-3-插件目錄">Nuxt 3 插件目錄</h3> <p>Nuxt 將自動讀取 <strong>plugins</strong> 目錄中的檔案並自動載入它們，也因為目錄中的所有插件都是自動載入的，因此不必於 <code>nuxt.config.ts</code> 中再個別配置。</p> <p>Nuxt 會自動掃描 <strong>plugins</strong> 目錄下的 <strong>.js</strong>、<strong>.ts</strong> 與 <strong>.vue</strong> 副檔名的檔案，但只有最上層的檔案或最上層目錄下的 <strong>index.js</strong> 檔案才會被自動載入。</p> <p>例如，只有 <strong>./plugins/myPlugin.js</strong> 及 <strong>./plugins/myPlugin/index.js</strong> 會自動的被 Nuxt 載入。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">plugins/ </span></span><span class="line"><span class="cl">├── myPlugin/ </span></span><span class="line"><span class="cl">│ └── index.js </span></span><span class="line"><span class="cl">└── myPlugin.js </span></span></code></pre></td></tr></table> </div> </div><h3 id="如何建立插件">如何建立插件</h3> <p>當您建立好插件的檔案後，只需要使用預設導出 Nuxt 3 中的 <code>defineNuxtPlugin</code> 方法，傳遞給插件的唯一參數是 <code>nuxtApp</code>，接著就可以在裡頭實作功能。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(</span><span class="nx">nuxtApp</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 可以使用 nuxtApp 來做一些事情 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>初次建立插件時，可以嘗試印出 <code>nuxtApp</code> 參數看看，如下圖，<code>nuxtApp</code> 包含了各種的實例 (Instance)，例如我們要使用 Vue 的 <code>app.use</code>，就可以在 <code>nuxtApp</code> 找到 Vue 的實例 <code>vueApp</code>，並透過 <code>nuxtApp.vueApp.use</code> 來安裝 Vue 的插件。</p> <p><img src="https://live.staticflickr.com/65535/52616188532_bb5139c839_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在插件中使用組合式函數-composables">在插件中使用組合式函數 (Composables)</h3> <p>你也可以在自定義的插件中使用組合式函數，但在插件中存在著一些限制和差異。</p> <h4 id="插件的載入順序">插件的載入順序</h4> <p>插件是依照順序來呼叫的，如果你使用的組合式函數，依賴著尚未載入的插件，它將無法正常的執行；除非你很確定插件的載入順序，不然儘量在插件內使用其他會依賴插件或由其他插件所提供的組合式函數。</p> <h4 id="依賴-vue-的生命週期">依賴 Vue 的生命週期</h4> <p>如果插件內所使用的組合式函數，依賴於 Vue 的生命週期，那麼也會無法正常的執行，因為插件只會綁定到 nuxtApp 的實例上，與 Vue 元件內使用組合式函數綁定的元件實例，有所不同。</p> <h3 id="automatically-providing-helpers">Automatically Providing Helpers</h3> <p>如果想在 NuxtApp 的實例上提供 <code>helper</code>，我們可以在插件回傳的物件中添加 <code>provide</code>。</p> <p>例如，我們建立一個插件 <strong>./plugins/myPlugin.js</strong>，內容如下：</p> <h5 id="pluginsmypluginjs">plugins/myPlugin.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="sb">`Hello </span><span class="si">${</span><span class="nx">msg</span><span class="si">}</span><span class="sb">!`</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <strong>./app.vue</strong> 內容：</p> <h5 id="appvue-11">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-2 text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-2 text-6xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">$hello</span><span class="p">(</span><span class="s1">&#39;Jennifer&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">$hello</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useNuxtApp</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">$hello</span><span class="p">(</span><span class="s1">&#39;Ryan&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接在 <strong>template</strong> 中使用 <code>$hello</code>，這個由插件提供的 <strong>Helper</strong>，注意這邊要加上錢字符號 <code>$</code>。也可以透過 <code>useNuxtApp</code> 方法取得 NuxtApp 的實例後再使用 <code>$hello</code>。</p> <p><img src="https://live.staticflickr.com/65535/52616964639_61f022bcfe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="僅限伺服器端或客戶端中使用">僅限伺服器端或客戶端中使用</h4> <p>有些插件可能只能在瀏覽器中使用，原因可能是這個插件不需要或無法在伺服器端中執行。</p> <p>我們可以透過插件的檔案名稱來添加後綴 <code>.client</code> 或 <code>.server</code>，控制伺服器端或客戶端中使用。</p> <h3 id="vue-插件與指令">Vue 插件與指令</h3> <p>這裡我們嘗試在 Nuxt 3 中使用 Vue 的 <a class="link" href="https://github.com/MatteoGabriele/vue-gtag" target="_blank" rel="noopener" >vue-gtag</a> 插件，來添加 Google 分析標籤。</p> <h3 id="nuxt-3-中使用-vue-gtag-插件">Nuxt 3 中使用 vue-gtag 插件</h3> <h4 id="step-1-安裝套件">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue-gtag-next </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue-gtag-next</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立-nuxt-插件">Step 2. 建立 Nuxt 插件</h4> <p>新增 <strong>vue-gtag.client.js</strong> 檔案，內容如下：</p> <h5 id="pluginsvue-gtagclientjs">plugins/vue-gtag.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">VueGtag</span> <span class="nx">from</span> <span class="s1">&#39;vue-gtag-next&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueGtag</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">property</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;GA_MEASUREMENT_ID&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="完成效果">完成效果</h4> <p>可以看見瀏覽器就出現使用 vue-gtag 插件，幫我們自動插入與配置 script 的效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186723_d4fd2eee98_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-中建立-vue-指令">Nuxt 3 中建立 Vue 指令</h3> <p>在插件中可以取得 Vue 的實例，所以我們也能在插件註冊自定義的指令。</p> <p>例如，新增 <strong>./plugins/directive.js</strong> 檔案，內容如下：</p> <h5 id="pluginsdirectivejs">plugins/directive.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getSSRProps</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// you can provide SSR-specific props here </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接使用 <code>v-focus</code> 這個指令來控制元素聚焦的效果。</p> <p><img src="https://live.staticflickr.com/65535/52616964679_7e9f1e5d2c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Nuxt 讓我們可以很輕鬆的建立插件並選擇配置於伺服器端或客戶端，對於使用 UI 框架或元件，更能在插件中直接取得實例來安裝 Vue 的插件與指令，不過呢，目前也有個 <a class="link" href="https://github.com/nuxt/framework/discussions/1175" target="_blank" rel="noopener" >RFC</a> 正在徵求意見期待讓 Nuxt 使用 Vue 插件可以更方便容易。</p> <hr> <h2 id="模組-modules">模組 (Modules)</h2> <p>Nuxt 提供了一個模組系統來擴展自身框架的核心，也簡化了整合過程中需要的繁瑣配置。當你想擴展 Nuxt 或 Vue 的功能，雖然 Nuxt 可以通過安裝與配置插件進行功能擴展，但是在多個專案或使用上可能繁瑣耗時或重複性很高的，但如果套件已經有針對 Nuxt 模組做整合，我們就不必從頭開始開發或像安裝插件一樣需要建立與維護這些配置。</p> <h3 id="nuxt-3-中插件與模組的差異">Nuxt 3 中插件與模組的差異</h3> <p>Nuxt 模組與 Nuxt 插件的差異在於，<code>模組載入執行的時間點更早</code>，意思是 Nuxt 在啟動伺服器後，首先會<code>依序的載入模組並執行</code>，接續建立 Nuxt 的環境 (Context) 與 Vue 的實例 (Instance)，最後才開始執行 Nuxt 的插件。</p> <p>因此，Nuxt 模組可以做更多的事情，包含在使用 <code>nuxi dev</code>、<code>nuxi build</code> 啟動或建構 Nuxt 時，可以透過模組來覆蓋模板、配置 webpack 及配置插件等許多任務。</p> <h3 id="nuxt-3-安裝使用模組">Nuxt 3 安裝使用模組</h3> <p>Nuxt 模組是一個導出異步函數的 JavaScript 檔案，當安裝使用模組時，通常會配置在 <code>nuxt.config.ts</code> 檔案的 <code>modules</code> 中，例如<a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e4%bd%bf%e7%94%a8-nuxt-tailwind-%e6%a8%a1%e7%b5%84" >使用 Nuxt Tailwind 模組</a> 會添加上 <strong>&rsquo;@nuxtjs/tailwindcss&rsquo;</strong>。</p> <p>通常模組的開發人員會提供這些模組應該如何在 <strong>modules</strong> 屬性來做配置，甚至一些可選用的參數來配置這些模組。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用套件名稱 (推薦使用) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;@nuxtjs/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 載入本地目錄的模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;./modules/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 添加模組的選項參數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">&#39;./modules/example&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;123&#39;</span> <span class="p">}]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 在行內定義模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">async</span> <span class="p">(</span><span class="nx">inlineOptions</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="nuxt-3-模組列表">Nuxt 3 模組列表</h3> <p>你可以在 <a class="link" href="https://nuxt.com/modules" target="_blank" rel="noopener" >Explore Nuxt Modules</a> 上尋找由 Nuxt 官方或社群生態所發展建置的模組，Nuxt 的模組通常遵循著官方指南所製，使用時只需要安裝與添加至 <strong>nuxt.config</strong> 中，基本上就能完成配置。</p> <h3 id="使用-nuxt-icon-模組">使用 Nuxt Icon 模組</h3> <p>Nuxt Icon 模組整合了 Iconify 提供多達 100,000 個以上的 Icon 圖示，只要在 Nuxt 中安裝後，我們就可以直接做使用。</p> <h4 id="step-1-安裝套件-1">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D nuxt-icon </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D nuxt-icon</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置使用模組">Step 2. 配置使用模組</h4> <p>在 <strong>nuxt.config.ts</strong> 中的 <strong>modules</strong> 屬性，添加 Nuxt Icon 模組的名稱 <code>nuxt-icon</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;nuxt-icon&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-開始使用">Step 3. 開始使用</h4> <p>依照說明，我們就可以使用 Nuxt Icon 模組，為我們所添加的元件 <code>&lt;Icon&gt;</code>，這個 Icon 元件可以傳入 <strong>name</strong> 屬性，以此來顯示不同的 Icon 圖示，<strong>size</strong> 則可以控制圖示的大小。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;logos:nuxt&#34;</span> <span class="na">size</span><span class="o">=</span><span class="s">&#34;360&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52617186748_8c9b770823_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="如何建立-nuxt-模組">如何建立 Nuxt 模組</h3> <p><a class="link" href="https://nuxt.com/docs/api/advanced/kit" target="_blank" rel="noopener" >Nuxt Kit</a> 是 Nuxt 官方提供的一個標準和方便的 API 來定義 Nuxt 模組。</p> <p>通常使用如下程式碼使用 <code>defineNuxtModule</code> 方法來建立一個模組：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineNuxtModule</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@nuxt/kit&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtModule</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模組的名稱，通常也會對應 NPM 發布的套件名稱 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;@nuxtjs/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果有配置這個模組的一些選項，會將其保存在這個設定鍵值下 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">configKey</span><span class="o">:</span> <span class="s1">&#39;sample&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 相容性限制 `nuxt.config` </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">compatibility</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 為了控制模組的版本相容性，通常會在這裡配置 Nuxt 版本的需求 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">nuxt</span><span class="o">:</span> <span class="s1">&#39;^3.0.0&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模組預設的選項 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">hooks</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">setup</span><span class="p">(</span><span class="nx">moduleOptions</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Nuxt 啟動載入模組後，模組所執行的邏輯會在這裡實作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>更多 Nuxt 模組的建立指南可以參考 <a class="link" href="https://nuxt.com/docs/guide/going-further/modules" target="_blank" rel="noopener" >Nuxt 3 - Module Author Guide</a>，這邊就不再贅述，畢竟我們比較常為模組的使用者。</p> <h3 id="模組的載入">模組的載入</h3> <p>前面我們使用了 Nuxt Icon 模組，我們也可以閱讀一下 <a class="link" href="https://github.com/nuxt-modules/icon/tree/v0.1.6" target="_blank" rel="noopener" >Nuxt Icon v0.1.6</a> 模組套件的原始碼。</p> <p>以下是 Nuxt Icon 模組的 <a class="link" href="https://github.com/nuxt-modules/icon/blob/v0.1.6/src/module.ts" target="_blank" rel="noopener" >module.ts</a> 檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtModule</span><span class="p">&lt;</span><span class="nt">ModuleOptions</span><span class="p">&gt;({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;nuxt-icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">configKey</span><span class="o">:</span> <span class="s1">&#39;icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">compatibility</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxt</span><span class="o">:</span> <span class="s1">&#39;^3.0.0-rc.9&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span> <span class="p">(</span><span class="nx">_options</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">resolve</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">createResolver</span><span class="p">(</span><span class="kr">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">addComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">global</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">filePath</span>: <span class="kt">resolve</span><span class="p">(</span><span class="s1">&#39;./runtime/Icon.vue&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 的模組使用了一個 <code>defineNuxtModule</code> 方法來定義模組，也可以視為模組的入口點，<code>meta.name</code> 對應的就是模組的名稱，也是我們添加至 <code>modules</code> 屬性所需要的模組名稱。</p> <p><code>setup</code> 就是模組載入後執行的函數，可以看到模組使用 <code>addComponent</code> 為我們 Nuxt 添加了一個元件名稱為 <strong>Icon</strong>，使用的元件檔案來自 <strong>./runtime/Icon.vue</strong>。</p> <p>模組中的 <a class="link" href="https://github.com/nuxt-modules/icon/blob/v0.1.6/src/runtime/Icon.vue" target="_blank" rel="noopener" >runtime/Icon.vue</a> 為我們封裝了 Iconify 圖示的使用邏輯以及取得 Nuxt 配置的參數等。</p> <p>透過模組我們可以省去這些繁瑣的封裝與配置，只需要專注在配置模組與開發上面。</p> <p>模組與插件其實還是存在著載入執行順序與使用情境上的差異性，以 Nuxt 來說，通常 Nuxt 的插件會是用來封裝及使用 Vue 中會使用到的插件與或套件；而 Nuxt 的模組，會將需要繁瑣配置的套件或插件來與 Nuxt 進行整合與封裝，不論是透過第三方插件或模組，這都將使 Nuxt 在開發與擴充上擁有更多的可能性。</p> <hr> <h2 id="中間件目錄-middleware-directory">中間件目錄 (Middleware Directory)</h2> <p>在 Vue 的專案內我們的頁面通常由 Vue Router 來控制路由及導航，Vue Router 提供了導航守衛 (Navigation Guards) 的 Hook API，讓我們可以在全域、路由甚至是元件中，來控制路由跳轉或取消的方式來守護我們的路由，不讓其隨意導航至特定頁面。Nuxt 3 提供了一個中間件的目錄，讓我們可以製作路由的中間件，來實作出類似導航守衛的效果。</p> <h3 id="vue-router-的導航守衛-navigation-guards">Vue Router 的導航守衛 (Navigation Guards)</h3> <p>導航守衛就是在訪問頁面之前，會攔截你的路由請求並執行自訂的驗證邏輯，依據驗證的成功與否，准予放行跳轉至路由頁面，抑或是取消訪問該路由，再依照不同處理方式進行中斷或重導向至特定路由頁面。</p> <p>導航守衛在實務上常見的使用情境，就是拿來做頁面訪問的權限驗證，例如，只有管理員才能訪問 <code>/admin</code> 路由下的頁面，我們可能就會添加攔截的 hook 來驗證使用者是否登入及夾帶的 Token 或 Role 是否有權限可以瀏覽，如果驗證成功就准予瀏覽管理員相關頁面，否則，將路由頁面導回至首頁、登入頁或錯誤頁面，如同一個守衛在路由之間進行把關驗證權限。</p> <p>我們以 Vue Route v4 來舉例，Vue Route 提供了以下三種情況下可以使用的 hook，分別是在全域、路由或是元件中：</p> <h3 id="全域">全域</h3> <h4 id="全域前置守衛-global-before-guards">全域前置守衛 (Global Before Guards)</h4> <p>當全域守衛 hook 添加好之後，每次導航至不同路由時，都會攔截以異步的方式執行相對應的處理邏輯。</p> <p>全域守衛提供了 <code>router.beforeEach()</code> hook 可以在進入任何一個路由前進行攔截處理，當導航觸發時就會依照建立的順序做呼叫，因為是異步函數解析執行，所以在所有的守衛 <strong>resolve</strong> 之前，會一直處於 <strong>pending</strong> 的狀態。</p> <h4 id="全域解析守衛-global-resolve-guards">全域解析守衛 (Global Resolve Guards)</h4> <p>而同樣屬於全域守衛的 <code>router.beforeResolve()</code> hook 會在所有元件內的導航守衛、路由都被解析及執行完畢後才執行，也就是說這個 <code>router.beforeResolve()</code> 呼叫的時間點晚於 <code>router.beforeEach()</code>。</p> <h4 id="全域後置-hooks-global-after-hooks">全域後置 Hooks (Global After Hooks)</h4> <p>與 <code>router.beforeEach()</code> hook 相反，全域後置 hooks 提供的 <code>router.afterEach()</code> Hook 會是在路由跳轉結束後才觸發，在這裡路由已經完成跳轉，路由本身也不會再被更動，這個 hook 通常用於分析類或設置頁面相關的資訊等輔助型的功能很有幫助。</p> <h3 id="路由獨有守衛-per-route-guard">路由獨有守衛 (Per-Route Guard)</h3> <p>與 <strong>router.beforeEach()</strong> 不同，我們可以為每一個路由添加 <code>beforeEnter()</code> hook，來達到每一個路由頁面有不同的執行方法，同時也只會在不同的路由導航中切換才會觸發。</p> <h3 id="元件內的守衛">元件內的守衛</h3> <p>在元件的內部中，也提供三種 hooks 分別為：</p> <ul> <li>beforeRouteEnter(): 在路由進入並渲染這個元件之前呼叫，所以還沒有元件的實體可以操作使用。</li> <li>beforeRouteUpdate(): 目前的路由改變，而且還處於同一個元件中時呼叫。</li> <li>beforeRouteLeave(): 當導航準備離開時且沒有使用到這個元件時呼叫。</li> </ul> <p>導航守衛 (Navigation Guards) 在導航出發後的 hook 觸發順序如下圖：</p> <p><img src="https://live.staticflickr.com/65535/52616698461_6a2572bcab_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="nuxt-3-路由中間件">Nuxt 3 路由中間件</h2> <p>Nuxt 3 中提供了一個路由中間件的框架，我們可以在專案下建立名為 <code>middleware</code> 目錄，在這個目錄下我們可以建立中間件，並讓整個 Nuxt 頁面或特定的路由做使用，也可以在頁面中添加，這個中間件可以理解為 Vue Router 中的導航守衛 (Navigation Guards)，同樣有 <code>to</code> 與 <code>from</code> 參數用以在導航至特定路由之前驗證權限或執行商業邏輯等。</p> <h3 id="路由中間件格式">路由中間件格式</h3> <p>當我們想要建立路由中間件時，可以在 Nuxt 專案的 <code>middleware</code> 目錄下建立檔案，並預設匯出一個由 <code>defineNuxtRouteMiddleware()</code> 定義的函數，例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">to</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="s1">&#39;1&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">abortNavigation</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>路由中間件能接收目前的路由 <code>to</code> 與下一個路由 <code>from</code> 做為參數，如同 Vue Router 的導航守衛，以此我們就可以來做一些判斷與驗證操作。</p> <h3 id="路由中間件的回傳">路由中間件的回傳</h3> <p>Nuxt 提供了兩個全域的 helpers，可以直接從中間件回傳：</p> <h4 id="navigatetoto-options">navigateTo(to, options)</h4> <p>在插件或中間件中重新定向到給定的路由。也可以直接呼叫它進行頁面導航。</p> <p>navigateTo 參數依序為：</p> <ul> <li><strong>to</strong>： RouteLocationRaw | undefined | null</li> <li><strong>options</strong>： { replace: boolean, redirectCode: number, external: boolean }</li> </ul> <h4 id="abortnavigationerr">abortNavigation(err)</h4> <p>可以在中間件中回傳 <code>abortNavigation()</code> 來中止導航，並可以選擇是否傳入錯誤訊息。</p> <p>abortNavigation 參數為：</p> <blockquote> <p>err?: string | Error</p></blockquote> <p>與 Vue Router 中的導航守衛稍有不同，在 Nuxt 的中間件中可以使用 <code>navigateTo</code> 與 <code>abortNavigation</code> 來決定導航至新的路由或終止導航，如果中間件沒有回傳任何東西，則表示不阻塞導航，如果有下一個中間件，則而移往下一個功能做執行，或者完成路由導航。</p> <ul> <li>nothing - 不阻塞導航並且會移動到下一個中間件功能。</li> <li>如果有的話，或者完成路由導航 return navigateTo(&rsquo;/&rsquo;) 或 return navigateTo({ path: &lsquo;/&rsquo; }) - 重定向到給定路徑。</li> </ul> <p>如果使用 <code>navigateTo()</code> 重定向是發生在伺服器端 ，則將 HTTP Status Code 設置為<code>暫時</code>重定向狀態碼 <strong>302 Found</strong>。</p> <p>如果使用 <code>navigateTo()</code> 並夾入 <code>options.redirectCode</code> 屬性，例如 <code>return navigateTo('/', { redirectCode: 301 })</code>，發生的重定向在伺服器端，將 HTTP Status Code 設置為<code>永久</code>重定向狀態碼 <strong>301 Moved Permanently</strong>。</p> <h3 id="路由中間件的種類">路由中間件的種類</h3> <p>在 Nuxt 中路由中間件分為以下三種：</p> <h4 id="匿名或者是行內的路由中間件">匿名或者是行內的路由中間件</h4> <p>不需要建立檔案，通常在路由頁面中使用 <code>definePageMeta()</code> 來定義的中間件，就屬於這種類型。</p> <p>例如，直接定義一個匿名的中間件在頁面元件中使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[匿名中間件] 我是直接定義在頁面內的匿名中間件`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="具名的路由中間件">具名的路由中間件</h4> <p>在 <code>middleware</code> 目錄下所建立的中間件，當在頁面使用 <code>definePageMeta()</code> 來指定使用具名的中間件時，將透過異步來自動載入。具名的路由的名稱被規範為是烤肉串式 (Kebab case) 命名。</p> <p>例如，建立一個 <strong>./middleware/random-redirect.js</strong> 中間件檔案：</p> <h5 id="middlewarerandom-redirectjs">middleware/random-redirect.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[來自 random-redirect 中間件] 重新導向至 /haha`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/haha&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[來自 random-redirect 中間件] 沒發生什麼特別的事情～`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們要使用這個中間件時，可以在頁面中使用 <code>definePageMeta()</code> 並傳入 <code>middleware</code> 屬性，來添加路由中間件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;random-redirect&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果中間件有多個，你也可以使用陣列來傳入多個中間件，並且會依序執行這些路由中間件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;random-redirect&#39;</span><span class="p">,</span> <span class="s1">&#39;other&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們在頁面中添加這個中間件後，在切換到這個路由頁面時，約有一半的機會，會被導航至 <strong>/haha</strong> 頁面。</p> <p><img src="https://live.staticflickr.com/65535/52617186763_d4ff53ce17_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="全域的路由中間件">全域的路由中間件</h4> <p>在具名的中間件的檔名添加後綴 <code>.global</code>，如 <strong>auth.global.js</strong>，這個路由中間件將會被自動載入，並在每次導航變更時自動執行。</p> <p>例如，我們建立一個 <strong>./middleware/always-run.global.js</strong> 中間件檔案，內容如下：</p> <h5 id="middlewarealways-runglobaljs">middleware/always-run.global.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[全域中間件] to: </span><span class="si">${</span><span class="nx">to</span><span class="p">.</span><span class="nx">path</span><span class="si">}</span><span class="sb">, from: </span><span class="si">${</span><span class="nx">from</span><span class="p">.</span><span class="nx">path</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個全域的路由中間件，將會在每一次導航切換頁面時執行。</p> <p><img src="https://live.staticflickr.com/65535/52617134335_bac452e9f6_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="動態添加路由中間件">動態添加路由中間件</h4> <p>你可以使用 <code>addRouteMiddleware()</code> 輔助函數來手動添加全域或命名路由中間件，例如在插件中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addRouteMiddleware</span><span class="p">(</span><span class="s1">&#39;global-test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;這個是由插件添加的全域中間件，並將在每次路由變更時執行&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">global</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">addRouteMiddleware</span><span class="p">(</span><span class="s1">&#39;named-test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;這個是由插件添加的具名中間件，並將會覆蓋任何現有的同名中間件&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 Nuxt 中我們可以使用所提供的中間件框架，來建立路由頁面中的中間件，而路由中間件會在到特定路由之前執行想要運行的邏輯，對於驗證權限等非常方便，也正是實現導航守衛 (Navigation Guards) 的方式。這裡我們主要講述的路由中間件，也將會與我們後面會提到的伺服器端的中間件有所不同，雖然名稱相似但與 Nitro 啟動時執行的伺服器中間件<code>完全不同</code>。</p> <hr> <h2 id="server-api-與-nitro-engine">Server API 與 Nitro Engine</h2> <p>這裡會先介紹一下 Nitro Engine 是什麼東西，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 可能不多人聽過但與 Nuxt 3 息息相關，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 伺服器引擎除了有跨平台支援與多種強大的功能外，更包含了 API 路由的支援，意思就是我們可以直接在基於 <a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 的 Nuxt 3 上直接開發由後端處理的邏輯或與資料庫互動，再將結果回傳至前端，實作出 Server API。</p> <h3 id="nitro-engine">Nitro Engine</h3> <p>在開始建置 Sever API 之前，先來介紹一下 Nitro 伺服器引擎，Nuxt 3 的一大特點就是採用了一個名為 <a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 的伺服器引擎 (Server Engine)，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 基於 rollup 與 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >h3</a>，為達高效能與可移植性目標而建構的最小 <code>HTTP</code> 框架。</p> <p><a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 提供了以下多種功能特色，使得 Nuxt 更佳完善與強大，如同官網所說 <strong><a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 讓 Nuxt 直接解鎖了新的全端能力</strong>。</p> <ul> <li><strong>快速的開發體驗</strong>：開箱即用的特性，無需任何配置，就可以啟動具有 <strong>hot module reloading</strong> 的開發伺服器，寫完程式碼存檔後，就能讓伺服器載入新的程式邏輯。</li> <li><strong>基於檔案系統的路由</strong>：我們只需要專注在建立伺服器的目錄與頁面，就能擁有自動載入與路由的效果。</li> <li><strong>可移植且便攜</strong>：基本上 Nuxt 3 使用的依賴套件都在 <strong>package.json</strong> 檔案的 <strong>devDependencies</strong> 中，建構正式環境的網站時，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 自動拆分的程式碼與打包出來的 <code>.output</code> 目錄不再需要安裝依賴套件，意味著不再有 <strong>node_modules</strong>，因此部署時更輕便好攜。</li> <li><strong>混合模式</strong>：透過**混合模式 (Hybrid mode)**可以將一部分頁面預渲染產生出靜態頁面，部分頁面是動態的在伺服器或客戶端渲染，讓每個路由頁面有不同的靜態或動態甚至擁有快取規則，這將讓 Nuxt 3 的<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering#universal-rendering" target="_blank" rel="noopener" >通用渲染 (Universal Rendering)</a> 方式更進一步成<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering" target="_blank" rel="noopener" >混合渲染 (Hybrid Rendering)</a> 也能結合無伺服器 (Serverless) 來配置混合模式。</li> </ul> <p>看到這裡，可以發現 Nuxt 3 與 Nitro 都下了非常大的功夫，雖然還有些功能尚未穩定與需要改進的地方，但是已經為開發上提供了強大支援與良好的體驗，更多特性與細節可以參考 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine" target="_blank" rel="noopener" >Nuxt 3 - Server Engine</a> 或 <a class="link" href="https://nitro.unjs.io/" target="_blank" rel="noopener" >Nitro 官方</a>。</p> <h3 id="nuxt-3-的-server-目錄">Nuxt 3 的 Server 目錄</h3> <p>我們可以透過 Nuxt 3 專案下的 <code>server</code> 目錄來建立具有 <strong>hot module reloading</strong> 支援的 Server API 與後端處理邏輯。</p> <p><strong>server</strong> 目錄常用的有下面三個子目錄：</p> <ul> <li>api</li> </ul> <p>在這個目錄的檔案，將會由 Nuxt 自動載入並產生 <code>/api</code> 開頭的路由並對應檔案名稱，例如建立 <strong>./server/api/hello.js</strong>，就會擁有 <strong>/api/hello</strong> 的路由對應這個 API，可以使用 <a class="link" href="http://localhost:3000/api/hello" target="_blank" rel="noopener" >http://localhost:3000/api/hello</a> 訪問該路由。</p> <ul> <li>routes</li> </ul> <p>在這個目錄的檔案，將會由 Nuxt 自動載入並產生對應檔案名稱的路由，例如建立 <strong>./server/routes/world.js</strong>，就會擁有 <code>/world</code> 的路由對應這個 API，可以使用 <a class="link" href="http://localhost:3000/world" target="_blank" rel="noopener" >http://localhost:3000/world</a> 訪問該路由。</p> <ul> <li>middleware</li> </ul> <p>在這個目錄的檔案，會被 Nuxt 自動載入，並添加至<code>伺服器中間件</code>，並在每個 Request 進入伺服器 API 的路由前執行。</p> <h3 id="建立第一個伺服器-api">建立第一個伺服器 API</h3> <p>Nuxt 會自動掃描 <code>server</code> 目錄中的檔案結構，建立 Server API 時通常以 <strong>.js</strong> 或 <strong>.ts</strong> 作為副檔名，並依照官方建議，每個檔案都應該預設匯出 <code>defineEventHandler()</code> 函數，並在其 handler 內實作處理邏輯。</p> <p>handler 接收了一個 <code>event</code> 參數，用來解析請求的資料，並可以直接回傳一個<strong>字串</strong>、<strong>JSON</strong>、<strong>Promise</strong> 或者使用 <strong>event.res.end()</strong> 送出請求回應。</p> <p>舉例來說，我們建立一個檔案 <strong>./server/api/hello.js</strong>，內容如下：</p> <h5 id="serverapihellojs">server/api/hello.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="s1">&#39;Hello World!&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如同 <code>pages</code> 頁面路由一樣，在 <strong>./server/api</strong> 目錄下會基於檔案系統結構來產生出相對應的路由，並且會添加一個路由前綴 <code>/api</code>，現在，可以使用 <a class="link" href="http://localhost:3000/api/hello" target="_blank" rel="noopener" >http://localhost:3000/api/hello</a> 訪問該路由，看見回傳的 JSON 資料。</p> <p><img src="https://live.staticflickr.com/65535/52616964704_e3841ca57a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器路由">伺服器路由</h3> <h4 id="基於檔案的路由">基於檔案的路由</h4> <p>前面的例子有提到，Server API 的路由是<code>基於檔案結構來自動產生</code>，如果你不想要有 <code>/api</code> 的前綴，可以將 API 處理邏輯檔案，放置在 <strong>./server/routes</strong> 目錄中。</p> <p>舉例來說，以下的檔案結構會產生兩個可以訪問的伺服器 API 路由，分別為 <strong>/api/hello</strong> 及 <strong>/api/world</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">└── server/ </span></span><span class="line"><span class="cl"> ├── api/ </span></span><span class="line"><span class="cl"> │ └── hello.js </span></span><span class="line"><span class="cl"> └── routes/ </span></span><span class="line"><span class="cl"> └── world.js </span></span></code></pre></td></tr></table> </div> </div><h4 id="匹配路由參數">匹配路由參數</h4> <p>將檔案名稱添加中括號 <code>[]</code>，其中放入欲設定的參數名稱，以此來處理動態路由匹配。 舉例來說，建立 <strong>./server/api/hello/[name].js</strong> 檔案，內容如下：</p> <h5 id="serverapihellonamejs">server/api/hello/[name].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`Hello, </span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">!`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 handler 內就能使用 <code>event.context.params</code> 來訪問 <strong>name</strong> 路由參數。</p> <p><img src="https://live.staticflickr.com/65535/52616698486_37c5da2beb_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="匹配-http-請求方法-http-request-method">匹配 HTTP 請求方法 (HTTP Request Method)</h4> <p>我們可以添加 <strong>.get</strong>、<strong>.post</strong>、<strong>.put</strong> 或 <strong>.delete</strong> 等檔案名稱後綴，來匹配對應的 HTTP request methods。</p> <p>新增 <strong>server/api/test.get.js</strong>，內容如下：</p> <h5 id="serverapitestgetjs">server/api/test.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;測試 [GET] /api/test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>server/api/test.post.js</strong>，內容如下：</p> <h5 id="serverapitestpostjs">server/api/test.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;測試 [POST] /api/test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <a class="link" href="https://www.postman.com/" target="_blank" rel="noopener" >Postman</a> 來打這兩隻 API，可以看到使用不同的 HTTP Request Method，就會匹配至對應後綴檔案中的 handler 進行處理。</p> <h5 id="get-apitest">[GET] /api/test</h5> <p><img src="https://live.staticflickr.com/65535/52616188612_a1886c609d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h5 id="post-apitest">[POST] /api/test</h5> <p><img src="https://live.staticflickr.com/65535/52616964714_af11679e95_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>從上面的例子，我們建立了 <code>test.get.js</code> 與 <code>test.post.js</code> 檔案，分別對應了 <strong>GET</strong> 與 <strong>POST</strong> 方法，如果同一個路由使用了其他方法而無法匹配處理的檔案時，則會回傳 HTTP 狀態碼 <strong>405 Method Not Allowed</strong> 表示錯誤。</p> <h4 id="匹配包羅萬象的路由-catch-all-route">匹配包羅萬象的路由 (Catch-all Route)</h4> <p>你可以建立 <code>[…].js</code> 的檔案，來將所有不匹配的路由交由這個 handler 作處理。</p> <p>例如，建立 <strong>./server/api/catch-all/[…].js</strong>，將可以匹配 <strong>/api/catch-all/x</strong>、<strong>/api/catch-all/x/y</strong>&hellip;等 <strong>/catch-all</strong> 下所有層級的路由。</p> <h5 id="serverapicatch-alljs">server/api/catch-all/[…].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;/api/catch-all 下不匹配的路由都會進入這裡&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./server/api/[…].js</strong> 檔案如下，將可以接手所有 <strong>/api</strong> 下無法匹配的路由。</p> <h5 id="serverapijs">server/api/[…].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;/api 下不匹配的路由都會進入這裡&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>下圖示範中，當我們輸入的路由如果沒有辦法處理，將會被 <code>[...].js</code> 所匹配，以此我們可以來實作返回、重新導向或錯誤頁面。</p> <p><img src="https://live.staticflickr.com/65535/52617186823_7aa4ffbd74_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器中間件">伺服器中間件</h3> <p>Nuxt 會自動載入 <code>./server/middleware</code> 中的檔案，並添加至<code>伺服器中間件</code>，伺服器的中間件與路由中間件不同的是，<code>pages</code> 路由頁面的請求是不會執行伺服器中間件。</p> <p>伺服器的中間件會在每個 Request 進入伺服器 API 的路由前執行，通常用來添加或檢查請求的標頭 (headers)、記錄請求或擴展調整請求的物件。</p> <blockquote> <p>伺服器中間件的處理邏輯，不應該回傳任何內容，也不應中斷或直接回應請求，伺服器中間件應該僅檢查、擴展請求上下文或直接拋出錯誤。</p></blockquote> <p>舉理來說，你可以新增 <strong>./server/middleware/log.js</strong> 用來記錄每個請求的 URL。</p> <h5 id="servermiddlewarelogjs">server/middleware/log.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;New request: &#39;</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者，新增 <strong>./server/middleware/auth.js</strong> 用來解析請求或擴展請由物件。</p> <h5 id="servermiddlewareauthjs">server/middleware/auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">auth</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;ryan&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="伺服器插件">伺服器插件</h3> <p>Nuxt 會自動掃描並載入 <code>./server/plugins</code> 目錄下的檔案，並將他們註冊為 Nitro 的插件，在 Nitro 啟動時，這些插件將會在伺服器載入並執行，插件允許擴展 Nitro 執行時的行為及連接到生命週期的事件。</p> <p>更多細節可以參考 <a class="link" href="https://nitro.unjs.io/guide/advanced/plugins" target="_blank" rel="noopener" >Nitro Plugins</a>。</p> <h3 id="伺服器通用功能">伺服器通用功能</h3> <p>Nuxt 中伺服器的路由，是由 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >unjs/h3</a> 所提供，h3 內建一些方便實用的 helpers，可以參考 <a class="link" href="https://www.jsdocs.io/package/h3#package-index-functions" target="_blank" rel="noopener" >Available H3 Request Helpers</a>。</p> <h3 id="伺服器路由常用的-http-請求處理">伺服器路由常用的 HTTP 請求處理</h3> <h4 id="處理-http-請求中的-body">處理 HTTP 請求中的 Body</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">body</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以使用 <code>readBody(event)</code> 來解析請求中的 Body，注意 <code>readBody()</code> 是一個異步函數，記得 <code>await</code> 等待解析完成。</p> <p><img src="https://live.staticflickr.com/65535/52617186843_8c75e8307f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="處理-url-中的查詢參數-query-parameters">處理 URL 中的查詢參數 (Query Parameters)</h4> <p>可以使用 <code>getQuery(evnet)</code> 來解析查詢參數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">getQuery</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">query</span><span class="p">.</span><span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當請求 URL 為 <strong>/api/query?name=ryan</strong>，可以解析出查詢參數 <strong>query.name</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616964724_f604a17188_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="解析-http-請求所夾帶的-cookie">解析 HTTP 請求所夾帶的 Cookie</h4> <p>可以使用 <code>parseCookies(event)</code> 來解析請求所夾帶的 Cookie。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">cookies</span> <span class="o">=</span> <span class="nx">parseCookies</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">cookies</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我透過瀏覽器的開發工具，手動添加了一組 <strong>cookie</strong> 名為 <code>token</code>，Server API 可以透過 <code>parseCookies()</code> 來解析出瀏覽器自動夾帶的 <strong>cookie</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616698541_f2d257d4c0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="進階使用範例">進階使用範例</h3> <h4 id="nitro-配置">Nitro 配置</h4> <p>你可以在 <code>nuxt.config.ts</code> 中使用 <code>nitro</code> 屬性來配置 <a class="link" href="https://nitro.unjs.io/config" target="_blank" rel="noopener" >Nitro 設定</a>。</p> <h5 id="nuxtconfigts-2">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// https://nitro.unjs.io/config </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用巢狀路由">使用巢狀路由</h4> <p>你可以直接使用 <a class="link" href="https://www.jsdocs.io/package/h3" target="_blank" rel="noopener" >h3</a> 的 <code>createRouter()</code> 方法來建立巢狀路由。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">createRouter</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;h3&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="nx">createRouter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">router</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="s1">&#39;Hello World&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">router</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="伺服器儲存">伺服器儲存</h4> <p>Nitro 提供了一個跨平台的<a class="link" href="https://nitro.unjs.io/guide/introduction/storage" target="_blank" rel="noopener" >儲存層</a>，你可以 Nitro 的配置中設定 <code>storage</code> 屬性，來配置額外的儲存掛載位置，官網提供了一個<a class="link" href="https://nuxt.com/docs/guide/directory-structure/server/#example-using-redis" target="_blank" rel="noopener" >使用 Redis 的範例</a>。</p> <p>更多 Nitro 伺服器的設定與使用可以參考<a class="link" href="https://nuxt.com/docs/guide/directory-structure/server/" target="_blank" rel="noopener" >官網</a>。</p> <p>Nitro 伺服器引擎將 Nuxt 3 提升至另一個境界，不僅功能強大且讓開發中擁有不錯的體驗，伺服器路由更是能在後端直接處理邏輯實作 Server API，而接下來將介紹如何在 Nuxt 打 API 取得資料。</p> <hr> <h2 id="資料獲取-data-fetching">資料獲取 (Data Fetching)</h2> <p>Nuxt 提供了 <code>$fetch</code> 及四種組合式函數 (Composables)，來進行資料獲取，也就是說，我們不需要再額外安裝任何 HTTP Client ，如 <a class="link" href="https://github.com/axios/axios" target="_blank" rel="noopener" >axios</a> 來發送 HTTP 請求，因為 Nuxt 本身就自帶了打 API 的方法，而且在頁面、元件或插件中都能直接呼叫做使用，非常方便。</p> <p>首先，我們先介紹一下 <code>$fetch</code> 這個由 Nuxt 提供使用 <a class="link" href="https://github.com/unjs/ofetch" target="_blank" rel="noopener" >ohmyfetch</a> 套件所封裝的 helper，<code>$fetch</code> 可以在 Nuxt 中用於發送 HTTP 請求。</p> <p>如果在伺服器端渲染的期間，呼叫 <code>$fetch</code> 打內部 API 路由，也就是打我們自己在 <code>./server</code> 下實作的後端 API，那麼因為使用 <code>$fetch</code> 的關係，Nuxt 會模擬請求，改由直接呼叫內部 API 的處理函數，這樣就能節省額外的 API 呼叫。</p> <p>使用的方法，如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">$fetch</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以使用 <strong>$fetch(&rsquo;/api/count&rsquo;)</strong> 建立一個 GET 請求，發送至 <strong>/api/count</strong> 後會返回一個 Promise，完成後我們就可以接收回傳的資料。</p> <p><code>$fetch</code> 的 <strong>options</strong> 的參數及建立攔截器等功能可以參考 <a class="link" href="https://github.com/unjs/ohmyfetch" target="_blank" rel="noopener" >ohmyfetch</a>，不過呢，我們還會使用 Nuxt 提供的組合函數結合 <strong>$fetch</strong> 來打 API。</p> <p>接下來我們就來依序介紹，如何使用 Nuxt 提供的四種組合函數來從 API 獲取資料。</p> <h3 id="useasyncdata">useAsyncData</h3> <p>這個 <code>useAsyncData()</code> 組合函數，其實不是傳入 URL 直接呼叫就會發出 API 請求，而是 Nuxt 可以透過這個函數來添加異步請求資料的邏輯。</p> <p><code>useAsyncData</code> 組合函數能接收 <code>key</code>、<code>handler</code> 與 <code>options</code>，其中 <strong>handler</strong> 會來添加請求異步資料的邏輯。當我們在頁面、元件和插件中呼叫 <strong>useAsyncData</strong>，並等待回傳的 <strong>Promise</strong>，我們的頁面或元件的渲染將會<code>阻塞路由載入</code>至 <strong>handler</strong> 異步邏輯處理完畢後才會繼續執行，也就是說，整個頁面元件將會等待所有使用 <strong>useAsyncData</strong> 呼叫的 API 回傳完成後才會開始進行渲染。</p> <p>舉個例子，我們新增一個 Server API，並稍微添加一下延遲，模擬 API 約需要處理 2 秒才回傳資料，<strong>./server/api/count.js</strong> 內容如下：</p> <h5 id="serverapicountjs">server/api/count.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">2</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> <span class="c1">// 等待 2 秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/count/useAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuseasyncdatavue">pages/count/useAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們瀏覽 <strong>/count/useAsyncData</strong> 時，會打 <strong>/api/count</strong> 這隻 API，並等待返回後才開始渲染元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186873_0f1db5744d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>因為瀏覽 <a class="link" href="http://localho:3000/count/useAsyncData" target="_blank" rel="noopener" >http://localho:3000/count/useAsyncData</a> 時，第一次都是由後端渲染處理，看不太出導航有被阻塞的效果，建議可以添加一下路由連結來進行導航，就可以發現差異。</p> <p>當我們從首頁，由客戶端導航至 <code>/count/useAsyncData</code> 頁面時，會發現網址的路由已經變化，但是頁面約等了一會兒才渲染出現，這就是因為頁面中使用了 <code>useAsyncData()</code> 來獲取資料，<code>await</code> 將阻塞整個頁面元件的載入與渲染，直至 API 處理完畢回傳後才開始載入路由渲染元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186898_35b72a8173_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><strong>useAsyncData() 共有兩種呼叫時使用參數差異，可以選擇是否傳入第一個參數 <code>key</code>，所傳入參數的類型如下</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">handler</span><span class="o">:</span> <span class="p">(</span><span class="nx">nuxtApp?</span>: <span class="kt">NuxtApp</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">handler</span><span class="o">:</span> <span class="p">(</span><span class="nx">nuxtApp?</span>: <span class="kt">NuxtApp</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">server?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">lazy?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">|</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">?:</span> <span class="p">(</span><span class="nx">input</span>: <span class="kt">DataT</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick?</span>: <span class="kt">string</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">watch?</span>: <span class="kt">WatchSource</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">immediate?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">RefreshOptions</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">_initial?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">,</span> <span class="na">ErrorT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span> <span class="err">|</span> <span class="na">null</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pending</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">execute</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">refresh</span><span class="o">:</span> <span class="p">(</span><span class="nx">opts?</span>: <span class="kt">RefreshOptions</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">error</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">ErrorT</span> <span class="err">|</span> <span class="na">null</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="useasyncdata-傳入的參數">useAsyncData() 傳入的參數</h4> <ul> <li><strong>key</strong>：唯一鍵，可以確保資料不會重複的獲取，也就是如果 Key 相同便不會再發送相同的請求，除非重新整理頁面由後端再次渲染獲取，或呼叫 <code>useAsyncData</code> 回傳的 <code>refresh()</code> 函數重新取得資料。</li> <li><strong>handler</strong>：回傳異步請求資料的處理函數，打 API 或加工的異步邏輯都可以在這裡處理。</li> <li><strong>options</strong>： <ul> <li><strong>server</strong>：是否在伺服器端獲取資料，預設為 <code>true</code>。</li> <li><strong>lazy</strong>：是否於載入路由後才開始執行異步請求函數，預設為 <code>false</code>，所以會阻止路由載入直到請求完成後才開始渲染頁面元件。</li> <li><strong>default</strong>：當傳入這個 factory function，可以將異步請求發送與回傳解析前，設定資料的預設值，對於設定 <code>lazy: true</code> 選項特別有用處，至少有個預設值可以使用及渲染顯示。</li> <li><strong>transform</strong>：修改加工 <code>handler</code> 回傳結果的函數。</li> <li><strong>pick</strong>：<code>handler</code> 若回傳一個物件，只從中依照需要的 key 取出資料，例如只從 JSON 物件中取的某幾個 key 組成新的物件。</li> <li><strong>watch</strong>：監聽 <code>ref</code> 或 <code>reactive</code> 響應式資料發生變化時，觸發重新請求資料，適用於資料分頁、過濾結果或搜尋等情境。</li> <li><strong>initialCache</strong>：預設為 <code>true</code>，當第一次請求資料時，將會把有效的 payload 快取，之後的請求只要是相同的 key，都會直接回傳快取的結果。</li> <li><strong>immediate</strong>：預設為 <code>true</code>，請求將會立即觸發。</li> </ul> </li> </ul> <h4 id="useasyncdata-的回傳值">useAsyncData() 的回傳值</h4> <ul> <li><strong>data</strong>：傳入異步函數的回傳結果。</li> <li><strong>pending</strong>：以 <code>true</code> 或 <code>false</code> 表示是否正在獲取資料。</li> <li><strong>refresh / execute</strong>：一個函數，可以用來重新執行 <code>handler</code> 函數，回傳新的資料，類似重新整理、重打一次 API 的概念。預設情況下 <code>refresh()</code> 執行完並回傳後才能再次執行。</li> <li><strong>error</strong>：資料獲取失敗時回傳的物件。</li> </ul> <p>看到這裡，我們再重新閱讀與解釋 <code>useAsyncData()</code> 的範例</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;count&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>呼叫 <code>useAsyncData()</code> 並不是直接幫我們送出 HTTP 請求，而是在 <code>handler</code> 內使用 <code>$fetch</code> 來打 API，只是 <code>useAsyncData()</code> 組合式函數，封裝了更多打 API 時可以使用的方法與參數，來因應不同的使用情境。當然如果想要，你也可以使用其他套件來替換 <code>$fetch</code> 但可能就沒辦法享受它所帶來的好處。</p> <h3 id="usefetch">useFetch</h3> <p>這個組合式函數將 <code>useAsyncData</code> 和 <code>$fetch</code> 進行包裝，當使用這個函數時它會根據 URL 和 fetch 的選項來自動產生 <code>useAsyncData</code> 需要的參數 <code>key</code>，如果呼叫的 API 是伺服器端所提供的，也會自動根據伺服器 API 路由來為請求提供類型提示，並推斷 API 的回傳類型。</p> <p><strong>useFetch() 所傳入參數的類型如下</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useFetch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span>: <span class="kt">string</span> <span class="o">|</span> <span class="nx">Request</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">string</span> <span class="err">|</span> <span class="na">Request</span><span class="p">&gt;</span> <span class="o">|</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="kt">string</span> <span class="o">|</span> <span class="nx">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">UseFetchOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">UseFetchOptions</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">method?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">params?</span>: <span class="kt">SearchParams</span> </span></span><span class="line"><span class="cl"> <span class="nx">body?</span>: <span class="kt">RequestInit</span><span class="p">[</span><span class="s1">&#39;body&#39;</span><span class="p">]</span> <span class="o">|</span> <span class="nx">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">?:</span> <span class="p">{</span> <span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">value</span>: <span class="kt">string</span> <span class="p">}[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">baseURL?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">server?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">lazy?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">immediate?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">?:</span> <span class="p">(</span><span class="nx">input</span>: <span class="kt">DataT</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick?</span>: <span class="kt">string</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">watch?</span>: <span class="kt">WatchSource</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pending</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">refresh</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">execute</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">error</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">Error</span> <span class="err">|</span> <span class="na">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="usefetch-傳入的參數">useFetch() 傳入的參數</h4> <ul> <li><strong>url</strong>：要獲取資料的 URL 或 API Endpoint。</li> <li><strong>options</strong>：(繼承自 <a class="link" href="https://github.com/unjs/ohmyfetch" target="_blank" rel="noopener" >unjs/ohmyfetch</a> 選項與 <a class="link" href="https://nuxt.com/docs/api/composables/use-async-data#params" target="_blank" rel="noopener" >AsyncDataOptions</a>) <ul> <li><strong>method</strong>：發送 HTTP 請求的方法，例如 GET、POST 或 DELETE 等。</li> <li><strong>params</strong>：查詢參數 (Query params)。</li> <li><strong>body</strong>：請求的 body，可以傳入一個物件，它將自動被轉化為字串。</li> <li><strong>headers</strong>：請求的標頭 (headers)。</li> <li><strong>baseURL</strong>：請求的 API 路徑，基於的 URL。</li> </ul> </li> <li><strong>options</strong>：(繼承自 <code>useAsyncData</code> 的選項) <ul> <li><strong>key</strong>：唯一鍵，可以確保資料不會重複的獲取，也就是如果 Key 相同便不會再發送相同的請求，除非重新整理頁面由後端再次渲染獲取，或呼叫 <code>useAsyncData</code> 回傳的 <code>refresh()</code> 函數重新取得資料。</li> <li><strong>server</strong>：是否在伺服器端獲取資料，預設為 <code>true</code>。</li> <li><strong>lazy</strong>：是否於載入路由後才開始執行異步請求函數，預設為 <code>false</code>，所以會阻止路由載入直到請求完成後才開始渲染頁面元件。</li> <li><strong>immediate</strong>：預設為 <code>true</code>，請求將會立即觸發。</li> <li><strong>default</strong>：當傳入這個 factory function，可以將異步請求發送與回傳解析前，設定資料的預設值，對於設定 <code>lazy: true</code> 選項特別有用處，至少有個預設值可以使用及渲染顯示。</li> <li><strong>transform</strong>：修改加工 <code>handler</code> 回傳結果的函數。</li> <li><strong>pick</strong>：<code>handler</code> 若回傳一個物件，只從中依照需要的 key 取出資料，例如只從 JSON 物件中取的某幾個 key 組成新的物件。</li> <li><strong>watch</strong>：監聽 <code>ref</code> 或 <code>reactive</code> 響應式資料發生變化時，觸發重新請求資料，適用於資料分頁、過濾結果或搜尋等情境。</li> <li><strong>initialCache</strong>：預設為 <code>true</code>，當第一次請求資料時，將會把有效的 payload 快取，之後的請求只要是相同的 key，都會直接回傳快取的結果。</li> </ul> </li> </ul> <h4 id="usefetch-的回傳值">useFetch() 的回傳值</h4> <ul> <li><strong>data</strong>：傳入異步函數的回傳結果。</li> <li><strong>pending</strong>：以 <code>true</code> 或 <code>false</code> 表示是否正在獲取資料。</li> <li><strong>refresh / execute</strong>：一個函數，可以用來重新執行 <code>handler</code> 函數，回傳新的資料，類似重新整理、重打一次 API 的概念。預設情況下 <code>refresh()</code> 執行完並回傳後才能再次執行。</li> <li><strong>error</strong>：資料獲取失敗時回傳的物件。</li> </ul> <p>舉個例子，我們新增一個 Server API，<strong>./server/api/about.js</strong> 內容如下：</p> <h5 id="serverapiaboutjs">server/api/about.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gender</span><span class="o">:</span> <span class="s1">&#39;男&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;ryanchien8125@gmail.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/about/useFetch.vue</strong> 內容如下：</p> <h5 id="pagesaboutusefetchvue">pages/about/useFetch.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-2xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">請求狀態</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">pending</span> <span class="o">?</span> <span class="s1">&#39;請求中&#39;</span> <span class="o">:</span> <span class="s1">&#39;完成&#39;</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;error&#34; class=&#34;mt-4 text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="na">是否錯誤</span><span class="o">:</span> <span class="p">{{</span> <span class="na">error</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">回傳資料</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-500 py-3 px-8 text-xl font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;refresh&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">重新獲取資料</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/about&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;name&#39;</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>透過 <code>useFetch()</code> 我們能更簡單的發送 API 請求，並能得到狀態與重新獲取資料的函數，甚至在第一次進入頁面時，利用 <code>$fetch</code> 可以直接呼叫伺服器 API 函數的特性來降低 API 的請求次數。</p> <p><img src="https://live.staticflickr.com/65535/52616964759_a9278ba6d0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="攔截器">攔截器</h3> <p>我們也可以透過 <code>$fetch</code> 提供的選項來設置攔截器。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">onRequest</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 設定請求時夾帶的標頭 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span> <span class="o">||</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span> <span class="o">=</span> <span class="s1">&#39;...&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onRequestError</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求時發生的錯誤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onResponse</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求回應的資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">response</span><span class="p">.</span><span class="nx">_data</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onResponseError</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求回應發生的錯誤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="uselazyasyncdata">useLazyAsyncData</h3> <p>預設的情況下，<code>useAsyncData()</code> 的 <code>options.lazy</code> 為 <code>false</code>，意思是，預設得情況下，當進入路由後，會開始執行異步請求函數，並會會阻止路由載入元件等，直到請求完成後才開始渲染頁面元件。</p> <p><code>useLazyAsyncData()</code> 則是 <code>options.lazy</code> 預設為 <code>true</code> 的封裝，也就是請求資料時它將不會阻塞，並讓頁面繼續渲染元件。</p> <p>舉個例子，我們新增一個 Server API，並稍微添加一下延遲，模擬 API 約需要處理 2 秒才回傳資料，<strong>./server/api/count.js</strong> 內容如下：</p> <h5 id="serverapicountjs-1">server/api/count.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">2000</span><span class="p">))</span> <span class="c1">// 等待 2 秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/count/useLazyAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuselazyasyncdatavue">pages/count/useLazyAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/count&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，我們使用 <code>useLazyAsyncData()</code> 後，會與前面使用 <code>useAsyncData()</code> 的效果不一樣，會先渲染出元件，即看到的文字「瀏覽次數」，並再 API 回傳後才響應資料重新渲染數值。</p> <p><img src="https://live.staticflickr.com/65535/52617186908_7d896f5934_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過 <code>default</code> 選項可以來建立 API 回傳前的預設值，在 <code>options.lazy</code> 為 <code>true</code> 的情況下，都建議設定一下預設值，可以讓使用者體驗更好一些。</p> <p>添加 <strong>default</strong> 選項，<strong>./pages/count/useLazyAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuselazyasyncdatavue-1">pages/count/useLazyAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">),</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="s1">&#39;-&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 API 請求回來前，預設值會是 <code>-</code>。</p> <p><img src="https://live.staticflickr.com/65535/52616964784_390b71eeb8_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="uselazyfetch">useLazyFetch</h3> <p>如同 <code>useLazyAsyncData</code> 所描述，<code>useLazyFetch</code> 則是 <strong>useFetch</strong> 的 <code>options.lazy</code> 選項預設為 <code>true</code> 的封裝。</p> <h4 id="重新獲取資料">重新獲取資料</h4> <p>前面有提到我們可以使用 <code>refresh()</code> 來重新獲取具有不同查詢參數的資料。</p> <h4 id="refreshnuxtdata">refreshNuxtData</h4> <p>你也可以透過 <code>refreshNuxtData</code> 來使 <strong>useAsyncData</strong>、<strong>useLazyAsyncData</strong>、<strong>useFetch</strong> 與 <strong>useLazyFetch</strong> 的快取失效，再觸發刷新資料。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">pending</span> <span class="o">?</span> <span class="s1">&#39;Loading&#39;</span> <span class="o">:</span> <span class="nx">count</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="nt">@click</span><span class="s">=&#34;refresh&#34;</span><span class="p">&gt;</span><span class="na">Refresh</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">count</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">refresh</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">refreshNuxtData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 已經為我們封裝好可以打 API 的組合函數，用起來也相當簡單方便，照著<a class="link" href="https://nuxt.com/docs/api/composables/use-async-data#example" target="_blank" rel="noopener" >官網範例</a>及 <a class="link" href="https://github.com/unjs/ofetch" target="_blank" rel="noopener" >ohmyfetch</a> 套件的說明，相信很快就能上手。</p> <hr> <h2 id="狀態管理-state-management">狀態管理 (State Management)</h2> <p>Vue 3 父子元件間資料傳遞與讀寫或是跨元件間的狀態共享，可以選擇使用 <strong>Props / Emit</strong>、<strong>Provide / Inject</strong> 或 <strong>Vuex store</strong> 來處理，這三種資料流都不大一樣，我們也會依據情境來決定狀態管理的方式。這邊會針對 Nuxt 3 所提供的組合式函數 <code>useState</code> 來講述元件間的共享狀態，應該如何做定義，以及使用 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 替代 <a class="link" href="https://vuex.vuejs.org/" target="_blank" rel="noopener" >Vuex</a> 來做狀態管理。</p> <h3 id="hydration">Hydration</h3> <p>首先，我們先來看一個例子，建立 <strong>./pages/random.vue</strong> 內容如下：</p> <h5 id="pagesrandomvue">pages/random.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>頁面呈現出，每次重新整理頁面，頁面會顯示新的亂數：</p> <p><img src="https://live.staticflickr.com/65535/52617186923_40cff8bd77_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>細心你的可能會發現，每次重整頁面，數字好像<code>變化了兩次</code>，圖中數字停留在 <strong>517</strong>，重新整理網頁後竟然先變成了 <strong>163</strong> 後再變成 <strong>101</strong>。</p> <p>這個現象其實是伺服器端渲染後與客戶端再次渲染所導致的。講的白話一點就是，因為 Nuxt 預設的渲染模式 <a class="link" href="https://nuxt.com/docs/guide/concepts/rendering/#universal-rendering" target="_blank" rel="noopener" >Universal Rendering</a> 在 SSR 時期，將 <code>random.vue</code> 內容於伺服器端渲染完成後亂出產生出 <strong>163</strong> 作為初始值，意即 <strong>const count = ref(<code>163</code>)</strong>，所以網頁先顯示了 <strong>163</strong> 這個數字，同時，瀏覽器的背景也正在下載客戶端所需要的 JS 準備接手做 CSR，當 JS 載入完成後又再一次的執行 Vue 元件的 <strong>const count = ref(Math.round(Math.random() * 1000))</strong> 這段程式碼，此時亂數產生了 <strong>101</strong> 這個數字，客戶端也就重新渲染出了 <strong>101</strong> 於頁面上，這也就是為什麼每次重新整理數字會變化兩次的原因。</p> <p>Nuxt 預設的<strong>通用渲染 (Universal Rendering)</strong> 模式，是結合了 SSR 與 CSR 的技術，在 Nuxt 收到網頁請求後，會在伺服器渲染出 HTML 回傳至瀏覽器渲染顯示出靜態頁面，同時開始載入需要的 Vue 程式碼，讓客戶端接手為 SPA 使得網頁具有互動性，接手後的渲染行為都是在客戶端進行的 CSR，這也就讓通用渲染同時兼具 SSR 對 SEO 的友善以及 CSR 良好互通性的使用者體驗。</p> <p>這種在瀏覽器中使後端渲染出的靜態頁面具有交互性，稱之為「<strong>Hydration</strong>」。</p> <p>依據官網所提供的<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering/" target="_blank" rel="noopener" >圖片</a>，我添加了一些文字來幫助理解。前述提到了在伺服器渲染網頁 HTML 給瀏覽器時，使用可以正常的看見網頁，但是在 JS 下載完成之前，網頁是<code>不具有互動性</code>的，也就是還不具有路由跳轉等 Vue 互動邏輯，直至 JS 下載完後會 Hydrate Vue 程式碼，這時客戶端就完全接手後續的互動與 CSR，到這邊 Hydration 完成，我們也就能與網站完整的互動了。</p> <p><img src="https://live.staticflickr.com/65535/52616964794_a7eaeeb3ef_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>回到一開始的例子，我們在瀏覽器打開開發者工具的主控台 (Console)，可以發現到其實開發的過程，也出現了錯誤提示「<code>Hydration completed but contains mismatches.</code>」，告訴我們 <strong>Hydration</strong> 完成了但是包含了不匹配，正是前端與後端初始值不同的錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52616964799_2110719e1c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來我們將介紹 Nuxt 提供的組合式函數 <code>useState</code>，來可以解決這個問題。</p> <h3 id="nuxt-3-的狀態管理-state-management">Nuxt 3 的狀態管理 (State Management)</h3> <p>Nuxt 提供了一個組合式函數 <code>useState</code> 用來建立具有響應式及對於 SSR 友善的共享狀態。</p> <p>在前面的例子我們提到因為 <strong>Hydration</strong> 而導致前後端的初始值可能不一致，而 <code>useState</code> 是一個對 SSR 友善的 <code>ref</code> 替代品，使用 <code>useState</code> 建立的響應式變數，它的值會在伺服器端渲染後與客戶端 <strong>Hydration</strong> 期間的得以被保留。</p> <p><code>useState</code> 有兩種接收不同數量參數的呼叫方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">useState</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;(</span><span class="nx">init</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">T</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;)</span><span class="o">:</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">useState</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;(</span><span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">init</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">T</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;)</span><span class="o">:</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>key</strong>：唯一鍵，用於確保資料能被正確請求且不重複。</li> <li><strong>init</strong>：用於提供的初始值給 State 的函數，這個函數也可以回傳一個 <code>ref</code>。</li> </ul> <p>舉個例子，新增 <strong>./pages/count.vue</strong>，內容如下：</p> <h5 id="pagescountvue-1">pages/count.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，使用 <code>useState</code> 初始化 count 的值後，瀏覽器重整頁面，就不像前面的例子會發生兩次的數值變動。</p> <p><img src="https://live.staticflickr.com/65535/52616698646_9098f6524f_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當我們使用 <code>useState</code> 並以 <strong>count</strong> 當作 key，在網頁請求進入伺服器端執行時，還沒有這個 <strong>count</strong> 狀態，所以執行了初始化函數產生出一個亂數，例如 <strong>888</strong> 就會回傳給 <strong>count</strong> 當作響應式變數的初始值，此時這個網頁請求，已經有一個 <strong>count</strong> 的響應式狀態，當前端於 <strong>Hydration</strong> 步驟再次的執行了下面這段程式碼，<code>useState</code> 一樣是以 <strong>count</strong> 當作 <strong>key</strong>，但是存在了一個由伺服器端建立好的 <strong>count</strong>，就會直接使用該狀態，也就不會在執行初始化函數，而導致前後端的初始狀態不一致的問題。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="usestate-的基本用法">useState 的基本用法</h3> <p>新增 <strong>./pages/counter/increment.vue</strong>，內容如下：</p> <h5 id="pagescounterincrementvue">pages/counter/increment.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter++&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter--&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-slate-500&#34;</span><span class="p">&gt;</span><span class="nx">如果是第一次進入這個頁面</span><span class="err">，</span><span class="nx">數值初始設定為</span> <span class="mi">0</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <code>useState</code> 並以 <strong>counter</strong> 當作 key，首次於後端渲染時會初始化為 0，當前端Hydration 步驟載入 Vue 或跳轉頁面，因為使用相同的 key 所以這個狀態也會繼續被保留，直至我們下一次重新整理網頁。</p> <p><img src="https://live.staticflickr.com/65535/52616698666_a945fe9cc8_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="usestate-的共享狀態">useState 的共享狀態</h3> <p>前面 <code>useState</code> 的基本用法以 <code>counter</code> 當作 <strong>key</strong>，我們可以再建立不同的頁面元件並使用 <code>useState('counter')</code> 就可以把這個狀態拿做出來用，也就達到了在任何元件中可以共享相同的響應式狀態。</p> <p>新增 <strong>./pages/counter/surprise.vue</strong>，內容如下：</p> <h5 id="pagescountersurprisevue">pages/counter/surprise.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter++&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter--&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-slate-500&#34;</span><span class="p">&gt;</span><span class="nx">如果是第一次進入這個頁面</span><span class="err">，</span><span class="nx">數值初始設定為亂數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以任意導航至 <strong>/counter/increment</strong> 與 <strong>/counter/surprise</strong> 頁面，可以發現兩個頁面可以共享相同的 <code>counter</code> 狀態，當首次進入或重新整理 <strong>increment.vue</strong> 頁面，會將 <code>counter</code> 初始化為 <strong>0</strong>；而首次進入或重新整理 <code>surprise.vue</code> 頁面則是產生一個亂數給予 <strong>counter</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616964824_e6466ee572_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當然你也可以直接在其他元件中使用 <code>useState('counter')</code>，就可以取得共享的響應式裝態，但如果這個元件是初次進入而沒有預設值的建立函數，可能會引發一些錯誤，要特別的注意。</p> <h3 id="使用組合式函數建立共享狀態">使用組合式函數建立共享狀態</h3> <p>如下例子，我們可以建立組合式函數 (Composables) 來搭配 <code>useState</code>。</p> <p>新增 <strong>./composables/states.ts</strong>，內容如下：</p> <h5 id="composablesstatests">composables/states.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useColor</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">useState</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">&gt;(</span><span class="s1">&#39;color&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="s1">&#39;green&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/color.vue</strong>，內容如下：</p> <h5 id="pagescolorvue">pages/color.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">color</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">useColor</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來我們定義好的組合式函數就可以被自動的導入及建立具有類型安全的狀態，在各個元件之間就可以呼叫這個組合函數來取得共享狀態。</p> <p><img src="https://live.staticflickr.com/65535/52617134505_9cb332e17c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在通用渲染的模式之下，瀏覽器於 Hydration 完成前，網頁雖然能瀏覽但是尚不具有互動性，直至 Hydration 完成後，Vue 的頁面元件會重新載入與綁定，因此我們對於響應式的變數，儘量使用 <code>useState</code> 來替代 <code>ref</code> 以確保 Hydration 前後的初始值得以被保留，而且 <code>useState</code> 因為可以使用 <code>key</code> 來使狀態於元件間共享。</p> <hr> <h2 id="狀態管理---store--pinia">狀態管理 - Store &amp; Pinia</h2> <p>上述我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態，隨著專案的健壯增大，我們就需要一個更好的方式來管理與儲存這些狀態，例如在 Vue 中使用 <a class="link" href="https://vuex.vuejs.org/" target="_blank" rel="noopener" >Vuex</a> 或 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 來建立一個 Store 管理這些狀態就是一個解決方案。如果你還不了解 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a>，可以理解為是 Vuex v5。因為目前 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 已經成為 Vue 官方推薦的狀態管理解決方案，本篇將針對 Nuxt 使用 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 做一個簡單的介紹。</p> <p><img src="https://live.staticflickr.com/65535/52616698686_1ffe5c9e82_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="pinia">Pinia</h3> <p>如果你使用過 Vuex 大概會知道 Vue 如何建立 Store 來做狀態管理，隨著時間 Vuex 很積極的蒐集社群及使用者的<a class="link" href="https://github.com/vuejs/rfcs/discussions/270" target="_blank" rel="noopener" >意見</a>來規劃 Vuex v5。Pinia 的作者 <a class="link" href="https://github.com/posva" target="_blank" rel="noopener" >Eduardo</a> 是 Vue.js 核心團隊的成員之一，也參與著 Vuex 的開發，當時他正測試著 Vuex v5 的<a class="link" href="https://github.com/kiaking/rfcs/blob/vuex-5/active-rfcs/0000-vuex-5.md" target="_blank" rel="noopener" >提案</a>，而 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 成為探索這些意見及可能性的先驅，實現了 Vuex v5 可能的樣子，現在 Pinia 的 API 已經進入穩定狀態，也成為 Vue 官方推薦使用的狀態管理解決方案，並遵循著 Vue 生態的 RFC 流程。</p> <p>Pinia 相較於 Vuex 有以下差異：</p> <ul> <li>沒有 <code>mutation</code>，只需要使用 <code>action</code> 就可以改狀態。</li> <li>不再有 <code>modules</code> 巢狀的結構，也不再需要為模組定義命名空間，因為在 Pinia 中，可以定義多個 Store 而且每個都是獨立的也都具有自己的命名空間。</li> <li>更完整的支援 TypeSctipt，也不再需要使用多餘的 types 來封裝，所有的內容都是類型化的，Pinia API 的設計方式盡可能使用 TypeSctipt 類型推斷。</li> <li>非常輕巧，約僅有 1 KB，而且可以自定義插件。</li> <li>支援伺服器端渲染 (SSR) 與程式碼自動拆分。</li> </ul> <h3 id="nuxt-3-安裝-pinia">Nuxt 3 安裝 Pinia</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D pinia @pinia/nuxt --force </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D pinia @pinia/nuxt --force</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>目前照著官方安裝 Pinia，會發生一些問題，所以我們在安裝時加上 <strong>&ndash;force</strong> 參數</p></blockquote> <p>添加 <code>@pinia/nuxt</code> 至 <code>nuxt.config.ts</code> 的 <strong>modules</strong> 屬性中。</p> <h5 id="nuxtconfigts-3">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@pinia/nuxt&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立第一個-pinia-的-store">建立第一個 Pinia 的 Store</h3> <p>Pinia 提供了一個函數 <code>defineStore</code> 用來定義 store，呼叫時需要一個唯一的名稱來當作第一個參數傳遞，也稱之為 <code>id</code>，Pinia 會使用它來將 store 連接到 devtools。</p> <p>建議將回傳的函數命名為 <code>use...</code>，例如 <code>useCounterStore</code>，<code>use</code> 作為開頭是組合式函數命名的約定，來符合使用上的習慣。</p> <p>而 <code>defineStore</code> 的第二個參數，可以傳入 <code>Options 物件</code>或是 <code>Setup 函數</code>，例如我們使用 Options 來定義一個 Store，新增 <strong>./stores/counter.js</strong>，內容如下：</p> <h5 id="storescounterjs">stores/counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現到與 Vue 的 Options API 非常類似，我們可以傳遞帶有 <strong>state</strong>、<strong>actions</strong> 和 <strong>getters</strong> 屬性的物件。這些屬性正好讓 Store 與 Options API 呼應彼此的關係，如 <strong>state</strong> 對應 <strong>data</strong>、<strong>actions</strong> 對應 <strong>methods</strong> 而 <strong>getters</strong> 對應 <strong>computed</strong>。</p> <p>還有另一種方式可以來定義 Store，與 Vue Composition API 的 setup 函數類似，我們可以傳入一個函數，這個函數裡面定義響應式屬性、方法等函數，最後回傳我們想公開的屬性和方法所組成的物件。</p> <p>以 setup 函數定義 counter store，內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">doubleCount</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="開始使用-store">開始使用 Store</h3> <p>我們只需要在元件中，如下程式碼匯入並呼叫 <code>useCounterStore()</code> 就可以操作 store 裡面的方法或屬性囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們新增一個頁面元件 <strong>./pages/counter.vue</strong>，內容如下：</p> <h5 id="pagescountervue">pages/counter.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counterStore</span><span class="p">.</span><span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counterStore.increment&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counterStore.decrement&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就完成了一個 store 的顯示狀態值，透過呼叫 <code>counterStore</code> 內定義的 <strong>increment</strong> 與 <strong>decrement</strong> 來改變狀態。</p> <p><img src="https://live.staticflickr.com/65535/52616188807_576821f99a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在不同的元件間，你也可以使用 <code>useCounterStore</code> 取得已經建立好的 store 來共享這些狀態或進行操作。</p> <p><img src="https://live.staticflickr.com/65535/52617187013_1e1f4c217e_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="pinia-store-的-state">Pinia Store 的 State</h3> <p>預設情況下，可以直接對 store 的實例來取得狀態，而使用 Pinia 定義的 store 比較特別的是，我們可以不用透過呼叫函數來修改狀態，也可以直接對 store 的狀態進行修改。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">counterStore</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">10</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="改變狀態">改變狀態</h4> <p>除了直接使用 <code>counterStore.count += 10</code> 修改 store，你也可以使用 store 提供的 helper <code>$patch</code> 來修改部分的狀態。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">userStore</span><span class="p">.</span><span class="nx">$patch</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">money</span><span class="o">:</span> <span class="s1">&#39;88888888&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>對於集合類型的修改，例如陣列的新增、刪除或指定修改某一個元素等操作，你可以使用 <code>$patch</code> 傳入一個函數，這個函數會接收一個 <code>state</code> 讓你可以修改，對於比較複雜的操作會很方便。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">cartStore</span><span class="p">.</span><span class="nx">$patch</span><span class="p">((</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;shoes&#39;</span><span class="p">,</span> <span class="nx">quantity</span><span class="o">:</span> <span class="mi">1</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">hasChanged</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果你需要，也可以將 store 的整個 state 重新設置成一個新的物件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">cartStore</span><span class="p">.</span><span class="nx">$state</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">items</span><span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="nx">hasChanged</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="重置狀態">重置狀態</h4> <p>store 的實例提供了一個 <code>$reset()</code> 的 helper，呼叫它就可以將 store 的狀態重置至初始值，不過目前只在使用 Option 物件定義的 store 才有實作。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">counterStore</span><span class="p">.</span><span class="nx">$reset</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="pinia-store-的-getters">Pinia Store 的 Getters</h3> <h4 id="使用同一個-store-中的其他-getter">使用同一個 store 中的其他 getter</h4> <p>在 store 內你可以組合多個 getter，在 Option 物件下，可以透過使用 <code>this</code> 來呼叫使用其他的 getter。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;main&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">counter</span> <span class="o">*</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCountPlusOne</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">doubleCount</span> <span class="o">+</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用其他-store-的-getter">使用其他 store 的 getter</h4> <p>在 store 內你也可以組合其他 store 的 getter，只要建立出其他 store 實例就可以呼叫使用了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useOtherStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./other-store&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;main&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">otherGetter</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">otherStore</span> <span class="o">=</span> <span class="nx">useOtherStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">localData</span> <span class="o">+</span> <span class="nx">otherStore</span><span class="p">.</span><span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="pinia-store-的-actions">Pinia Store 的 Actions</h4> <p>Actions 相當於元件中的方法，也是修改狀態的商業邏輯定義的位置，action 可以是同步也可以是異步的，因此，我們也能在 action 中打後端 API 來取得資料後更新狀態。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useUserStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;user&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">profile</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gender</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">getUserProfile</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/profile&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">error</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="store-的解構">Store 的解構</h3> <p>有些情況，你可能需要將 Store 中的屬性或方法獨立的提取出來，但為了保持屬性的響應性，你需要使用 <code>storeToRefs</code> 來建立屬性的參考，就像使用 <code>toRefs</code> 來建立 <code>props</code> 的參考一樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">storeToRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">storeToRefs</span><span class="p">(</span><span class="nx">counterStore</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">increment</span><span class="p">,</span> <span class="nx">decrement</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">counterStore</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="pinia-持久化插件---pinia-plugin-persistedstate">Pinia 持久化插件 - Pinia Plugin Persistedstate</h2> <p>Pinia 是個非常輕量的狀態管理解決方案，而且也提供底層 API 使得 Pinia 能夠自定義插件來擴展功能，舉例來說，我們有些狀態需要儲存在使用者瀏覽器中，下次再瀏覽時可以取的當時儲存的狀態資料，我們就需要將 store 的狀態持久化。</p> <p>我們可以使用 <a class="link" href="https://github.com/prazdevs/pinia-plugin-persistedstate" target="_blank" rel="noopener" >Pinia Plugin Persistedstate</a> 這個插件，來做到持久化這件事，這對於儲存使用者資訊或登入狀態非常的方便。</p> <h3 id="在-nuxt-3-中配置使用-pinia-plugin-persistedstate">在 Nuxt 3 中配置使用 Pinia Plugin Persistedstate</h3> <h4 id="step-1-安裝套件-2">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D pinia-plugin-persistedstate --force </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D pinia-plugin-persistedstate --force</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>目前照著官方安裝 Pinia，會發生一些問題，所以我們在安裝時加上 <strong>&ndash;force</strong> 參數</p></blockquote> <h4 id="step-2-在-nuxt-3-為-pinia-添加-persist-插件">Step 2. 在 Nuxt 3 為 Pinia 添加 Persist 插件</h4> <p>建立 <strong>./plugins/pinia-plugin-persistedstate.client.js</strong>，內容如下：</p> <h5 id="pluginspinia-plugin-persistedstateclientjs">plugins/pinia-plugin-persistedstate.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">piniaPersistedstate</span> <span class="nx">from</span> <span class="s1">&#39;pinia-plugin-persistedstate&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">$pinia</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">piniaPersistedstate</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-為你的-store-添加持久化配置">Step 3. 為你的 Store 添加持久化配置</h4> <p>在現有的 store 定義中添加，<code>persist</code> 屬性，來配置 store 持久化，將狀態儲存在瀏覽器的 <code>localStorage</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果是使用 setup 函數定義 store，你可以在 defineStore 傳入第三個參數並添加 <code>persist</code> 屬性。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">doubleCount</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-持久化效果">Step 4. 持久化效果</h4> <p>當我們設置好 counterStore 的持久化後，我們的狀態就會被儲存在瀏覽器的 <code>localStorage</code> 之中，就算關閉瀏覽器或重新整理網頁，store 的狀態都會再從 <code>localStorage</code> 讀取出來。</p> <p><img src="https://live.staticflickr.com/65535/52617187033_e0fd11b0a5_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在小型的專案中，你可以使用 useState 來管理，但大專案你就需要一個更好的方式來管理這些狀態，如 Pinia 來為我們管理這些狀態，甚至定義多個 store，Pinia 支援的插件能協助我們擴展 Pinia 的功能，Pinia Plugin Persistedstate 就是一個很常用的插件，能協助我們將 Pinia 的狀態持久化至瀏覽器的 <code>localStorage</code> 或 <code>sessionStorage</code> 中。</p> <hr> <h2 id="runtime-config--app-config">Runtime Config &amp; App Config</h2> <p>在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定，分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及可以在前端被使用的 App Config 這兩者間的區別這邊做一些講解。</p> <h3 id="runtime-config">Runtime Config</h3> <p>在開發網站或部署時，我們總是有一些環境變數需要做設置，<a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 就是一個很好用的套件，能幫助我們將專案下的 <code>.env</code> 檔案載入到 Node.js 的 <code>process.env</code> 之中，尤其在後端伺服器的 API 開發，這些不能公開或敏感的 Key 或設定值，通常不會與整個專案一起進行版本控制，而是針對不同環境與機器，配置於 <code>.env</code> 或環境變數之中。</p> <p>這個 <code>.env</code> 設定檔內的環境變數，例如：資料庫的帳號密碼、第三方服務的 Token 或 API Key &hellip;等，通常只會在伺服器被讀取做使用，也不會洩漏這些設定給使用者知道，我們也稱之為<code>執行時的設定 (Runtime Config)</code>。</p> <p>Nuxt 3 提供了可以設定 <strong>Runtime Config</strong> 的方式，我們可以很方便的來設定這些環境變數給予伺服器執行時使用。</p> <h4 id="配置-runtimeconfig">配置 runtimeConfig</h4> <p>我們可以在 <code>nuxt.config.ts</code> 中添加 <code>runtimeConfig</code> 屬性，就可以來設定只有伺服器端可以使用的環境變數。</p> <p>例如，在 <strong>nuxt.config.ts</strong> 檔案中，添加一個 <code>apiSecret</code> 至 <code>runtimeConfig</code> 屬性內：</p> <h5 id="nuxtconfigts-4">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以在 Server API 使用 <code>useRuntimeConfig()</code> 獲得執行時的設定，再從中取得 <code>apiSecret</code> 環境變數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">apiSecret</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`接收到了一個 Server API 請求: </span><span class="si">${</span><span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`執行時的環境變數 [apiSecret]: </span><span class="si">${</span><span class="nx">apiSecret</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s1">&#39;ok&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為我們是定義在 Server API，所以可以在測試伺服器啟動的 Terminal 看見 console.log 的結果。</p> <p><img src="https://live.staticflickr.com/65535/52617187068_2610474e64_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>此外你也可以在插件或 Vue 中使用 <code>useRuntimeConfig()</code> 來取得執行時的設置，但也僅在 <strong>setup</strong> 或 <strong>Nuxt Lifecycle Hooks</strong> 中有效。</p> <h4 id="客戶端使用-runtimeconfig">客戶端使用 runtimeConfig</h4> <p>通常一些密鑰或敏感資訊，我們都會定義在 <code>runtimeConfig</code> 僅供伺服器端做使用，而 <code>runtimeConfig</code> 也可以配置一個 <code>public</code> 的屬性，來把一些環境變數於伺服器端或客戶端做使用，例如，API 的 Base URL 這類在伺服器端打 API 時會需要使用，而客戶端的操作流程也會打同樣的 API 位置，我們就可以使用 <code>public</code> 的屬性。</p> <p>例如，在 <strong>nuxt.config.ts</strong> 檔案中，添加一個 <code>apiBase</code> 至 <code>runtimeConfig.public</code> 屬性內：</p> <h5 id="nuxtconfigts-5">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/profile.vue</strong> 頁面：</p> <h5 id="pagesprofilevue">pages/profile.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">回傳資料</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">apiBase</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">toRaw</span><span class="p">(</span><span class="nx">runtimeConfig</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">apiBase</span><span class="si">}</span><span class="sb">/hello`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>添加在 <code>runtimeConfig.public</code> 屬性的環境變數，在伺服器端與客戶端都可以讀取得到。</p> <p>下圖中可以發現，在瀏覽器中的 Console 所印出的 <code>runtimeConfig</code> 是不會包含僅有在伺服器端能使用的 <code>apiSecret</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617134565_8558d435e9_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="使用-env-建立環境變數">使用 .env 建立環境變數</h4> <p>Nuxt 在開發模式或執行時，已經有內建 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a>，如果在專案目錄下添加了 <code>.env</code>，Nuxt 會在開發期間、建構時或產生靜態網站時，自動載入 <code>.env</code> 內的環境變數。</p> <p>例如建立 <strong>.env</strong> 檔案，內容如下：</p> <h5 id="env">.env</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="nv">NUXT_API_SECRET</span><span class="o">=</span>api_secret_token </span></span><span class="line"><span class="cl"><span class="nv">NUXT_PUBLIC_API_BASE</span><span class="o">=</span>https://nuxtjs.org </span></span></code></pre></td></tr></table> </div> </div><p>這兩個值，將被 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 自動載入至 <code>process.env</code> 中，作為環境變數。</p> <h4 id="環境變數的覆蓋">環境變數的覆蓋</h4> <p>不論是透過 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 自動載入 <strong>.env</strong> 或其他方式配置的環境變數，只要環境變數命名是 <code>NUXT_</code> 開頭，這個環境變數將會覆蓋 <code>runtimeConfig</code> 的設置。</p> <p>舉例來說，當我們 <code>runtimeConfig</code> 設置如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>.env</strong> 檔案或其他方式設置下列環境變數：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="nv">NUXT_API_SECRET</span><span class="o">=</span>api_secret_token </span></span><span class="line"><span class="cl"><span class="nv">NUXT_PUBLIC_API_BASE</span><span class="o">=</span>https://nuxtjs.org </span></span></code></pre></td></tr></table> </div> </div><p>那麼 <code>NUXT_API_SECRET</code> 環境變數，將會覆蓋 <code>runtimeConfig.apiSecret</code>，而 <code>NUXT_PUBLIC_API_BASE</code> 將會覆蓋 <code>runtimeConfig.public.apiBase</code>，最終 runtimeConfig 的設定會變成如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">apiSecret:</span> <span class="nt">&#34;api_secret_token&#34;</span><span class="p">,</span> <span class="c1">// 被 NUXT_API_SECRET 環境變數覆蓋 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="err">public:</span> <span class="err">{</span> </span></span><span class="line"><span class="cl"> <span class="err">apiBase:</span> <span class="nt">&#34;https://nuxtjs.org&#34;</span> <span class="c1">// 被 NUXT_PUBLIC_API_BASE 環境變數覆蓋 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="err">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>會有這樣子的特性是因為 Nuxt 會在啟動時，先載入 <code>nuxt.conf.ts</code> 內的 <code>runtimeConfig</code>，建立出呼叫 <code>useRuntimeConfig()</code> 所得到的執行時設定，例如，先建構出了 <code>_runtimeConfig</code> 物件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_runtimeConfig</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著會走訪這個 <strong>_runtimeConfig</strong> 物件裡面的 <code>key</code>，逐一將 <strong>key</strong> 的名稱轉換<strong>蛇形命名法 (Snake case)</strong>，並轉成全大寫再加上 <code>NUXT_</code> 前綴後取得對應的環境變數，如果存在就會以新值來覆蓋 <strong>_runtimeConfig</strong> 內的屬性。</p> <p>例如 <strong>apiSecret</strong> 經過轉換變成 <strong>api_secret</strong>，接著轉大寫 <strong>API_SECRET</strong> 最後加上前綴變成 <strong>NUXT_API_SECRET</strong>，如此環境變數 <strong>NUXT_API_SECRET</strong> 的值就覆蓋 <strong>runtimeConfig.apiSecret</strong>。</p> <p>而在 <strong>public</strong> 下的設置，也會先轉為 <strong>public_apiBase</strong> 再經過蛇行命名成 <strong>public_api_base</strong> 等步驟，最後變成 <strong>NUXT_PUBLIC_API_BASE</strong> 來載入環境變數並覆蓋。</p> <blockquote> <p>最後小提醒，當建構出生產環境的網站，如 .output 目錄後，dotenv 並不會包含在建構的網站內， 你需要再自己載入或配置環境變數才能正常運作哦，例如在 PM2 配置 env。</p></blockquote> <h3 id="app-config">App Config</h3> <h4 id="配置-appconfig">配置 appConfig</h4> <p>在 <code>nuxt.config.ts</code> 檔案中，可以在 <code>appConfig</code> 屬性內添加設置，例如，通常我們會添加像網站主題的主色等這類<code>可以公開</code>的配置，讓網站可以使用這個設置。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">appConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#0ea5e9&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當建立好 appConfig 後，就可以使用組合式函數 <code>useAppConfig()</code> 來取得設置。</p> <p>例如，建立 <strong>./pages/config.vue</strong>，內容如下：</p> <h5 id="pagesconfigvue">pages/config.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="appconfig-檔案">app.config 檔案</h4> <p>你也可以在專案目錄下建立 <code>app.config.ts</code> 來配置 App Config，這個檔案的副檔名可以是 <strong>.ts</strong>、<strong>.js</strong> 或 <strong>.mjs</strong>。</p> <h5 id="appconfigts">app.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineAppConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#3b82f6&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當建立了 <code>app.config.ts</code> 檔案，該設定會與 <strong>nuxt.config.ts</strong> 檔案中的 <strong>appConfig</strong> 屬性結合，如果具有相同的命名，則以 <code>app.config.ts</code> 檔案內的設置為主。</p> <h4 id="具有響應式的設定">具有響應式的設定</h4> <p>當設定好的 App Config 在使用時，解構出的變數是具有響應性的，也就是說在其他頁面修改主題顏色的設定，可以響應至所有使用這個設定的元件。</p> <p>舉個例子，新增一個 <strong>darkMode</strong> 的屬性至 <strong>app.config.ts</strong> 檔案內的 theme：</p> <h5 id="appconfigts-1">app.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineAppConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#3b82f6&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">darkMode</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-4">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex flex-col space-y-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/config&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="o">/</span><span class="nx">config</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/config.vue</strong>，內容如下：</p> <h5 id="pagesconfigvue-1">pages/config.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-500 py-2 px-4 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;theme.darkMode = !theme.darkMode&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="sb">`</span><span class="si">${</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="o">?</span> <span class="s1">&#39;取消&#39;</span> <span class="o">:</span> <span class="s1">&#39;啟用&#39;</span><span class="si">}</span><span class="sb">深色模式`</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如下圖，我們的首頁取得了 <strong>App Config</strong> 中的 <strong>theme.darkMode</strong> 預設為 <code>false</code>，接著我們切換至 <strong>/config</strong> 頁面，可以將從 <code>useAppConfig()</code> 解構出的 theme 進行變更，我們使用按鈕來設置 <strong>theme.darkMode</strong> 為 <code>true</code> 或 <code>false</code> 表示啟用或取消深色模式。當變更完成後，回至首頁，可以發現 <strong>theme.darkMode</strong> 發生了響應。</p> <p><img src="https://live.staticflickr.com/65535/52616188867_a568b0a7c2_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="小結-1">小結</h3> <p>Nuxt 3 提供了 <strong>Runtime Config</strong> 及 <strong>App Config</strong> 來讓我們將常用或預設設定應用在不同的情境，使用時，我們僅需記得，<code>不能公開的金鑰</code>或<code>敏感訊息</code>，僅放置在 <code>runtimeConfig</code> 中而且<code>不在 public 屬性內</code>，<code>runtimeConfig.public</code> 通常放的是<code>前後端會使用到且不常修改的常數</code>。而 <code>App Config</code> 則是當伺服器端與客戶端<code>需要使用的設置</code>，如主題顏色、是否啟用深色模式等這類可以被使用者調整變動的且需要具有響應性，就可以放置在 <code>appConfig</code> 之中。</p> <hr> <h2 id="實作練習">實作練習</h2> <p>這裡介紹網站的會員系統常會使用到第三方登入，將以 Google OAuth 為例來實際於 Nuxt 3 中做串接。</p> <h3 id="串接-google-oauth-登入">串接 Google OAuth 登入</h3> <p>首先，我們需要有一組 Google OAuth 使用的 <code>Client ID</code>，你可以到 <a class="link" href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" >Google Console</a> 新增一個「<strong>OAuth 2.0 用戶端 ID</strong>」，這裡我就不再贅述網頁應用程式用的申請過程。</p> <p>這邊小提醒一下，在建立 OAuth Client ID 時，<strong>已授權的 JavaScript 來源</strong>，記得填寫上您的正式環境或開發環境的 Domain，且建議使用 HTTPS。</p> <p><img src="https://live.staticflickr.com/65535/52618245251_3509e645c4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>完成後，記得保管好<code>用戶端密碼</code>、<code>用戶端 ID (Client ID)</code> 是我們稍後會需要的，用戶端編號格式大概如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">168152363730-b37gnijdpa2rdvvbq0qc29cjh4082t3b.apps.googleusercontent.com </span></span></code></pre></td></tr></table> </div> </div><p>我們將這組 Client ID，放置在 Nuxt 的 Runtime Config 之中。調整 <strong>nuxt.config.ts</strong> 內容，在 runtimeConfig.public 添加 <code>googleClientId</code>。</p> <h5 id="nuxtconfigts-6">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleClientId</span><span class="o">:</span> <span class="s1">&#39;這邊放上你的 Google Client ID&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接下來，安裝 Vue 的 Google OAuth 插件，這邊使用的是 <a class="link" href="https://github.com/yobaji/vue3-google-login" target="_blank" rel="noopener" >vue3-google-login</a>，也有詳細的<a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >說明文件</a>可以參考。</p> <p>安裝 <a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >vue3-google-login</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue3-google-login </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue3-google-login</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 Nuxt 3 插件來使用 <a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >vue3-google-login</a>，新增 <strong>./plugins/vue3-google-login.client.js</strong>，內容如下：</p> <h5 id="pluginsvue3-google-loginclientjs">plugins/vue3-google-login.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">vue3GoogleLogin</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">vue3GoogleLogin</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在元件中可以直接使用 <code>&lt;GoogleLogin&gt;</code> 元件，並添加一個 <code>callback</code> 屬性；此外，我使用了 Nuxt 3 提供的 <code>&lt;ClientOnly&gt;</code> 元件，將 <code>&lt;GoogleLogin&gt;</code> 包裹起來，以確保該元件僅在客戶端做渲染，以免登入按鈕在初始化發生問題。</p> <h5 id="pagesloginvue">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callback</span> <span class="o">=</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們啟動 Nuxt 伺服器，這邊我會習慣使用 <code>yarn run dev -- --https</code> 來啟用 <strong>HTTPS</strong> 做測試，就能發現使用 Google 帳號登入成功後，所返回的 Credential。</p> <p><img src="https://live.staticflickr.com/65535/52618682810_b13a4d8304_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="one-tap-prompt">One Tap prompt</h3> <p>你可以在 <code>&lt;GoogleLogin&gt;</code> 元件添加 <code>prompt</code> 屬性並設為 <code>true</code>，這樣就能同時啟用 <strong>Google 一鍵登入 (One Tap prompt)</strong> 的功能囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="na">prompt</span> <span class="p">/&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者也可以在 <code>onMounted</code> 中呼叫 <strong>vue3-google-login</strong> 的 <code>googleOneTap()</code> 方法，來單獨使用 <strong>One Tap prompt</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleOneTap</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleOneTap</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自訂按鈕">自訂按鈕</h3> <p>如果你想自訂登入按鈕的樣式，可以在 <code>&lt;GoogleLogin&gt;</code> 的預設插槽 (Slot) 做建立。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">進行登入</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">GoogleLogin</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用自訂按鈕會讓 OAuth 流程稍微有點不一樣，當你登入成功後預設會回傳 <a class="link" href="https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling" target="_blank" rel="noopener" >Auth Code</a>。</p> <p>如果設定屬性 <code>popup-type=&quot;TOKEN&quot;</code>，則回傳 <a class="link" href="https://developers.google.com/identity/oauth2/web/guides/use-token-model" target="_blank" rel="noopener" >Access Token</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="na">popup</span><span class="nt">-type</span><span class="err">=&#34;</span><span class="na">TOKEN</span><span class="err">&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">進行登入</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">GoogleLogin</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="使用-googletokenlogin">使用 googleTokenLogin()</h3> <p>在元件中我們也可以自己建立 <code>handleGoogleLogin</code> 點擊事件，呼叫 <code>googleTokenLogin()</code> 方法並傳入設定在 <strong>Runtime Config</strong> 中的 <strong>Google Client ID</strong>，這樣點擊登入按鈕就能處理 Google 登入取得 <strong>Access Token</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleTokenLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleTokenLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立一個登入按鈕來呼叫 <code>handleGoogleLogin</code> 點擊事件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;handleGoogleLogin&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">繼續</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <strong>vue3-google-login</strong> 提供的 <code>googleTokenLogin()</code> 方法，我們就能取得 Google 使用者的 <strong>Access Token</strong> 囉！</p> <p><img src="https://live.staticflickr.com/65535/52617734947_56a5365817_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用-googleauthcodelogin">使用 googleAuthCodeLogin()</h3> <p>我們也可以使用 <code>googleAuthCodeLogin()</code> 來取得 <strong>Auth Code</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleAuthCodeLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleAuthCodeLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52618245191_6103912bce_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器端驗證">伺服器端驗證</h3> <p>當使用者於前端成功登入後，通常會傳至後端進行登入或記錄使用者，再產生使用於網站的 Token、Cookie 或 Session 等，以供後續的網站驗證做使用。</p> <p>我們可使用 <a class="link" href="https://github.com/googleapis/google-auth-library-nodejs" target="_blank" rel="noopener" >google-auth-library</a> 於後端進行一系列的驗證或取得使用者資訊。</p> <p>安裝 <a class="link" href="https://github.com/googleapis/google-auth-library-nodejs" target="_blank" rel="noopener" >google-auth-library</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D google-auth-library </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D google-auth-library</span> </span></span></code></pre></td></tr></table> </div> </div><p>接下來，我們就能依照不同的登入方式取得的 <code>Credential</code>、<code>Access Token</code> 或 <code>Auth Code</code> 送至後端做驗證。</p> <h4 id="驗證-access-token">驗證 Access Token</h4> <p>新增一個 Server API，只接受 POST 方法，在 Body 中夾帶 <code>accessToken</code> 發送至後端。</p> <p>建立 <strong>./server/api/auth/google.post.js</strong>，內容如下：</p> <h5 id="serverapiauthgooglepostjs">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整元件內的登入流程。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleTokenLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">accessToken</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">googleTokenLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="o">?</span><span class="p">.</span><span class="nx">access_token</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">accessToken</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s1">&#39;登入失敗&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/auth/google&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">accessToken</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們使用 Google OAuth 登入成功後，會取得 <strong>Access Token</strong>，並將其傳至 Server API，<code>/api/auth/google</code> 接收 <strong>Access Token</strong> 並使用 Google API 取得使用者的資訊，最後回傳給前端。</p> <p><img src="https://live.staticflickr.com/65535/52618245256_903381f8c0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="驗證-credential">驗證 Credential</h4> <p>在元件中，我們使用的登入方式如果是 <code>Google 渲染的預設按鈕</code>或 <code>One Tap prompt</code>，回傳值就會包含 <code>Credential</code>，我們將就可使用下面修改後的 Server API 進行驗證。</p> <p><strong>server/api/auth/google.post.js</strong> 內容修改為如下：</p> <h5 id="serverapiauthgooglepostjs-1">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">ticket</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">verifyIdToken</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">idToken</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">credential</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">payload</span> <span class="o">=</span> <span class="nx">ticket</span><span class="p">.</span><span class="nx">getPayload</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">payload</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">email_verified</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="驗證-auth-code">驗證 Auth Code</h4> <p>我們使用的登入方式如果是呼叫 <strong>vue3-google-login</strong> 的 <code>googleAuthCodeLogin()</code>，回傳值就會包含 <code>Auth Code</code>，我們就可使用下面修改後的 Server API 進行驗證。</p> <p><strong>server/api/auth/google.post.js</strong> 內容修改為如下：</p> <h5 id="serverapiauthgooglepostjs-2">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="s1">&#39;你的 Google Client ID&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientSecret</span><span class="o">:</span> <span class="s1">&#39;你的 Google Client Secret&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectUri</span><span class="o">:</span> <span class="s1">&#39;你的 Google Redirect Uri&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">tokens</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">getToken</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">authCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">tokens</span><span class="p">.</span><span class="nx">access_token</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上實現了串接 Google OAuth 登入，並將 <code>Access Token</code> 資訊發送至後端進行驗證，大家可以在依照使用情境自己挑選登入方式及驗證方式，後續也能將使用者資訊儲存到資料庫中，有了資料庫我們就能依照使用者資訊，來比對資料庫進行註冊、驗證登入及產生後續的 Session 或 Cookie 等。</p> <hr> <h2 id="cookie-的設置與-jwt-的搭配">Cookie 的設置與 JWT 的搭配</h2> <p>Cookie 在瀏覽網站時多會使用到，不論是用來儲存臨時的資訊或是辨識使用者等，這一個儲存在瀏覽器的一小段文字資料，會在每次發送 HTTP 請求時自動夾帶，所以 Cookie 最常見的用途就包含了登入狀態、驗證身份等。</p> <p>以下將講述在 Nuxt 3 如何設置 Cookie，並結合 JWT (JSON Web Token) 來做一個實際使用者驗證。</p> <h3 id="nuxt-3-cookie-的設置方式">Nuxt 3 Cookie 的設置方式</h3> <h4 id="usecookie">useCookie</h4> <p>Nuxt 3 提供了一個組合式函數 <code>useCookie()</code> 來讓我們可以讀寫 Cookie，並且對於 SSR 也有支援，在頁面、元件或插件中，都可以使用 <code>useCookie()</code> 來建立一個 cookie 具有響應性的參考。</p> <p>使用方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">cookie</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>name</strong>：對應的就是 cookie 的 key。</li> <li><strong>options</strong>：傳入一個物件來設置多個 cookie 屬性： <ul> <li><strong>maxAge</strong>：指定 <code>Max-Age</code> 屬性的值，單位是秒。如果沒有設置，則這個 cookie 將會是 Session Only，意即網頁關閉後就會消失。</li> <li><strong>expires</strong>：指定一個 Date 物件來作為過期的時間，通常是要相容比較舊的瀏覽器做使用，如果 <strong>maxAge</strong> 與 <strong>expires</strong> 屬性都有設定，則過期時間應該要設定為一樣。</li> <li><strong>httpOnly</strong>：是一個布林值，預設為 <code>false</code>，當設置為 <code>true</code> 時，表示客戶端的 JavaScript 將無法使用 <code>document.cookie</code> 來查看這個 cookie。通常是比較敏感或機密的訊息，如 Token 或 Session Id 會設定為 <code>true</code>，只讓瀏覽器發出請求時自動夾帶。</li> <li><strong>secure</strong>：是一個布林值，預設為 <code>false</code>，當設置為 <code>true</code> 時瀏覽器得是 HTTPS 的加密傳輸協定的情境下，才會自動夾帶這個 cookie。</li> <li><strong>domain</strong>：指定 cookie 可以適用的 Domain，通常會保持預設，表示適用於自己的 Domain 之下。</li> <li><strong>path</strong>：指定 cookie 適用的路徑。</li> <li><strong>sameSite</strong>：為一個布林值或是字串，用於設定<a class="link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite" target="_blank" rel="noopener" >安全策略</a>。</li> <li><strong>encode</strong>：由於 cookie 的值只能使用有限的字元集，所以這個設置可以將 cookie 編碼成合法的字串值，預設的編碼是使用 <code>JSON.stringify</code> + <code>encodeURIComponent()</code>。</li> <li><strong>decode</strong>：cookie 會經過一個解碼的過程，預設的解碼是使用 <code>decodeURIComponent</code> + <code>destr</code>。</li> <li><strong>default</strong>：為一個函數，可以用於回傳 cookie 的預設值，也可以是回傳一個 <code>Ref</code>。</li> </ul> </li> </ul> <p>舉個例子，新增 <strong>pages/cookie.vue</strong>，內容如下：</p> <h5 id="pagescookievue">pages/cookie.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;w-full max-w-md&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 text-center text-3xl font-bold tracking-tight text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">Cookie</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setNameCookie&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">設置</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span><span class="nx">name</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">name</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setCounterCookie&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">設置</span> <span class="nx">counter</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span><span class="nx">counter</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">maxAge</span><span class="o">:</span> <span class="mi">60</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">setNameCookie</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;Ryan&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">setCounterCookie</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以設置一個只有目前網頁有效的 cookie 名為 <code>name</code> 及一個過期時間為 60 秒後的 <code>counter</code>。</p> <p><img src="https://live.staticflickr.com/65535/52618245241_9307ee8408_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器端使用-getcookie-與-setcookie">伺服器端使用 getCookie 與 setCookie</h3> <p>你可以在伺服器端使用 <code>getCookie()</code> 來取得前端夾帶過來的 cookie，也可以使用 <code>setCookie</code> 來設置 cookie 回應給前端。</p> <p>舉個例子，新增 <strong>server/api/coookie.js</strong>，內容如下：</p> <h5 id="serverapicoookiejs">server/api/coookie.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">counter</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">counter</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當前端打 <code>/api/cookie</code> 這隻 Server API 時，就會自動夾帶瀏覽器中的 cookie，伺服器端收到請求解析 cookie 後得到 <code>counter</code>，將其轉為數值或預設為 0 後增加 1，再重新設定回去給前端。</p> <p><img src="https://live.staticflickr.com/65535/52618682865_832fc7b792_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用-cookie-做使用者驗證">使用 Cookie 做使用者驗證</h3> <p>我們可以將 Cookie 的運作機制應用在會員系統當中，使用者登入成功後，後端產生的 Token 或 Session 回傳並儲存在使用者的瀏覽器中，之後的請求將會自動夾帶可以辨識出使用者的 cookie，我們就可以在後端解析或比對 cookie 來驗證使用者的資訊，並依照策略給予不同的處理邏輯。</p> <p>我們延續上述的<a class="link" href="#%e4%b8%b2%e6%8e%a5-google-oauth-%e7%99%bb%e5%85%a5" >使用 Google OAuth 登入</a>，我們可以在後端實作產生我們自己系統使用的 Token，並設置在 <code>access_token</code> 這個 cookie 之中，後端可以寫如下程式碼，來設置 <code>httpOnly</code> 及 <code>maxAge</code> 過期時間等參數。</p> <h5 id="serverapiauthgooglepostjs-3">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">accessToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <a class="link" href="https://github.com/auth0/node-jsonwebtoken" target="_blank" rel="noopener" >jsonwebtoken</a> 產生 JWT，裡面的 Payload 放置了使用者資訊，其中 <code>jwtSignSecret</code> 作為核發 JWT 的簽署金鑰，我們定義在 <code>nuxt.config.ts</code> 中的 <code>runtimeConfig.jwtSignSecret</code>。</p> <p>安裝 <a class="link" href="https://github.com/auth0/node-jsonwebtoken" target="_blank" rel="noopener" >jsonwebtoken</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install jsonwebtoken </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add jsonwebtoken</span> </span></span></code></pre></td></tr></table> </div> </div><p>完整的 <strong>./server/api/auth/google.post.js</strong> 程式碼如下：</p> <h5 id="serverapiauthgooglepostjs-4">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>JWT 在核發時使用的加密金鑰，建議使用非對稱式的金鑰進行加密，這邊僅是為了範例展示方便而使用相同的 Secret 進行加解密。</p></blockquote> <p>接著，我們可以實作一個 Server API，<strong>./server/api/whoami.js</strong> 來從 cookie 得到 <code>access_token</code>，再用 <code>jwt.verify()</code> 方法，來驗證 JTW 後的到使用者資訊。</p> <h5 id="serverapiwhoamijs">server/api/whoami.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">userInfo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在前端，就可以使用 <code>/api/whoami</code> 這隻 API 來得到使用者的資訊囉！</p> <p><img src="https://live.staticflickr.com/65535/52618515934_2af8149c8f_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>上圖的流程如下：</p> <ol> <li>前往登入頁面，並使用 Google 進行登入</li> <li>登入成功後，打 <strong>/api/auth/google</strong> API，Body 夾帶 Google OAuth 回傳的 <code>access_token</code>。</li> <li><strong>/api/auth/google</strong> API 回傳後端產生的時效七天的 JWT，並設置於 cookie 的 <code>access_token</code>，並將前端頁面導航至 <strong>/whoami</strong> 頁面。</li> <li>在 <strong>/whoami</strong> 頁面，點擊「<strong>打 /api/whoami API</strong>」按鈕，送出 <strong>/api/whoami</strong> API 請求，瀏覽器會自動夾帶 cookie 至後端。</li> <li>後端 API <strong>/api/whoami</strong> 收到請求後，從 cookie 中解析出 <code>access_token</code> 的值，並驗證解析出 JWT 內含的使用者資訊，並將其回傳至前端渲染。</li> </ol> <p><strong>pages/whoami.vue</strong> 完整程式碼：</p> <h5 id="pageswhoamivue">pages/whoami.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;w-full max-w-md&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 text-center text-3xl font-bold tracking-tight text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">我是誰</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;whoami&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">打</span> <span class="o">/</span><span class="nx">api</span><span class="o">/</span><span class="nx">whoami</span> <span class="nx">API</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;userInfo&#34; class=&#34;mt-8 flex w-full max-w-md flex-col&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;key in Object.keys(userInfo)&#34; :key=&#34;key&#34; class=&#34;mt-1 flex flex-wrap break-all&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span> <span class="p">{{</span> <span class="nx">key</span> <span class="p">}}</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex flex-1 text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">userInfo</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">whoami</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們就實作出一個 Google OAuth 的登入及驗證機制，後續可以再將這些資訊儲存至資料庫之中做後續的使用。</p> <p>這個範例的完整程式碼可以參考 <a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day20/nuxt-app-whoami" target="_blank" rel="noopener" >Nuxt 3 - 使用 Cookie 與 JWT 做使用者驗證</a></p> <p>小提醒，如果是在伺服器端打 API，可以使用 <a class="link" href="https://nuxt.com/docs/api/composables/use-request-headers" target="_blank" rel="noopener" >useRequestHeaders</a> 就可以從伺服器端訪問和代理 cookie 到 API。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">userInfo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">:</span> <span class="nx">useRequestHeaders</span><span class="p">([</span><span class="s1">&#39;cookie&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="cookielocalstoragetoken-與-jwt">Cookie、LocalStorage、Token 與 JWT</h3> <p>在做使用者驗證的時候，Cookie、LocalStorage、Token 與 JWT 是個重要的概念，這邊稍微簡述一下之間的差異與使用情境。</p> <h4 id="cookie">Cookie</h4> <p>通常採用 Cookie 來驗證使用者時，當使用者登入成功，會由伺服器端產生一組 cookie 來當作後續驗證使用的依據，這個依據會是一個字串形式，瀏覽器每次發送請求時會<code>自動夾帶</code>符合 Domain、路徑設定等的 cookie，伺服器端就可以依據 cookie 來解析驗證這個字串所代表的涵意，例如是不是匹配代表某位使用者字串。</p> <p>如同前面的例子，我們將一組能夠代表 <strong>Ryan</strong> 的 JWT 由登入後產生，並在後續請求中夾帶，以達到驗證使用者的效果。</p> <p>這串字串，不一定是要 JWT，只要伺服器端能回推或從資料庫比對出所代表的使用者或特定資訊，那麼也可以是隨意產生的字串。</p> <h4 id="localstorage">LocalStorage</h4> <p>LocalStorage 是現今瀏覽器基本上都支援的一個儲存空間，同樣具有 Domain 的寫入與讀取的概念，在 cookie 我們最多只能儲存 <strong>4KB</strong> 左右的字串資料，但是在 LocalStorage 通常有 <code>5MB</code> 所以能夠儲存更多的資訊。</p> <p>也有網站會把驗證使用者的 Token 或憑證依據儲存在 LocalStorage，之後發送請求或需要時再從中拿取出來並手動夾帶出去，同樣也可以實作出驗證使用者的流程。</p> <p>在瀏覽器的儲存空間，還有一個 SessionStorage，儲存在這裡面的資料，當網頁關閉時，就會自動清除。與 LocalStorage 不同，除非手動或使用 JS 清除，不然資料永遠存在，也不會有過期時間。</p> <h4 id="token">Token</h4> <p>用於提供給使用者後續夾帶給後端的憑據，相當於一個身分證，Token 通常由字串組成，且需要夠長不容易被暴力嘗試破解，Token 字串通常不具有任何意義，直至後端與資料庫或其他方式比對後，會對應出 Token 所代表的意義，例如使用者資訊。</p> <p>通常請求夾帶的 Token，需要每次往快取或資料庫做比對，才能知道 Token 所代表的使用者。</p> <h4 id="jwtjson-web-token">JWT(JSON Web Token)</h4> <p>JWT 是一種開放的標準 <a class="link" href="https://www.rfc-editor.org/rfc/rfc7519" target="_blank" rel="noopener" >RFC 7519</a>，如同名字 JWT 是基於 JSON Object 所編碼出來的，JWT 是由三個部分 <code>Header</code>、<code>Payload</code> 及 <code>Signature</code> 組合而成。</p> <p>其中最大的特色就是 <code>Payload</code> 這個部分，當後端伺服器收到 JWT 時，可以從 <code>Payload</code> 解析出當初簽發 JWT 所包含的資訊，通常會在 <code>Payload</code> 放置使用者的相關資料，如 Id、姓名或信箱等，因為這個特色我們不需要再比對快取或資料庫，就可以直接解析出使用者資料。</p> <p>而 <code>Payload</code> 這個欄位，因為可以被解碼出來，再任意的修改後重新編碼，所以我們就會借助 <code>Header</code> 及 <code>Signature</code> 這兩個部分，來確認當初加密的演算法及驗證簽章是否符合，以防止 <code>Payload</code> 被任意的竄改。</p> <h4 id="token-或-jwt-選哪一個">Token 或 JWT 選哪一個？</h4> <p>這兩者之間各有優缺點，雖然自產 Token 需要每次比對資料庫，但是能有效的記錄使用者 Token 核發使用的位置及註銷特定的 Token，因為 JWT 在簽發後，一定得等到過期才會失效無法使用，也就導致 JWT 在核發之後是無法註銷的，除非自己在實作一個黑名單或白名單的機制。</p> <p>可以依據使用的情境來決定 Token 或 JWT，只要記得使用 Token 作為解決方案，要保證 Token 足夠複雜或隨機，不容易被推測或暴力嘗試，如果真的要使用比較短的 Token 也確保過期的時間不要設定太長，要頻繁的更換這組 Token 或添加其他驗證機制。</p> <p>而 JWT 的利於可以包含 Payload，也切記在後端核發時不要將敏感資料或密鑰夾帶在 Payload 之中，因為 JWT 的 Payload 就算不知道加密的私鑰還是可以被解碼的。而簽發 JWT 選擇加密的方式也盡量採用非對稱式的家姐密，例如使用 ES256 (ECDSA-SHA256) 演算法產生的非對稱金鑰來進行加密。</p> <h4 id="token-要放在-cookie-還是-localstorage">Token 要放在 Cookie 還是 LocalStorage？</h4> <p>後端產生的 Token 或 JWT，不管存放在 Cookie 或 LocalStorage 只要注意其特性及安全，那麼想存在哪裡，都是可以被接受的。</p> <ul> <li>放在 Cookie</li> </ul> <p>將 Token 存放在 Cookie 的好處，可以用來控制網站的 Domain 或 SubDomain 進行存取，也可以設定過期時間來控制前端是否要重新問後端產生新的 Token，最大的特點就是自動夾帶在每個請求當中，也因為這項特性，有一些資安風險就需要稍微注意一下。</p> <p><a class="link" href="https://owasp.org/www-community/attacks/csrf" target="_blank" rel="noopener" >跨站請求偽造 (Cross Site Request Forgery, CSRF)</a> 就是一個 cookie 使用時所需要注意的資安問題，所以當使用 cookie 作為驗證機制時，建議在敏感的操作上多添加驗證的機制，或使用 CSRF Token 來保護你的 cookie 不被隨意偽造請求的夾帶出去。</p> <p>將 Token 或敏感資料儲存在 cooike 時，還是可以透過 JavaScript 的 <code>document.cookie</code> 做存取，所以如果網站有存在<a class="link" href="https://owasp.org/www-community/attacks/xss/" target="_blank" rel="noopener" >跨網站指令碼 (Cross-site scripting, XSS)</a> 的弱點，你的 cookie 很可能就會直接被偷走，為了防止 XSS 弱點導致 cookie 外洩，你可以將 cookie 設值時的屬性 <code>httpOnly</code> 設置為 <code>true</code>，讓客戶端瀏覽器無法直接存取，僅有在發送請求時，由瀏覽器自動夾帶至後端，此外，也可以設置 <code>secure</code> 讓 cookie 只在 HTTPS 下傳輸。</p> <ul> <li>放在 LocalStorage</li> </ul> <p>關於 Token 是否儲存在 LocalStorage 其實有不同的看法，因為 cookie 存在著 CSRF 或 XSS 等問題需要解決，而存放在 LocalStorage 不僅有更大的空間，還不自帶免疫 CSRF，難道不香嗎？</p> <p>但是別忘了 LocalStorage 也是透過 JS 來做儲存與讀取，所以就算使用 LocalStorage 了，但 XSS 弱點如果存在，你的 Token 一樣有外洩的可能性。</p> <p>而且 LocalStorage 不具有過期自動刪除的特性，除非自己實作或刪除否則將永遠的存在瀏覽器之中。</p> <p>所以？</p> <p>網路上有許多使用 Cookie 或 LocalStorage 儲存 Token 說法，有興趣也可以看看兩派各自論述的優缺點，所以，不管是 Cookie 還是 LocalStorage 沒有說一定不能使用誰，而是要依據特性及情境來做使用，並做好定期重新產生及相關的安全配置。</p> <p>我自己大概會依照這個網站或服務，是相對簡單也比較不會有會造成悲劇的操作或內容管理為主的服務，我可能就會採用 cookie 的方案處理驗證，因為相對來說自動夾帶與有效期限及 <code>httpOnly</code> 來控制客戶端是否能直接存取，對我來說還是挺方便與安全的，可能在適當的時機再添加 CSRF Token 或多道驗證機制，就能安全的使用 cookie。</p> <p>而在多為內部系統使用或是 API 在 Mobile App 甚至是不支援 Cookie 環境之下需要使用 Token 來驗證，我就會採納將 Token 儲存在 LocalStorage。</p> <hr> <h2 id="搜尋引擎最佳化-seo-與-html-meta-tag">搜尋引擎最佳化 (SEO) 與 HTML Meta Tag</h2> <p>選擇使用 Nuxt 3 作為網站開發框架的開發者，多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置，這篇將會講述 Nuxt 提供的幾個組合式函數，來協助我們設置網頁的標題、內文、Meta 等，以此來設置 SEO 或外部連結可能會解析到的標籤與數值內容。</p> <h3 id="搜尋引擎最佳化-seo---網站的標題-title-與描述-description">搜尋引擎最佳化 (SEO) - 網站的標題 (Title) 與描述 (Description)</h3> <p>當網站需要做搜尋引擎最佳化 (SEO) 的時候，<strong>Meta Tag</strong> 這個名詞你一定不能忽略，<strong>Meta Tag</strong> 稱之為<strong>元標籤</strong>或<strong>描述標籤</strong>，顧名思義，是來額外描述網頁的資料使用；<strong>Meta Tag</strong> 通常放置在 HTML 的 中，雖然 <strong>Meta Tag</strong> 不會直接顯示在網頁上，但對於搜尋引擎的爬蟲來說，是相當重要的一項識別資訊，也是 Facebook 提出的 <strong>Open Graph</strong> 放置的位置，讓網頁的標題、描述或縮圖等，能正確的被解析顯示出來。</p> <p>那麼網頁標題與描述，如果正確設定會有什麼樣子的效果呢？舉例來說，前面的【串接 Google OAuth 登入】我們可以透過網頁原始碼來查看，可以發現 <code>&lt;title&gt;</code> 與 <code>&lt;meta name=&quot;description&quot; … /&gt;</code> 都有設定。</p> <p><img src="https://live.staticflickr.com/65535/52618814898_c2eb521b53_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>搜尋引擎爬蟲在收錄網頁時，就會解析這些標籤來建立索引，我們在使用搜尋資料時，網頁的資訊也就對應著顯示出來，如下圖。</p> <p><img src="https://live.staticflickr.com/65535/52618326416_00c8081182_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>各家的搜尋引擎爬蟲，雖然都有自己解析的規則，不過根據 SEO 的經驗都有大方向能夠依循做建立，此外就是在針對特定的搜尋引擎加強識別標記，遵照官方指引就能讓網站的內容能見度有顯著提升。</p> <h3 id="網站的-open-graph-og">網站的 Open Graph (OG)</h3> <p><strong>OG</strong> 是由 Facebook 所提出的設定，全名為 <strong>Open Graph Protocol</strong>，官方翻譯為「<strong>開放社交關係圖</strong>」，在設定網站的 <strong>Meta</strong> 時通常也稱 <strong>OG Tag</strong>，Facebook 提供了<a class="link" href="https://developers.facebook.com/docs/sharing/webmasters" target="_blank" rel="noopener" >網站管理員分享指南</a>，當初設計的目的是，當網頁中設定了 <strong>OG Tag</strong>，能讓網頁被分享至社群媒體時，能有呈現更為豐富的內容，例如標題、描述及縮圖等。</p> <p>舉例來說，當<a class="link" href="https://blog.wayne-project.com/2022-12-12/nodejs-create-openai-line-bot/" target="_blank" rel="noopener" >網頁</a>設定了 <strong>OG Tag</strong>，以連結形式被分享至 Facebook，會呈現如下的資訊，Facebook 會解析網頁內的 <strong>OG Tag</strong> 將對應的如標題及縮圖等資訊顯示出來。</p> <p><img src="https://live.staticflickr.com/65535/52618326446_7205784c15_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其中縮圖依照 Facebook 的指引，即是對應網頁中的 <code>&lt;meta property=&quot;og:image&quot; ... /&gt;</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617815467_ca6f72b1e6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>不只是在 Facebook 上分享連結會有<code>連結預覽</code>的效果，也因為大家都遵循著 <strong>OG Tag</strong> 進行設定，所以在其他主流的社群媒體或通訊軟體等也都有跟進解析。例如，我們使用 LINE 傳送一條連結，也會因為設置了 <strong>OG Tag</strong> 也有成功解析出<code>連結預覽</code>的效果。</p> <p><img src="https://live.staticflickr.com/65535/52618814953_27c41dfc45_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>LINE 開發者也有提供一些問答指引可以做參考，<code>連結預覽</code>與 <code>og:title</code>、<code>og:description</code> 和 <code>og:image</code> 有著相應的設定關係。</p> <p><img src="https://live.staticflickr.com/65535/52618595494_9fd4af0f1e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="usehead">useHead</h3> <p>我們可以使用 Nuxt 3 提供的 <code>useHead()</code> 組合式函數，來設定網站的一些標籤或標記，使用方式如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">viewport</span><span class="o">:</span> <span class="s1">&#39;width=device-width, initial-scale=1, maximum-scale=1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">charset</span><span class="o">:</span> <span class="s1">&#39;utf-8&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">bodyAttrs</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span><span class="o">:</span> <span class="s1">&#39;test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>useHead()</code> 函數接受參數的類型如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">(</span><span class="nx">meta</span>: <span class="kt">Computable</span><span class="p">&lt;</span><span class="nt">MetaObject</span><span class="p">&gt;)</span><span class="o">:</span> <span class="k">void</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">MetaObject</span> <span class="kr">extends</span> <span class="nx">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">charset?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">viewport?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">link?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">style?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">script?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">noscript?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate?</span>: <span class="kt">string</span> <span class="o">|</span> <span class="p">((</span><span class="nx">title</span>: <span class="kt">string</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="kt">string</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">title?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">bodyAttrs?</span>: <span class="kt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">htmlAttrs?</span>: <span class="kt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>charset</strong>：指定 HTML 的字元編碼，預設為 <code>utf-8</code>。</li> <li><strong>viewport</strong>：設定網頁的可見區域，預設為 <code>width=device-width, initial-scale=1</code>。</li> <li><strong>meta</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;meta&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>link</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;link&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>style</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;style&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>script</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;script&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>noscript</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;noscript&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>titleTemplage</strong>：接受一個字串或函數，用來動態的設定該頁面元件的<code>網頁標題</code>。</li> <li><strong>title</strong>：在頁面元件設置靜態的<code>網頁標題</code>。</li> <li><strong>bodyAttrs</strong>：接受一個物件，設置網頁中 標籤的屬性，物件中的屬性將對應至 的屬性。</li> <li><strong>htmlAttrs</strong>：接受一個物件，設置網頁中 標籤的屬性，物件中的屬性將對應至 的屬性。</li> </ul> <h4 id="自訂-metadata">自訂 Metadata</h4> <p>使用 <code>useHead()</code> 函數設定屬性所傳入的字串或物件可以是具有響應性的變數，當數值變動時，相對應的數值也會一同響應，例如下面的程式碼，可以動態的變更標題或描述。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">description</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">description</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加動態網頁的標題">添加動態網頁的標題</h4> <p>我們可以在 <strong>app.vue</strong> 添加如下程式碼，<strong>titleTemplage</strong> 中的 <code>%s</code> 將會帶入目前頁面 <code>title</code> 或更上層頁面的 <code>title</code> 屬性：</p> <h5 id="appvue-12">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate</span><span class="o">:</span> <span class="s1">&#39;%s - 首頁&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到網頁的標題變為「Nuxt 3 Blog - 首頁」。</p> <p><img src="https://live.staticflickr.com/65535/52618326576_756d879b60_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以傳入一個函數來動態的添加網頁的標題。</p> <h5 id="appvue-13">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate</span><span class="o">:</span> <span class="p">(</span><span class="nx">title</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">title</span> <span class="o">?</span> <span class="sb">`</span><span class="si">${</span><span class="nx">title</span><span class="si">}</span><span class="sb"> - 首頁`</span> <span class="o">:</span> <span class="s1">&#39;首頁&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加外部-css">添加外部 CSS</h4> <p>我可以使用 <code>useHead()</code> 來添加 Google 字體至 <code>link</code> 屬性之中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">link</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">rel</span><span class="o">:</span> <span class="s1">&#39;preconnect&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;https://fonts.googleapis.com&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">rel</span><span class="o">:</span> <span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">crossorigin</span><span class="o">:</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加第三方的-javascript">添加第三方的 JavaScript</h4> <p>你也可以使用 <code>useHead()</code> 來插入第三方的 JS。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">src</span><span class="o">:</span> <span class="s1">&#39;https://third-party-script.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="在模板中使用相對應的元件設置屬性及標籤">在模板中使用相對應的元件設置屬性及標籤</h4> <p>Nuxt 提供 <code>&lt;Title&gt;</code>、<code>&lt;Base&gt;</code>、<code>&lt;Script&gt;</code>、<code>&lt;NoScript&gt;</code>、<code>&lt;Style&gt;</code>、<code>&lt;Meta&gt;</code>、<code>&lt;Link&gt;</code>、<code>&lt;Body&gt;</code>、<code>&lt;Html&gt;</code> 和 <code>&lt;Head&gt;</code>，我們可以直接在元件中模板 (Template) 使用這些元件進行設定網頁的屬性及標籤。</p> <p>因為這些元件名稱與原生 HTML 標記相似，所以記得在模板中使用要開頭為<code>大寫</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Title</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">Title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span> <span class="nt">:content</span><span class="o">=</span><span class="s">&#34;description&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span> <span class="na">children</span><span class="o">=</span><span class="s">&#34;body { background-color: green; }&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">Style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">description</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="definepagemeta">definePageMeta()</h3> <p>我們其實在前面就有使用過 <code>definePageMeta()</code> 來設置頁面的布局或中間件，在各個頁面之中，我們也可以使用 <code>definePageMeta()</code> 來設置一些屬性與 <code>useHead()</code> 進行搭配。</p> <p>例如，我們的 <strong>app.vue</strong> 使用 <code>useHead</code> 設定的一個 <strong>meta</strong>，並且是根據 <strong>route.meta.title</strong> 所動態的設定。</p> <h5 id="appvue-14">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;og:title&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">route</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">}]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在 <strong>pages/articles.vue</strong> 添加如下程式碼：</p> <h5 id="pagesarticlesvue">pages/articles.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;所有文章&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們瀏覽 <strong>/articles</strong> 頁面時，Nuxt 在伺服器端就幫我們渲染好 <code>og:title</code> 的 <code>meta</code> 了。我們可以透過檢視原始碼的方式來看看效果。</p> <p><img src="https://live.staticflickr.com/65535/52618815023_04fb4a9b6a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Nuxt 3 提供了一些可以設置網頁屬性與 <strong>Meta</strong> 的組合式函數，更能動態的調整與響應，結合 SSR 讓這些標記在伺服器端就能渲染出來，對網站做搜尋引擎最佳化 (SEO) 非常得友善，也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的標記外，也有 <strong>OG Tag</strong> 可以加強網頁的連結預覽效果，雖然 <strong>OG Tag</strong> 與 SEO 沒有絕對的關係，但是透過伺服器端渲染調整這些 <strong>Meta</strong> 對搜尋引擎或網站都非常的方便，我們只要根據需求及指引做設定，就能對網站的能見度有所提升。</p> <hr> <h2 id="public-與-assets-資源目錄nuxt-3-的靜態資源">Public 與 Assets 資源目錄(Nuxt 3 的靜態資源)</h2> <p>在網站的開發過程中，多少會使用到圖片、樣式或設定字體，而當這些檔案若沒有外部連結或某些需求下需要包含在專案內做使用，最後連帶這些檔案一起部署。在使用 <a class="link" href="https://github.com/vuejs/create-vue" target="_blank" rel="noopener" >create-vue</a> 建立的 Vue 的專案下包含了 <code>public</code> 與 src 內的 <code>assets</code> 目錄，這兩個目錄都是可以放置這類不常變動的靜態資源，但這兩個目錄各自因為一些特性，建議放置的檔案類型依據使用目的有所區別。</p> <p>Nuxt 3 使用專案下的兩個目錄來提供使用者處理圖片、樣式或字體，這兩個目錄分別為 <code>public</code> 與 <code>assets</code>。</p> <h3 id="public-目錄">public 目錄</h3> <p>在 Nuxt 3 的專案根目錄下，存在一個名為 <code>public</code> 的目錄，這個目錄如同 Vue 中的 <code>public</code> 目錄或 Nuxt 2 中的 <code>static</code> 目錄。這個目錄下的檔案，將會由 Nuxt 直接於網站的根路徑，例如 <code>/</code> 提供存取。</p> <p>例如建立 <strong>public/robots.txt</strong> 將可以使用 <a class="link" href="http://localhost:3000/robots.txt" target="_blank" rel="noopener" >http://localhost:3000/robots.txt</a> 存取。</p> <p>通常我們會在 <code>public</code> 目錄放置不常更動的檔案，或是需要保留檔案的名稱，例如 <strong>robots.txt</strong> 就需要一個固定的名稱，才能正確的被搜尋引擎的爬蟲所解析再決定檢索的規則，抑或 <strong>sitemap.xml</strong> 與 <strong>favicon.ico</strong> 檔案等，都很適合放置在 <code>public</code> 目錄。</p> <p>你可能也會想，那圖片或 CSS 樣式，我也不常變動，難道就不能放置在 public 目錄嗎？</p> <p><strong>行，當然行，哪次不行！</strong></p> <p><img src="https://live.staticflickr.com/65535/52630176588_1a720e08f8_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>舉個例子，我們將這張圖片放置於 <code>public</code> 目錄下並命名為 <strong>bg.png</strong>，專案目錄下其他檔案就先不列，整個結構大概長的像下面這樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── public/ </span></span><span class="line"><span class="cl">│ └── bg.png </span></span><span class="line"><span class="cl">└── app.vue </span></span></code></pre></td></tr></table> </div> </div><p>根據規則，我可以使用 <a class="link" href="http://localhost:3000/bg.png" target="_blank" rel="noopener" >http://localhost:3000/bg.png</a> 存取，如下圖我們確實成功的能存取到圖片。</p> <p><img src="https://live.staticflickr.com/65535/52630176003_baa9c8737a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>所以，我們在 <strong>app.vue</strong> 新增如下程式碼，使用 <code>/bg.png</code> 來等同訪問 <strong>public/bg.png</strong> 檔案：</p> <h5 id="appvue-15">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/bg.png&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>也確實能在網頁中使用 <code>&lt;img src=&quot;/bg.png&quot; /&gt;</code> 來顯示圖片。</p> <p><img src="https://live.staticflickr.com/65535/52629175752_c8f3b2c406_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>既然 <code>public</code> 目錄已經能提供靜態資源的連結，那麼為什麼還有一個名為 <code>assets</code> 的目錄呢？接下來我們先介紹 <code>assets</code> 目錄，最後再來總結一下差異。</p> <h3 id="assets-目錄-1">assets 目錄</h3> <p>Nuxt 3 使用 <a class="link" href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noopener" >Vite</a> 或 <a class="link" href="https://webpack.js.org/guides/asset-management/" target="_blank" rel="noopener" >Webpack</a> 來建構專案進行打包，這些建構工具主要功能是用來處理 JavaScript 檔案將其編譯、轉換或壓縮等，但它們可以透過各自的<strong>插件</strong>或 <strong>Loader</strong> 來處理其他檔案類型的資源，例如樣式、字體或 SVG 等。</p> <p>舉例來說，我們在 <code>assets</code> 下建立一個 Sass 的樣式，當這個 Sass 檔案被載入使用，就會經過<strong>插件</strong>或 <strong>Loader</strong> 來進行 CSS 的預處理及編譯，最終產生一個 CSS 檔案，也可以針對單純的 CSS 檔案進行壓縮。又或者說，當使用 <code>&lt;img&gt;</code> 的 <strong>src</strong> 屬性設定載入我們放置在 <code>assets</code> 的圖片或圖示，最終需要轉換為 Base64 編碼而不是產生一個連結，我們也需要依賴建構工具插件的擴展來幫助。</p> <p>其主要的目的，不外乎就是為了效能與解決瀏覽器的快取。放置在 <code>assets</code> 目錄下的檔案，可能會被<strong>插件</strong>或 <strong>Loader</strong> 進行轉換或壓縮，最終產生出來的檔案也具備連結可以進行存取。</p> <p>如果使用 <code>public</code> 目錄下導出的 <strong>/bg.png</strong>，就算我們替換了 <strong>bg.png</strong> 圖片，可能就會因為檔案根據檔案名稱被瀏覽器快取住，導致前端還是看到舊的檔案。我們在使用 <code>assets</code> 目錄下的檔案時雖然檔名都是 <strong>bg.png</strong>，但在建構時產生的檔案通常會夾帶 <code>Hash</code>，例如：<strong>bg.16a2f98c.png</strong>，如此一來我們每次更新圖片，都都會隨機的產生一組 Hash 就能防止瀏覽器快取，導致好像網站更新失效的錯覺。</p> <p>舉例來說，我們以相同的圖片，改放置於 <strong>assets/bg.png</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">│ └── bg.png </span></span><span class="line"><span class="cl">└── app.vue </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue-16">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;~/assets/bg.png&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在開發環境 <code>~/assets/bg.png</code> 會轉換為 <code>/_nuxt/assets/bg.png</code>，實際上也能使用 <a class="link" href="http://localhost:3000/_nuxt/assets/bg.png" target="_blank" rel="noopener" >http://localhost:3000/_nuxt/assets/bg.png</a> 進行訪問。</p> <p><img src="https://live.staticflickr.com/65535/52630134105_59cf185408_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>除了 ~/assets 可以對應 assets 目錄外，也可以參考官方的 <a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config#alias" target="_blank" rel="noopener" >alias</a> 更多或自訂別名來使用相對路徑。</p></blockquote> <p>但當你的網站部署完成或啟動建構出來的專案，會發現圖片檔名包含了 <code>Hash</code>，例如 <code>/_nuxt/bg.0a299ea1.png</code>。</p> <p><img src="https://live.staticflickr.com/65535/52630176173_dd37d79c67_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>最後我們以最終建構出來的專案結構對比如下圖，在 <code>public</code> 目錄下的檔案，會原封不動的照搬至 <code>.output/public</code> 下，也就可以使用 <strong>/bg.png</strong> 存取；而放置在 <code>assets</code> 下的檔案，可能會被處理加工，最後檔案名稱會加上一個 <code>Hash</code> 並放置在 <code>.output/public/_nuxt</code> 下，也就需要使用 <strong>/_nuxt/bg.0a299ea1.png</strong> 存取。</p> <p><img src="https://live.staticflickr.com/65535/52629175877_933064e5f8_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>總結來說多數情況建議把靜態資源放置在 <code>assets</code>，也因為靜態資源多為 SFC 所使用，通常也會放置最多檔案，最後建構時也會因為建構工具的設定來進行轉換或壓縮，最後添加 <code>Hash</code> 來提供存取，也因為每次建構產生的檔案都不一樣，所以不適合直接以完整的 URL 供外部連結使用。而當有些例外情況不適合，例如 <code>robots.txt</code> 或 <code>sitemap.xml</code> 這類的檔案不需要經過額外處理且需要絕對路徑保持檔案名稱，那就得放置在 <code>public</code> 目錄下提供存取。</p> <hr> <h2 id="發布網站前的建構打包-build-與靜態網站生成-static-site-generation">發布網站前的建構打包 (Build) 與靜態網站生成 (Static Site Generation)</h2> <p>當網站開發完成或有導入 CI/CD，在準備發布網站前，我們會將 Nuxt 網站的開發專案透過 Nuxt 提供的指令，我們可以來建構出<strong>正式環境</strong>所需要的版本，這個建構的過程你可以理解為專案將會打包需要的依賴套件、編譯與轉換相關的 Vue SFC 與樣式等，甚至幫你壓縮這些檔案等許多步驟，這些繁瑣的過程都透過 Nuxt 的建構指令來幫你完成，你可以結合一些設定參數與指令，來幫助你建構出<strong>正式環境</strong>所需要的網站專案，最後再進行部署的動作。</p> <h3 id="nuxt-3-專案如何建構正式環境版本">Nuxt 3 專案如何建構正式環境版本？</h3> <p>當我們建立一個乾淨的 Nuxt 3 專案，可以使用 <strong>package.json</strong> 中 <strong>scripts</strong> 內的指令來進行建構或預渲染產生靜態頁面：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者你也可以使用 Nuxt CLI 來達到一樣的效果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi build </span></span><span class="line"><span class="cl">npx nuxi generate </span></span></code></pre></td></tr></table> </div> </div><p><code>generate</code> 指令會觸發 <code>build</code> 的指令並帶有 <strong>prerender</strong> 為 <code>true</code> 的參數，最終產生出來的目錄可以直接進行部署，不需要再執行一次 <code>build</code> 的指令。</p> <h3 id="使用預設配置進行建構---建構通用渲染-universal-rendering-的網站">使用預設配置進行建構 - 建構通用渲染 (Universal Rendering) 的網站</h3> <p>這邊我們以 <a class="link" href="https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/" >【Nuxt3】實戰練習 - 實作部落格</a> 所建立的<a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/nuxt-app-blog" target="_blank" rel="noopener" >部落格</a>作為範例，來嘗試以預設的配置進行建構，目前 Nuxt 3 預設 <code>nuxt.config.ts</code> 中 <code>ssr</code> 屬性為 <code>true</code>，也就使用<strong>通用渲染 (Universal Rendering)</strong>。</p> <p>我們進入專案目錄，執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span></code></pre></td></tr></table> </div> </div><p>不需要在額外的配置或步驟，Nuxt 就會自動幫我們打包並建構出可以部署的網站。</p> <p><img src="https://live.staticflickr.com/65535/52630176278_33ffb31297_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>建構完成後會在專案目錄下多出一個 <code>.output</code> 目錄，<code>public</code> 就是在網站根目錄直接公開打包後的 JS、CSS 圖片等相關檔案。由於通用渲染使用 Nitro 作為服務引擎，所以會需要使用 Node.js 來啟動我們的服務，所以 <code>server</code> 則是會放置伺服器端的 Nitro、Server API 處理邏輯等。</p> <p><img src="https://live.staticflickr.com/65535/52630134450_bf00a38cea_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們可以先在本地執行下列指令來預覽建構出來的網站與 Nitro 是否能運作正常。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node .output/server/index.mjs </span></span></code></pre></td></tr></table> </div> </div><p>當確認沒問題後，就能以 <code>.output</code> 目錄進行網站部署。</p> <h3 id="使用預渲染建置全靜態頁面網站">使用預渲染建置全靜態頁面網站</h3> <p>我們可以在 Nuxt 3 建構時期來進行<strong>預渲染 (pre-rendering)</strong>，將專案內需要打 API 請求及動態渲染元件的地方，先渲染生成出 HTML 網頁，這個過程也稱之為<strong>靜態網站生成 (Static Site Generation)</strong>，進而建構出全靜態頁面的網站。</p> <p>執行下列指令進行靜態頁面生成：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>generate</code> 指令會觸發 <code>build</code> 的指令並帶有 <strong>prerender</strong> 為 <code>true</code> 的參數，最終會提示產生的目錄 <code>.output/public</code> 可以用來部署至靜態託管伺服器。</p> <p><img src="https://live.staticflickr.com/65535/52629943864_15a3b70736_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當建構完成後，會在專案目錄下多出一個 <code>.output</code> 目錄同時也會有 <code>dist</code> 目錄，可以發現 <code>.output/public</code> 目錄內容與 <code>dist</code> 目錄相同。</p> <p><img src="https://live.staticflickr.com/65535/52629176072_058cbabe22_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>靜態頁面的生成因為 Nuxt 使用基於爬蟲的技術為每個頁面產生 HTML 與 Payload 檔案，可以發現產生的靜態頁面目錄結構，也對應著我們專案的路由頁面，而頁面元件資料夾內會由一個 <code>index.html</code> 與 <code>_payload.js</code> 組成。</p> <p>下圖所產生的結構，是因為我們的部落格資料庫內已經有三筆文章資料，<code>/articles</code> 頁面會取得所有的文章，並列出對應著 <code>/articles/1</code>、<code>/articles/2</code> 與 <code>/articles/3</code> 目錄，每個頁面內也都包含預先從 Server API 請求好的文章資料並存於 <code>_payload.js</code> 之中。</p> <p><img src="https://live.staticflickr.com/65535/52630134335_4a264f46cd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>至此我們就可以將 <code>.output</code> 目錄部署至伺服器或靜態託管服務，而且也不需要在使用 Node.js 伺服器來服務這些靜態檔案。</p> <h3 id="手動設定預渲染的路由規則">手動設定預渲染的路由規則</h3> <p>我們使用 <code>generate</code> 指令所產生的全靜態頁面網站，是基於 Nuxt 的爬蟲技術來分析頁面，如同前個例子文章頁面的產生所描述，如果我們的資料庫存在著 <strong>200</strong> 筆資料，但 <code>/articles</code> 頁面所打的 API 總是只回傳最新的 <strong>10</strong> 筆，那麼那些沒有路由連結可以連結過去的文章頁面，就無法被 Nuxt 的爬蟲所分析到，也就無法產生對應的靜態頁面。</p> <p>為了解決這個問題，我們可以藉由配置 Nitro 的預渲染路由，來手動的設定哪些頁面要進行預渲染產生靜態頁面，或者忽略產生靜態頁面。</p> <h5 id="nuxtconfigts-7">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ignore</span><span class="o">:</span> <span class="p">[],</span> <span class="c1">// 忽略特定路由不進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">routes</span><span class="o">:</span> <span class="p">[],</span> <span class="c1">// 指定路由進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">crawlLinks</span>: <span class="kt">true</span> <span class="c1">// 啟用 Nuxt 爬蟲蒐集頁面連結來進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然，也可以搭配 <code>build</code> 或 <code>generate</code> 指令做使用，但會稍微有些不一樣。</p> <h4 id="build">build</h4> <p>例如：設置如下，並使用 <code>npm run build</code> 指令。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">routes</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="s1">&#39;/articles/2&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼建構出來的通用渲染網站，就會包含部分頁面是已經預渲染好的靜態頁面。</p> <p><img src="https://live.staticflickr.com/65535/52629696171_a693e5422d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="generate">generate</h4> <p>當我們使用 <code>generate</code> 時，因為是進行全站的靜態頁面生成，所以基本上涵蓋了所有路由頁面，並且 <code>nitro.prerender.crawlLinks</code> 屬性預設為 <code>true</code> 會啟用 Nuxt 爬蟲來蒐集整的網站的路由頁面，進而開始預渲染產生靜態頁面。</p> <p>例如：設置如下，並使用 <code>npm run generate</code> 指令。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ignore</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="s1">&#39;/register&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">routes</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/articles/2&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">crawlLinks</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼建構出來的 <code>.output</code> 目錄，就會因為設置了 <code>nitro.prerender.ignore</code> 而忽略 <strong>/login</strong> 與 <strong>/register</strong> 頁面的靜態生成 ，而 <strong>/articles/2</strong> 在網站中因為沒有任何頁面能連結到此，所以 Nuxy 爬蟲無法蒐集到，所以可以手動添加進 <code>nitro.prerender.routes</code> 之中。</p> <p><img src="https://live.staticflickr.com/65535/52629696156_f6e435c338_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果我們將 <code>nitro.prerender.crawlLinks</code> 屬性設為 <code>false</code>，那麼在產生靜態頁面的時候，就算 <code>/articles</code> 包含了所有文章的連結，Nuxt 爬蟲也就不會蒐集連結來產生靜態頁面，而是僅依照專案目錄下的 <code>pages</code> 所產生出的路由但不包含 <code>[id].vue</code> 這類動態匹配的路由來產生靜態頁面。</p> <h3 id="建構僅在客戶端渲染的網站">建構僅在客戶端渲染的網站</h3> <p>同樣的使用<a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/nuxt-app-blog" target="_blank" rel="noopener" >部落格</a>作為範例，來嘗試將 <code>nuxt.config.ts</code> 中 <code>ssr</code> 屬性設為 <code>false</code>，也就讓網站<strong>僅在客戶端渲染 (Client-side Only Rendering)</strong>。</p> <p>執行下列指令進行建構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span></code></pre></td></tr></table> </div> </div><p>建構完成後，會在專案目錄下多出一個 <code>.output</code> 目錄，可以發現 <code>public</code> 目錄結構與通用渲染建構出的不大一樣，多出了像 Vue 專案建構完成後的 <code>index.html</code> 檔案，來作為顯示的容器。</p> <p><img src="https://live.staticflickr.com/65535/52629176037_b1ec094f74_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這邊比較需要留意的地方是，當我們將 <code>ssr</code> 屬性設為 <code>false</code>，也還是會在 <code>.output</code> 建構出 <code>server</code> 目錄，也擁有著 <code>.output/server/index.mjs</code>。</p> <p>那這不就意謂著我還是得有 Node.js 服務才能部署嗎？其實你可以這麼理解，當我們設定 Nuxt 僅在客戶端進行渲染，但 Nuxt 專案中仍然可能有 Server API，這個屬於伺服器端的 API，總不可能一同打包至前端去做架設吧！所以使用 <code>npm run build</code> 建構出來的專案，都會使用 Nitro 引擎來啟動服務，若有 Server API 的處理邏輯，則會連帶打包進 <code>.output/server</code> 目錄之下。</p> <p>如果你確定 Nuxt 的專案內沒有自己實作的 Server API，全部是依賴非專案內的 Server API，那麼你可以直接將 <code>public</code> 目錄，視為 Vue 建構出的 <code>dist</code> 目錄來進行部署，因為選擇不再需要 Nitro 引擎來為我們提供 Web Server 的服務，且專案內的前端也都打包完在 <code>public</code> 下可以視為 SPA 網站。</p> <h3 id="整理這些排列建構參數的組合">整理這些排列建構參數的組合</h3> <p>相信看到這裡，可能對建構與產生靜態頁面有一點混亂了，這邊稍微整理了一下，大家可以再依據需求來啟用相對應的配置：</p> <h4 id="npm-run-build--ssr-true">npm run build + ssr: true</h4> <ul> <li>build + ssr: true</li> </ul> <p>Nuxt 3 預設的建構參數，使用<strong>通用渲染 (Universal Rendering) 模式</strong>。</p> <ul> <li>build + ssr: true + nitro.prerender.crawlLinks: true</li> </ul> <p>使用通用渲染模式，頁面中需要打 API 動態產生的連結而被 Nuxt 爬蟲所蒐集到的頁面將被預渲染成靜態頁面。</p> <ul> <li>build + ssr: true + nitro.prerender.routes + nitro.prerender.crawlLinks: false</li> </ul> <p>使用通用渲染模式，但指定頁面預渲染成靜態頁面。</p> <h4 id="npm-run-build--ssr-false">npm run build + ssr: false</h4> <ul> <li>build + ssr: false</li> </ul> <p><strong>僅在客戶端渲染 (Client-side Only Rendering)</strong> 的模式，部署時同樣需要使用 <code>server</code> 中的 <code>index.mjs</code> 來啟動 Nitro 伺服器，這樣才能正確的運作 Server API；除非確認專案內完全無依賴專案內的 Server API，則可以直接將 <code>.output/public</code> 視為 Vue 的 <code>dist</code> 目錄進行部署。</p> <h4 id="npm-run-generate--ssr-true">npm run generate + ssr: true</h4> <ul> <li>generate + ssr: true</li> </ul> <p>使用預渲染產生靜態頁面，預設產生全站靜態頁面，<code>generate</code> 下 <code>nitro.prerender.crawlLinks</code> 屬性預設變為 <code>true</code>，整個網站包含 Nuxt 爬蟲所蒐集到的頁面將被預渲染成靜態頁面。</p> <ul> <li>generate + ssr: true + nitro.prerender.ignore</li> </ul> <p>使用 <code>generate</code> 已經包含整個網站，如果想要忽略某些頁面進行預渲染，可以添加路由至 <code>nitro.prerender.ignore</code> 中。但是需要注意，這些被忽略的頁面如果有使用專案內的 Server API 需求，可能就無法正確的在靜態託管平台運作，而外部的倒是不受影響。</p> <ul> <li>generate + ssr: true + nitro.prerender.routes</li> </ul> <p>雖然使用 <code>generate</code> 已經包含整個網站，但 Nuxt 爬蟲所蒐集到的頁面僅為頁面中產生的，如果連結不存在這些頁面內，只能直接從瀏覽器網址列輸入進入，那麼我們可以將路由添加至 <code>nitro.prerender.routes</code> 來額外補充需要預渲染的頁面。</p> <ul> <li>generate + ssr: true + nitro.prerender.routes + nitro.prerender.crawlLinks: false</li> </ul> <p>同樣會產生全站靜態頁面，但不使用 Nuxt 爬蟲所蒐集到的連結頁面，所以這些動態匹配或需要打 API 獲取資料再渲染的頁面，將不會是靜態頁面，因此也需要注意，如果這些頁面有使用專案內的 Server API 需求，可能就無法正確的在靜態託管平台運作，而外部的倒是不受影響。</p> <blockquote> <p>其它跟建構有關的參數屬性可以再參考<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#build" target="_blank" rel="noopener" >官方文件</a>、<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#vite" target="_blank" rel="noopener" >Vite</a> 與 <a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#webpack-1" target="_blank" rel="noopener" >webpack</a> 建構工具也都能額外設定參數屬性。</p></blockquote> <p>Nuxt 的建構指令 <code>build</code> 與產生靜態頁面的 <code>generate</code> 指令，讓我們可以依據不同的情境來決定渲染模式與預渲染的頁面，最終產生的 <code>.output</code> 目錄也會有不一樣的結構。預渲染的頁面與單純的 SPA 也要注意使否有使用到 Nuxt 專案建立的 Server API，再決定是否需要 Nitro 伺服器來啟動正式環境的網站服務。當一切就緒之後最後就能將輸出的目錄打包進行部署。</p> <hr> <h2 id="就剩最後一步了---部署-deployment">就剩最後一步了 - 部署 (Deployment)</h2> <p>Nuxt 3 的專案應用程式，可以部署在 Node.js 的伺服器上面，也可以將預渲染的靜態網站由靜態託管平台來服務，或這部署至無伺服器 (serverless) 或 CDN 環境上。</p> <h3 id="使用-nodejs-伺服器">使用 Node.js 伺服器</h3> <p>Nuxt 3 的專案預設使用 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 來作為服務引擎，所以我們在任何 Node.js 伺服器環境之下，基本上都可以啟動 Nuxt 建置出來的 Nitro Server。</p> <p>當我們使用 <code>npm run build</code> 建構專案後，輸出的 <code>.output/server/index.mjs</code> 檔案，即是一個準備啟動 Node 伺服器的入口點。</p> <p>我們可以透過下列指令來啟動我們建構好的專案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node .output/server/index.mjs </span></span></code></pre></td></tr></table> </div> </div><p>執行後如下面圖示顯示，網站將於 <strong>Prot: 3000</strong> 進行服務監聽。</p> <p><img src="https://live.staticflickr.com/65535/52629762661_a3a806890c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你可以設定下列環境變數來調整預設監聽的 <strong>Port</strong> 或 <strong>Host</strong>。</p> <ul> <li><strong>NITRO_PORT</strong> 或 <strong>PORT</strong>：監聽的 Port (預設為 <strong>3000</strong>)</li> <li><strong>NITRO_HOST</strong> 或 <strong>HOST</strong>：服務的 Host (沒有預設值，但預設監聽所有的網路介面包含 IPv4 與 IPv6 的位址 )</li> <li><strong>NITRO_SSL_CERT</strong> 與 <strong>NITRO_SSL_KEY</strong>：如果兩者皆設定，將以 HTTPS 模式下啟動伺服器，通常僅作為測試用途，因為建議將 SSL 憑證等設定於提供反向代理的服務，例如 NGINX 或 CloudFlare，Nitro 伺服器則執行在反向代理後面。</li> </ul> <p>部署時，你可以將整個 <code>.output</code> 上傳至正式環境的機器上，並使用 Node.js 做執行，但為了防止我們的服務因為異常，導致 Node.js 服務意外崩潰，我們需要一個 <strong>Process</strong> 的 <strong>Daemon</strong>，來將服務常駐，意外崩潰時能自動重啟，來維持整個網站的正常服務。</p> <p>通常我們會在正式環境使用 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來管理 Node.js 的服務，<a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 是維持一個 Process 執行的管理器，我們可以藉由 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來啟動我們的 Nitro Server，當服務崩潰時能自動的重新啟動，以維持服務的正常運作，除此之外 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 可以啟用叢集 (Cluster) 的功能結合請求的附載平衡，來讓多核心的機器提升資源的利用率與效能，更還有監測多項數據等功能可供正式環境做使用。</p> <h3 id="使用-pm2">使用 PM2</h3> <p>使用的方式也很簡單，首先使用 NPM 安裝 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a>，可以執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g pm2 </span></span></code></pre></td></tr></table> </div> </div><p>在 Nuxt 專案目錄下建立 <code>ecosystem.config.js</code> 檔案，內容如下：</p> <h5 id="ecosystemconfigjs">ecosystem.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apps</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;NuxtAppName&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">exec_mode</span><span class="o">:</span> <span class="s1">&#39;cluster&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">instances</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="s1">&#39;./.output/server/index.mjs&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們就能使用 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來執行我們的服務：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">pm2 start ecosystem.config.js </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630242508_e873a0929c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以在 <code>ecosystem.config.js</code> 中添加環境變數。</p> <h5 id="ecosystemconfigjs-1">ecosystem.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apps</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;NuxtAppName&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">exec_mode</span><span class="o">:</span> <span class="s1">&#39;cluster&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">instances</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="s1">&#39;./.output/server/index.mjs&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">NITRO_PORT</span><span class="o">:</span> <span class="mi">3001</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">NITRO_HOST</span><span class="o">:</span> <span class="s1">&#39;127.0.0.1&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="製作-docker-image">製作 Docker Image</h3> <p>目前使用 Docker 來部署服務的也不在少數，個人也是採用容器化來啟動網站服務並整合 CI/CD 自動化的流程來建構與部署 Nuxt 3 專案，以下將列出自己使用的 Dockerfile，有興趣的可以再參考看看。</p> <p>專案目錄下建立 <code>Dockerfile</code> 檔案，內容如下：</p> <h5 id="dockerfile">Dockerfile</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:16-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> mkdir -p /nuxt-app<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/nuxt-app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> npm ci <span class="o">&amp;&amp;</span> npm cache clean --force<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">FROM</span><span class="w"> </span><span class="s">keymetrics/pm2:16-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> mkdir -p /nuxt-app/.output<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/nuxt-app/.output</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> --from<span class="o">=</span>builder /nuxt-app/.output .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> ./ecosystem.config.js /nuxt-app<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENV</span> <span class="nv">NUXT_HOST</span><span class="o">=</span><span class="m">0</span>.0.0.0<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENV</span> <span class="nv">NUXT_PORT</span><span class="o">=</span><span class="m">3000</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span> <span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENTRYPOINT</span> <span class="p">[</span><span class="s2">&#34;pm2-runtime&#34;</span><span class="p">,</span> <span class="s2">&#34;start&#34;</span><span class="p">,</span> <span class="s2">&#34;/nuxt-app/ecosystem.config.js&#34;</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></td></tr></table> </div> </div><p>打開終端機 (Terminal)，並於專案目錄下執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker build -t nuxt-app . </span></span></code></pre></td></tr></table> </div> </div><p>當開始製作 Docker Image 時，會依照 Dockerfile 來建置，主要分成兩個部分，首先我會先在 <code>node:16-alpine</code> 容器環境中執行建構 (build) 的指令，並將需要部署的目錄 <code>.output</code> 複製至 <code>keymetrics/pm2:16-alpine</code> 容器環境中，這樣最終使用 PM2 執行服務的 Image 大小就會稍微小一些。</p> <p>當 Docker Image 製作完畢後，可以再藉由 docker run 或 docker compose 甚至 k8s 來啟動服務後，再由如 NGINX 提供反向代理服務連接到內部的 Nitro Server。</p> <h3 id="部署至-cloudflare-workers">部署至 CloudFlare Workers</h3> <p>我們也可以將 Nuxt 部署到無伺服器 (Serverless) 的環境，官方提供了多種的預設部署可以做使用，我們就簡單以一個乾淨的 Nuxt 3 專案來做範例，嘗試部署到 <a class="link" href="https://workers.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare Workers</a>。</p> <p>首先，我們先準備一個 Nuxt 3 專案，在此我使用下列指令建立一個乾淨的 Nuxt 3 專案，並進入專案目錄安裝套件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init nuxt-app </span></span><span class="line"><span class="cl"><span class="nb">cd</span> nuxt-app </span></span><span class="line"><span class="cl">npm install </span></span></code></pre></td></tr></table> </div> </div><p>使用 NPM 安裝 <a class="link" href="https://www.npmjs.com/package/wrangler" target="_blank" rel="noopener" >wrangler</a>，它是用於建構 Cloudflare Workers 的命令列工具 (command line tool)。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g wrangler </span></span></code></pre></td></tr></table> </div> </div><p>你可能需要註冊一個 CloudFlare 的帳號，並使用下列指令來登入 CloudFlare 帳號並授權 Wrangler 來建立 CloudFlare Workers，我們選擇允許 (Allow) 即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler login </span></span></code></pre></td></tr></table> </div> </div><p>於專案目錄下建立 <code>wrangler.toml</code> 內容如下：</p> <h5 id="wranglertoml">wrangler.toml</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;nuxt-app-hello&#34;</span> </span></span><span class="line"><span class="cl"><span class="nx">main</span> <span class="p">=</span> <span class="s2">&#34;./.output/server/index.mjs&#34;</span> </span></span><span class="line"><span class="cl"><span class="nx">workers_dev</span> <span class="p">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="nx">compatibility_date</span> <span class="p">=</span> <span class="s2">&#34;2022-10-15&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">site</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="nx">bucket</span> <span class="p">=</span> <span class="s2">&#34;.output/public&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們將 <code>NITRO_PRESET</code> 環境變數，設置為 <code>cloudflare</code> 並開始建構我們的專案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">NITRO_PRESET</span><span class="o">=</span>cloudflare npm run build </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630011164_8598f2fb8a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來，可以選擇執行終端機提示的指令來啟動伺服器進行相關測試。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx wrangler dev .output/server/index.mjs --site .output/public --local </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630011119_2100d3cd32_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當確認專案服務運作上沒問題後，可以執行下列指令進行發布。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx wrangler publish </span></span></code></pre></td></tr></table> </div> </div><p>完成發布後，就會提示我們發布完成及服務的網址，例如 <a class="link" href="https://nuxt-app-hello.ryanchien8125.workers.dev" target="_blank" rel="noopener" >https://nuxt-app-hello.ryanchien8125.workers.dev</a>，我們就可以瀏覽我們部署好的網站囉。</p> <p><img src="https://live.staticflickr.com/65535/52630011089_34c0659438_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="靜態的網站部署至-cloudflare-pages">靜態的網站部署至 CloudFlare Pages</h3> <p>我們使用 Nuxt 3 可以預渲染全靜態的網站，因此也可以將專案部署至靜態託管平台，以 CloudFlare Pages 為例，部署的步驟如下：</p> <p>首先，先執行下列指令進行全站的預渲染：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 NPM 安裝 <a class="link" href="https://www.npmjs.com/package/wrangler" target="_blank" rel="noopener" >wrangler</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g wrangler </span></span></code></pre></td></tr></table> </div> </div><p>你可能需要註冊一個 CloudFlare 的帳號，並使用下列指令來登入 CloudFlare 帳號並授權 Wrangler，我們選擇允許 (Allow) 即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler login </span></span></code></pre></td></tr></table> </div> </div><p>建立一個 CloudFlare Pages 名為 <code>nuxt-app-blog</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler pages project create nuxt-app-blog </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630242568_959e7a5907_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>使用下列指令，將預渲染的網站目錄進行部署，並指定專案名稱為 <code>nuxt-app-blog</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler pages publish ./.output/public --project-name nuxt-app-blog </span></span></code></pre></td></tr></table> </div> </div><p>當部署完成後，就會得到一個連結來查看部署的靜態網頁，你也可以從 CloudFlare Pages 後台，看見網站網址的別名 Aliases 來使用自訂的網址。</p> <p><img src="https://live.staticflickr.com/65535/52629762746_a0dc3bb113_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>以上是介紹 Nuxt 3 的幾個部署方式的例子，更多雲端平台上面的部署，也可以參考 <a class="link" href="https://nuxt.com/docs/getting-started/deployment#deployment" target="_blank" rel="noopener" >Nuxt</a> 與 <a class="link" href="https://nitro.unjs.io/deploy/node" target="_blank" rel="noopener" >Nitro</a> 官方文件。</p> <hr> <h2 id="上線前的測試項目">上線前的測試項目</h2> <p>最後與大家分享一下網站專案上線前的幾個我會特別注意的幾個小細節，也歡迎大家一起來交流。</p> <h3 id="前端細節">前端細節</h3> <ul> <li>網頁的標題 (Title)</li> <li>使用之資源授權 (使用權、智財權)</li> <li>圖片替代文字</li> <li>Favicon</li> <li>HTML Meta data</li> <li>Google Analytics</li> </ul> <h3 id="瀏覽器相容性測試">瀏覽器相容性測試</h3> <ul> <li>RWD</li> <li>跨瀏覽器 <ul> <li>BrowserStack</li> <li>Comparium</li> <li>TestingBot</li> </ul> </li> </ul> <h3 id="api-測試">API 測試</h3> <ul> <li>單元測試</li> <li>不同場景測試 (測試環境、正式環境)</li> <li>效能測試 <ul> <li>JMeter</li> <li>k6</li> </ul> </li> <li>安全性測試</li> </ul> <h3 id="壓力測試">壓力測試</h3> <ul> <li>模擬使用者或連線數</li> <li>觀察機器資源使用量</li> <li>資料庫連線數觀察</li> <li>持續提高模擬數量觀察分析</li> <li>分析每個請求於併發的平均響應時間</li> <li>是否請求中夾雜非預期之狀態碼 (HTTP Status Code)</li> </ul> <h3 id="api-或網站安全性">API 或網站安全性</h3> <ul> <li>參考 OWASP Top 10</li> <li>SQL 參數化查詢</li> <li>資安公司滲透測試、紅隊演練</li> </ul> <h3 id="開發或除錯用的訊息">開發或除錯用的訊息</h3> <ul> <li>警告訊息或異常訊息移除（console.log 或警告訊息等）</li> <li>JavaScript Source Maps 記得移除</li> <li>敏感資訊記得移除 (開發用 Key、帳號密碼等)</li> </ul> <h3 id="網站相依性檢查">網站相依性檢查</h3> <ul> <li>使用到第三方網站資源及穩定性</li> <li>檢查所有網址皆能正常運作</li> <li>當第三方網站異常時應對措施</li> </ul> <h3 id="部署相關">部署相關</h3> <ul> <li>是否有高可用性 (HA)</li> <li>Docker 或 Kubernetes 整合</li> <li>網域時效</li> <li>SSL 證書日期</li> <li>防火牆或 WAF 設定</li> <li>內網或外網區隔</li> </ul> <h3 id="備份機制">備份機制</h3> <ul> <li>靜態有狀態資料 (使用者上傳的)</li> <li>資料庫資料</li> </ul> <p>這邊主要與大家分享幾種 Nuxt 的部署方式，不管是部署在自己的機房主機或雲端，大家可以在挑選合適的解決方案，Nitro 也支援無伺服器 (Serverless) 等部署方式非常的方便，只是要特別注意到 Serverless 執行一些 binary 的問題，再挑選自己適合的部署與服務方式。</p> <p>經過本篇文章，大家應該都對於 Nuxt 3 有初步的理解，接下來下一篇文章我們將會進入實戰練習，將會以 Nuxt 3 來實作一個部落格網站！</p> <hr>https://blog.wayne-project.com/2022-12-30/npm-vueuse/Fri, 30 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-30/npm-vueuse/<img src="https://live.staticflickr.com/65535/52595409644_aa1fd7bf45_o.png" alt="Featured image of post 【VueUse】一款基於 Vue Composition API 的函式工具集" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://ithelp.ithome.com.tw/articles/10278366" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7030395303433863205" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="vueuse-是什麼">VueUse 是什麼？</h2> <p><a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 作者為 Anthony Fu，是一款基於 Vue 組合式 API (Composition API) 的函數工具集，其中 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 主要特色可以分為以下幾點：</p> <ul> <li>Vue 2 和 Vue 3 都支援</li> <li>採取 Tree Shaking 結構，只會打包引入的程式碼</li> <li>支持各種套件</li> <li>可配置事件過濾器和目標</li> </ul> <p>以上是<a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >官方網站</a>關於它的定義。</p> <p>首先，它基於 Vue Composition API (組合式API)，只有在支持組合式 API 的環境下，才可以正常使用它。</p> <p><a class="link" href="https://cn.vuejs.org/guide/extras/composition-api-faq.html" target="_blank" rel="noopener" >什麼是組合式 API？</a></p> <p>然後，它是一款函數工具集(可類比為 <a class="link" href="https://www.lodashjs.com/" target="_blank" rel="noopener" >lodash.js</a> / <a class="link" href="https://ramda.cn/" target="_blank" rel="noopener" >ramda.js</a>)</p> <p>簡單來說，這是一個能讓你<strong>更早下班</strong>的工具庫。</p> <hr> <h2 id="vueuse-開源嗎現狀如何">VueUse 開源嗎？現狀如何？</h2> <p><strong>當然開源！</strong> <a class="link" href="https://github.com/vueuse/vueuse" target="_blank" rel="noopener" >github/vueuse</a></p> <p>社區活躍度：社區非常活躍，截止 2021 年 11 月，一直有 mr 被合入主線。</p> <p>被引用情況：截止 2021 年 11 月 13 日，npm 上可查詢到依賴它的庫就有 172 個，其中包括著名UI庫：<a class="link" href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener" >Element-Plus</a></p> <p>Vue 的著名開源作者 Evan You 也是此庫的金牌贊助商。</p> <p><img src="https://live.staticflickr.com/65535/52595668748_bb0dc1189c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="安裝-vueuse">安裝 VueUse</h2> <p>NPM 或 YARN：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i @vueuse/core </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl">yarn add @vueuse/core </span></span></code></pre></td></tr></table> </div> </div><p>CDN 引入：</p> <blockquote> <p>這邊注意 <strong>shared 一定要在前面</strong></p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/@vueuse/shared&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/@vueuse/core&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注：VueUse 借助 vue-demi 的強大功能，可以在一個包中同時適用於 Vue 2、3！</p></blockquote> <p>Vue 3 Demo</p> <ul> <li><a class="link" href="https://github.com/vueuse/vueuse-vite-starter" target="_blank" rel="noopener" >使用 Vite</a></li> <li><a class="link" href="https://github.com/vueuse/vueuse-vue3-example" target="_blank" rel="noopener" >使用 Webpack</a></li> </ul> <p>Vue 2 Demo (Vue CLI)</p> <ul> <li><a class="link" href="https://github.com/vueuse/vueuse-vue2-example" target="_blank" rel="noopener" >使用 Vue CLI</a></li> </ul> <p>另外，要注意庫的版本：</p> <p>從 <code>v6.0</code> 版本起，vue3 需要 <code>vue &gt;= v3.2</code>，vue2 需要依賴 <a class="link" href="https://github.com/vuejs/composition-api" target="_blank" rel="noopener" >@vue/composition-api</a>：<code>@vue/composition &gt;= v1.1</code>。</p> <hr> <h2 id="vueuse-能做什麼">VueUse 能做什麼？</h2> <p>能做的那可太多了，但總體上分為以下幾個類別提供工具函數：</p> <ul> <li>Animation 動畫</li> <li>Browser 瀏覽器</li> <li>Component 組件</li> <li>Formatters 格式化</li> <li>Sensors 傳感器</li> <li>State 狀態機</li> <li>Utility 實用方法</li> <li>Watch 監聽</li> <li>Misc 各式各樣的雜項</li> </ul> <p>這麼列了一遍，估計你還是很懵，但因為方法實在太多，也不可能一個個都列出來。</p> <p>那我就舉幾個有代表性的例子，帶你快速理解這些方法大概是做什麼的，有什麼特點。</p> <h3 id="例子一usemouse">例子(一)：useMouse</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span><span class="nx">Mouse</span><span class="o">:</span> <span class="p">{{</span><span class="nx">x</span><span class="p">}}</span> <span class="nx">x</span> <span class="p">{{</span><span class="nx">y</span><span class="p">}}&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">useMouse</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">y</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595149366_78bc02b664_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Wooooow~~~ 這可太簡單易用了！</p> <p>經過源碼閱讀，我們可以發現，這短短的一個方法，至少做了以下這些事：</p> <ul> <li>創建了 x 和 y 這兩個響應式對象(Ref)</li> <li>給 window 添加了鼠標事件監聽，將鼠標的坐標實時賦給 x、y (並且還做了移動端兼容)</li> </ul> <p>如果這些邏輯放到頁面裡，至少需要 6 行代碼，這些代碼後期都會增加維護人員理解頁面的成本，而現在，你只需要一行代碼。</p> <p>除此之外，該方法還有組件式用法，適合更熱愛標籤的盆友</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">UseMouse</span> <span class="nt">v-slot</span><span class="o">=</span><span class="s">&#34;{ x, y }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">x</span><span class="o">:</span> <span class="p">{{</span> <span class="na">x</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="na">y</span><span class="o">:</span> <span class="p">{{</span> <span class="na">y</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">UseMouse</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="例子二useinterval">例子(二)：useInterval</h3> <p>顧名思義，這個方法是對<strong>延时重複調用</strong>能力的封裝。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useInterval</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;.&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">counter</span><span class="p">,</span> <span class="nx">pause</span><span class="p">,</span> <span class="nx">resume</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useInterval</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span> <span class="nx">controls</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// counter 一個 Ref 對象，它是響應式的，counter.value 等於已經計算的次數 </span></span></span><span class="line"><span class="cl"><span class="c1">// pause() 暫停 </span></span></span><span class="line"><span class="cl"><span class="c1">// resume() 恢復 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;APP&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">Interval</span> <span class="nx">fired</span><span class="o">:</span> <span class="p">{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595409614_bbf967ebb4_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>是不是很好用？相比手寫 setInterval 更為便捷。</p> <p>如果徒手實現這樣一整套方法，多少行暫且不說，我們需要在業務中寫下大量的邏輯代碼。</p> <p>而眾所周知：</p> <p>寫的代碼越多，出 Bug 的可能性越大，維護和理解的難度就越高。從這個角度看，這個庫確實是一個合格的函數工具集。</p> <h3 id="例子三useclipboard">例子(三)：useClipboard</h3> <p>以複製文字為例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">useClipboard</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span><span class="p">;</span> <span class="c1">// 只需要引入所使用到的 API </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;我是 Winnie&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="p">,</span> <span class="c1">// 複製的值 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">isSupported</span><span class="p">,</span> <span class="c1">// 瀏覽器有無支援 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">copy</span><span class="p">,</span> <span class="c1">// 方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">copied</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="o">=</span> <span class="nx">useClipboard</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;isSupported&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span><span class="nx">useClipboard</span><span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">複製內容</span><span class="err">：</span><span class="p">{{</span> <span class="nx">input</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;input&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="nt">@click</span><span class="s">=&#34;copy(input)&#34;</span><span class="p">&gt;{{</span> <span class="na">copied</span> <span class="err">?</span> <span class="err">&#34;</span><span class="na">已複製</span><span class="err">&#34;</span> <span class="o">:</span> <span class="err">&#34;</span><span class="na">複製</span><span class="err">&#34;</span> <span class="p">}}&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="nt">v-else</span><span class="p">&gt;</span><span class="na">Your</span> <span class="na">browser</span> <span class="na">does</span> <span class="na">not</span> <span class="na">support</span> <span class="na">Clipboard</span> <span class="na">API</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595409639_2ccc3500ea_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="例子四usevmodel">例子(四)：useVModel</h3> <p>這是一個給<strong>經常封裝組件</strong>的小伙伴們的大好利器。</p> <p>先創建一個組件：<code>Test.vue</code></p> <h5 id="testvue">Test.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_name&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">age</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_age&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">sex</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_sex&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useVModel</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="nx">defineProps</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emit</span> <span class="o">=</span> <span class="nx">defineEmits</span><span class="p">([</span><span class="s1">&#39;update:name&#39;</span><span class="p">,</span> <span class="s1">&#39;update:age&#39;</span><span class="p">,</span> <span class="s1">&#39;update:sex&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_name</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;name&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_age</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_sex</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;sex&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著，在 index.vue 中使用它</p> <h5 id="indexvue">index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Test</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:name</span><span class="o">=</span><span class="s">&#34;formData.name&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:age</span><span class="o">=</span><span class="s">&#34;formData.age&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:sex</span><span class="o">=</span><span class="s">&#34;formData.sex&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;&lt;/</span><span class="nt">Test</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">formData</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-demi&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Test</span> <span class="nx">from</span> <span class="s1">&#39;./Test.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;lily&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="s1">&#39;8&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;boy&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52594662992_38c1bfd956_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>對於有組件封裝需求的朋友，這個方法強烈推薦！</p> <p>不用再為了單向數據流的組件封裝，而在組件內寫冗餘的代碼了。</p> <p>直接將 <code>useVModel</code> 返回的數據作為響應式對象用即可。</p> <hr> <h2 id="最後">最後</h2> <p>例子太多，就不再一一介紹了，但大家應該已經有了一個初步的概念，知道了此庫的作用，一言以蔽之：<strong>助力摸鱼，提前下班</strong>。</p> <p>它沒辦法做到你之前做不到的事情。</p> <p>它只能做到讓你更輕鬆的完成工作！願你今天也能按時下班。</p> <hr>https://blog.wayne-project.com/2022-12-30/why-use-hooks/Fri, 30 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-30/why-use-hooks/<img src="https://live.staticflickr.com/65535/52595598278_3dc955c418_o.png" alt="Featured image of post 淺談為什麼 Vue 和 React 都選擇了 Hooks？" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/7066951709678895141" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="一hooks什麼叫大勢所趨">一、hooks：什麼叫大勢所趨？</h2> <p>2019年年初，<code>react</code> 在 <code>16.8.x</code> 版本正式具備了 <code>hooks</code> 能力。</p> <p>2019年6月，尤雨溪在 <a class="link" href="https://github.com/vuejs/rfcs/pull/42" target="_blank" rel="noopener" >vue/github-issues</a> 裡提出了關於 <code>vue3 Composition API</code> 的提案。(vue hooks的基礎)</p> <p>在後續的 <code>react</code> 和 <code>vue3</code> 相關版本中，相關 <code>hooks</code> 能力都開始被更多人所接受。</p> <p>除此之外，<code>solid.js</code>、<code>preact</code> 等框架，也是開始選擇加入 <code>hooks</code> 大家庭。</p> <p><img src="https://live.staticflickr.com/65535/52595337539_162e880f36_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以預見，雖然目前仍然是 class Component 和 hooks api 並駕齊驅的場面，但未來幾年裡，hooks 極有可能取代 class Component 成為業內真正的主流。</p> <hr> <h2 id="二什麼是-hooks">二、什麼是 hooks？</h2> <h3 id="hooks-的定義">hooks 的定義</h3> <p>hooks 直譯是<code>&quot;鉤子&quot;</code>，它並不僅是 <code>react</code>，甚至不僅是前端界的專用術語，而是整個行業所熟知的用語。</p> <p>通常指：</p> <blockquote> <p>系統運行到某一時期時，會調用被註冊到該時機的回調函數。</p></blockquote> <p>比較常見的鉤子有：<code>windows</code> 系統的鉤子能監聽到系統的各種事件，瀏覽器提供的 <code>onload</code> 或 <code>addEventListener</code> 能註冊在瀏覽器各種時機被調用的方法。</p> <p>以上這些，都可以被稱一聲 <code>hook</code>。</p> <p>但是很顯然，在特定領域的特定話題下，<code>hooks</code> 這個詞被賦予了一些特殊的含義。</p> <p>在 <code>react@16.x</code> 之前，當我們談論 <code>hooks</code> 時，我們可能談論的是&quot;組件的生命週期&quot;。</p> <p>但是現在，<code>hooks</code> 則有了全新的含義。</p> <p>以 <code>react</code> 為例，<code>hooks</code> 是：</p> <blockquote> <p>一系列以 &ldquo;use&rdquo; 作為開頭的方法，它們提供了讓你可以完全避開 class 式寫法，在函數式組件中完成生命週期、狀態管理、邏輯複用等幾乎全部組件開發工作的能力。</p></blockquote> <p>簡化一下：</p> <blockquote> <p>一系列方法，提供了在<strong>函數式組件</strong>中完成開發工作的能力。</p></blockquote> <p>(記住這個關鍵詞：<code>函數式組件</code>)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useCallback</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 比如以上這幾個方法，就是最為典型的 Hooks </span></span></span></code></pre></td></tr></table> </div> </div><p>而在 <code>vue</code> 中，<code>hooks</code> 的定義可能更模糊，姑且總結一下：</p> <blockquote> <p>在 <code>vue</code> 組合式 API 裡，以 &ldquo;use&rdquo; 作為開頭的，一系列提供了<strong>組件複用</strong>、<strong>狀態管理</strong>&hellip;等開發能力的方法。</p></blockquote> <p>(關鍵詞：<code>組合式API</code>)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useSlots</span><span class="p">,</span> <span class="nx">useAttrs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useRouter</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-router&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 以上這些方法，也是 vue3 中相關的 Hook！ </span></span></span></code></pre></td></tr></table> </div> </div><p>如：<code>useSlots</code>、<code>useAttrs</code>、<code>useRouter</code> 等。</p> <p>但主觀來說，我認為 vue 組合式 API 其本身就是 &ldquo;vue hooks&rdquo; 的關鍵一環，起到了 <code>react hooks</code> 裡對<strong>生命週期</strong>、<strong>狀態管理</strong>的核心作用。(如 <code>onMounted</code>、<code>ref</code> 等等)。</p> <p><img src="https://live.staticflickr.com/65535/52594591157_e812d218e1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果按這個標準來看的話，<code>vue</code> 和 <code>react</code> 中 <code>hooks</code> 的定義，似乎都差不多。</p> <p>那麼為什麼要提到是以 <code>&quot;use&quot;</code> 作為開頭的方法呢？</p> <h3 id="命名規範和指導思想">命名規範和指導思想</h3> <p>通常來說，<code>hooks</code> 的命名都是以 <code>use</code> 作為開頭，這個規範也包括了那麼我們自定義的 <code>hooks</code>。</p> <p>為什麼？</p> <p>在 <code>react</code> <a class="link" href="https://zh-hant.reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener" >官方文檔</a>裡，對 hooks 的定義和使用提出了 <span class="focus">一個假設、兩個只在</span> 核心指導思想。</p> <p><img src="https://live.staticflickr.com/65535/52595337519_42d965b186_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><span class="focus">一個假設</span>：假設任何以「<code>use</code>」 開頭並緊跟著一個大寫字母的函數就是一個 <code>Hook</code>。</p> <p><span class="focus">第一個只在</span>：只在 <code>React</code> 函數組件中調用 <code>Hook</code>，而不在普通函數中調用 <code>Hook</code>。(<code>Eslint</code> 通過判斷一個方法是不是大坨峰命名來判斷它是否是 <code>React</code> 函數)</p> <p><span class="focus">第二個只在</span>：只在最頂層使用 <code>Hook</code>，而不要在循環、條件或嵌套函數中調用 <code>Hook</code>。</p> <p>因為約定的力量在於：我們不用細看實現，也能通過命名來了解一個它是什麼。</p> <p>以上 <span class="focus">一個假設、兩個只在</span> 總結自 react 官網：</p> <ul> <li><a class="link" href="https://zh-hant.reactjs.org/docs/hooks-rules.html" target="_blank" rel="noopener" >Hook 的規則</a></li> <li><a class="link" href="https://zh-hant.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce" target="_blank" rel="noopener" >Lint 規則究竟強制了些什麼？</a></li> </ul> <hr> <h2 id="三為什麼我們需要-hooks">三、為什麼我們需要 hooks？</h2> <h3 id="更好的狀態複用">更好的狀態複用</h3> <blockquote> <p>針對的就是你，mixin！</p></blockquote> <p>在 <code>class</code> 組件模式下，狀態邏輯的複用是一件困難的事情。</p> <p>假設有如下需求：</p> <blockquote> <p>當組件實例創建時，需要創建一個 <code>state</code> 屬性：<code>name</code>，並隨機給此 <code>name</code> 屬性附一個初始值。除此之外，還得提供一個 <code>setName</code> 方法。你可以在組件其他地方取得和修改此狀態屬性。<br> 更重要的是：這個邏輯要可以複用，在各種業務組件裡複用這個邏輯。</p></blockquote> <p>在擁有 <code>Hooks</code> 之前，我首先會想到的解決方案一定是 <code>mixin</code>。</p> <p>代碼如下：(此示例採用 vue2 mixin 寫法)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 混入文件：name-mixin.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">genRandomName</span><span class="p">()</span> <span class="c1">// 假裝它能生成隨機的名字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">组件</span><span class="err">：</span><span class="nx">my</span><span class="o">-</span><span class="nx">component</span><span class="p">.</span><span class="nx">vue</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;{{</span> <span class="nx">name</span> <span class="p">}}&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">nameMixin</span> <span class="nx">from</span> <span class="s1">&#39;./name-mixin&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">nameMixin</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 mixins，你可以直接獲得 nameMixin 中所定義的狀態、方法、生命周期中的事件...等 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setName</span><span class="p">(</span><span class="s1">&#39;Tom&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">3000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>粗略看來，<code>mixins</code> 似乎提供了非常不錯的複用能力，但是，react 官方文檔直接表明：</p> <p><img src="https://live.staticflickr.com/65535/52595501320_19a324aa37_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為什麼呢？</p> <p>因為 <code>mixins</code> 雖然提供了這種狀態複用的能力，但它的弊端實在太多了。</p> <h4 id="弊端一難以追溯的方法與屬性">弊端一：難以追溯的方法與屬性！</h4> <p>試想一下，如果出現這種代碼，你是否會懷疑人生：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">,</span> <span class="nx">d</span><span class="p">,</span> <span class="nx">e</span><span class="p">,</span> <span class="nx">f</span><span class="p">,</span> <span class="nx">g</span> <span class="p">],</span> <span class="c1">// 當然，這只是表示它混入了很多能力 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 嗯...這個 this.name 來自於誰？我難道要一個個混入看實現？ </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>又或者：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">a</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">b</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">c</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">c</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">d</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 你猜猜看，this.name 來自於誰？ </span></span></span><span class="line"><span class="cl"><span class="c1">// 求求你别再說了，我血壓已经上来了 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="弊端二覆蓋同名貴圈真亂">弊端二：覆蓋、同名？貴圈真亂！</h4> <p>當我同時想混入 <code>mixin-a.js</code> 和 <code>mixin-b.js</code> 以同時獲得它們能力的時候，不幸的事情發生了：</p> <p>由於這兩個 <code>mixin</code> 功能的開發者惺惺相惜，它們都定義了 <code>this.name</code> 作為屬性。</p> <p>這種時候，你會深深懷疑，<code>mixins</code> 究竟是不是一種科學的複用方式。</p> <h4 id="弊端三梅開二度代價很大">弊端三：梅開二度？代價很大！</h4> <p>仍然說上面的例子，如果我的需求發生了改變，我需要的不再是一個簡單的狀態 <code>name</code>，而是分別需要 <code>firstName</code> 和 <code>lastName</code>。</p> <p>此時 <code>name-mixin.js</code> 混入的能力就會非常尷尬，因為我無法兩次 <code>mixins</code> 同一個文件。</p> <p>當然，也是有解決方案的，如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 動態生成 mixin </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">genNameMixin</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">funcKey</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="o">:</span> <span class="nx">genRandomName</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">funcKey</span><span class="p">]</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">v</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="nx">genNameMixin</span><span class="p">(</span><span class="s1">&#39;firstName&#39;</span><span class="p">,</span> <span class="s1">&#39;setFirstName&#39;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">genNameMixin</span><span class="p">(</span><span class="s1">&#39;lastName&#39;</span><span class="p">,</span> <span class="s1">&#39;setLastName&#39;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>確實通過動態生成 <code>mixin</code> 完成了能力的複用，但這樣一來，無疑更加地增大了程序的複雜性，降低了可讀性。</p> <p>因此一種新的<strong>狀態邏輯複用</strong>，就變得極為迫切了——————它就是 <code>Hooks</code>！</p> <h4 id="hook-的狀態複用寫法">Hook 的狀態複用寫法：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 單個 name 的寫法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 梅開二度的寫法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">firstName</span><span class="p">,</span> <span class="nx">setName</span><span class="o">:</span> <span class="nx">setFirstName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">secondName</span><span class="p">,</span> <span class="nx">setName</span><span class="o">:</span> <span class="nx">setSecondName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><p>相比於 <code>mixins</code>，它們簡直太棒了！</p> <ol> <li>方法和屬性好追溯嗎？這可太好了，誰產生的，哪兒來的一目了然。</li> <li>會有重名、覆蓋問題嗎？完全沒有！內部的變量在閉包內，返回的變量支持定義別名。</li> <li>多次使用，沒開 N 度？你看上面的代碼塊內不就 &ldquo;梅開三度&rdquo; 了嗎？</li> </ol> <p>就衝 <span class="focus">狀態邏輯復用</span> 這個理由，Hooks 就已經香得我口水直流了。</p> <h3 id="代碼組織">代碼組織</h3> <blockquote> <p>熵減，宇宙哲學到編碼哲學。</p></blockquote> <p>項目、模塊、頁面、功能，如何高效而清晰地組織代碼，這一個看似簡單的命題就算寫幾本書也無法完全說清楚。</p> <p>但一個頁面中，N 件事情的代碼在一個組件內互相糾纏確實是在 <code>Hooks</code> 出現之前非常常見的一種狀態。</p> <p>那麼 <code>Hooks</code> 寫法在代碼組織上究竟能帶來怎樣的提升呢？</p> <p><img src="https://live.staticflickr.com/65535/52595337489_c4ff52d48d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>(假設上圖中每一種顏色就代碼一種高度相關的業務邏輯)</p> <p>無論是 <code>vue</code> 還是 <code>react</code>，通過 <code>Hooks</code> 寫法都能做到，將&quot;分散在各種聲明周期裡的代碼塊&quot;，通過 <code>Hooks</code> 的方式將相關的內容聚合到一起。</p> <p>這樣帶來的好處是顯而易見的：<span class="focus">高度聚合，可閱讀性提升</span>。伴隨而來的便是<span class="focus">效率提升，bug變少</span>。</p> <p>按照&quot;物理學&quot;裡的理論來說，這種代碼組織方式，就算是&quot;熵減&quot;了。</p> <h3 id="比-class-組件更容易理解">比 class 組件更容易理解</h3> <blockquote> <p>尤其是 <strong>this</strong>。</p></blockquote> <p>在 <code>react</code> 的 <code>class</code> 寫法中，隨處可見各種各樣的 <code>.bind(this)</code>。(甚至官方文檔裡也有專門的章節描述了&quot;<a class="link" href="https://zh-hant.reactjs.org/docs/faq-functions.html#why-is-binding-necessary-at-all" target="_blank" rel="noopener" >為什麼綁定是必要的？</a>&ldquo;這一問題)</p> <p><code>vue</code> 玩家別笑，<code>computed: { a: () =&gt; { this } }</code> 裡的 <code>this</code> 也是 <code>undefined</code>。</p> <p>很顯然，綁定雖然&quot;必要&rdquo;，但並不是&quot;優點&quot;，反而是&quot;故障高發&quot;地段。</p> <p>但在 <code>Hooks</code> 寫法中，你就完全不必擔心 <code>this</code> 的問題了。</p> <p>因為：</p> <blockquote> <p>本來無一物，何處惹塵埃。</p></blockquote> <p><code>Hooks</code> 寫法直接告別了 <code>this</code>，從&quot;函數&quot;來，到&quot;函數&quot;去。</p> <p>媽媽再也不用擔心我忘記寫 bind 了。</p> <h3 id="友好的漸進式">友好的漸進式</h3> <blockquote> <p>隨風潛入夜，潤物細無聲。</p></blockquote> <p>漸進式的含義是：你可以一點點深入使用。</p> <p>無論是 <code>vue</code> 還是 <code>react</code>，都只是提供了 <code>Hooks</code> API，並將它們的優劣利弊擺在了那裡。並沒有通過無法接受的 <code>break change</code> 來強迫你必須使用 <code>Hooks</code> 去改寫之前的 <code>class</code> 組件。</p> <p>你依然可以在項目裡一邊寫 <code>class</code> 組件，一邊寫 <code>Hooks</code> 組件，在項目的演進和開發過程中，這是一件沒有痛感，卻悄無聲息改變著一切的事情。</p> <p>但是事情發展的趨勢卻很明顯，越來越多的人加入了 <code>Hooks</code> 和 <code>组合式 API</code> 的大軍。</p> <hr> <h2 id="如何開始玩-hooks">如何開始玩 hooks？</h2> <h3 id="環境和版本">環境和版本</h3> <p>在 <code>react</code> 項目中，<code>react</code> 的版本需要高於 <code>16.8.0</code>。</p> <p>而在 <code>vue</code> 項目中，<code>vue3.x</code> 是最好的選擇，但 <code>vue2.6+</code> 配合 <a class="link" href="https://github.com/vuejs/composition-api" target="_blank" rel="noopener" >@vue/composition-api</a>，也可以開始享受 &ldquo;組合式 API&rdquo; 的快樂。</p> <h3 id="react-的-hooks-寫法">react 的 Hooks 寫法</h3> <p>因為 <code>react</code> <code>Hooks</code> 僅支持 &ldquo;函數式&rdquo; 組件，因此需要創建一個函數式組件 <code>my-component.js</code>。</p> <h5 id="my-componentjs">my-component.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useMemo</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;React&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useState 可以創建一個 狀態屬性 和一個 賦值方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useEffect 可以對副作用進行處理 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span> <span class="nx">name</span> <span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useMemo 能生成一個依賴 name 的變量 message </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`hello, my name is </span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">name</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span> <span class="nx">message</span> <span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>細節可參考 <a class="link" href="https://zh-hant.reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener" >react 官方網站</a></p> <h3 id="vue-的-hooks-寫法">vue 的 Hooks 寫法</h3> <p><code>vue</code> 的 <code>Hooks</code> 寫法依賴於组合式API，因此本例採用 <code>&lt;script setup&gt;</code> 來寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">message</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 定義了一個 ref 對象 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 定義了一個依賴 name.value 的計算屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`hello, my name is </span><span class="si">${</span><span class="nx">name</span><span class="p">.</span><span class="nx">value</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>很明顯，vue <code>組合式API</code> 裡完成 <code>useState</code> 和 <code>useMemo</code> 相關工作的 API 並沒有通過 <code>useXxx</code> 來命名，而是遵從了 <code>Vue</code> 一脈相承而來的 <code>ref</code> 和 <code>computed</code>。</p> <p>雖然不符合 <code>react Hook</code> 定義的 <code>Hook</code> 約定，但 <code>vue</code> 的 <code>api</code> 不按照 <code>react</code> 的約定好像也並沒有什麼不妥。</p> <p><a class="link" href="https://cn.vuejs.org/api/#composition-api" target="_blank" rel="noopener" >參考網址</a></p> <hr> <h2 id="五開始第一個自定義-hook">五、開始第一個自定義 hook</h2> <p>除了官方提供的 <code>Hooks Api</code>，<code>Hooks</code> 的另外一個重要特質，就是可以自己進行 &ldquo;自定義 Hooks&rdquo; 的定義，從而完成<strong>狀態邏輯</strong>的複用。</p> <p>開源社區也都有很多不錯的基於 <code>Hooks</code> 的封裝，比如 <a class="link" href="https://ahooks.js.org/zh-CN" target="_blank" rel="noopener" >ahooks</a>，又比如 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a></p> <p><img src="https://live.staticflickr.com/65535/52595598223_119a5f0e21_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>那麼，我們應該怎麼開始撰寫 &ldquo;自定義 Hooks&rdquo; 呢？往下看吧！</p> <h3 id="react-玩家看這裡">react 玩家看這裡</h3> <p><a class="link" href="https://zh-hant.reactjs.org/" target="_blank" rel="noopener" >react 官方網站</a>就專門有一個章節講述 &ldquo;<a class="link" href="https://zh-hant.reactjs.org/docs/hooks-custom.html" target="_blank" rel="noopener" >自定義 Hook</a>&quot;。</p> <p>這裡，我們扔用文章開頭那個 <code>useName</code> 的需求為例，希望達到效果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// 隨機生成一個狀態屬性 name，它有一個隨機名作為初始值 </span></span></span><span class="line"><span class="cl"><span class="c1">// 並且提供了一個可隨時更新該值的方法 setName </span></span></span></code></pre></td></tr></table> </div> </div><p>如果我們要實現上面效果，我們該怎麼寫代碼呢？</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useName</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 這個 useMemo 很關鍵 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">randomName</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">genRandomName</span><span class="p">(),</span> <span class="p">[]);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useState</span><span class="p">(</span><span class="nx">randomName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>忍不住要再次感嘆一次，和 <code>mixins</code> 相比，它不僅使用起來更棒，就連定義起來也那麼簡單。</p> <p>可能有朋友會好奇，為什麼不直接這樣寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useState</span><span class="p">(</span><span class="nx">genRandomName</span><span class="p">())</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為這樣寫是不對的，每次使用該 <code>Hook</code> 的函數組件被渲染一次時，<code>genRandom()</code> 方法就會被執行一次，雖然不影響 <code>name</code> 的值，但存在性能消耗，甚至產生其他 bug。</p> <p>為此，我寫了一個能複現錯誤的 demo，有興趣的朋友可以驗證：</p> <iframe src="https://codesandbox.io/embed/naughty-bash-znffif?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="naughty-bash-znffif" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe> <blockquote> <p>可以通過 React.useState(() =&gt; randomName()) 傳參來避免重複執行，這樣就不需要 useMemo 了！</p></blockquote> <h3 id="vue-玩家看這裡">vue 玩家看這裡</h3> <p><a class="link" href="https://cn.vuejs.org/" target="_blank" rel="noopener" >vue3 官網</a> 沒有關於 自定義 Hook 的玩法介紹，但實踐起來也並不困難。</p> <p>目標也定位實現一個 <code>useName</code> 方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useName</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nx">genRandomName</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">setName</span> <span class="o">=</span> <span class="p">(</span><span class="nx">v</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">v</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="vue-和-react-自定義-hook-的差異">vue 和 react 自定義 Hook 的差異</h3> <ul> <li>相似點：總體思路是一致的都遵照著 <strong>定義狀態數據</strong>、<strong>操作狀態數據</strong>、<strong>隱藏細節</strong> 作為核心思路。</li> <li>差異點：组合式 API 和 React 函数组件，有著本質差異： <ul> <li>Vue3 的組件裡，setup 是作為一個早於 &ldquo;created&rdquo; 的生命週期存在的，無論如何，在一個組件的渲染過程中只會進入一次。</li> <li>React 函数组件則完全不同，如果沒有被 memorized，它們可能會被不停地觸發，不停地進入並執行方法，因此需要開銷的心智相比於 Vue 其實是更多的。</li> </ul> </li> </ul> <hr>https://blog.wayne-project.com/2022-11-10/vue-2to3-global-component/Thu, 10 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-10/vue-2to3-global-component/<img src="https://live.staticflickr.com/65535/52489820266_b81b766288_o.png" alt="Featured image of post Vue 2 升級 Vue 3 之全域元件註冊問題" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://blog.darkthread.net/blog/vue3-reg-com/" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="前情提要">前情提要</h2> <p>在小專案裡我主要用 Vue.js 來處理 <strong>MVVM</strong>，用 <code>&lt;script&gt;</code> 載入 vue.js，寫幾行 JavaScript 搞定，走不寫模組，不用 TypeScript，免編譯打包的「<strong>輕前端</strong>」模式，但常用邏輯還是會寫成元件(Component)方便共用。</p> <p>在 Vue 2 時代，我習慣在網頁共用的 <code>.js</code> 裡使用 <code>Vue.component(&quot;my-component&quot;, ...)</code> 註冊元件，註冊一次，各網頁不需宣告就能使用元件。</p> <p>正式擺脫 IE 後，終於不用再死守 Vue 2，試著將一個小專案升級到 Vue 3，遇到小麻煩。</p> <p>Vue 3 改變了元件<strong>註冊</strong>方式，<strong>不再提供全域註冊</strong>，必須先 <code>Vue.createApp()</code> 建立實體，<code>app.component(&quot;my-component&quot;, ...)</code> 註冊或用 components 屬性引用才能使用元件。參考：<a class="link" href="https://book.vue.tw/CH2/2-1-components.html#%E5%85%83%E4%BB%B6%E7%9A%84%E5%AE%A3%E5%91%8A%E8%88%87%E8%A8%BB%E5%86%8A" target="_blank" rel="noopener" >重新認識 Vue.js - 元件的宣告與註冊</a></p> <p>全域元件改成區域元件可減少程式間互相干擾，在軟體架構來說是正確的方向，但對簡單應用來說(例如：程式很單純，全域元件打架機率趨於零的場合)，這番調整讓元件註冊變得繁瑣。</p> <p>用個範例來說明。</p> <hr> <h2 id="vue-2-註冊多個元件">Vue 2 註冊多個元件</h2> <p>原本 Vue 2 做法是在 <strong>my-components-vue2.js</strong> 中註冊多個元件：</p> <h5 id="my-components-vue2js">my-components-vue2.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;date-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;time-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;host-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此，數十支 HTML 只需載入 my-components-vue2.js 便能在網頁使用 <code>&lt;date-tag&gt;</code>、<code>&lt;time-tag&gt;</code> 插入元件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue2.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="升級-vue-3-之後">升級 Vue 3 之後</h2> <p>升級 Vue 3 之後，元件的 js 跟網頁都要做一些修改：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">dateTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">timeTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">hostTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 app 寫法改為 <code>Vue.createApp</code>，並在宣告中透過 <code>components</code> 列舉要註冊的物件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/vue@3&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue3-upgrade.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Vue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;date-tag&#39;</span><span class="o">:</span> <span class="nx">dateTag</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;time-tag&#39;</span><span class="o">:</span> <span class="nx">timeTag</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;host-tag&#39;</span><span class="o">:</span> <span class="nx">hostTag</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 若元件物件名稱與標籤相符，可簡寫成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// components: { dateTag, timeTag, hostTag } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>假設我有 30 個網頁，30 個 app 都要加 <code>components: { dateTag, timeTag, hostTag }</code>，未來若新增其他元件，所有 <code>components</code> 列舉都要改，這是標準的「<strong>Copy &amp; Paste 負面教材</strong>」呀，一想就覺得很不 OK 呀。</p> <p>這種情境，就是<code>套件</code>(<code>Plugin</code>，也有人翻成<strong>插件、外掛</strong>)上場的時刻。最簡單的套件寫法是寫一個 function，接收 app 及 options 參數，內部呼叫 <code>app.component(...)</code> 逐一註冊元件，options 則是自訂參數，可用來決定要註冊哪些元件或變更元件設定值，提高運用彈性。以下是簡單示範：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">myComponentsPlugin</span><span class="p">(</span><span class="nx">app</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;date-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;time-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;host-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此，呼叫端可簡化為 <code>.use(myComponentsPlugin)</code>，不需把所有元件列出來，未來要新增元件，修改 <code>my-components-vue3.js</code> 即可，保留原先全域元件的簡單方便：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/vue@3&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue3.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Vue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">//... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}).</span><span class="nx">use</span><span class="p">(</span><span class="nx">myComponentsPlugin</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52489336212_2bd7bccc6c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr>https://blog.wayne-project.com/2022-08-12/vue-interview-note/Fri, 12 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-12/vue-interview-note/<img src="https://live.staticflickr.com/65535/52282698225_df2b066743_o.jpg" alt="Featured image of post Vue 基本概念與常見面試題筆記" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://blog.csdn.net/kjssjj12/article/details/109726345" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="基礎篇">基礎篇</h2> <h3 id="1-對-spa-單頁的理解優缺點是什麼">1. 對 SPA 單頁⾯的理解，優缺點是什麼？</h3> <ul> <li>SPA（ single-page application ）僅在 Web 頁⾯初始化時加載相應的 HTML、JavaScript 和 CSS。 ⼀旦頁⾯加載完成，SPA 不會因為⽤戶的操作⽽進⾏⻚⾯的重新加載或跳轉；取⽽代之的是利⽤路由機制實現 HTML 內容的變換，UI 與⽤戶的交互，避免頁⾯的重新加載。</li> </ul> <h5 id="優點">優點：</h5> <ol> <li>⽤戶體驗好、快，內容的改變不需要重新加載整個頁⾯，避免了不必要的跳轉和重複渲染</li> <li>SPA 相對對服務器壓⼒⼩</li> <li>前後端職責分離，架構清晰，前端進⾏交互邏輯，後端負責數據處理</li> </ol> <h5 id="缺點">缺點：</h5> <ol> <li>⾸屏（初次）加載慢：為實現單⻚ Web 應⽤功能及顯示效果，需要在加載⻚⾯的時候將JavaScript、CSS 統⼀加載，部分⻚⾯按需加載</li> <li>不利於 SEO：由於所有的內容都在⼀個⻚⾯中動態替換顯示，所以在 SEO 上其有著天然的弱勢</li> </ol> <h3 id="2-new-vue-發生了什麼">2. new Vue() 發生了什麼？</h3> <ol> <li>結論：new Vue()是創建Vue實例，它內部執行了根實例的初始化過程</li> <li>具體包括以下操作： <ol> <li>選項合併，children, refs, slot, createElement等实例属性的方法初始化</li> <li>自定義事件處理</li> <li>數據響應式處理</li> <li>生命週期鉤子調用 (beforecreate created)</li> <li>可能的掛載</li> </ol> </li> <li>總結：new Vue()創建了根實例並準備好數據和方法，未來執行掛載時，此過程還會遞歸的應用於它的子組件上，最終形成一個有緊密關係的組件實例樹</li> </ol> <h3 id="3-vueuse是幹什麼的原理是什麼">3. Vue.use是幹什麼的？原理是什麼？</h3> <ul> <li>vue.use 是用來使用插件的，我們可以在插件中擴展全局組件、指令、原型方法等。</li> </ul> <ol> <li>檢查插件是否註冊，若已註冊，則直接跳出</li> <li>處理入參，將第一個參數之後的參數歸集，並在首部塞入 this 上下文</li> <li>執行註冊方法，調用定義好的 install 方法，傳入處理的參數，若沒有 install 方法並且插件本身為 function 則直接進行註冊 <ol> <li>插件不能重複的加載，install 方法的第一個參數是vue的構造函數，其他參數是Vue.set中除了第一個參數的其他參數； 代碼：args.unshift(this)</li> <li>調用插件的install 方法 代碼：typeof plugin.install === &ldquo;function&rdquo;</li> <li>插件本身是一個函數，直接讓函數執行。代碼：plugin.apply(null, args)</li> <li>緩存插件。代碼：installedPlugins.push(plugin)</li> </ol> </li> </ol> <h3 id="4-請說一下響應式數據的理解">4. 請說一下響應式數據的理解？</h3> <ul> <li>根據數據類型來做不同處理，數組和對像類型當值變化時如何劫持。</li> </ul> <ol> <li>對象內部通過defineReactive方法，使用 Object.defineProperty() 監聽數據屬性的 get 來進行數據依賴收集，再通過 set 來完成數據更新的派發</li> <li>數組則通過重寫數組方法來實現的。擴展它的 7 個變更⽅法，通過監聽這些方法可以做到依賴收集和派發更新</li> </ol> <h5 id="內部依賴收集是怎麼做到的每個屬性都擁有自己的dep屬性存放他所依賴的-watcher當屬性變化後會通知自己對應的-watcher去更新">內部依賴收集是怎麼做到的？每個屬性都擁有自己的dep屬性，存放他所依賴的 watcher，當屬性變化後會通知自己對應的 watcher去更新</h5> <blockquote> <p>響應式流程：</p> <ol> <li>defineReactive 把數據定義成響應式的</li> <li>給屬性增加一個 dep，用來收集對應的那些watcher</li> <li>等數據變化進行更新<br> dep.depend() // get 取值：進行依賴收集<br> dep.notify() // set 設置時：通知視圖更新</li> </ol></blockquote> <blockquote> <ol> <li>對象層級過深，性能就會差</li> <li>不需要響應數據的內容不要放在data中</li> <li>object.freeze() 可以凍結數據</li> </ol></blockquote> <h3 id="5-vue如何檢測數組變化">5. Vue如何檢測數組變化？</h3> <ul> <li>數組考慮性能原因沒有用defineProperty對數組的每一項進行攔截，而是選擇重寫數組 方法以進行重寫。當數組調用到這 7 個方法的時候，執行 ob.dep.notify() 進行派發通知 Watcher 更新</li> <li>在Vue中修改數組的索引和長度是無法監控到的。需要通過以下7種變異方法修改數組才會觸發數組對應的wacther進行更新。數組中如果是對像數據類型也會進行遞歸劫持</li> </ul> <blockquote> <p>那如果想要改索引更新數據怎麼辦？</p></blockquote> <ul> <li>可以通過Vue.set()來進行處理 ➞ 核心內部用的是 splice 方法</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 取出原型方法； </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">arrayProto</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 拷貝原型方法； </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kr">const</span> <span class="nx">arrayMethods</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">arrayProto</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// 重寫數組方法； </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">def</span><span class="p">(</span><span class="nx">arrayMethods</span><span class="p">,</span> <span class="nx">method</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">mutator</span> <span class="p">(</span><span class="err">…</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">ob</span><span class="p">.</span><span class="nx">dep</span><span class="p">.</span><span class="nx">notify</span><span class="p">()</span> <span class="c1">// 調用方法時更新視圖 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="6-vueset-方法是如何實現的">6. Vue.set 方法是如何實現的？</h3> <ul> <li>為什麼$set可以觸發更新，我們給對象和數組本身都增加了dep屬性，當給對像新增不存在的屬性則觸發對象依賴的watcher去更新，當修改數組索引時我們調用數組本身的splice方法去更新數組</li> </ul> <blockquote> <p>官方定義 Vue.set(object, key, value)</p></blockquote> <h3 id="7-vue中模板編譯原理">7. Vue中模板編譯原理？</h3> <ul> <li>如何將template轉換成render函數(這裡要注意的是我們在開發時盡量不要使用template，因為將template轉化成render方法需要在運行時進行編譯操作會有性能損耗，同時引用帶有complier包的vue體積也會變大) 默認.vue文件中的 template處理是通過vue-loader 來進行處理的並不是通過運行時的編譯</li> </ul> <ol> <li>將 template 模板轉換成 ast 語法樹 - parserHTML</li> <li>對靜態語法做靜態標記 - markUp</li> <li>重新生成代碼 - codeGen</li> </ol> <blockquote> <p>模板引擎的實現原理就是new Function + with來進行實現的</p></blockquote> <h4 id="vue-loader中处理template属性主要靠的是-vue-template-compiler">vue-loader中处理template属性主要靠的是 vue-template-compiler</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// vue-loader </span></span></span><span class="line"><span class="cl"><span class="c1">// template =&gt; ast =&gt; codegen =&gt; with+function 實現生成render方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="p">{</span><span class="nx">ast</span><span class="p">,</span> <span class="nx">render</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">VueTemplateCompiler</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{{</span><span class="nx">aaa</span><span class="p">}}</span><span class="o">&lt;</span><span class="err">/div&gt;)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ast</span><span class="p">,</span> <span class="nx">render</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 模板引擎的實現原理 with + new Function </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="nx">render</span><span class="p">).</span><span class="nx">tostring</span><span class="p">())</span> </span></span><span class="line"><span class="cl"><span class="c1">// render方法執行完畢後生成的是虛擬 dom </span></span></span><span class="line"><span class="cl"><span class="c1">// with(this){return _c(‘div’,[_s(aaa)])} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 代碼生成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">ast</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">template</span><span class="p">.</span><span class="nx">trim</span><span class="p">(),</span> <span class="nx">options</span><span class="p">)</span> <span class="c1">// 將代碼解析成ast語法樹 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">optimize</span> <span class="o">!==</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"><span class="nx">optimize</span><span class="p">(</span><span class="nx">ast</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="c1">// 優化代碼 標記靜態點 標記樹 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">code</span> <span class="o">=</span> <span class="nx">generate</span><span class="p">(</span><span class="nx">ast</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="c1">// 生成代碼 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="8-proxy-與-objectdefineproperty-優劣對比">8. Proxy 與 Object.defineProperty 優劣對比</h3> <ul> <li>Proxy 的優勢如下</li> </ul> <ol> <li>Proxy 可以直接監聽對象而非屬性</li> <li>Proxy 可以直接監聽數組的變化</li> <li>Proxy 有多達 13 種攔截方法,不限於 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的</li> <li>Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改</li> <li>Proxy 作為新標準將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標準的性能紅利</li> </ol> <ul> <li>Object.defineProperty 的優勢如下</li> </ul> <ol> <li>兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題，而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫</li> </ol> <h3 id="9-vue3x響應式數據原理">9. Vue3.x響應式數據原理</h3> <ul> <li>Vue3.x改用Proxy替代Object.defineProperty。因為Proxy可以直接監聽對象和數組的變化，並且有多達13種攔截方法。並且作為新標準將受到瀏覽器廠商重點持續的性能優化</li> </ul> <blockquote> <p>Proxy只會代理對象的第一層，那麼Vue3又是怎樣處理這個問題的呢？</p></blockquote> <ul> <li>判斷當前Reflect.get的返回值是否為Object，如果是則再通過reactive方法做代理， 這樣就實現了深度觀測</li> </ul> <blockquote> <p>監測數組的時候可能觸發多次get/set，那麼如何防止觸發多次呢？</p></blockquote> <ul> <li>我們可以判斷key是否為當前被代理對象target自身屬性，也可以判斷舊值與新值是否相等，只有滿足以上兩個條件之一時，才有可能執行trigger</li> </ul> <hr> <h2 id="生命周期篇">生命周期篇</h2> <h3 id="vue的生命週期方法有哪些一般在哪一步發起請求及原因">Vue的生命週期方法有哪些？一般在哪一步發起請求及原因</h3> <ul> <li>總共分為8個階段：創建前/後，載入前/後，更新前/後，銷毀前/後</li> </ul> <ol> <li> <p>創建前/後：</p> <ol> <li> <p>beforeCreate階段：vue實例的掛載元素el和數據對象data都為undefined，還未初始化。<br> 說明：在當前階段data、methods、computed以及watch上的數據和方法都不能被訪問。</p> </li> <li> <p>created階段：vue實例的數據對象data有了，el還沒有。<br> 說明：可以做一些初始數據的獲取，在當前階段無法與Dom進行交互，如果非要想，可以通過vm.$nextTick來訪問Dom。</p> </li> </ol> </li> <li> <p>載入前/後：</p> <ol> <li> <p>beforeMount階段：vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點。<br> 說明：當前階段虛擬Dom已經創建完成，即將開始渲染。在此時也可以對數據進行更改，不會觸發updated。</p> </li> <li> <p>mounted階段：vue實例掛載完成，data.message成功渲染。<br> 說明：在當前階段，真實的Dom掛載完畢，數據完成雙向綁定，可以訪問到Dom節點，使用$refs屬性對Dom進行操作。</p> </li> </ol> </li> <li> <p>更新前/後：</p> <ol> <li> <p>beforeUpdate階段：響應式數據更新時調用，發生在虛擬DOM打補丁之前，適合在更新之前訪問現有的DOM，比如手動移除已添加的事件監聽器。<br> 說明：可以在當前階段進行更改數據，不會造成重渲染。</p> </li> <li> <p>updated階段：虛擬DOM重新渲染和打補丁之後調用，組成新的DOM已經更新，避免在這個鉤子函數中操作數據，防止死循環。<br> 說明：當前階段組件Dom已完成更新。要注意的是避免在此期間更改數據，因為這可能會導致無限循環的更新。</p> </li> </ol> </li> <li> <p>銷毀前/後：</p> <ol> <li> <p>beforeDestroy階段：實例銷毀前調用，實例還可以用，this能獲取到實例，常用於銷毀定時器，解綁事件。<br> 說明：在當前階段實例完全可以被使用，我們可以在這時進行善後收尾工作，比如清除計時器。</p> </li> <li> <p>destroyed階段：實例銷毀後調用，調用後所有事件監聽器會被移除，所有的子實例都會被銷毀。<br> 說明：當前階段組件已被拆解，數據綁定被卸除，監聽被移出，子實例也統統被銷毀。</p> </li> </ol> </li> </ol> <blockquote> <p>補充：<br> 第一次頁面加載時會觸發：beforeCreate, created, beforeMount, mounted。</p> <ol> <li>created 實例已經創建完成，因為它是最早觸發的原因可以進行一些數據，資源的請求。 (服務器渲染支持created方法)</li> <li>mounted 實例已經掛載完成，可以進行一些DOM操作。 (接口請求)</li> </ol></blockquote> <h3 id="生命週期鉤子是如何實現的">生命週期鉤子是如何實現的？</h3> <ul> <li>Vue的生命週期鉤子就是回調函數而已，當創建組件實例的過程中會調用對應的鉤子方法。</li> </ul> <blockquote> <p>補充：<br> 內部主要是使用callHook方法來調用對應的方法。核心是一個發布訂閱模式，將鉤子訂閱好(內部採用數組的方式存儲)，在對應的階段進行發布。</p></blockquote> <h3 id="vue-的父組件和子組件生命週期鉤子執行順序">Vue 的父組件和子組件生命週期鉤子執行順序</h3> <ul> <li>第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子。</li> </ul> <h4 id="渲染過程">渲染過程：</h4> <blockquote> <p>父組件掛載完成一定是等子組件都掛載完成後，才算是父組件掛載完，所以父組件的mounted在子組件mouted之後</p></blockquote> <blockquote> <p>父beforeCreate ➡ 父created ➡ 父beforeMount ➡ 子beforeCreate ➡ 子created ➡ 子beforeMount ➡ 子mounted ➡ 父mounted</p></blockquote> <h4 id="子組件更新過程">子組件更新過程：</h4> <blockquote> <p>影響到父組件：父beforeUpdate -&gt; 子beforeUpdate-&gt;子updated -&gt; 父updted</p></blockquote> <blockquote> <p>不影響父組件：子beforeUpdate -&gt; 子updated</p></blockquote> <h4 id="父組件更新過程">父組件更新過程：</h4> <blockquote> <p>影響到子組件：父beforeUpdate -&gt; 子beforeUpdate-&gt;子updated -&gt; 父updted</p></blockquote> <blockquote> <p>不影響子組件：父beforeUpdate -&gt; 父updated</p></blockquote> <h4 id="銷毀過程">銷毀過程：</h4> <blockquote> <p>父beforeDestroy -&gt; 子beforeDestroy -&gt; 子destroyed -&gt; 父destroyed</p></blockquote> <p><em><strong>重要：父組件等待子組件完成後，才會執行自己對應完成的鉤子。</strong></em></p> <hr> <h2 id="組件通信篇">組件通信篇</h2> <h3 id="vue中的組件的data-為什麼是一個函數">Vue中的組件的data 為什麼是一個函數？</h3> <ul> <li>每次使用組件時都會對組件進行實例化操作，並且調用data函數返回一個對像作為組件的數據源。這樣可以保證多個組件間數據互不影響。</li> <li>如果data是對象的話，對象屬於引用類型，會影響到所有的實例。所以為了保證組件不同的實例之間data不衝突，data必須是一個函數。</li> </ul> <h3 id="vue-組件間通信有哪幾種方式">Vue 組件間通信有哪幾種方式？</h3> <ul> <li>Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用於哪類組件間通信。</li> </ul> <ol> <li> <p>props / $emit 適用父子組件通信</p> <ol> <li>這種方法是 Vue 組件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。</li> </ol> </li> <li> <p>ref 與 $parent / children适用父子组件通信</p> <ol> <li>ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子組件上，引用就指向組件實例</li> <li>parent / $children：訪問父 / 子實例</li> </ol> </li> <li> <p>EventBus （$emit / $on） 適用於 父子、隔代、兄弟組件通信</p> <ol> <li>這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通信，包括父子、隔代、兄弟組件。</li> </ol> </li> <li> <p>attrs / listeners 適用於隔代組件通信</p> <ol> <li>attrs：包含了父作用域中不被prop所識別(且獲取)的特性綁定(class和style除外)。當一個組件沒有聲明任何prop時，這裡會包含所有父作用域的綁定(class和style除外)，並且可以通過v−bind=&ldquo;attrs&rdquo; 傳入內部組件。通常配合 inheritAttrs 選項一起使用。</li> <li>listeners：包含了父作用域中的(不含.native修飾器的) v-on事件監聽器。它可以通過v−on=&ldquo;listeners&rdquo; 傳入內部組件</li> </ol> </li> <li> <p>provide / inject 適用於隔代組件通信</p> <ol> <li>祖先組件中通過 provider 來提供變量，然後在子孫組件中通過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關係。</li> </ol> </li> <li> <p><span class="focus">Vuex 適用於 父子、隔代、兄弟組件通信</span></p> <ol> <li>Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。</li> <li>&ldquo;store&rdquo; 基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。</li> </ol> </li> </ol> <h3 id="組件中寫-name選項有哪些好處及作用">組件中寫 name選項有哪些好處及作用？</h3> <ol> <li>可以通過名字找到對應的組件（遞歸組件）</li> <li>可以通過name屬性實現緩存功能 (keep-alive)</li> <li>可以通過name來識別組件（跨級組件通信時非常重要）</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Sub</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">componentd</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">Sub</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="keep-alive平時在哪裡使用原理是">keep-alive平時在哪裡使用？原理是？</h3> <ul> <li>keep-alive 主要是組件緩存，採用的是LRU算法。最近最久未使用法。</li> <li>常用的兩個屬性include/exclude，允許組件有條件的進行緩存。</li> <li>兩個生命週期activated/deactivated，用來得知當前組件是否處於活躍狀態。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">abstract</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 抽象組件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">props</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">include</span><span class="o">:</span> <span class="nx">patternTypes</span><span class="p">,</span> <span class="c1">// 要緩存的有哪些 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">exclude</span><span class="o">:</span> <span class="nx">patternTypes</span><span class="p">,</span> <span class="c1">// 要排除的有哪些 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">max</span><span class="o">:</span> <span class="p">[</span><span class="nb">String</span><span class="p">,</span> <span class="nb">Number</span><span class="p">]</span> <span class="c1">//最大緩存數量 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">if</span><span class="p">(</span><span class="nx">cache</span><span class="p">[</span><span class="nx">key</span><span class="p">])</span> <span class="p">{</span> <span class="c1">// 通過key 找到緩存，獲取實例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">vnode</span><span class="p">.</span><span class="nx">componentInstance</span> <span class="o">=</span> <span class="nx">cache</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">componentInstance</span> </span></span><span class="line"><span class="cl"> <span class="nx">remove</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="c1">//將key刪除掉 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">keys</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="c1">// 放到末尾 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">cache</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">vnode</span> <span class="c1">// 沒有緩存過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">keys</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="c1">//存儲key </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">&amp;&amp;</span> <span class="nx">keys</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// 如果超過最大緩存數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 刪除最早緩存的 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">pruneCacheEntry</span><span class="p">(</span><span class="nx">cache</span><span class="p">,</span> <span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">keys</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_vnode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">vnode</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">keepAlive</span> <span class="o">=</span> <span class="kc">true</span> <span class="c1">// 標記走了緩存 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="vueminxin的使用場景和原理">Vue.minxin的使用場景和原理？</h3> <ul> <li>Vue.mixin的作用就是抽離公共的業務邏輯，原理類似&quot;對象的繼承&quot;，當組件初始化時會調用 mergeOptions方法進行合併，採用策略模式針對不同的屬性進行合併，如果混入的數據和本身組件中的數據衝突，會採用&quot;就近原則&quot;以組件的數據為準。</li> </ul> <blockquote> <p>補充：<br> mixin中有很多缺陷&quot;命名衝突問題&quot;、&ldquo;依賴問題&rdquo;、&ldquo;數據來源問題&rdquo;，這裡強調一下mixin的數據是不會被共享的。</p></blockquote> <hr> <h2 id="路由篇">路由篇</h2> <h3 id="vue-router有幾種鉤子函數具體是什麼及執行流程是怎樣的">Vue-router有幾種鉤子函數？具體是什麼及執行流程是怎樣的？</h3> <ul> <li>路由鉤子的執行流程，鉤子函數種類有：全局守衛、路由守衛、組件守衛。</li> </ul> <h4 id="完整的導航解析流程">完整的導航解析流程</h4> <ol> <li>導航被觸發</li> <li>在失活的組件裡調用beforeRouteLeave守衛</li> <li>調用全局beforeEach守衛</li> <li>在復用組件裡調用beforeRouteUpdate守衛</li> <li>調用路由配置裡的beforeEnter守衛</li> <li>解析異步路由組件</li> <li>在被激活的組件裡調用beforeRouteEnter守衛</li> <li>調用全局beforeResolve守衛</li> <li>導航被確認</li> <li>調用全局的afterEach鉤子</li> <li>DOM更新</li> <li>用創建好的實例調用beforeRouteEnter守衛中傳給next的回調函數</li> </ol> <h3 id="vue-router-兩種模式的區別">vue-router 兩種模式的區別？</h3> <ul> <li>vue-router 有 3 種路由模式：<code>hash</code>、<code>history</code>、<code>abstract</code>。</li> </ul> <ol> <li> <p>hash模式：hash + hashChange</p> <p>特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。通過監聽 hash（#）的變化來執行js代碼 從而實現 頁面的改變。</p> <p>核心代码：</p> </li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="err">‘</span><span class="nx">hashchange</span><span class="err">‘</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">self</span><span class="p">.</span><span class="nx">urlChange</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li> <p>history模式：historyApi + popState</p> <p>HTML5推出的history API，由pushState()記錄操作歷史，監聽popstate事件來監聽到狀態變更。</p> <p>因為只要刷新這個url(<code>www.ff.ff/jjkj/fdfd/fdf/fd</code>)就會請求服務器，然而服務器上根本沒有這個資源，所以就會報404，解決方案就配置一下服務器端。</p> <p>說明：<br> 1. hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器<br> 2. history : 依賴 HTML5 History API 和服務器配置。具體可以查看 HTML5 History 模式<br> 3. abstract : 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式</p> </li> </ol> <hr> <h2 id="屬性作用與對比篇">屬性作用與對比篇</h2> <h3 id="nexttick在哪裡使用原理是">nextTick在哪裡使用？原理是？</h3> <ul> <li>nextTick的回調是在下次DOM更新循環結束之後執行的延遲回調。在修改數據之後立即使用這個方法，獲取更新後的DOM。 nextTick主要使用了宏任務和微任務。原理就是異步方法(promise, mutationObserver, setImmediate, setTimeout)經常與事件循環一起來問。</li> </ul> <blockquote> <p>補充：<br> vue多次更新數據，最終會進行批處理更新。內部調用的就是nextTick實現了延遲更新，用戶自定義的nextTick中的回調會被延遲到更新完成後調用，從而可以獲取更新後的DOM。</p></blockquote> <h3 id="vue-為什麼需要虛擬dom虛擬dom的優劣如何">Vue 為什麼需要虛擬DOM？虛擬DOM的優劣如何？</h3> <ul> <li>Virtual DOM 就是用js對象來描述真實DOM，是對真實DOM的抽象，由於直接操作DOM性能低但是js層的操作效率高，可以將DOM操作轉化成對像操作，最終通過diff算法比對差異進行更新DOM(減少了對真實DOM的操作)。虛擬DOM不依賴真實平台環境從而也可以實現跨平台。</li> </ul> <blockquote> <p>補充：<br> 虛擬DOM的實現就是普通對象包含tag、data、children等屬性對真實節點的描述。(本質上就是在JS和DOM之間的一個緩存)</p> <p>Vue2的 Virtual DOM 借鑒了開源庫snabbdom的實現。</p> <p>VirtualDOM映射到真實DOM要經歷VNode的create、diff、patch等階段。</p></blockquote> <h3 id="vue中key的作用和工作原理說說你對它的理解">Vue中key的作用和工作原理，說說你對它的理解</h3> <h4 id="例如">例如：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">v-for=&#34;(item, itemIndex) in tabs&#34; :key=&#34;itemIndex&#34; </span></span></code></pre></td></tr></table> </div> </div><ul> <li>key的作用主要是為了高效的更新虛擬DOM，其原理是vue在patch過程中通過key可以精準判斷兩個節點是否是同一個，從而避免頻繁更新不同元素，使得整個patch過程更加高效，減少DOM操作量，提高性能。</li> </ul> <blockquote> <p>補充：</p> <ol> <li>若不設置key還可能在列表更新時引發一些隱蔽的bug</li> <li>vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果</li> </ol></blockquote> <h3 id="vue-中的diff原理">Vue 中的diff原理</h3> <ul> <li>vue的diff算法是平級比較，不考慮跨級比較的情況。內部採用深度遞歸的方式 + 雙指針的方式進行比較。</li> </ul> <blockquote> <p>補充：</p> <ol> <li>先比較是否是相同節點</li> <li>相同節點比較屬性，並複用老節點</li> <li>比較兒子節點，考慮老節點和新節點兒子的情況</li> <li>優化比較：頭頭、尾尾、頭尾、尾頭</li> <li>比對查找進行複用</li> </ol></blockquote> <h4 id="vue2-與-vue3x-的diff算法">Vue2 與 Vue3.x 的diff算法：</h4> <ul> <li>Vue2的核心Diff算法採用了雙端比較的算法，同時從新舊children的兩端開始進行比較，借助key值找到可複用的節點，再進行相關操作。</li> <li>Vue3.x借鑒了ivi算法和 inferno算法，該算法中還運用了動態規劃的思想求解最長遞歸子序列。 (實際的實現可以結合Vue3.x源碼看。)</li> </ul> <h3 id="v-if-與-v-for的優先級">v-if 與 v-for的優先級</h3> <ol> <li>v-for優先於v-if被解析</li> <li>如果同時出現，每次渲染都會先執行循環再判斷條件，無論如何循環都不可避免，浪費了性能</li> <li>要避免出現這種情況，則在外層嵌套template，在這一層進行v-if判斷，然後在內部進行v-for循環</li> <li>如果條件出現在循環內部，可通過計算屬性提前過濾掉那些不需要顯示的項</li> </ol> <h3 id="v-if與v-show的區別">v-if與v-show的區別</h3> <ul> <li>v-if 是真正的條件渲染，直到條件第一次變為真時，才會開始渲染。</li> <li>v-show 不管初始條件是什麼會渲染，並且只是簡單地基於 CSS 的 “display” 屬性進行切換。</li> </ul> <p><em><strong>注意：v-if 適用於不需要頻繁切換條件的場景；v-show 則適用於需要非常頻繁切換條件的場景。</strong></em></p> <h3 id="computed-和-watch-的區別和運用的場景">computed 和 watch 的區別和運用的場景？</h3> <ul> <li>computed： 計算屬性。依賴其它屬性值，並且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值</li> <li>watch： 監聽數據的變化。更多的是「觀察」的作用，類似於某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行後續操作</li> </ul> <h4 id="運用場景">運用場景：</h4> <ol> <li>當我們需要進行數值計算，並且依賴於其它數據時，應該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算。</li> <li>當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。</li> </ol> <h3 id="如何理解自定義指令">如何理解自定義指令？</h3> <ul> <li>指令的實現原理，可以從編譯原理 ➡ 代碼生成 ➡ 指令鉤子實現進行概述</li> </ul> <ol> <li>在生成 ast 語法樹時，遇到指令會給當前元素添加directives屬性</li> <li>通過 genDirectives 生成指令代碼</li> <li>在patch前將指令的鉤子提取到 cbs中，在patch過程中調用對應的鉤子</li> <li>當執行指令對應鉤子函數時，調用對應指令定義的方法</li> </ol> <h3 id="v-model的原理是什麼">v-model的原理是什麼？</h3> <ul> <li>v-model本質就是一個語法糖，可以看成是value + input方法的語法糖。可以通過model屬性的prop和event屬性來進行自定義。原生的v-model，會根據標籤的不同生成不同的事件和屬性。</li> <li>v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件： <ol> <li>text 和 textarea 元素使用 value 屬性和 input 事件。</li> <li>checkbox 和 radio 使用 checked 屬性和 change 事件。</li> <li>select 字段將 value 作為 prop 並將 change 作為事件。</li> </ol> </li> </ul> <hr> <h2 id="性能優化篇">性能優化篇</h2> <h3 id="vue性能優化---編碼階段">Vue性能優化 - 編碼階段</h3> <ol> <li>盡量減少data中的數據，data中的數據都會增加getter和setter，會收集對應的watcher</li> <li>如果需要使用v-for給每項元素綁定事件時使用事件代理</li> <li>SPA 頁面採用keep-alive緩存組件</li> <li>在更多的情況下，使用v-if替代v-show</li> <li>key保證唯一</li> <li>使用路由懶加載、異步組件</li> <li>防抖、節流</li> <li>第三方模塊按需導入</li> <li>長列表滾動到可視區域動態加載</li> <li>圖片懶加載</li> </ol> <h3 id="vue性能優化---用戶體驗">Vue性能優化 - 用戶體驗</h3> <ol> <li>骨架屏</li> <li>PWA</li> <li>使用緩存(客戶端緩存、服務端緩存)優化、服務端開啟gzip壓縮等</li> </ol> <h3 id="vue性能優化---seo優化">Vue性能優化 - SEO優化</h3> <ol> <li>預渲染</li> <li>服務端渲染SSR</li> </ol> <h3 id="vue性能優化---打包優化">Vue性能優化 - 打包優化</h3> <ol> <li>壓縮代碼</li> <li>Tree Shaking/Scope Hoisting</li> <li>使用cdn加載第三方模塊</li> <li>多線程打包happypack</li> <li>splitChunks抽離公共文件</li> <li>sourceMap優化</li> </ol> <hr>https://blog.wayne-project.com/2022-08-11/vue3-quick-start/Thu, 11 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-11/vue3-quick-start/<img src="https://live.staticflickr.com/65535/52277578302_d4a3e0c4aa_o.png" alt="Featured image of post Vue3.0 快速入門，看完基本可以上手搞開發" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <blockquote> <p>本文適合 <code>Vue3</code> 初學者，或者 <code>Vue2</code> 遷移者，當然還是建議 <code>Vue3</code> 官網完全過一遍。</p></blockquote> <hr> <h2 id="先推薦兩個-vscode-外掛">先推薦兩個 vscode 外掛</h2> <h2 id="volar">Volar</h2> <p>首先推薦 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> ，使用 <code>vscode</code> 開發 <code>Vue</code> 專案的小夥伴肯定都認識 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 這個神級外掛，有了它可以讓我們得開發如魚得水。 那麼 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 可以理解為 <code>Vue3</code> 版本的 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> ，程式碼高亮，語法提示，基本上 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 有的它都有。</p> <h3 id="功能一多個根節點編譯器不會報錯">功能一：多個根節點編譯器不會報錯</h3> <p><code>Vue3</code> 是允許我們有多個根節點的，但是我們如果使用 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 就會報錯，不會影響執行，但是看起來就很煩。所以當我們轉向 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a>，那麼就不會出現這個問題了。</p> <p><img src="https://live.staticflickr.com/65535/52277578262_a65ab53574_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="功能二編輯器分隔">功能二：編輯器分隔</h3> <p>即便 <code>Vue</code> 的元件化開發，可以將單檔案的程式碼長度大幅縮短，但還是動輒幾百行甚是上千行。那麼我們切換 <code>template</code>、<code>script</code>、<code>style</code> 的時候就要頻繁上下翻，雖然有的外掛可以直接定位到 <code>css</code>，但是你回不去啊！所以這個功能簡直是太人性化了。</p> <p>安裝完 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 以後，開啟一個 <code>.vue</code> 檔案，看 <code>vscode</code> 的右上角，有這麼一個圖示，點一下。</p> <p><img src="https://live.staticflickr.com/65535/52278825464_ba574177cd_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278825449_3943326afa_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>它就會自動給你分隔成三個頁面，分別對應 <code>template</code>、<code>script</code>、<code>style</code>，這樣就太舒服了有沒有。</p> <p><img src="https://live.staticflickr.com/65535/52278556091_2d9d2e2b05_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>還有很多新功能，可以參考下面這篇文章：<br> <a class="link" href="https://zhuanlan.zhihu.com/p/375096539" target="_blank" rel="noopener" >Volar - vue終極開發神器！</a></p> <hr> <h3 id="功能三ref-sugar-語法快捷改動支持">功能三：<code>ref sugar</code> 語法快捷改動支持</h3> <p><code>ref sugar</code> 是一個還在 <code>rfc</code> 階段的功能，但是已經持續很久了，現在的 <code>vue3</code> 版本已經可以嚐鮮使用了。具體的用法以及語法我就不展開贅述了，我主要說一下 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 和 <code>ref sugar</code> 的結合。</p> <p><img src="https://live.staticflickr.com/65535/52278556081_0f4b57ceba_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>報錯先不管，是 <code>eslint-plugin-vue</code> 的原因。</p></blockquote> <p>可以看到，在使用了 <code>ref sugar</code> 之後，<code>script</code> 上面出現了一個 <code>ref sugar</code> 的小圖標，並且打了個對勾，那麼我們點一下那個對勾，看看會發生什麼。</p> <p><img src="https://live.staticflickr.com/65535/52278556076_32395d3890_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到，我們點擊這個小對勾之後，它由原本的 <code>ref sugar</code> 語法變為了普通的 <code>script setup</code> 模式，驚不驚喜，意不意外。</p> <hr> <h3 id="功能四style-裡面的-class-引用">功能四：<code>style</code> 裡面的 <code>class</code> 引用</h3> <p><img src="https://live.staticflickr.com/65535/52277578187_ab1c1ffd3c_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到，在 <code>.foo</code> 這個類名上面，出現了一個 <code>1 reference</code> 的小圖標，代表著當前 <code>class</code> 有一次引用，我們點擊一下這個 <code>1 reference</code>。</p> <p><img src="https://live.staticflickr.com/65535/52278556066_f44a23ef65_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>出現了一個彈窗，裡面是當前 <code>class</code> 的具體使用位置。</p> <hr> <h3 id="功能五class-追朔">功能五：<code>class</code> 追朔</h3> <p>我們創建一個 <code>template</code> 根元素，在裡面寫入：</p> <h5 id="samplevue">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;foo&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>style</code> 中寫入：</p> <h5 id="samplevue-1">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span> <span class="na">scoped</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">foo</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>除了 <code>style</code> 中的 <code>.foo</code> 上面會出現 <code>1 reference</code> 的小圖標之外，在 <code>class=&quot;foo&quot;</code> 的 <code>foo</code> 下面，會出現一道橫線。</p> <p><img src="https://live.staticflickr.com/65535/52279040015_d06725b53d_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>對於經常使用 <code>vscode</code> 的開發人員來說，這代表什麼意義就不必多說了，我們根據提示，按住 <code>ctrl</code>(<code>command</code>) 然後點擊，會發現光標自己移動到了 <code>style</code> 中的 <code>.foo</code> 之前，哇! awesome!</p> <hr> <h3 id="功能六css-module-類型提示">功能六：<code>css module</code> 類型提示</h3> <p><code>css module</code> 一般是 <code>react</code> 技術棧用的會比較多一些，就我個人來說，是從沒在 <code>vue</code> 裡面使用它的，因為 <code>vue</code> 提供了 <code>scoped</code> 作用域，不用擔心樣式衝突，直接使用預處理器會更加簡單方便。</p> <p>我們創建如下代碼：</p> <h5 id="samplevue-2">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;$style.foo&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span> <span class="na">module</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">foo</span> <span class="p">{</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後將鼠標移動到 <code>$style</code> 上</p> <p><img src="https://live.staticflickr.com/65535/52278556061_8a9d95187a_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>有點意思，看來 <code>vscode</code> 是讓 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 玩明白了。</p> <hr> <h3 id="功能七lang-語法提示">功能七：<code>lang</code> 語法提示</h3> <p><code>vue</code> 可以使用 <code>lang</code> 屬性來選擇使用的語言，比如 <code>template</code> 中的 <code>html</code>/<code>pug</code>、<code>script</code> 中的 <code>ts</code>、<code>style</code> 中的 <code>scss</code> 等。</p> <p>但是在以前，我們都是手動輸入的，編輯器，或者說 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 並沒有給我們提供任何提示，有可能你找了很久的莫名其妙的問題，就是因為 <code>lang</code> 寫錯了。</p> <p>但是這一切，在有了 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 之後，都不同了。</p> <p><img src="https://live.staticflickr.com/65535/52278577133_3988734a44_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="功能八template-語法轉換">功能八：<code>template</code> 語法轉換</h3> <p><code>vue</code> 默認提供了兩種模板供我們使用，但是一般都會使用 <code>html</code>，另外一種叫做 <code>pug</code>。</p> <p>相對於 <code>html</code>，<code>pug</code> 更偏向於 <code>yml</code> 那種，簡潔程度特別高。</p> <p>在 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 中，為我們提供了 <code>html</code> 和 <code>pug</code> 互相轉換的功能。</p> <h5 id="samplevue-3">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在我們書寫 <code>template</code> 之後，<code>template</code> 頂部會出現一個小小的 <code>pug</code> 圖標，我們可以看到此時它是沒有被選中的。</p> <p><img src="https://live.staticflickr.com/65535/52277578137_059aa7e0d5_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這個時候我們點擊一下這個圖標，讓它選中，神奇的事情發生了。</p> <p><img src="https://live.staticflickr.com/65535/52278577068_bc917eabf4_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們寫好的 <code>html</code> 模板，被自動轉化成了 <code>pug</code>，再點擊一下，又回到了我們熟悉的 <code>html</code>。</p> <p><img src="https://live.staticflickr.com/65535/52278556001_3879f3bbba_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>從功能三開始，基本都是算內測的新功能，我是機緣巧合之下，將 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 下到本地進行查看的時候發現的這些。想嚐鮮的可以自己下載源碼，然後在packages/vscode-vue-languageservice/testCases目錄下體驗，希望這些功能可以盡快發布！</p></blockquote> <h2 id="vue-3-snippets">Vue 3 Snippets</h2> <p>推薦的第二個外掛叫做 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" target="_blank" rel="noopener" >Vue 3 Snippets</a> ，同樣的，他也有自己的 <code>Vue2</code> 版本。它是幹什麼的呢，可以看一下下面這張圖，我只輸入了 <code>&quot;v3&quot;</code> ，它有很多提示，我們就先選擇 <code>v3computed</code> ，選中 <code>Enter</code> 即可。</p> <p><img src="https://live.staticflickr.com/65535/52278577048_9b6cd0221a_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然後它就給我們自動寫了如下程式碼：</p> <p><img src="https://live.staticflickr.com/65535/52279039925_0316ccfe51_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>是不是超級省事，摸魚的時間又增加了！還有更多有趣的使用方式，小夥伴們自行探索吧。</p> <hr> <h2 id="建立-vue3-專案">建立 <code>Vue3</code> 專案</h2> <p>那麼正式開始學習我們的 <code>Vue3</code> ，先從建立專案開始。</p> <h3 id="使用-vue-cli-建立">使用 vue-cli 建立</h3> <p>輸入下面的命令然後選擇配置項進行安裝即可，這裡注意 <code>vue-cli</code> 的版本一定要在 ==4.5.0== 以上。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">### 安裝或者升級</span> </span></span><span class="line"><span class="cl">npm install -g @vue/cli </span></span><span class="line"><span class="cl"><span class="c1">### 檢視版本 保證 vue cli 版本在 4.5.0 以上</span> </span></span><span class="line"><span class="cl">vue --version </span></span><span class="line"><span class="cl"><span class="c1">### 建立專案</span> </span></span><span class="line"><span class="cl">vue create my-project </span></span><span class="line"><span class="cl"><span class="c1">### 然後根據提示一步一步傻瓜式操作就行了</span> </span></span><span class="line"><span class="cl"><span class="c1">### ...</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="使用-vite-建立">使用 <code>Vite</code> 建立</h3> <p>都說 <code>Vue3.0</code> 和 <code>Vite2</code> 更配，各種優化各種快，但都不屬於本文的內容，本文的目的我們只需要知道它特別好用、怎麼用就行了。我這裡是多選擇了 <code>TS</code>，每行都有註釋，一目瞭然。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">### 初始化 viete 專案</span> </span></span><span class="line"><span class="cl">npm init vite-app &lt;project-name&gt; </span></span><span class="line"><span class="cl"><span class="c1">### 進入專案資料夾</span> </span></span><span class="line"><span class="cl"><span class="nb">cd</span> &lt;project-name&gt; </span></span><span class="line"><span class="cl"><span class="c1">### 安裝依賴</span> </span></span><span class="line"><span class="cl">npm install </span></span><span class="line"><span class="cl"><span class="c1">### 啟動專案</span> </span></span><span class="line"><span class="cl">npm run dev </span></span></code></pre></td></tr></table> </div> </div><p>建立完以後我們先來看看入口檔案 <code>main.ts</code></p> <h5 id="maints">main.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// 引入 createApp 函式，建立對應的應用，產生應用的例項物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入 app 元件 (所有元件的父級元件) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">App</span> <span class="kr">from</span> <span class="s1">&#39;./App.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 建立 app 應用返回對應的例項物件，呼叫 mount 方法進行掛載，掛載到 #app 節點上去 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">createApp</span><span class="p">(</span><span class="nx">App</span><span class="p">).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後看看根元件 <code>app.vue</code></p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- Vue2 元件中的 html 模板中必須要有一對根標籤，Vue3 元件的 html 模板中可以沒有根標籤 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Vue logo&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;./assets/logo.png&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 使用子級元件 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">HelloWorld</span> <span class="na">msg</span><span class="o">=</span><span class="s">&#34;Welcome to Your Vue.js + TypeScript App&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 這裡可以書寫 TS 程式碼 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// defineComponent 函式，目的是定義一個元件，內部可以傳入一個配置物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入子級元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">HelloWorld</span> <span class="nx">from</span> <span class="s1">&#39;./components/HelloWorld.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 暴露出去一個定義好的元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當前元件的名字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 註冊元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 註冊一個子級元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">HelloWorld</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="composition-api">Composition API</h2> <p><img src="https://live.staticflickr.com/65535/52278577028_ec0e1597eb_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來到了重頭戲，<code>Vue3</code> 的招牌特性，<code>Composition API</code>。</p> <p>關於 <code>Composition API</code> 這裡有圖解演示，極力推薦。</p> <p><a class="link" href="https://blog.wayne-project.com/@wayne-lin/vue3-option-vs-composition" >圖解 Option API vs Composition API</a></p> <ul> <li><code>Composition API</code> 可以更方便的抽取共通邏輯，但是不要過於在意邏輯程式碼複用，以功能提取程式碼也是一種思路。</li> </ul> <p>順便提一句，<code>Vue3</code> 相容大部分 <code>Vue2</code> 語法，所以在 <code>Vue3</code> 中書寫 <code>Vue2</code> 語法是沒有問題的（廢除的除外），但是既然我們已經升級 <code>Vue3</code> 了，不建議混合使用，除非一些大型特殊專案需要相容兩個版本。</p> <h3 id="生命週期鉤子">生命週期鉤子</h3> <p><img src="https://live.staticflickr.com/65535/52278577033_acc9e36189_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="setup">setup</h3> <ul> <li><code>setup</code> 是組合 <code>Composition API</code> 中的入口函式，也是第一個要使用的函式。</li> <li><code>setup</code> 只在初始化時執行一次，所有的 <code>Composition API</code> 函式都在此使用。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">setup() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我執行了&#39;</span><span class="p">)</span> <span class="c1">// 我執行了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">},</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以通過 <code>console.log</code> 看到 <code>setup</code> 是在 <code>beforeCreate</code> 生命週期之前執行的(只執行一次)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">beforeCreate() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;beforeCreate執行了&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;setup執行了&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// setup執行了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// beforeCreate執行了 </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>由此可以推斷出 <code>setup</code> 執行的時候，元件物件還沒有建立，元件實例物件 <code>this</code> 還不可用，此時 <code>this</code> 是 <code>undefined</code>，不能通過 <code>this</code> 來訪問 <code>data</code>、<code>computed</code>、<code>methods</code>、<code>props</code>。</li> <li>返回物件中的^1.^屬性會與 <code>data</code> 函式返回物件的屬性合併成為元件物件的屬性；^2.^返回物件中的方法會與 <code>methods</code> 中的方法合併成功元件物件的方法。</li> <li>如果有重名，<code>setup</code> 優先。因為在 <code>setup</code> 中 <code>this</code> 不可用，<code>methods</code> 中可以訪問 <code>setup</code> 提供的屬性和方法，但在 <code>setup</code> 方法中不能訪問 <code>data</code> 和 <code>methods</code> 裡的內容，所以還是不建議混合使用。</li> <li><code>setup</code> 函式如果返回物件，物件中的<strong>屬性</strong>或<strong>方法</strong>，<strong>template</strong> 中可以直接使用。</li> </ul> <h5 id="samplevue-4">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{number}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">18</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">number</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意：<code>setup</code> 不能是一個 <code>async</code> 函式，因為返回值不再是 <code>return</code> 的物件，而是 <code>promise</code>，<code>template</code> 中就不可以使用 <code>return</code> 中返回物件的資料了。</p> <p><code>setup</code> 的參數(^1.^<code>props</code>, ^2.^<code>context</code>)：</p> <ol> <li><code>props</code>：是一個物件，裡面有父級元件向子級元件傳遞的資料，並且是在子級元件中使用 <code>props</code> 接收到的所有的屬性。</li> <li><code>context</code>：上下文物件，可以通過 <code>es6</code> 語法解構 setup(props, {^(a).^<code>attrs</code>, ^(b).^<code>slots</code>, ^(c).^<code>emit</code>})<br> &gt; a). <code>attrs</code>：獲取當前元件標籤上所有沒有通過 <code>props</code> 接收的屬性的物件，相當於 <code>this.$attrs</code>。<br> &gt; b). <code>slots</code>：包含所有傳入的插槽內容的物件，相當於 <code>this.$slots</code>。<br> &gt; c). <code>emit</code>：用來分發自定義事件的函式，相當於 <code>this.$emit</code>。</li> </ol></blockquote> <br/> <ul> <li>演示 <code>attrs</code> 和 <code>props</code>：</li> </ul> <h5 id="parentvue">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child</span> <span class="na">:msg</span><span class="o">=</span><span class="s">&#34;msg&#34;</span> <span class="na">msg2</span><span class="o">=</span><span class="s">&#39;哈哈哈&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入子元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/Child.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Child</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello,vue3&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>子元件<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>msg:{{ msg }}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Child&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;msg&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">slots</span><span class="p">,</span> <span class="nx">emit</span><span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;props:&#39;</span><span class="p">,</span> <span class="nx">props</span><span class="p">);</span> <span class="c1">// msg: &#34;hello,vue3&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;attrs:&#39;</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">);</span> <span class="c1">// msg2: &#34;哈哈哈&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>演示 <code>emit</code>：</li> </ul> <h5 id="parentvue-1">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;name:&#39;</span><span class="p">,</span> <span class="s1">&#39;hzw&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">show</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-1">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>事件分發<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Child&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span> <span class="nx">emit</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">emitFn</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;show&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitFn</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="ref">ref</h3> <ul> <li>作用：定義一個響應式的資料(一般用來定義一個基本型別的響應式資料 <code>Undefined</code>、<code>Null</code>、<code>Boolean</code>、<code>Number</code>、<code>String</code>)</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nx">initValue</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>注意：<code>script</code> 中操作資料需要使用 <code>xxx.value</code> 的形式，而 <code>template</code> 中<strong>不需要</strong>新增 <code>.value</code></li> </ul> <p>用一個例子來演示，實現一個按鈕，點選可以增加數字：</p> <h5 id="addnumvue">addNum.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{count}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;updateCount&#39;</span><span class="p">&gt;</span>增加<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue2</code> 中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">conunt</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateCount</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">conunt</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue3</code> 中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ref 用於定義一個響應式的資料，返回的是一個 Ref 物件，物件中有一個 value 屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 如果需要對資料進行操作，需要使用該 Ref 物件的 value 屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">updateCount</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateCount</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue2</code> 中我們通過 <code>this.$refs</code> 來獲取 <code>dom</code> 節點，<code>Vue3</code> 中我們通過 <code>ref</code> 來獲取節點。</p> <p>首先需要在標籤上新增 <code>ref='xxx'</code>，然後再 <code>setup</code> 中定義一個初始值為 <code>null</code> 的 <code>ref</code> 型別，名字要和標籤的 <code>ref</code> 屬性一致。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意 ：一定要在 <code>setup</code> 的 <code>return</code> 中返回，不然會報錯。</p></blockquote> <p>用一個例子來演示，讓輸入框自動獲取焦點：</p> <h5 id="autofocusvue">autoFocus.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>App<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>--- </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;inputRef&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">onMounted</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="cm">/* </span></span></span><span class="line"><span class="cl"><span class="cm">ref獲取元素: 利用 ref 函式獲取元件中的標籤元素 </span></span></span><span class="line"><span class="cl"><span class="cm">功能需求: 讓輸入框自動獲取焦點 </span></span></span><span class="line"><span class="cl"><span class="cm">*/</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">inputRef</span> <span class="o">=</span> <span class="nx">ref</span><span class="o">&lt;</span><span class="nx">HTMLElement</span><span class="o">|</span><span class="kc">null</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">inputRef</span><span class="p">.</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">inputRef</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">inputRef</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="reactive">reactive</h3> <ul> <li>作用：定義多個數據的響應式，接收一個普通物件然後返回該普通物件的響應式代理器物件(<code>Proxy</code>)，響應式轉換是&quot;<code>深層的</code>&quot;：會影響物件內部所有巢狀的屬性，所有的資料都是響應式的。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">proxy</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>姓名:{{user.name}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>年齡:{{user.age}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>wife:{{user.wife}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;updateUser&#34;</span><span class="p">&gt;</span>更新<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;hzw&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">wife</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;xioaohong&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">books</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;紅寶書&#39;</span><span class="p">,</span> <span class="s1">&#39;設計模式&#39;</span><span class="p">,</span> <span class="s1">&#39;演算法與資料結構&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">updateUser</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;小紅&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">+=</span> <span class="mi">2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">wife</span><span class="p">.</span><span class="nx">books</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="s1">&#39;金瓶梅&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateUser</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="computed">computed</h3> <ul> <li>與 <code>Vue2</code> 中的 <code>computed</code> 配置功能一致，返回的是一個 <code>ref</code> 型別的物件。</li> <li><code>computed</code> 的函式中如果只傳入一個箭頭函式 表示的是 <code>get</code> 操作：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><code>computed</code> 的函式中可以傳入一個物件，可以包含 <code>set</code> 和 <code>get</code> 函式，進行讀取和修改的操作：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">(</span><span class="nx">val</span><span class="o">:</span> <span class="nx">string</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;_&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="watch">watch</h3> <ul> <li>與 <code>Vue2</code> 中的 <code>watch</code> 配置功能一致。</li> <li>作用：監視指定的一個或多個響應式資料，一旦資料變化，就自動執行監視回撥。</li> <li>語法：watch(<code>要監聽的資料</code>, <code>回調函式</code>, <code>配置</code>)</li> <li>預設初始時不執行回調，但可以通過配置的 <code>immediate</code> 為 <code>true</code>，來指定初始時立即執行第一次。</li> <li>通過配置的 <code>deep</code> 為 <code>true</code>，來指定深度監視。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">watch</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName3</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">watch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">({</span> <span class="nx">firstName</span><span class="p">,</span> <span class="nx">lastName</span> <span class="p">})</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">deep</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p><code>watch</code> 監聽多個數據，使用陣列。<br> <code>watch</code> 監聽非響應式資料的時候需要使用回調函式的形式。</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">watch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我執行了&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="watcheffect">watchEffect</h3> <ul> <li>作用：監視資料發生變化時執行回調，不用直接指定要監視的資料，回調函式中使用的哪些響應式資料就監視哪些響應式資料，預設初始時就會執行第一次，從而可以收集需要監視的資料。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">watchEffect</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName4</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">watchEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName4</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// watchEffect可以實現計算屬性set方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">watchEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">fullName3</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;_&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>生命週期對比：</p> <p><img src="https://live.staticflickr.com/65535/52279039860_760ce781e5_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>注意：<code>3.0</code> 中的生命週期鉤子要比 <code>2.X</code> 中相同生命週期的鉤子要快。</li> <li><code>Composition API</code> 還新增了以下用於除錯的鉤子函式，但是不怎麼常用：<code>onRenderTracked</code>、<code>onRenderTriggered</code>。</li> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeMount</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeMount&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onMounted&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeUpdate</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeUpdate&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onUpdated</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onUpdated&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeUnmount</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeUnmount&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onUnmounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onUnmounted&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="torefs">toRefs</h3> <ul> <li>作用：把一個響應式物件轉換成普通物件，該普通物件的每個屬性都是一個 <code>ref</code>。</li> <li>應用：我們使用 <code>reactive</code> 建立的物件，如果想在模板中使用，就必須得使用 <code>xxx.xxx</code> 的形式，如果大量用到的話還是很麻煩的，但是使用 <code>es6</code> 解構以後，會失去響應式，那麼 <code>toRefs</code> 的作用就體現在這，利用 <code>toRefs</code> 可以將一個響應式 <code>reactive</code> 物件的所有原始屬性轉換為響應式的 <code>ref</code> 屬性。當然小夥伴們可以自行開發更多應用場景。</li> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> name:{{name}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;hzw&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state2</span> <span class="o">=</span> <span class="nx">toRefs</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">name</span> <span class="o">+=</span> <span class="s1">&#39;===&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 toRefs 返回的物件，解構出來的屬性也是響應式的 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">...</span><span class="nx">state2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="provide-與-inject"><code>provide</code> 與 <code>inject</code></h3> <ul> <li>作用：實現跨層級元件(祖孫)間通訊。</li> <li>程式碼演示：</li> </ul> <h6 id="parentvue-2">parent.vue</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>父元件<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>當前顏色: {{color}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;red&#39;&#34;</span><span class="p">&gt;</span>紅<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;yellow&#39;&#34;</span><span class="p">&gt;</span>黃<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;blue&#39;&#34;</span><span class="p">&gt;</span>藍<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Son</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">provide</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Son</span> <span class="nx">from</span> <span class="s1">&#39;./son.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;ProvideInject&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Son</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;red&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="p">(</span><span class="s1">&#39;color&#39;</span><span class="p">,</span> <span class="nx">color</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">color</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="sonvue">son.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>子元件<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GrandSon</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">GrandSon</span> <span class="nx">from</span> <span class="s1">&#39;./grandson.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">GrandSon</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="grandsonvue">grandson.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">:style</span><span class="o">=</span><span class="s">&#34;{color}&#34;</span><span class="p">&gt;</span>孫子元件: {{color}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">inject</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;color&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">color</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="其他特性">其他特性</h2> <h3 id="teleport瞬移">Teleport(瞬移)</h3> <ul> <li>作用：<code>Teleport</code> 提供了一種乾淨的方法，讓元件的 <code>html</code> 在父元件介面外的特定標籤(很可能是 <code>body</code> )下插入顯示，換句話說就是可以把<code>子元件</code>或者<code>dom節點</code>插入到任何你想插入到的地方去。</li> <li>語法：使用 <code>to</code> 屬性，引號內使用選擇器。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">teleport</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">teleport</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <h5 id="parentvue-3">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;father&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>App<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">modal-button</span><span class="p">&gt;&lt;/</span><span class="nt">modal-button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">ModalButton</span> <span class="nx">from</span> <span class="s1">&#39;./components/ModalButton.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ModalButton</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-2">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;son&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;modalOpen = true&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 點我開啟對話方塊 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">teleport</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;modalOpen&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;looklook&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 看看我出現在了哪裡 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;modalOpen = false&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Close </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">teleport</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;modal-button&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">modalOpen</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">modalOpen</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到在子元件中的 <code>looklook</code> 元素跑到了 <code>body</code> 下面，而之前的位置默認出現了兩行註釋。</p> <p><img src="https://live.staticflickr.com/65535/52277577997_8ba7960112_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="suspense不確定的">Suspense(不確定的)</h3> <ul> <li>作用：它們允許我們的應用程式在等待非同步元件時渲染一些後備內容，可以讓我們建立一個平滑的使用者體驗。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 非同步元件 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">AsyncComp</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 後備內容 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>LOADING...<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>vue3</code> 中引入<strong>非同步元件</strong>的方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AsyncComp</span> <span class="o">=</span> <span class="nx">defineAsyncComponent</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./AsyncComp.vue&#39;</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <h5 id="parentvue-4">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- v-slot:defaul 可以簡寫成 #defaul --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">AsyncComp</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- v-slot:defaul 可以簡寫成 #fallback --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>LOADING...<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineAsyncComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AsyncComp</span> <span class="o">=</span> <span class="nx">defineAsyncComponent</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./AsyncComp.vue&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">AsyncComp</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-3">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>AsyncComp22<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;AsyncComp&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;abc&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>通過下圖可以看到在非同步元件加載出來之前，顯示的是 <code>fallback</code> 中的內容：</p> <p><img src="https://live.staticflickr.com/65535/52278576943_379d6af224_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="響應式資料的判斷">響應式資料的判斷</h2> <h3 id="作用">作用</h3> <ul> <li>isRef：檢查一個值是否為一個 <code>ref</code> 物件</li> <li>isReactive：檢查一個物件是否是由 <code>reactive</code> 建立的響應式代理</li> <li>isReadonly：檢查一個物件是否是由 <code>readonly</code> 建立的只讀代理</li> <li>isProxy：檢查一個物件是否是由 <code>reactive</code> 或者 <code>readonly</code> 方法建立的代理</li> </ul> <h3 id="程式碼演示">程式碼演示</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state1</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isref:&#39;</span><span class="p">,</span> <span class="nx">isRef</span><span class="p">(</span><span class="nx">state1</span><span class="p">));</span> <span class="c1">// isref: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state2</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isReactive:&#39;</span><span class="p">,</span> <span class="nx">isReactive</span><span class="p">(</span><span class="nx">state2</span><span class="p">));</span> <span class="c1">// isReactive: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state3</span> <span class="o">=</span> <span class="nx">readonly</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isReadonly:&#39;</span><span class="p">,</span> <span class="nx">isReadonly</span><span class="p">(</span><span class="nx">state3</span><span class="p">));</span> <span class="c1">// isReadonly: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state4</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isProxy:&#39;</span><span class="p">,</span> <span class="nx">isProxy</span><span class="p">(</span><span class="nx">state2</span><span class="p">));</span> <span class="c1">// isProxy: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isProxy:&#39;</span><span class="p">,</span> <span class="nx">isProxy</span><span class="p">(</span><span class="nx">state4</span><span class="p">));</span> <span class="c1">// isProxy: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="其他不常用特性">其他不常用特性</h3> <blockquote> <p>還有很多很多不常用的新特性，我在日常開發中是沒有用到的，很多都是用來做優化的，感興趣的小夥伴們自行去官網檢視，或者大佬們可以介紹一下應用場景。</p></blockquote> <ul> <li>shallowReactive</li> <li>shallowRef</li> <li>readonly</li> <li>shallowReadonly</li> <li>markRaw</li> <li>customRef</li> <li>&hellip;</li> </ul> <hr> <h2 id="語法糖">語法糖</h2> <p>雖然 <code>Composition API</code> 用起來已經非常方便了，但是我們還是有很煩的地方，比如：</p> <ul> <li>元件引入了還要註冊。</li> <li>屬性和方法都要在 <code>setup</code> 函式中返回，有的時候僅一個 <code>return</code> 就十幾行甚至幾十行。</li> <li>&hellip;</li> </ul> <p>不想寫啊怎麼辦</p> <p>好辦， <code>Vue3</code> 官方提供了 <code>script setup</code> 語法糖，只需要在 <code>script</code> 標籤中==新增 setup==，元件只需引入不用註冊，屬性和方法也不用返回，<code>setup</code> 函式也不需要，甚至 <code>export default</code> 都不用寫了，不僅是資料、計算屬性和方法，甚至是自定義指令也可以在我們的 <code>template</code> 中自動獲得。</p> <p>但是這麼過癮的語法糖，還是稍微添加了一點點心智負擔，因為沒有了 <code>setup</code> 函式，那麼 <code>props</code>、<code>emit</code>、<code>attrs</code> 怎麼獲取呢，就要介紹一下新的語法了。</p> <p><code>setup script</code> 語法糖提供了三個新的 <code>API</code> 來供我們使用： ==defineProps==、==defineEmit== 和 ==useContext==。</p> <ul> <li><code>defineProps</code>：用來接收父元件傳來的值 <code>props</code>。</li> <li><code>defineEmit</code>：用來宣告觸發的事件表。</li> <li><code>useContext</code>：用來獲取元件上下文 <code>context</code>。</li> </ul> <h3 id="程式碼演示-1">程式碼演示</h3> <h5 id="parentvue-5">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Children</span> <span class="na">msg</span><span class="o">=</span><span class="s">&#34;hello&#34;</span> <span class="err">@</span><span class="na">child-click</span><span class="o">=</span><span class="s">&#34;handleClick&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Children</span> <span class="nx">from</span> <span class="s1">&#39;./components/children.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-4">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;sonClick&#34;</span><span class="p">&gt;</span>msg: {{ props.msg }}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useContext</span><span class="p">,</span> <span class="nx">defineProps</span><span class="p">,</span> <span class="nx">defineEmit</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emit</span> <span class="o">=</span> <span class="nx">defineEmit</span><span class="p">([</span><span class="s1">&#39;child-click&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">useContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="nx">defineProps</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sonClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;child-click&#39;</span><span class="p">,</span> <span class="nx">ctx</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們點選一下子元件：</p> <p><img src="https://live.staticflickr.com/65535/52278825204_a28791d02b_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到 <code>context</code> 被列印了出來，其中的 <code>attrs</code>、<code>emit</code>、<code>slots</code>、<code>expose</code> 屬性和方法依然可以使用。<code>props</code> 也可以輸出在頁面上，事件也成功派發。</p> <hr> <h2 id="其他知識點">其他知識點</h2> <p>接下來介紹一下我使用 <code>Vue3</code> 過程中遇到的問題或者小技巧，不全面，想起什麼就寫什麼吧。</p> <p><strong><code>script setup</code> 語法糖的坑</strong></p> <p>這個很多大佬已經在 <code>Vue3</code> 的 <code>github</code> 上提交 <code>Issues</code> 了，或許會在不久的將來修復，但現在還是要注意一下。</p> <p>如果在父元件中通過 <code>ref='xxx'</code> 的方法來獲取子元件實例，那麼子元件不可以使用 <code>script setup</code> 語法糖，否則會報錯。</p> <h3 id="程式碼演示-2">程式碼演示</h3> <h5 id="parentvue-6">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#39;son&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/children.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">son</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39; ~ son:&#39;</span><span class="p">,</span> <span class="nx">son</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>子元件先不使用語法糖：</p> <h5 id="childrenvue-5">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{msg}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl">import { ref } from &#39;vue&#39; </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">export default { </span></span><span class="line"><span class="cl"> setup() { </span></span><span class="line"><span class="cl"> const msg = ref(&#39;hello&#39;) </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> return { </span></span><span class="line"><span class="cl"> msg, </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl"> }, </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52278825189_5a985db5e6_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在把子元件換成 <code>script setup</code> 語法糖再來試一試：</p> <h5 id="childrenvue-6">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{msg}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到現在是<strong>獲取不到</strong>子元件定義的 <code>msg</code> 屬性的。</p> <p><img src="https://live.staticflickr.com/65535/52278825149_f0ed4e8b9f_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="emit-派發事件可以對引數進行驗證">Emit 派發事件可以對引數進行驗證</h2> <h5 id="parentvue-7">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child</span> <span class="err">@</span><span class="na">sonClick</span><span class="o">=</span><span class="s">&#39;sonClick&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/Child.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sonClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-7">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{ msg }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;handleClick(1)&#34;</span><span class="p">&gt;</span>我是按鈕1<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;handleClick(2)&#34;</span><span class="p">&gt;</span>我是按鈕2<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emits</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sonClick</span><span class="o">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span> <span class="nx">emit</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;sonClick&#39;</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">handleClick</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們分別點一下<code>按鈕1</code>和<code>按鈕2</code>，可以看到當我們點了<code>按鈕2</code>的時候，控制檯會發出警告，但是程式會繼續執行，還沒想到什麼適合的應用場景，但是要知道這個知識點，小夥伴們可以在這搞事情。</p> <p><img src="https://live.staticflickr.com/65535/52278825124_e17bb7a569_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="跨元件通訊-mittjs">跨元件通訊 <code>mitt.js</code></h2> <p><code>Vue2</code> 中怎麼實現跨元件通訊呢？很多人第一想法就是 <code>event bus</code>。但是 <code>Vue3</code> 移除了 <code>$on</code>、<code>$once</code>、<code>$off</code> 導致不能使用這個方法。但是 <code>Vue</code> 官方給大家推薦了 ==<a class="link" href="https://www.npmjs.com/package/mitt" target="_blank" rel="noopener" >mitt.js</a>==，它的原理就是 <code>event bus</code>。</p> <p><a class="link" href="https://www.casper.tw/development/2020/12/15/vue-3-mitt/" target="_blank" rel="noopener" >mitt.js 教學</a></p> <h3 id="程式碼演示-3">程式碼演示</h3> <ul> <li>先安裝：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">npm i mitt -s </span></span></code></pre></td></tr></table> </div> </div><ul> <li>然後封裝成一個 <code>hook</code>：</li> </ul> <h5 id="mittjs">mitt.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">mitt</span> <span class="nx">from</span> <span class="s1">&#39;mitt&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emitter</span> <span class="o">=</span> <span class="nx">mitt</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">emitter</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>使用：</li> </ul> <h5 id="parentvue-8">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child1</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child2</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child1</span> <span class="nx">from</span> <span class="s1">&#39;./components/children1.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child2</span> <span class="nx">from</span> <span class="s1">&#39;./components/children2.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="children1">children1</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件1 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">onUnmounted</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">emitter</span> <span class="nx">from</span> <span class="s1">&#39;../mitt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 初始化 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">changeMsg</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;world&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 監聽事件，更新資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">emitter</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">,</span> <span class="nx">changeMsg</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 顯式解除安裝 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">onUnmounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitter</span><span class="p">.</span><span class="nx">off</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">,</span> <span class="nx">changeMsg</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">changeMsg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="children2">children2</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件2 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;changeMsg&#39;</span><span class="p">&gt;</span>點選修改msg<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">emitter</span> <span class="nx">from</span> <span class="s1">&#39;../mitt&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">changeMsg</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitter</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">changeMsg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="演示">演示</h3> <p><img src="https://live.staticflickr.com/65535/52279039685_52ca5e6690_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="自定義指令">自定義指令</h2> <p>先看看 <code>Vue2</code> 自定義指令的鉤子：</p> <ul> <li><code>bind</code>：當指令繫結在對應元素時觸發，只會觸發一次。</li> <li><code>inserted</code>：當對應元素被插入到 DOM 的父元素時觸發。</li> <li><code>update</code>：當元素更新時，這個鉤子會被觸發（此時元素的後代元素還沒有觸發更新）。</li> <li><code>componentUpdated</code>：當整個元件（包括子元件）完成更新後，這個鉤子觸發。</li> <li><code>unbind</code>：當指令被從元素上移除時，這個鉤子會被觸發，也只觸發一次。</li> </ul> <p>在 <code>Vue3</code> 中，官方為了更有助於程式碼的可讀性和風格統一，把<strong>自定義指令</strong>的鉤子名稱改的更像是元件生命週期，儘管他們是兩回事：</p> <ul> <li><code>bind</code> =&gt; beforeMount。</li> <li><code>inserted</code> =&gt; mounted。</li> <li><code>beforeUpdate</code>：新的鉤子，會在元素自身更新前觸發。</li> <li><code>update</code> =&gt; 移除！</li> <li><code>componentUpdated</code> =&gt; updated。</li> <li><code>beforeUnmount</code>：新的鉤子，當元素自身被解除安裝前觸發。</li> <li><code>unbind</code> =&gt; unmounted。</li> </ul> <hr> <h2 id="過渡動畫">過渡動畫</h2> <p>這個沒有什麼大的改動，只是修改了兩個 <code>class</code> 名字，正是因為沒有什麼大的改動，導致我曾經在這裡栽了大跟頭，寫完了怎麼都不對，後來查官網才知道。</p> <p>以下是直接引用<strong>官網的原文</strong>：</p> <ul> <li><code>v-enter-from</code>：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。</li> <li><code>v-enter-active</code>：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。</li> <li><code>v-enter-to</code>：定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成之後移除。</li> <li><code>v-leave-from</code>：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。</li> <li><code>v-leave-active</code>：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。</li> <li><code>v-leave-to</code>：離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from 被刪除)，在過渡/動畫完成之後移除。</li> </ul> <blockquote> <p>特別注意的是：<br> <code>v-enter</code> 改成了 <code>v-enter-form</code><br> <code>v-leave</code> 改成了 <code>v-leave-from</code></p></blockquote> <hr> <h2 id="其他小知識">其他小知識</h2> <ul> <li><code>Vue3</code> 移除了 <code>filter</code>。</li> <li>獲取元件實例的方法 <code>getCurrentInstance()</code>：<br> 這個方法可以獲取到當前元件的實例，相當於 <code>Vue2</code> 中的 <code>this</code>，但是它只在==開發環境==起效果，打包以後會報錯，所以大家不要依賴 <code>getCurrentInstance</code> 方法去獲取元件實例來完成一些主要功能。<br> 更詳細的可以檢視下面這篇文章：<br> <a class="link" href="https://www.gushiciku.cn/jump/aHR0cHM6Ly9saW5rLnpoaWh1LmNvbS8/dGFyZ2V0PWh0dHBzJTNBLy9ibG9nLmNzZG4ubmV0L2xfcHBwL2FydGljbGUvZGV0YWlscy8xMTAyOTAxODI=" target="_blank" rel="noopener" >關於Vue3獲取當前元件例項的 getCurrentInstance 方法的補充</a></li> </ul> <p>最後，畢竟是個人總結，難免會出現紕漏和錯誤，期待各路大神的補充和糾正。</p> <hr> <h2 id="參考">參考</h2> <ul> <li><a class="link" href="https://www.gushiciku.cn/pl/g19t/zh-tw" target="_blank" rel="noopener" >參考網站</a></li> <li><a class="link" href="https://www.vue3js.cn/docs/zh/" target="_blank" rel="noopener" >Vue3官方中文文件</a></li> <li><a class="link" href="https://www.bilibili.com/video/BV1Wh411X7Xp" target="_blank" rel="noopener" >Vue3.0光速上手</a></li> <li><a class="link" href="https://www.imooc.com/article/317810" target="_blank" rel="noopener" >Volar - vue終極開發神器！</a></li> <li><a class="link" href="https://juejin.cn/post/6940454764421316644#heading-6" target="_blank" rel="noopener" >Vue3.0 新特性以及使用經驗總結</a></li> <li><a class="link" href="https://www.bilibili.com/video/BV1ra4y1H7ih?spm_id_from=333.788.b_636f6d6d656e74.23" target="_blank" rel="noopener" >尚矽谷2021最新Vue.JS教程快速入門到專案實戰（Vue3/VueJS技術詳解）</a></li> <li><a class="link" href="https://juejin.cn/post/6891640356543627278" target="_blank" rel="noopener" >那個忙了一夜的Vue3動畫很好，就是太短了</a></li> </ul> <hr>https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/Thu, 11 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/<img src="https://live.staticflickr.com/65535/52277524312_b6dc5e213c_o.png" alt="Featured image of post 圖解 Option API vs Composition API" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/6891640356543627278" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.gushiciku.cn/pl/g19t/zh-tw" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="回顧-option-api">回顧 Option API</h2> <blockquote> <p>在了解 Composition Api 之前，首先回顧下我們使用 Option Api 遇到的問題，我們在 Vue2 中常常會需要在特定的區域（data、methods、watch、computed&hellip;）編寫負責相同功能的代碼。</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52277525197_19c1acbbf4_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="o">:</span><span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">val</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="option-api-的缺陷">Option Api 的缺陷</h2> <h3 id="反覆橫跳">反覆橫跳</h3> <blockquote> <p>隨著業務複雜度越來越高，代碼量會不斷的加大；由於相關業務的代碼需要遵循 option 的配置寫到特定的區域，導致後續維護非常的複雜，代碼可複用性也不高。</p></blockquote> <ul> <li>相信大部分同學都維護過超過200行的 .vue 組件，新增或者修改一個需求，就需要分別在 data、methods、computed 裡修改，滾動條反复上下移動，我稱之為『反复橫跳』，比如我們簡單的加個拍腦門的需求加個累加器，這種寫代碼上下反复橫條的感覺，相信大家都懂的：</li> </ul> <p><img src="https://live.staticflickr.com/65535/52278523468_474b248a83_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278504901_8cc9387727_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;add&#34;</span><span class="p">&gt;</span>LSP {{count}}号 double is{{double}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="o">:</span><span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">val</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="mixin-和-this">mixin 和 this</h3> <ul> <li>反覆橫跳的本質，在於功能的分塊組織，以及代碼量太大了，如果我們能把代碼控制在一屏，自然就解決了，vue2 裡的解決方案，是使用 mixin 來混合, 我們抽離一個 counter.js：</li> </ul> <h5 id="counterjs">counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span><span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="p">...</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">...</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣確實拆分了代碼，但是有一個很嚴重的問題，就是不打開 counter.js，App.vue 裡的 this 上，count、add這些屬性，是完全不知道從哪來的，你不知道是 <code>mixin</code>，還是全局 <code>install</code>，還是 <code>Vue.prototype.count</code> 設置的，數據來源完全模糊，調試爽死你，這也是 option 的一個大問題，<code>this</code> 是個黑盒，template 裡寫的 count 和 double，完全不知道從哪來的。</p> <br/> <p>如果有兩個 <code>mixin</code>，就更有意思了，比如我們又有一個需求，實時顯示鼠標的坐標位置 x，並且有一個乘以 2 的計算屬性湊巧也叫 double，再整一個 mixin：</p> <h5 id="usemousejs">useMouse.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span><span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">update</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="o">*</span><span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">destroyed</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這是一個獨立維護的 mixin，可能在 N 個地方用到，他根本不知道會不會有人和他衝突，然後用一下：</p> <h5 id="appvue-1">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Mouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">,</span><span class="nx">Mouse</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">......</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52278773824_2fb43692cf_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>兩個 mixin 裡都有 double 這個數，尷尬，看效果，lsp 的 count 被覆蓋了很尷尬，而且在 App.vue 這裡，你完全不知道這個 double 到底是哪個，調試很痛苦。</p> <hr> <h2 id="composition-api">Composition Api</h2> <blockquote> <p>composition 就是為了解決這個問題存在的，通過組合的方式，把零散在各個 data、methods 的代碼重新組合，一個功能的代碼都放在一起維護，並且這些代碼可以單獨拆分成函數，顯然我們可以更加優雅的組織我們的代碼，函數。讓相關功能的代碼更加有序的組織在一起。</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52278991260_8c8720067c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278529193_878667eeba_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們用vue3演示一下功能，具體api就不解釋了直接vue3文檔搞起就可以：</p> <h5 id="appvue-2">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">toRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">todos</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">([</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">])</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">val</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span><span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>利用函數我們可以把功能完整獨立的拆分成模塊或者函數，方便組織代碼，並且解決了 mixin 混亂的問題。</p> <p>比如我們的累加器，抽離一個counter.js：</p> <h5 id="counterjs-1">counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">useCounter</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()=&gt;</span><span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>直接使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl">import { reactive, ref, toRefs } from &#39;vue&#39; </span></span><span class="line"><span class="cl"><span class="gi">+ import useCounter from &#39;./counter&#39; </span></span></span><span class="line"><span class="cl"><span class="gi"></span>export default { </span></span><span class="line"><span class="cl"> setup(){ </span></span><span class="line"><span class="cl"> let val = ref(&#39;&#39;) </span></span><span class="line"><span class="cl"> ... </span></span><span class="line"><span class="cl"><span class="gi">+ let { count,double,add } = useCounter() </span></span></span><span class="line"><span class="cl"><span class="gi"></span> return { </span></span><span class="line"><span class="cl"> val, todos, addTodo, </span></span><span class="line"><span class="cl"><span class="gi">+ count, double, add </span></span></span><span class="line"><span class="cl"><span class="gi"></span> } </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>再來一個鼠標位置也不在話下，而且可以很好地利用解構賦值的別名，解決 mixin 的命名衝突問題：</p> <h5 id="usemousejs-1">useMouse.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">onMounted</span><span class="p">,</span> <span class="nx">onUnmounted</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">useMouse</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">update</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()=&gt;</span><span class="nx">x</span><span class="p">.</span><span class="nx">value</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">onUnmounted</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>模板裡直接用 doubelX：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="script-setup">script setup</h2> <blockquote> <p>不過有的同學可能，還有一個小小的吐槽，那就是 setup 函數最後的 return 也是集中的，如果行數太多，一樣會橫條一下下。<br> 這個好解決，因為本身我們可以把 todos 也抽離成函數，這樣 setup 就全部是數據的來源，非常精簡絲滑：</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useCounter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useMouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useTodo</span> <span class="nx">from</span> <span class="s1">&#39;./todos&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useTodo</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>是不是賊爽呢，如果有些同學就是不想啥都抽離，還是覺得統一 return 很麻煩， 我們可以使用 vue3 的 setup script 功能，把 setup 這個配置也優化掉一個功能 export 一次：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useCounter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useMouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useTodo</span> <span class="nx">from</span> <span class="s1">&#39;./todos&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useTodo</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><a class="link" href="https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Frfcs%2Fblob%2Fsfc-improvements%2Factive-rfcs%2F0000-sfc-script-setup.md" target="_blank" rel="noopener" >具體看這裡</a></p> <hr>https://blog.wayne-project.com/2022-08-10/vue-cli-use-webp/Wed, 10 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-10/vue-cli-use-webp/<img src="https://live.staticflickr.com/65535/52282467469_7cf86509a9_o.jpg" alt="Featured image of post Vue-cli plugin：使用套件將圖片自動轉檔為webp格式" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://segmentfault.com/a/1190000019920162" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F" target="_blank" rel="noopener" >Vue CLI 官方webpack相關文檔</a></p> <hr> <h2 id="前言">前言</h2> <ul> <li><code>webp</code> 是 2010年 Google 釋出的圖片格式，針對 PNG 可減少 26%，JPEG 約可減少 25% ~ 34%，目前僅 safari、IE 尚不支援，但 safari 在 ios 14 以後開始支援。</li> <li>若在未提供 <code>.webp</code> 格式圖檔的情況下，使用套件於 <code>webpack</code> 時進行圖片轉檔，但於 <code>development</code> 下會因抓不到虛擬的 <code>XXX.webp</code> 圖檔而導致 <code>npm run</code> 起時噴錯，可使用以下設定解決此問題。</li> </ul> <h2 id="使用-webpack-plugin-image-transform-webp-and-mini-套件將-image-轉檔成-webp-格式">使用 <a class="link" href="https://www.npmjs.com/package/webpack-plugin-image-transform-webp-and-mini" target="_blank" rel="noopener" ><code>webpack-plugin-image-transform-webp-and-mini</code></a> 套件將 image 轉檔成 webp 格式</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i webpack-plugin-image-transform-webp-and-mini </span></span></code></pre></td></tr></table> </div> </div><h2 id="新增一個自訂的-webploader">新增一個自訂的 webploader</h2> <ul> <li>此 <code>loader</code> 功用為：若 resource 的 query (使用 <code>chainWebpack</code> 提供的變數&quot;<code>resourceQuery</code>&ldquo;抓) 字符中含有 <code>&quot;type=webp&quot;</code> 且 <code>resource</code> 為圖片時，將附檔名轉換成 <code>XXX.webp</code> 。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&#34;path&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">source</span><span class="p">,</span> <span class="nx">map</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">source</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourceQuery</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">resourceQuery</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s2">&#34;type=webp&#34;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">resource</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s2">&#34;data:image&#34;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">extname</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">extname</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourcePath</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">result</span> <span class="o">=</span> <span class="nx">source</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">extname</span><span class="p">,</span> <span class="s2">&#34;.webp&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// return result </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">result</span><span class="p">,</span> <span class="nx">map</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="chainwebpack-設定"><code>chainWebpack</code> 設定</h2> <ul> <li>套件安裝完成後，<code>vue.config.js</code> 引入套件，並指定webp圖檔存放位置。</li> <li>引入自訂的 <code>webploader</code> ， 並設定 <code>chainWebpack</code> 的 <code>images</code> 需優先跑 <code>webploader</code>，再跑 <code>url-loader</code> 與 <code>file-loader</code>。</li> <li>主要解決 Vue-cli 的 <code>development</code> 下，會因實際不存在 &ldquo;XXX.webp&rdquo; 圖檔而導致開發時報錯的問題。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">ImageminWebpWebpackPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&#34;webpack-plugin-image-transform-webp-and-mini&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">chainWebpack</span><span class="o">:</span> <span class="nx">config</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">config</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="s2">&#34;preload-index&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">config</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="s2">&#34;prefetch-index&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 相關設定建議放於移除 preload-index 與 prefetch-index 之後 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">config</span><span class="p">.</span><span class="nx">plugin</span><span class="p">(</span><span class="s2">&#34;webP&#34;</span><span class="p">).</span><span class="nx">use</span><span class="p">(</span><span class="nx">ImageminWebpWebpackPlugin</span><span class="p">,</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;static/img/[name].[hash:8].[ext]&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">logger</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">paths</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">dir</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">,</span> <span class="s2">&#34;./src/assets&#34;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">exclude</span><span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">miniOptions</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">rule</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">module</span><span class="p">.</span><span class="nx">rule</span><span class="p">(</span><span class="s2">&#34;images&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">rule</span><span class="p">.</span><span class="nx">uses</span><span class="p">.</span><span class="nx">clear</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">rule</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="s2">&#34;./webploader.js&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">loader</span><span class="p">(</span><span class="s2">&#34;./webploader.js&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">end</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="s2">&#34;url-loader&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">loader</span><span class="p">(</span><span class="s2">&#34;url-loader&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">options</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">limit</span><span class="o">:</span> <span class="mi">4096</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fallback</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s2">&#34;file-loader&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;static/img/[name].[hash:8].[ext]&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="補上是否支援-webp-的判斷若支援則於-html-補上-class-name供css抓取-class-name-後改讀-webp-圖片">補上是否支援 <code>Webp</code> 的判斷，若支援則於 <code>&lt;html&gt;</code> 補上 class name，供CSS抓取 class name 後改讀 webp 圖片</h2> <h4 id="mainjs">main.js</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">isSupportWebp</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&#34;canvas&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">elem</span><span class="p">.</span><span class="nx">getContext</span> <span class="o">&amp;&amp;</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&#34;2d&#34;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">result</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s2">&#34;image/webp&#34;</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&#34;data:image/webp&#34;</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用自定义过滤器 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">filter</span><span class="p">(</span><span class="nx">Vue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">;(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Vue</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">$supportWebp</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">isSupportWebp</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">Vue</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">$supportWebp</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s2">&#34;webp&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="若有使用-vue-lazyload則補上-vue-lazyload-提供的-webp-相關設定">若有使用 <code>vue-lazyload</code>，則補上 <code>vue-lazyload</code> 提供的 webp 相關設定</h2> <h4 id="img-使用-v-lazy-時src的圖片附檔名皆會轉換成-xxxwebp"><code>&lt;img&gt;</code> 使用 v-lazy 時，src的圖片附檔名皆會轉換成 <code>XXX.webp</code></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueLazyload</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">filter</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">webp</span><span class="p">(</span><span class="nx">listener</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">vue</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">$supportWebp</span> <span class="o">&amp;&amp;</span> <span class="o">!~</span><span class="nx">listener</span><span class="p">.</span><span class="nx">src</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&#34;.webp&#34;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">listener</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">listener</span><span class="p">.</span><span class="nx">src</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\.(png|jpe?g)(\?.*)?$/</span><span class="p">,</span> <span class="s2">&#34;.webp&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">listener</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s2">&#34;data-src&#34;</span><span class="p">,</span> <span class="nx">listener</span><span class="p">.</span><span class="nx">src</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\.(png|jpe?g)(\?.*)?$/</span><span class="p">,</span> <span class="s2">&#34;.webp&#34;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="於各個-css-中若-background-使用到需轉-webp-格式的-img-補上自行設定的-query-typewebp以便-webploader-抓該-query-進行轉換圖檔格式">於各個 CSS 中，若 background 使用到需轉 .webp 格式的 img ，補上自行設定的 query (<code>&quot;?type=webp&quot;</code>)，以便 <code>webploader</code> 抓該 query 進行轉換圖檔格式</h2> <h4 id="例如">例如：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.page-wrap-main</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="na">background</span><span class="o">:</span> <span class="sx">url(&#34;~assets/images/main/bg.png&#34;)</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="na">background-size</span><span class="o">:</span> <span class="ni">cover</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="na">width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="na">position</span><span class="o">:</span> <span class="ni">relative</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nc">.webp</span> <span class="k">&amp;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="sx">url(&#34;~assets/images/main/bg.png?type=webp&#34;)</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-07-17/atguigu-vue3-note/Sun, 17 Jul 2022 00:00:00 +0000https://blog.wayne-project.com/2022-07-17/atguigu-vue3-note/<img src="https://blog.wayne-project.com/2022-07-17/atguigu-vue3-note/index.jpeg" alt="Featured image of post 尚硅谷 Vue3 視頻筆記" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://youtu.be/08UqvGfE1_M" target="_blank" rel="noopener" >參考網站 - 尚硅谷Vue3技術</a></p> <hr> <h2 id="創建-vue-30-工程">創建 Vue 3.0 工程</h2> <h3 id="使用-vue-cli-創建">使用 vue cli 創建</h3> <ul> <li>官方文檔：<a class="link" href="https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create" target="_blank" rel="noopener" >https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create</a></li> </ul> <hr> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">## 查看 @vue/cli 版本，確保 @vue/cli 版本在 4.5.0 以上</span> </span></span><span class="line"><span class="cl">vue --version </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 安裝或升級你的 @vue/cli</span> </span></span><span class="line"><span class="cl">npm install -g @vue/cli </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 創建</span> </span></span><span class="line"><span class="cl">vue create vue_test </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 啟動</span> </span></span><span class="line"><span class="cl"><span class="nb">cd</span> vue_test </span></span><span class="line"><span class="cl">npm run serve </span></span></code></pre></td></tr></table> </div> </div><h3 id="使用-vite-創建vue作者的團隊開發">使用 vite 創建(Vue作者的團隊開發)</h3> <ul> <li>官方文檔：<a class="link" href="https://v3.cn.vuejs.org/guide/installation.html#vite" target="_blank" rel="noopener" >https://v3.cn.vuejs.org/guide/installation.html#vite</a></li> <li>vite官網：<a class="link" href="https://vitejs.cn/" target="_blank" rel="noopener" >https://vitejs.cn/</a></li> <li>優勢： <ul> <li>開發環境中，無需打包操作，可快速的冷啟動。</li> <li>輕量快速的熱重載(HMR)。</li> <li>真正的按需編譯，不再等待整個應用編譯完成。</li> </ul> </li> <li>傳統 grunt、gulp、webpack 與 vite 構建對比圖：</li> </ul> <p><img src="https://live.staticflickr.com/65535/52275597146_0470413262_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52275615043_7d6b094202_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">## 創建工程</span> </span></span><span class="line"><span class="cl">npm init vite-app &lt;project-name&gt; </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 進入工程目錄</span> </span></span><span class="line"><span class="cl"><span class="nb">cd</span> &lt;project-name&gt; </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 安裝依賴</span> </span></span><span class="line"><span class="cl">npm install </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">## 啟動</span> </span></span><span class="line"><span class="cl">npm run dev </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="安裝-vue-開發者工具">安裝 Vue 開發者工具</h2> <p><img src="https://live.staticflickr.com/65535/52274620362_ba92c40ba3_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://chrome.google.com/webstore/search/vue" target="_blank" rel="noopener" >Vue.js devtools</a></p> <hr> <h2 id="拉開序幕的-setup">拉開序幕的 Setup</h2> <ol> <li>Vue3.0 中一個新的配置項，值為一個函數。</li> <li>是所有 <code>Composition API (組合式API)</code> 的表演舞台。</li> <li>組件中所用到的數據、方法等等，均要配置在 setup 中。</li> <li>setup 函數的： <ul> <li>若返回一個對象，則對象中的屬性、方法，在模板中均可直接使用。(重點關注!)</li> <li>若返回一個渲染函數，則可以自定義渲染內容。(了解即可)</li> </ul> </li> </ol> <h6 id="返回對象">返回對象</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="s2">&#34;測試&#34;</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h6 id="返回渲染函數需引入-h-">返回渲染函數(需引入 <code>h</code> )</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">h</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">h</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="s1">&#39;尚硅谷&#39;</span><span class="p">)}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="5"> <li>注意：</li> </ol> <ul> <li>不要與Vue2.x配置混用。 <ul> <li>Vue2.x配置(data、methods、computed&hellip;)中<span class="focus">可以訪問到</span>setup中的屬性、方法，但在<code>setup</code>中<span class="focus">不能訪問到</span>Vue2.x配置(data、methods、computed&hellip;)。</li> <li>如果有重名，setup優先。</li> </ul> </li> <li>setup 不能是一個 <code>async</code> 函數，因為返回值不再是 return 的對象，而是一個 <code>promise</code>，模板看不到 return 對象中的屬性；後期可以返回一個 Promise 實例，但需要 <code>Suspense</code> 與 <code>異步組件(動態組件)</code> 的配合：<a class="link" href="###Suspense" >點我前往 Suspense</a></li> </ul> <hr> <h2 id="ref-函數">ref 函數</h2> <ul> <li>作用：定義一個響應式的數據。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nx">initValue</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>將數據加工成一個 <code>RefImpl</code> (Reference: 引用；Implete: 實現) = (引用實現的實例對象)。</li> <li>js 中操作數據：<code>xxx.value</code>。</li> <li>模板中讀取數據：<code>&lt;div&gt;{{xxx}}&lt;/div&gt;</code></li> </ul> <h3 id="備註">備註：</h3> <ul> <li>接收的數據可以是基本類型，也可以是對象類型。</li> <li>基本類型的數據：響應式依然是靠 <code>Object.defineProperty()</code> 的 <code>get</code> 與 <code>set</code> 完成的。</li> <li>對象類型的數據：內部<span class="focus">求助</span>了 Vue3.0 中的一個新函數&mdash;- <code>reactive</code></li> </ul> <hr> <h2 id="reactive-函數">reactive 函數</h2> <ul> <li>作用：定義一個<span class="focus">對象類型</span>的響應式數據(基本類型別用他，用<code>ref</code>函數)。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;測試&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>接收一個對象或數組，返回一個<span class="focus">代理對象(Proxy對象)</span>。</li> <li>reactive 定義的響應式數據是<code>深層次的</code>。</li> <li>內部基於 ES6 的 Proxy 實現，通過代理對象操作源對象內部數據都是響應式的，並通過 <code>Reflect</code> 操作源對象內部的數據。</li> <li>js、模板中操作數據均不需要 <code>.value</code></li> </ul> <hr> <h2 id="vue-20-中的響應式原理">Vue 2.0 中的響應式原理</h2> <h3 id="實現原理">實現原理：</h3> <ul> <li>對象類型：通過 <code>Object.defineProperty()</code> 對屬性的讀取、修改進行攔截(數據劫持)。</li> <li>數組類型：通過重寫更新數組的一系列方式來實現攔截。(對數組的變更方法進行了包裹)。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="s2">&#34;count&#34;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="原理模擬">原理模擬：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 模擬 Vue2 中實現響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="s2">&#34;name&#34;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">configurable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 允許刪除，但捕獲不到 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 有人讀取 name 時調用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;有人修改了 name 屬性，我發現了ㄛ，我要去更新介面！&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="s2">&#34;age&#34;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">configurable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 允許刪除，但捕獲不到 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 有人讀取 age 時調用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">person</span><span class="p">.</span><span class="nx">age</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;有人修改了 age 屬性，我發現了ㄛ，我要去更新介面！&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>存在問題： <ul> <li>新增屬性、刪除屬性，介面不會更新，需使用 <code>$set</code>、<code>$delete</code>。</li> <li>直接通過下標修改數組，介面不會更新，需使用 <code>$set</code>、<code>$delete</code>。</li> </ul> </li> </ul> <h4 id="問題情況演示">問題情況演示：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">person</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hobby</span><span class="o">:</span> <span class="p">[</span><span class="s2">&#34;學習&#34;</span><span class="p">,</span> <span class="s2">&#34;吃飯&#34;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addSex</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">.</span><span class="nx">sex</span> <span class="o">=</span> <span class="s2">&#34;女&#34;</span> <span class="c1">// 此時畫面不會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">$set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">,</span> <span class="s2">&#34;sex&#34;</span><span class="p">,</span> <span class="s2">&#34;女&#34;</span><span class="p">)</span> <span class="c1">// 需使用 $set 畫面才會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 或是使用 Vue.set() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Vue.set(this.person, &#34;sex&#34;, &#34;女&#34;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">deleteName</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// 此時畫面不會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">$delete</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">,</span> <span class="s2">&#34;name&#34;</span><span class="p">)</span> <span class="c1">// 需使用 $delete 畫面才會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 或是使用 Vue.delete() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Vue.delete(this.person, &#34;name&#34;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateHobby</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">.</span><span class="nx">hobby</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="s2">&#34;逛街&#34;</span> <span class="c1">// 此時畫面不會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">$set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">person</span><span class="p">.</span><span class="nx">hobby</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">&#34;逛街&#34;</span><span class="p">)</span> <span class="c1">// 需使用 $set 畫面才會更新 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 或是使用 splice() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// this.person.hobby.splice(0, 1, &#34;逛街&#34;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="vue-30-中的響應式原理">Vue 3.0 中的響應式原理</h2> <h3 id="實現原理-1">實現原理：</h3> <ul> <li>通過 Proxy(代理)：攔截對象中任意屬性的變化，包含屬性值的讀寫、屬性的新增、屬性的刪除等。</li> <li>通過 Reflect(反射)：對被代理對象的屬性進行操作。</li> </ul> <h4 id="原理模擬-1">原理模擬：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 模擬 Vue3 中實現響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Proxy</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 有人讀取p的某個屬性時調用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">get</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`有人讀取了p身上的</span><span class="si">${</span><span class="nx">propName</span><span class="si">}</span><span class="sb">屬性`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">Reflect</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 有人新增或修改p的某個屬性時調用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">set</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`有人修改了p身上的</span><span class="si">${</span><span class="nx">propName</span><span class="si">}</span><span class="sb">屬性，我要去更新介面了！`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">Reflect</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 有人刪除p的某個屬性時調用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">deleteProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`有人刪除了p身上的</span><span class="si">${</span><span class="nx">propName</span><span class="si">}</span><span class="sb">屬性，我要去更新介面了！`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">Reflect</span><span class="p">.</span><span class="nx">deleteProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">propName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="setup-的兩個注意點">setup 的兩個注意點</h2> <ul> <li>setup 執行的時機：在 beforeCreate 之前執行一次，this 是 undefined。</li> <li>setup 的參數 <ul> <li><code>props</code>：值為對象，包含：組件外部傳遞過來，且組件內部聲明接收了的屬性。</li> <li><code>context</code>：上下文對象： <ul> <li><code>attrs</code>：值為對象，包含：組件外部傳遞過來，但沒有在 props 配置中聲明的屬性，相當於 Vue 2.0 的 <code>this.$attrs</code>。</li> <li><code>slots</code>：接收的插槽內容，相當於 Vue 2.0 的 <code>this.$slots</code>。</li> <li><code>emit</code>：分發自定義事件的函數，相當於 Vue 2.0 的 <code>this.$emit</code>。</li> </ul> </li> </ul> </li> </ul> <hr> <h2 id="watch-函數">watch 函數</h2> <ul> <li>與 Vue 2.0 中的 watch 配置功能一致。</li> <li>兩個小&quot;坑&quot;： <ul> <li>監視 ref 定義的響應式數據時，不需加 <code>.value</code>。</li> <li>監視 reactive 定義的響應式數據時，<code>oldValue</code> 無法正確捕獲、強制開啟了深度監視(deep配置失效)。</li> <li>監視 reactive 定義的響應式數據中的某個屬性時，deep 配置有效。</li> </ul> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">watch</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s2">&#34;測試&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 情況一：監視 ref 定義的響應式數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">(</span><span class="nx">sum</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;sum變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 情況二：同時監視多個 ref 定義的響應式數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">([</span><span class="nx">sum</span><span class="p">,</span> <span class="nx">msg</span><span class="p">],</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;sum或msg變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="cm">/* </span></span></span><span class="line"><span class="cl"><span class="cm"> * 情況三：監視 reactive 定義的響應式數據的全部屬性 </span></span></span><span class="line"><span class="cl"><span class="cm"> * 1. 注意: 此數無法正確的獲取 oldValue </span></span></span><span class="line"><span class="cl"><span class="cm"> * 2. 注意: 強制開啟了深度監視(deep配置無效) </span></span></span><span class="line"><span class="cl"><span class="cm"> */</span> </span></span><span class="line"><span class="cl"> <span class="nx">watch</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">deep</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// 此處的 deep 配置無效 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// 情況四：監視 reactive 定義的響應式數據的某個屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person的name變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 情況五：監視 reactive 定義的響應式數據的某些屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">([()</span> <span class="p">=&gt;</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">person</span><span class="p">.</span><span class="nx">age</span><span class="p">],</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person的name或age變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 特殊情況：監視 reactive 定義的響應式數據的某些對象屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">person</span><span class="p">.</span><span class="nx">job</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person的job變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">deep</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> <span class="c1">// 此處由於監視的是 reactive 所定義的對象中的某個屬性，所以 deep 配置有效 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sum</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="watch-時-value-的問題">watch 時 value 的問題</h2> <ul> <li>若監視的數據為 ref 求助 reactive 生成的響應式數據，則可使用以下兩種方式進行監視：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">watch</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">watch</span><span class="p">(</span><span class="nx">sum</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 監視的是 sum 這個 RefImpl 數據，因此不需要 .value </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;sum的值變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 方法一: </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 監視 person.value 的 Proxy 對象 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person的值變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 方法二: </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">watch</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 深度監視 person 的 Proxy 對象的屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;person的值變化了&#34;</span><span class="p">,</span> <span class="nx">newValue</span><span class="p">,</span> <span class="nx">oldValue</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">deep</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">person</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="watcheffect">watchEffect</h2> <ul> <li>智能版 watch，不用指名監視哪個屬性，監視的回調中用到哪個屬性，就監視哪個屬性(而且是深層次的)。</li> <li>watchEffect 有點像 computed： <ul> <li>但 computed 注重計算出來的值(回調函數的返回值)，所以必須要寫返回值。</li> <li>而 watchEffect 更注重的是過程(回調函數的函數體)，所以不用寫返回值。</li> </ul> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">watchEffect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">watchEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">x1</span> <span class="o">=</span> <span class="nx">sum</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">x2</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">job</span><span class="p">.</span><span class="nx">job1</span><span class="p">.</span><span class="nx">salary</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;watchEffect 配置的回調執行了&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="自定義-hook-函數">自定義 hook 函數</h2> <ul> <li>hook 本質是一個函數，把 setup 函數中使用的 Composition API 進行了封裝。</li> <li>類似於 vue 2.0 中的 mixin。</li> <li>自定義 hook 的優勢：重複使用代碼，讓 setup 中的邏輯更清楚易懂。</li> <li>命名通常建議以 &ldquo;use&rdquo; 開頭，例如：</li> </ul> <h4 id="一個獲取鼠標點擊位置的-hook">一個獲取鼠標點擊位置的 hook</h4> <h6 id="srchooksusepointjs">src/hooks/usePoint.js</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">onMounted</span><span class="p">,</span> <span class="nx">onBeforeUnmount</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 獲取鼠標點擊位置 相關的數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">point</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 獲取鼠標點擊位置 相關的方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">function</span> <span class="nx">savePoint</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">pageY</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">pageX</span> </span></span><span class="line"><span class="cl"> <span class="nx">point</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">pageY</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 獲取鼠標點擊位置 相關的生命週期鉤子 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&#34;click&#34;</span><span class="p">,</span> <span class="nx">savePoint</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeUnmount</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s2">&#34;click&#34;</span><span class="p">,</span> <span class="nx">savePoint</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">point</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h6 id="demovue">Demo.vue</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">usePoint</span> <span class="nx">from</span> <span class="s2">&#34;@/hooks/usePoint&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Demo&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用自定義的 hook </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">point</span> <span class="o">=</span> <span class="nx">usePoint</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">point</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="toref">toRef</h2> <ul> <li>作用：創建一個 ref 對象，其 value 值指向(引用)另一個對象中的某個屬性(返回值為一個 <code>ObjectRefImpl</code> 對象，為響應式)。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">toRef</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="s2">&#34;name&#34;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>應用：要將響應式對象中的某個屬性單獨提供給外部使用時。</li> <li>擴展：<code>toRefs</code> 與 <code>toRef</code> 功能一致，但可以批量創建多個 ref 對象，語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">toRefs</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用範例">使用範例：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRef</span><span class="p">,</span> <span class="nx">toRefs</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">name1</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// name1 僅為賦值，無響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">name2</span> <span class="o">=</span> <span class="nx">toRef</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="s2">&#34;name&#34;</span><span class="p">)</span> <span class="c1">// name2 的值會指向(引用) person 的 name </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// errors： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// name1: person.name, // 僅為賦值，無響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// name2: ref(person.name) // 初始值正常，但修改時不會改到 person 的 name，因為此寫法僅是將 &#34;ref(pserson.name)&#34; 賦值給 name2，而非將 name2 指向 person 的 name </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// success： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 模板中使用 {{ person.name }}...等： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// person, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// 一個一個給出，模板中使用 {{ name }}...等： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// name: toRef(person, &#34;name&#34;), </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// age: toRef(person, &#34;age&#34;), </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// salary: toRef(person.job.job1, &#34;salary&#34;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// 一次全給出，模板中可直接使用 {{ name }}、{{ age }}、{{ job.job1.salary }} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">...</span><span class="nx">toRefs</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="其他的-composition-api">其他的 Composition API</h2> <h3 id="1-shallowreactive-與-shallowref">1. shallowReactive 與 shallowRef</h3> <ul> <li>shallow：淺層的</li> <li>shallowReactive：只處理對象最外層屬性的響應式(淺響應式)。</li> <li>shallowRef：只處理基本數據類型的響應式，不進行對象的響應式處理。</li> <li>什麼時候使用？ <ul> <li>如果有一個對象數據，結構比較深，但變化時只是外層屬性變化 =&gt; <code>shallowReactive</code>。</li> <li>如果有一個對象數據，後續功能不會修改該對象中的屬性，而是生成新的對象來替換 =&gt; <code>shallowRef</code>。</li> </ul> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">shallowRef</span><span class="p">,</span> <span class="nx">shallowReactive</span><span class="p">,</span> <span class="nx">toRefs</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">shallowReactive</span><span class="p">({</span> <span class="c1">// 只考慮第一層數據的響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> <span class="c1">// 響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> <span class="c1">// 響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> <span class="c1">// 非響應式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">shallowRef</span><span class="p">({</span> <span class="c1">// 基本類型時同 ref，但對象類型不是響應式(value 會變成一般的 Object 而不是 Proxy ) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">...</span><span class="nx">toRefs</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="2-readonly-與-shallowreadonly">2. readonly 與 shallowReadonly</h3> <ul> <li>readonly：讓一個響應式數據變為唯讀的(深層唯讀)。</li> <li>shallowReadonly：讓一個響應式數據變為唯讀的(淺層唯讀)。</li> <li>應用場景：不希望數據被修改時。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRefs</span><span class="p">,</span> <span class="nx">readonly</span><span class="p">,</span> <span class="nx">shallowReadonly</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 將 sum 變為唯讀，保護數據不被修改 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">readonly</span><span class="p">(</span><span class="nx">sum</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 將 person 的所有屬性變為唯讀，保護所有屬性數據不被修改 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">readonly</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 將 person 的&#34;第一層屬性數據&#34;變為唯讀(name、age無法修改，但 job 可以) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">shallowReadonly</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sum</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">...</span><span class="nx">toRefs</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="toraw-與-markraw">toRaw 與 markRaw</h2> <ul> <li>raw：原始。</li> <li>toRaw： <ul> <li>作用：將一個由 <code>reactive</code> 生成的<code>響應式對象</code>轉為<code>普通對象</code>。</li> <li>應用場景：用於讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。</li> </ul> </li> <li>markRaw： <ul> <li>作用：標記一個對象，使其永遠不會再成為響應式對象。</li> <li>應用場景： <ul> <li>有些值不應被設置為響應式的，例如複雜的第三方類庫等。</li> <li>當渲染具有不可變數據源的大列表時，跳過響應式轉換可以提高性能。</li> </ul> </li> </ul> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRaw</span><span class="p">,</span> <span class="nx">markRaw</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;張三&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">job</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">job1</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">salary</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">showRawPerson</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">toRaw</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="c1">// 返回的不再是 Proxy，而是 Object </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">addCar</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;奔馳&#34;</span><span class="p">,</span> <span class="nx">price</span><span class="o">:</span> <span class="mi">40</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">person</span><span class="p">.</span><span class="nx">car</span> <span class="o">=</span> <span class="nx">markRaw</span><span class="p">(</span><span class="nx">car</span><span class="p">)</span> <span class="c1">// 標記 person.car 不是響應式的數據(數據依舊可修改，但畫面不會變) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sum</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">...</span><span class="nx">toRefs</span><span class="p">(</span><span class="nx">person</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">showRawPerson</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">addCar</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="customref">customRef</h3> <ul> <li>作用：創建一個自定義的 ref，並對其依賴項跟蹤和更新觸發進行顯示控制。</li> <li>實現防抖效果：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;keyWord&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> {{ keyWord }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">customRef</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 vue 提供的 ref </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// let keyWord = ref(&#34;hello&#34;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// 自定義的一個 ref </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">function</span> <span class="nx">myRef</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">customRef</span><span class="p">((</span><span class="nx">track</span><span class="p">,</span> <span class="nx">trigger</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`有人從 myRef 這個容器中讀取數據了，我把</span><span class="si">${</span><span class="nx">value</span><span class="si">}</span><span class="sb">給他了`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">track</span><span class="p">()</span> <span class="c1">// 通知 Vue 追蹤數據的變化(提前與 get 商量一下，讓它認為這個 value 是有用的) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">(</span><span class="nx">newValue</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`有人把 myRef 這個容器中的數據改為了</span><span class="si">${</span><span class="nx">newValue</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span> <span class="o">=</span> <span class="nx">newValue</span> </span></span><span class="line"><span class="cl"> <span class="nx">trigger</span><span class="p">()</span> <span class="c1">// 通知 Vue 去重新解析模板，以便觸發 get </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delay</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用自定義的防抖 ref </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">keyWord</span> <span class="o">=</span> <span class="nx">myRef</span><span class="p">(</span><span class="s2">&#34;hello&#34;</span><span class="p">,</span> <span class="mi">500</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">keyWord</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="provide-與-inject">provide 與 inject</h3> <ul> <li>作用：實現祖孫組件間通信。</li> <li>套路：父組件有一個 <code>provide</code> 選項來提供數據，後代組件有一個 <code>inject</code> 選項來開始使用這些數據。</li> <li>具體寫法：</li> </ul> <h4 id="1-祖組件中">1. 祖組件中：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRefs</span><span class="p">,</span> <span class="nx">provide</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;App&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;奔馳&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">price</span><span class="o">:</span> <span class="s2">&#34;40W&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="p">(</span><span class="s2">&#34;car&#34;</span><span class="p">,</span> <span class="nx">car</span><span class="p">)</span> <span class="c1">// 給自己的後代組件傳遞數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">{</span> <span class="p">...</span><span class="nx">toRefs</span><span class="p">(</span><span class="nx">car</span><span class="p">)</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-後代組件中">2. 後代組件中：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">inject</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Son&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s2">&#34;car&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">car</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">car</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="響應式數據的判斷">響應式數據的判斷</h3> <ul> <li>isRef：檢查一個值是否為一個 <code>ref</code> 對象。</li> <li>isReactive：檢查一個對象是否是由 <code>reactive</code> 創建的響應式代理。</li> <li>isReadonly：檢查一個對象是否是由 <code>readonly</code> 創建的唯讀代理。</li> <li>isProxy：檢查一個對象是否是由 <code>reactive</code> 或是 <code>readonly</code> 方法創建的代理。</li> </ul> <hr> <h2 id="teleport">Teleport</h2> <ul> <li>teleport：傳送、瞬間移動。</li> <li>作用：能夠將我們的 <code>組件 html 結構</code> 移動到指定的位置。</li> <li>具體寫法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">teleport</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- to 也能寫 css select，例如 to=&#34;#app&#34; --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;isShow&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mask&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;dialog&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是一個彈窗 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;isShow = false&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 關閉彈窗 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">teleport</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="suspense">Suspense</h2> <ul> <li>suspense：懸疑、懸而未決的。</li> <li>作用：等待異步組件時，渲染一些額外內容，讓使用者有更好的用戶體驗。</li> <li>使用步驟：</li> </ul> <h4 id="異步引用組件">異步引用組件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineAsyncComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span> <span class="c1">// 宣告異步組件時使用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">Child</span> <span class="o">=</span> <span class="nx">defineAsyncComponent</span><span class="p">(()</span> <span class="p">=&gt;.</span> <span class="kr">import</span> <span class="p">(</span><span class="s2">&#34;./components/Child.vue&#34;</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用-suspense-包裹組件並配置好-default-與-fallback">使用 <code>Suspense</code> 包裹組件，並配置好 <code>default</code> 與 <code>fallback</code></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>我是App組件<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>加載中......<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="全局-api-的轉移">全局 API 的轉移</h2> <ul> <li>Vue 2.0 有許多全局 API 和配置。 <ul> <li>例如：註冊全局組件、註冊全局指令等。</li> </ul> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 註冊全局組件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s2">&#34;MyButton&#34;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s2">&#34;&lt;button @click=&#39;count++&#39;&gt;Clicked {{ count }}&lt;/button&gt;&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 註冊全局指令 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">Vue</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s2">&#34;focus&#34;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">inserted</span><span class="o">:</span> <span class="nx">el</span> <span class="p">=&gt;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>Vue 3.0 中對這些 API 做出了調整： <ul> <li>將全局的 API，即： <code>Vue.xxx</code> 調整到應用實例(<code>app</code>)上</li> </ul> </li> </ul> <table> <thead> <tr> <th style="text-align: left">2.0 全局 API(<code>Vue</code>)</th> <th style="text-align: left">3.0 實例 API(<code>app</code>)</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Vue.config.xxxx</td> <td style="text-align: left">app.config.xxxx</td> </tr> <tr> <td style="text-align: left">Vue.config.productionTip</td> <td style="text-align: left"><strong>移除</strong></td> </tr> <tr> <td style="text-align: left">Vue.component</td> <td style="text-align: left">app.component</td> </tr> <tr> <td style="text-align: left">Vue.directive</td> <td style="text-align: left">app.directive</td> </tr> <tr> <td style="text-align: left">Vue.mixin</td> <td style="text-align: left">app.mixin</td> </tr> <tr> <td style="text-align: left">Vue.use</td> <td style="text-align: left">app.use</td> </tr> <tr> <td style="text-align: left">Vue.prototype</td> <td style="text-align: left">app.config.globalProperties</td> </tr> </tbody> </table> <hr>