https://blog.wayne-project.com/tags/petite-vue/Recent content in Petite-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>