mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-01 07:39:30 +08:00
9 lines
272 KiB
JavaScript
9 lines
272 KiB
JavaScript
import{S as _v,i as hv,s as gv,C as Ly,w as wv,x as kv,y as bv,z as Bv,A as L8,f as Pv,t as xv,B as jv,X as T8,l as p,r as c,a as y,V as D,m as F,n as e,u as r,h as l,c as i,W as E,p as t,b as o,G as a,E as Iv}from"../chunks/index-cd58b8d1.js";import{P as Vv}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function Hv(Ll){let v,A,u,is,d,f,Tl,Ke,gp,w,Qe,Ul,Ze,Ye,wp,zl,st,kp,Ds,Wl,lt,bp,Es,ql,at,Bp,Gl,nt,Pp,Mn,z8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> msg </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Hello World</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">teleport</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">to</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">body</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> msg </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">teleport</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Rn,vs,ot,k,pt,xp,$l,ds,Ft,Nl,fs,et,tt,jp,b,On,ct,rt,Ln,yt,Ip,us,Jl,it,Vp,Xl,Dt,Hp,Tn,W8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-once</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">\u4F7F\u5B83\u4ECE\u4E0D\u66F4\u65B0: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Un,As,Et,zn,vt,Sp,Cs,Kl,dt,Mp,ms,Ql,ft,Rp,B,ut,Wn,At,Ct,Op,qn,q8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> theme </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> colors </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">blue</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">yellow</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">green</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">theme</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">colors</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">floor</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">random</span><span style="color: #F07178">() </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #F78C6C">4</span><span style="color: #F07178">)]</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">hello</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/* Modify the code to bind the dynamic color */</span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> v-bind(theme)</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Gn,g,mt,$n,_t,ht,Nn,gt,Lp,_s,Zl,wt,Tp,Yl,kt,Up,Jn,G8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Hello Vue.js</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">text-align</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">line-height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">50px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* Make it work */</span></div><div class='line'><span style="color: #EEFFFF">:global(</span><span style="color: #FFCB6B">body</span><span style="color: #EEFFFF">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vw</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vh</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> burlywood</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Xn,sa,bt,zp,Kn,$8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Hello Vue.js</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">text-align</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">line-height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">50px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/* Make it work */</span></div><div class='line'><span style="color: #FFCB6B">body</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vw</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vh</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> burlywood</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Qn,hs,Bt,P,Pt,Wp,gs,la,xt,qp,ws,aa,jt,Gp,na,It,$p,ks,oa,Vt,Np,pa,Ht,Jp,Zn,N8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Button </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">./Button.vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #82AAFF">defineProps</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">type</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">type</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">default</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">default</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">validator</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> value </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">;</span><span style="color: #F07178">[</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">primary</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ghost</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">dashed</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">link</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">default</span><span style="color: #89DDFF">'</span><span style="color: #F07178">]</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">includes</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">Button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">dashed</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Yn,bs,St,x,Mt,Xp,Bs,Fa,Rt,Kp,Ps,Ot,j,Lt,Qp,so,J8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">h</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a functional component :</span></div><div class='line'><span style="color: #546E7A"> * 1. Render the list elements (ul/li) with the list data</span></div><div class='line'><span style="color: #546E7A"> * 2. Change the list item text color to red when clicked.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> ListComponent </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">props</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> emit </span><span style="color: #89DDFF">})</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">h</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// \u521B\u5EFA ul</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ul</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// \u6839\u636E\u4F20\u5165\u7684props\u521B\u5EFAli</span></div><div class='line'><span style="color: #EEFFFF"> props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">map</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">h</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">li</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// \u70B9\u51FB\u65F6\u5904\u7F5Atoggle\u3002\u5E76\u5C06\u5F53\u524Dindex\u4F5C\u4E3A\u53C2\u6570\u4F20\u5165toggle</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">emit</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">toggle</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> index)</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// \u5C06\u5F53\u524D\u70B9\u51FB\u7684li\u989C\u8272\u8BBE\u7F6E\u4E3A\u7EA2\u8272</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> index </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">activeIndex </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">null</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// li \u9ED8\u8BA4\u503C</span></div><div class='line'><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">name</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF">ListComponent</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">props </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">list</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">activeIndex</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">ListComponent</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">emits </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">toggle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">John</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Doe</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Smith</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> activeIndex </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toggle</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">activeIndex</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">index</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">list-component</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">list</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">active-index</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">activeIndex</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">toggle</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">toggle</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,lo,ea,Tt,Zp,I,ao,V,Ut,zt,no,H,Wt,Yp,xs,ta,qt,sF,ca,oo,Gt,lF,po,X8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'MyButton', props: { disabled: { type: Boolean,</span></div><div class='line'><span style="color: #EEFFFF">default: false, }, }, emits: ['custom-click'], setup(props, { emit, slots }) { return () => h( 'button', { disabled:</span></div><div class='line'><span style="color: #EEFFFF">props.disabled, onClick: () => emit('custom-click'), }, slots.default?.() ); }, });</span></div></code></div></pre>`,Fo,js,ra,$t,aF,ya,Nt,nF,eo,K8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineComponent</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">key</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">title</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">children</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF">[]</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #82AAFF">defineProps</span><span style="color: #89DDFF"><{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">data</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">}></span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">ul</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF"> in </span><span style="color: #EEFFFF">data</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">li</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">title </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">li</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-if</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF"> && </span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> // \u7528\u9012\u5F52\u7684\u65B9\u6CD5\u6765\u5B9E\u73B0</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">TreeComponent</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">data</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,to,ia,Jt,oF,S,co,M,Xt,Kt,Is,R,Qt,Zt,C,Yt,ro,sc,lc,pF,Vs,Da,ac,FF,Hs,nc,O,oc,eF,Ss,Ea,pc,tF,va,Fc,cF,yo,Q8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a composable function that toggles the state</span></div><div class='line'><span style="color: #546E7A"> * Make the function work correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useToggle</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">init</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">boolean</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">init</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toggle</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">!</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> [</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toggle</span><span style="color: #F07178">]</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">[</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> toggle</span><span style="color: #89DDFF">]</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useToggle</span><span style="color: #EEFFFF">(</span><span style="color: #FF9CAC">false</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">State: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ON</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">OFF</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">toggle</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Toggle state</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,io,Ms,da,ec,rF,fa,tc,yF,Do,Z8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">UseCounterOptions</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">min</span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">max</span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the composable function</span></div><div class='line'><span style="color: #546E7A"> * Make sure the function works correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCounter</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">initialValue </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> options</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">UseCounterOptions</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{})</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inc</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">options</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">max</span><span style="color: #F07178">) </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">dec</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">options</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">min</span><span style="color: #F07178">) </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">--</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reset</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inc</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">dec</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reset</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> count</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> inc</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> dec</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> reset </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCounter</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">min</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">max</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Eo,Rs,ua,cc,iF,L,rc,vo,yc,ic,DF,fo,Y8=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the composable function</span></div><div class='line'><span style="color: #546E7A"> * Make sure the function works correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useLocalStorage</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">key</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> initialValue</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">any</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">localStorage</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">getItem</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">) </span><span style="color: #89DDFF">||</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">localStorage</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">setItem</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useLocalStorage</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">counter</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// We can get localStorage by triggering the getter:</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// And we can also set localStorage by triggering the setter:</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> update </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Counter: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">update</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Update</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,uo,Aa,Dc,EF,T,Ao,U,Ec,vc,Co,z,dc,vF,Os,Ca,fc,dF,ma,uc,fF,mo,sv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onUnmounted</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #546E7A">// Implement ...</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useEventListener</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> event</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> callback</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">onMounted</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">event</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">callback</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">onUnmounted</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">removeEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">event</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">callback</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Implement ...</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useMouse</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">useEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">mousemove</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">pageX</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">pageY</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> x</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> y </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useMouse</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Mouse position is at: {{ x }}, {{ y }}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,_o,Ls,_a,Ac,uF,Ts,ha,Cc,AF,ho,lv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inject</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onUnmounted</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> timer </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">timer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">count</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">onMounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timer</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">setInterval</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1000</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #546E7A">// \u8BA1\u65F6\u5668\u8981\u6E05\u9664</span></div><div class='line'><span style="color: #82AAFF">onUnmounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">clearInterval</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timer</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Child Component: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,go,ga,wa,mc,Us,wo,W,_c,hc,ko,q,gc,CF,zs,ka,wc,mF,bo,av=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">isRef</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">unref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRef</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> initial </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">10</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Challenge 1: Update ref</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 2: Check if the `count` is a ref object.</span></div><div class='line'><span style="color: #546E7A"> * Make the output be 1</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">isRef</span><span style="color: #EEFFFF">(count) </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 3: Unwrap ref</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">initialCount</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">|</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Ref</span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">>)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// Make the output be true</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #82AAFF">unref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">) </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">10</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">initialCount</span><span style="color: #EEFFFF">(initial)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 4:</span></div><div class='line'><span style="color: #546E7A"> * create a ref for a property on a source reactive object.</span></div><div class='line'><span style="color: #546E7A"> * The created ref is synced with its source property:</span></div><div class='line'><span style="color: #546E7A"> * mutating the source property will update the ref, and vice-versa.</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">foo</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">bar</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> fooRef </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toRef</span><span style="color: #EEFFFF">(state</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">foo</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// change the impl...</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// mutating the ref updates the original</span></div><div class='line'><span style="color: #EEFFFF">fooRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">foo </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// mutating the original also updates the ref</span></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">foo</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(fooRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> - </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">-</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> + </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">+</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Bo,ba,kc,_F,m,Po,G,bc,Bc,xo,$,Pc,xc,jo,N,jc,hF,Ws,Ba,Ic,gF,Pa,Vc,wF,Io,nv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRefs</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCount</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">reactive</span><span style="color: #F07178">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> count</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">function</span><span style="color: #F07178"> </span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> state</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #82AAFF">toRefs</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">state</span><span style="color: #F07178">)</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">update</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Ensure the destructured properties don't lose their reactivity</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">state</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> update</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCount</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> - </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">-</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> + </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">+</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Vo,qs,Hc,J,Sc,kF,Gs,xa,Mc,bF,Ho,ov=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">computed</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> plusOne </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">computed</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">get</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">+</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">set</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">newValue</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">newValue</span><span style="color: #F07178"> </span><span style="color: #89DDFF">-</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Make the `plusOne` writable.</span></div><div class='line'><span style="color: #546E7A"> * So that we can get the result `plusOne` to be 3, and `count` to be 2.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">plusOne</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> plusOne </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,So,$s,Rc,X,Oc,BF,Ns,ja,Lc,PF,Mo,pv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 1: Watch once</span></div><div class='line'><span style="color: #546E7A"> * Make sure the watch callback only triggers once</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> watchOnce </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(count</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Only triggered once</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchOnce</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #82AAFF">setTimeout</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">))</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 2: Watch object</span></div><div class='line'><span style="color: #546E7A"> * Make sure the watch callback is triggered</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">The state.count updated</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">deep</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FF9CAC">true</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 3: Callback Flush Timing</span></div><div class='line'><span style="color: #546E7A"> * Make sure visited the updated eleRef</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> eleRef </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> age </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> age</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">eleRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">flush</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">post</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">age</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">18</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">ref</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">eleRef</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> age </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Ro,Js,Tc,K,Uc,xF,Xs,Ia,zc,jF,Va,Wc,IF,Oo,Fv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">shallowRef</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">shallowRef</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Does NOT trigger</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">State.count Updated</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">deep</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FF9CAC">true</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the watch callback trigger.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Lo,Ks,qc,Q,Gc,VF,Qs,Ha,$c,HF,Sa,Nc,SF,To,ev=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inject</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">count</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Uo,Zs,Jc,Z,Xc,MF,Ys,Ma,Kc,RF,zo,tv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">computed</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">effectScope</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> doubled </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">computed</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// use the `effectScope` API to make these effects stop together after being triggered once</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> scope </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">effectScope</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">scope</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">run</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watch</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">`</span><span style="color: #C3E88D">Count: </span><span style="color: #89DDFF">${</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">}`</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">2</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setTimeout</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">4</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">scope</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">stop</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> doubled </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Wo,sl,Qc,Y,Zc,OF,ll,Ra,Yc,LF,qo,cv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">customRef</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the function</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useDebouncedRef</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> delay </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #82AAFF">customRef</span><span style="color: #F07178">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">track</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">trigger</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> get</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">track</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #F07178"> set</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">newValue</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">clearTimeout</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">setTimeout</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">newValue</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">trigger</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">delay</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> text </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useDebouncedRef</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">hello</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Make sure the callback only gets triggered once when entered multiple times in a certain timeout</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(text</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> value </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-model</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Go,al,sr,ss,lr,TF,nl,Oa,ar,UF,ol,La,nr,zF,_,or,$o,pr,Fr,No,er,tr,WF,Jo,rv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Input </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">./Input.vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">''</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">Input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-model</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">capitalize</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Xo,Ta,cr,qF,Ko,yv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineProps</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineEmits</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> props </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineProps</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">modelValue</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">modelModifiers</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">default</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (</span><span style="color: #89DDFF">{}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> emit </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineEmits</span><span style="color: #EEFFFF">([</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">update:modelValue</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">emitValue</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">modelModifiers</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">capitalize</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">charAt</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toUpperCase</span><span style="color: #F07178">() </span><span style="color: #89DDFF">+</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">slice</span><span style="color: #F07178">(</span><span style="color: #F78C6C">1</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">emit</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">update:modelValue</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">value</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">modelValue</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">input</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">emitValue</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Qo,pl,rr,ls,yr,GF,Fl,Ua,ir,$F,za,Dr,NF,el,Wa,Er,JF,Zo,iv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #FF9CAC">false</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the input element focuses/blurs when the 'state' is toggled</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VFocus </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">updated</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">focus</span><span style="color: #EEFFFF">() </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">blur</span><span style="color: #EEFFFF">())</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">!</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-focus</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Yo,tl,vr,as,dr,XF,cl,qa,fr,KF,Ga,ur,QF,sp,Dv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the `onClick` method only gets triggered once when clicked many times quickly</span></div><div class='line'><span style="color: #546E7A"> * And you also need to support the debounce delay time option. e.g `v-debounce-click:ms`</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">debounce</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">fn</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> delay</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">(...</span><span style="color: #EEFFFF">args</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">(</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">args</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">clearTimeout</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">setTimeout</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">(</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">args</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">delay</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VDebounceClick </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">arg</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #82AAFF">debounce</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">arg</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Only triggered once when clicked many times quickly</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-debounce-click:200</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">onClick</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Click on it many times quickly</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,lp,rl,Ar,ns,Cr,ZF,yl,$a,mr,YF,ap,Ev=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the list item text color changes to red when the `toggleTab` is toggled</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VActiveStyle </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">[</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">fn</span><span style="color: #89DDFF">]</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #FFCB6B">Object</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">keys</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">styles</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">map</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">style</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">] </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">() </span><span style="color: #89DDFF">?</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">styles</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">] </span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">''</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">4</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">5</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">6</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">7</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">8</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> activeTab </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toggleTab</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">activeTab</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">index</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">li</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">, </span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">) in </span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> :</span><span style="color: #C792EA">key</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-active-style</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">[{ </span><span style="color: #F07178">color</span><span style="color: #89DDFF">: </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF"> }, () </span><span style="color: #C792EA">=></span><span style="color: #89DDFF"> </span><span style="color: #EEFFFF">activeTab</span><span style="color: #89DDFF"> === </span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">]</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">toggleTab</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">li</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,np,il,os,_r,op,hr,gr,se,pp,vv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a custom directive</span></div><div class='line'><span style="color: #546E7A"> * Create a two-way binding on a form input element</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VOhModel </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">input</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Hello Vue.js</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-oh-model</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Fp,Dl,Na,wr,le,El,Ja,kr,ae,ep,dv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> click1 </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click1</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> click2 </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> e </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click2</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">click1</span><span style="color: #89DDFF">()</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">stop</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">click2</span><span style="color: #89DDFF">()</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">click me</span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,tp,vl,br,ps,Br,ne,dl,Xa,Pr,oe,cp,fv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will fire even if Alt or Shift is also pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">shift</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will only fire when Shift and no other keys are pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.shift.</span><span style="color: #C792EA">exact</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onCtrlClick</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will only fire when no system modifiers are pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">exact</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick1</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onClick1</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onCtrlClick</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onCtrlClick</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick2</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onClick2</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div></code></div></pre>`,rp,fl,xr,Fs,jr,pe,ul,Ka,Ir,Fe,Al,Qa,Vr,ee,h,Hr,yp,Sr,Mr,ip,Rr,Or,te,Dp,uv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">nextTick</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">null</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">async</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">increment</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * DOM is not yet updated, how can we make sure that the DOM gets updated</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">await</span><span style="color: #F07178"> </span><span style="color: #82AAFF">nextTick</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">textContent</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">ref</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">counter</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">increment</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Ep,Cl,Lr,es,Tr,ce,ml,Za,Ur,re,_l,Ya,zr,ye,sn,ln,Wr,ie,hl,an,qr,De,gl,nn,Gr,Ee,on,pn,$r,ve,wl,Fn,Nr,de,vp,Av=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">isReactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRaw</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">markRaw</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> reactiveState </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toRaw</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(state))</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the output be true.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(reactiveState </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> state)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the output be false.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> info </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">markRaw</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> reactiveInfo </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(info)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">isReactive</span><span style="color: #EEFFFF">(reactiveInfo))</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> reactiveState</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,dp,en,Jr,fe,ts,fp,cs,Xr,Kr,up,rs,Qr,ue,kl,tn,Zr,Ae,cn,rn,Yr,Ce,bl,yn,sy,me,Dn,En,ly,_e,Bl,vn,ay,he,Pl,dn,ny,ge,fn,un,oy,we,xl,An,py,ke,Cn,mn,Fy,be,jl,_n,ey,Be,hn,gn,ty,Pe,Il,wn,cy,xe,Vl,kn,ry,je,bn,Bn,yy,Ie,Hl,Pn,iy,Ve,Sl,xn,Dy,He,Ap,Cv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the until function</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">until</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">function</span><span style="color: #F07178"> </span><span style="color: #82AAFF">toBe</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">new</span><span style="color: #F07178"> </span><span style="color: #FFCB6B">Promise</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">resolve</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">resolve</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">toBe</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">async</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">increase</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">setInterval</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1000</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">await</span><span style="color: #F07178"> </span><span style="color: #82AAFF">until</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">count</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toBe</span><span style="color: #F07178">(</span><span style="color: #F78C6C">3</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">3</span><span style="color: #F07178">) </span><span style="color: #546E7A">// Make sure the output is true</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">increase</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Increase</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Cp,Ml,jn,Ey,Se,Rl,In,vy,Me,mp,mv=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineCustomElement</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the code to create a custom element.</span></div><div class='line'><span style="color: #546E7A"> * Make the output of page show "Hello Vue.js".</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VueJs </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineCustomElement</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">props</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">message</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">template</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D"><span>{{message}}</span></span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">customElements</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">define</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue-js</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> VueJs)</span></div><div class='line'><span style="color: #82AAFF">onMounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">getElementById</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">app</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span><span style="color: #89DDFF">!.</span><span style="color: #EEFFFF">innerHTML</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D"><vue-js message="Hello Vue.js"></vue-js></span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #F78C6C">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">app</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre>`,_p,Ol,dy,ys,fy;return{c(){v=p("p"),A=c("\u6700\u8FD1\u505A\u4E86\u4E00\u4E0B\u8FD9\u4E2A"),u=p("a"),is=c("Vue.js \u6311\u6218"),d=c("\uFF0C\u5176\u4E2D\u7684\u9898\u76EE\u5927\u591A\u51FA\u81EA"),f=p("a"),Tl=c("Vue3 \u6587\u6863"),Ke=c(`\uFF0C\u90FD\u4E0D\u662F\u5F88\u96BE\uFF0C\u4F46\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9
|
|
\u6BD4\u8F83\u7410\u788E\uFF0C\u7528\u6765\u590D\u4E60\u633A\u597D\u7684\u3002`),gp=y(),w=p("p"),Qe=c("\u7136\u540E\u8FD9\u662F\u6211\u7684\u7B54\u6848\u548C\u9898\u76EE\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9\uFF0C\u9664\u4E86"),Ul=p("a"),Ze=c("\u9F20\u6807\u6307\u9488"),Ye=c("\u8FD9\u4E2A\u90E8\u5206\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u4E4B\u5916\uFF0C\u5176\u4ED6\u90FD\u90FD\u901A\u8FC7\u4E86\uFF0C\u7136\u540E\u8FD9\u4E2A\u9F20\u6807\u6307\u9488\u4E3A\u4EC0\u4E48\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u6211\u4E5F\u6CA1\u5F04\u660E\u767D\uFF0C\u8BD5\u4E86\u4E0B\u5176\u4ED6\u4EBA\u7684\u4E5F\u901A\u8FC7\u4E0D\u4E86\uFF0C\u597D\u5947\u602A\u2026\u2026"),wp=y(),zl=p("p"),st=c("\u8FD9\u91CC\u7701\u53BB\u90E8\u5206\u9898\u76EE\uFF0C\u4E3B\u8981\u5199\u7B54\u6848\u3002"),kp=y(),Ds=p("h2"),Wl=p("a"),lt=c("Built-ins"),bp=y(),Es=p("h3"),ql=p("a"),at=c("DOM \u4F20\u9001\u95E8"),Bp=y(),Gl=p("p"),nt=c("Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u5185\u7F6E\u7EC4\u4EF6\uFF0C\u5C06\u5176\u63D2\u69FD\u5185\u5BB9\u6E32\u67D3\u5230\u53E6\u4E00\u4E2A DOM\uFF0C\u6210\u4E3A\u8BE5 DOM \u7684\u4E00\u90E8\u5206\u3002"),Pp=y(),Mn=new D(!1),Rn=y(),vs=p("p"),ot=c("\u76F8\u5173\u77E5\u8BC6\u70B9 \uFF1A"),k=p("a"),pt=c("Teleport | Vue.js"),xp=y(),$l=p("blockquote"),ds=p("p"),Ft=c("\u6709\u65F6\u7EC4\u4EF6\u6A21\u677F\u7684\u4E00\u90E8\u5206\u903B\u8F91\u4E0A\u5C5E\u4E8E\u8BE5\u7EC4\u4EF6\uFF0C\u800C\u4ECE\u6280\u672F\u89D2\u5EA6\u6765\u770B\uFF0C\u6700\u597D\u5C06\u6A21\u677F\u7684\u8FD9\u4E00\u90E8\u5206\u79FB\u52A8\u5230 DOM \u4E2D Vue app \u4E4B\u5916\u7684\u5176\u4ED6\u4F4D\u7F6E"),Nl=p("sup"),fs=p("a"),et=c("1"),tt=c("\u3002"),jp=y(),b=p("ul"),On=p("li"),ct=c("\u6709\u70B9\u50CF\u4F20\u9001\u95E8\uFF0C\u5C06\u76F8\u5E94\u5143\u7D20\u6E32\u67D3\u5230\u5236\u5B9A\u4F4D\u7F6E"),rt=y(),Ln=p("li"),yt=c("to \u540E\u9762\u5199 css selector"),Ip=y(),us=p("h3"),Jl=p("a"),it=c("\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),Vp=y(),Xl=p("p"),Dt=c("Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u6307\u4EE4\uFF0C\u4EE5\u4FBF\u53EA\u6E32\u67D3\u4E00\u6B21\u5143\u7D20\u548C\u7EC4\u4EF6\uFF0C\u5E76\u4E14\u8DF3\u8FC7\u4EE5\u540E\u7684\u66F4\u65B0\u3002"),Hp=y(),Tn=new D(!1),Un=y(),As=p("p"),Et=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),zn=p("code"),vt=c("Vue-\u4E8B\u4EF6\u4FEE\u9970\u7B26"),Sp=y(),Cs=p("h2"),Kl=p("a"),dt=c("CSS Features"),Mp=y(),ms=p("h3"),Ql=p("a"),ft=c("\u52A8\u6001 CSS"),Rp=y(),B=p("p"),ut=c("Vue \u5355\u6587\u4EF6\u7EC4\u4EF6 "),Wn=p("code"),At=c("<style>"),Ct=c(" \u6A21\u5757\u652F\u6301\u7ED9 CSS \u7ED1\u5B9A\u52A8\u6001\u503C\u3002"),Op=y(),qn=new D(!1),Gn=y(),g=p("p"),mt=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),$n=p("code"),_t=c("v-bind"),ht=y(),Nn=p("code"),gt=c("Dynamic Styling\u52A8\u6001\u7ED1\u5B9A\u6837\u5F0F"),Lp=y(),_s=p("h3"),Zl=p("a"),wt=c("\u5168\u5C40 CSS"),Tp=y(),Yl=p("p"),kt=c("\u7ED9\u5177\u6709 CSS \u4F5C\u7528\u57DF\u7684 Vue \u5355\u6587\u4EF6\u7EC4\u4EF6\u8BBE\u7F6E\u5168\u5C40 CSS \u6837\u5F0F"),Up=y(),Jn=new D(!1),Xn=y(),sa=p("p"),bt=c("\u6216\u8005"),zp=y(),Kn=new D(!1),Qn=y(),hs=p("p"),Bt=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),P=p("a"),Pt=c("\u5355\u6587\u4EF6\u7EC4\u4EF6 CSS \u529F\u80FD | Vue.js"),Wp=y(),gs=p("h2"),la=p("a"),xt=c("Components"),qp=y(),ws=p("h3"),aa=p("a"),jt=c("DOM \u4F20\u9001\u95E8"),Gp=y(),na=p("p"),It=c("\u89C1\u4E0A\u9762"),$p=y(),ks=p("h3"),oa=p("a"),Vt=c("Props \u9A8C\u8BC1"),Np=y(),pa=p("p"),Ht=c("\u9A8C\u8BC1 Button \u7EC4\u4EF6\u7684 Prop \u7C7B\u578B \uFF0C\u4F7F\u5B83\u53EA\u63A5\u6536: primary | ghost | dashed | link | text | default \uFF0C\u4E14\u9ED8\u8BA4\u503C\u4E3A default"),Jp=y(),Zn=new D(!1),Yn=y(),bs=p("p"),St=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),x=p("a"),Mt=c("Props | Vue.js"),Xp=y(),Bs=p("h3"),Fa=p("a"),Rt=c("\u51FD\u6570\u5F0F\u7EC4\u4EF6"),Kp=y(),Ps=p("p"),Ot=c("\u8FD9\u9898\u6211\u4E0D\u662F\u5F88\u61C2\uFF0C\u7FFB\u4E86\u4E00\u4E0B\u5927\u5BB6\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u611F\u89C9\u8FD9\u4E2A\u6BD4\u8F83\u80FD\u770B\u61C2\uFF1A"),j=p("a"),Lt=c("21 - functional component \xB7 Issue #322 \xB7 webfansplz/vuejs-challenges \xB7 GitHub"),Qp=y(),so=new D(!1),lo=y(),ea=p("p"),Tt=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Zp=y(),I=p("ul"),ao=p("li"),V=p("a"),Ut=c("\u6E32\u67D3\u51FD\u6570 & JSX | Vue.js"),zt=y(),no=p("li"),H=p("a"),Wt=c("\u6E32\u67D3\u673A\u5236 | Vue.js"),Yp=y(),xs=p("h3"),ta=p("a"),qt=c("\u6E32\u67D3\u51FD\u6570[h()]"),sF=y(),ca=p("blockquote"),oo=p("p"),Gt=c("\u4F7F\u7528 h \u6E32\u67D3\u51FD\u6570\u6765\u5B9E\u73B0\u4E00\u4E2A\u7EC4\u4EF6\u3002"),lF=y(),po=new D(!1),Fo=y(),js=p("h3"),ra=p("a"),$t=c("\u6811\u7EC4\u4EF6"),aF=y(),ya=p("p"),Nt=c("\u5B9E\u73B0\u4E00\u4E2A\u6811\u7EC4\u4EF6"),nF=y(),eo=new D(!1),to=y(),ia=p("p"),Jt=c("\u53C2\u8003\uFF1A"),oF=y(),S=p("ul"),co=p("li"),M=p("a"),Xt=c("208 - Tree Component \xB7 Issue #659 \xB7 webfansplz/vuejs-challenges \xB7 GitHub"),Kt=y(),Is=p("li"),R=p("a"),Qt=c("Creating a Recursive Tree Component in Vue.js | DigitalOcean"),Zt=c(`
|
|
\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A`),C=p("a"),Yt=c("\u5355\u6587\u4EF6\u7EC4\u4EF6 "),ro=p("code"),sc=c("<script setup>"),lc=c(" | Vue.js"),pF=y(),Vs=p("h2"),Da=p("a"),ac=c("Composable Function"),FF=y(),Hs=p("p"),nc=c("\u672C\u8282\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),O=p("a"),oc=c("\u7EC4\u5408\u5F0F\u51FD\u6570 | Vue.js"),eF=y(),Ss=p("h3"),Ea=p("a"),pc=c("\u5207\u6362\u5668"),tF=y(),va=p("p"),Fc=c("\u5C1D\u8BD5\u7F16\u5199\u53EF\u7EC4\u5408\u51FD\u6570"),cF=y(),yo=new D(!1),io=y(),Ms=p("h3"),da=p("a"),ec=c("\u8BA1\u6570\u5668"),rF=y(),fa=p("p"),tc=c("\u5B9E\u73B0\u4E00\u4E2A\u8BA1\u6570\u5668"),yF=y(),Do=new D(!1),Eo=y(),Rs=p("h3"),ua=p("a"),cc=c("\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570"),iF=y(),L=p("p"),rc=c("\u5C01\u88C5\u4E00\u4E2A"),vo=p("code"),yc=c("localStorage"),ic=c("API"),DF=y(),fo=new D(!1),uo=y(),Aa=p("p"),Dc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),EF=y(),T=p("ul"),Ao=p("li"),U=p("a"),Ec=c("watchEffect()"),vc=y(),Co=p("li"),z=p("a"),dc=c("Window.localStorage - Web API \u63A5\u53E3\u53C2\u8003 | MDN"),vF=y(),Os=p("h3"),Ca=p("a"),fc=c("\u9F20\u6807\u5750\u6807"),dF=y(),ma=p("p"),uc=c("\u8FD9\u4E2A\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\uFF0C\u4E0D\u77E5\u9053\u4EC0\u4E48\u539F\u56E0\uFF0C\u8BD5\u4E86\u4E0B\u5176\u4ED6\u4EBA\u7684\u4E5F\u6CA1\u80FD\u901A\u8FC7\u2026\u2026"),fF=y(),mo=new D(!1),_o=y(),Ls=p("h2"),_a=p("a"),Ac=c("Composition API"),uF=y(),Ts=p("h3"),ha=p("a"),Cc=c("\u751F\u547D\u5468\u671F\u94A9\u5B50"),AF=y(),ho=new D(!1),go=y(),ga=p("ul"),wa=p("li"),mc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Us=p("ul"),wo=p("li"),W=p("a"),_c=c("\u7EC4\u5408\u5F0F API\uFF1A\u4F9D\u8D56\u6CE8\u5165 | Vue.js"),hc=y(),ko=p("li"),q=p("a"),gc=c("\u7EC4\u5408\u5F0F API\uFF1A\u751F\u547D\u5468\u671F\u94A9\u5B50 | Vue.js"),CF=y(),zs=p("h3"),ka=p("a"),wc=c("ref \u5168\u5BB6\u6876"),mF=y(),bo=new D(!1),Bo=y(),ba=p("p"),kc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),_F=y(),m=p("ul"),Po=p("li"),G=p("a"),bc=c("isRef()"),Bc=y(),xo=p("li"),$=p("a"),Pc=c("unref()"),xc=y(),jo=p("li"),N=p("a"),jc=c("toRef"),hF=y(),Ws=p("h3"),Ba=p("a"),Ic=c("\u54CD\u5E94\u6027\u4E22\u5931"),gF=y(),Pa=p("p"),Vc=c("\u4FDD\u8BC1\u89E3\u6784/\u6269\u5C55\u4E0D\u4E22\u5931\u54CD\u5E94\u6027"),wF=y(),Io=new D(!1),Vo=y(),qs=p("p"),Hc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),J=p("a"),Sc=c("toRefs"),kF=y(),Gs=p("h3"),xa=p("a"),Mc=c("\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),bF=y(),Ho=new D(!1),So=y(),$s=p("p"),Rc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),X=p("a"),Oc=c("\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),BF=y(),Ns=p("h3"),ja=p("a"),Lc=c("watch \u5168\u5BB6\u6876"),PF=y(),Mo=new D(!1),Ro=y(),Js=p("p"),Tc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),K=p("a"),Uc=c("\u4FA6\u542C\u5668 | Vue.js"),xF=y(),Xs=p("h3"),Ia=p("a"),zc=c("\u6D45\u5C42 ref"),jF=y(),Va=p("p"),Wc=c("\u54CD\u5E94\u5F0F API: shallowRef"),IF=y(),Oo=new D(!1),Lo=y(),Ks=p("p"),qc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Q=p("a"),Gc=c("shallowRef()"),VF=y(),Qs=p("h3"),Ha=p("a"),$c=c("\u4F9D\u8D56\u6CE8\u5165"),HF=y(),Sa=p("p"),Nc=c("child.vue"),SF=y(),To=new D(!1),Uo=y(),Zs=p("p"),Jc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Z=p("a"),Xc=c("\u7EC4\u5408\u5F0F API\uFF1A\u4F9D\u8D56\u6CE8\u5165 | Vue.js"),MF=y(),Ys=p("h3"),Ma=p("a"),Kc=c("Effect \u4F5C\u7528\u57DF API"),RF=y(),zo=new D(!1),Wo=y(),sl=p("p"),Qc=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Y=p("a"),Zc=c("effectScope"),OF=y(),ll=p("h3"),Ra=p("a"),Yc=c("\u81EA\u5B9A\u4E49 ref"),LF=y(),qo=new D(!1),Go=y(),al=p("p"),sr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ss=p("a"),lr=c("customRef"),TF=y(),nl=p("h2"),Oa=p("a"),ar=c("Directives"),UF=y(),ol=p("h3"),La=p("a"),nr=c("\u5927\u5199"),zF=y(),_=p("p"),or=c("\u521B\u5EFA\u4E00\u4E2A\u81EA\u5B9A\u4E49\u7684\u4FEE\u9970\u7B26 \xA0"),$o=p("code"),pr=c("capitalize"),Fr=c("\uFF0C\u5B83\u4F1A\u81EA\u52A8\u5C06 \xA0"),No=p("code"),er=c("v-model"),tr=c(`\xA0 \u7ED1\u5B9A\u8F93\u5165\u7684\u5B57\u7B26\u4E32\u503C\u9996\u5B57\u6BCD\u8F6C\u4E3A\u5927\u5199\uFF1A
|
|
App.vue`),WF=y(),Jo=new D(!1),Xo=y(),Ta=p("p"),cr=c("Input.vue"),qF=y(),Ko=new D(!1),Qo=y(),pl=p("p"),rr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ls=p("a"),yr=c("\u5904\u7406 v-model \u4FEE\u9970\u7B26"),GF=y(),Fl=p("h3"),Ua=p("a"),ir=c("\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),$F=y(),za=p("p"),Dr=c("\u89C1\u4E0A\u9762\u3002v-once"),NF=y(),el=p("h3"),Wa=p("a"),Er=c("\u5207\u6362\u7126\u70B9\u6307\u4EE4"),JF=y(),Zo=new D(!1),Yo=y(),tl=p("p"),vr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),as=p("a"),dr=c("\u81EA\u5B9A\u4E49\u6307\u4EE4 | Vue.js"),XF=y(),cl=p("h3"),qa=p("a"),fr=c("\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),KF=y(),Ga=p("p"),ur=c("\u5C1D\u8BD5\u5B9E\u73B0\u4E00\u4E2A\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),QF=y(),sp=new D(!1),lp=y(),rl=p("p"),Ar=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ns=p("a"),Cr=c("\u6307\u4EE4\u94A9\u5B50"),ZF=y(),yl=p("h3"),$a=p("a"),mr=c("\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4"),YF=y(),ap=new D(!1),np=y(),il=p("h3"),os=p("a"),_r=c("\u5B9E\u73B0\u7B80\u6613\u7248"),op=p("code"),hr=c("v-model"),gr=c("\u6307\u4EE4"),se=y(),pp=new D(!1),Fp=y(),Dl=p("h2"),Na=p("a"),wr=c("Event Handling"),le=y(),El=p("h3"),Ja=p("a"),kr=c("\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1"),ae=y(),ep=new D(!1),tp=y(),vl=p("p"),br=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ps=p("a"),Br=c("\u4E8B\u4EF6\u4FEE\u9970\u7B26"),ne=y(),dl=p("h3"),Xa=p("a"),Pr=c("\u6309\u952E\u4FEE\u9970\u7B26"),oe=y(),cp=new D(!1),rp=y(),fl=p("p"),xr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Fs=p("a"),jr=c("\u6309\u952E\u4FEE\u9970\u7B26"),pe=y(),ul=p("h2"),Ka=p("a"),Ir=c("Global API:General"),Fe=y(),Al=p("h3"),Qa=p("a"),Vr=c("\u4E0B\u4E00\u6B21 DOM \u66F4\u65B0"),ee=y(),h=p("p"),Hr=c("\u5728"),yp=p("code"),Sr=c("Vue.js"),Mr=c("\u4E2D\u6539\u53D8\u54CD\u5E94\u5F0F\u72B6\u6001\u65F6\uFF0CDOM \u4E0D\u4F1A\u540C\u6B65\u66F4\u65B0\u3002\xA0"),ip=p("code"),Rr=c("Vue.js"),Or=c("\xA0 \u63D0\u4F9B\u4E86\u4E00\u4E2A\u7528\u4E8E\u7B49\u5F85\u4E0B\u4E00\u6B21 DOM \u66F4\u65B0\u7684\u65B9\u6CD5"),te=y(),Dp=new D(!1),Ep=y(),Cl=p("p"),Lr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),es=p("a"),Tr=c("nextTick()"),ce=y(),ml=p("h2"),Za=p("a"),Ur=c("Lifecycle"),re=y(),_l=p("h3"),Ya=p("a"),zr=c("\u751F\u547D\u5468\u671F\u94A9\u5B50"),ye=y(),sn=p("p"),ln=p("a"),Wr=c("\u540C\u4E0A\uFF1A\u751F\u547D\u5468\u671F\u94A9\u5B50"),ie=y(),hl=p("h2"),an=p("a"),qr=c("Reactivity:Advanced"),De=y(),gl=p("h3"),nn=p("a"),Gr=c("\u6D45\u5C42 ref"),Ee=y(),on=p("p"),pn=p("a"),$r=c("\u540C\u4E0A\uFF1A\u6D45\u5C42 ref"),ve=y(),wl=p("h3"),Fn=p("a"),Nr=c("\u539F\u59CB\u503C API"),de=y(),vp=new D(!1),dp=y(),en=p("p"),Jr=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),fe=y(),ts=p("ul"),fp=p("li"),cs=p("a"),Xr=c("toRaw"),Kr=y(),up=p("li"),rs=p("a"),Qr=c("markRaw"),ue=y(),kl=p("h3"),tn=p("a"),Zr=c("Effect \u4F5C\u7528\u57DF API"),Ae=y(),cn=p("p"),rn=p("a"),Yr=c("\u540C\u4E0A\uFF1AEffect \u4F5C\u7528\u57DF API"),Ce=y(),bl=p("h3"),yn=p("a"),sy=c("\u81EA\u5B9A\u4E49 ref"),me=y(),Dn=p("p"),En=p("a"),ly=c("\u540C\u4E0A\uFF1A\u81EA\u5B9A\u4E49 ref"),_e=y(),Bl=p("h2"),vn=p("a"),ay=c("Reactivity:Core"),he=y(),Pl=p("h3"),dn=p("a"),ny=c("ref \u5168\u5BB6\u6876"),ge=y(),fn=p("p"),un=p("a"),oy=c("\u540C\u4E0A\uFF1Aref \u5168\u5BB6\u6876"),we=y(),xl=p("h3"),An=p("a"),py=c("\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),ke=y(),Cn=p("p"),mn=p("a"),Fy=c("\u540C\u4E0A\uFF1A\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),be=y(),jl=p("h3"),_n=p("a"),ey=c("watch \u5168\u5BB6\u6876"),Be=y(),hn=p("p"),gn=p("a"),ty=c("\u540C\u4E0A\uFF1Awatch \u5168\u5BB6\u6876"),Pe=y(),Il=p("h2"),wn=p("a"),cy=c("Reactivity:Utilities"),xe=y(),Vl=p("h3"),kn=p("a"),ry=c("\u54CD\u5E94\u6027\u4E1F\u5931"),je=y(),bn=p("p"),Bn=p("a"),yy=c("\u540C\u4E0A\uFF1A\u54CD\u5E94\u6027\u4E1F\u5931"),Ie=y(),Hl=p("h2"),Pn=p("a"),iy=c("Utility Function"),Ve=y(),Sl=p("h3"),xn=p("a"),Dy=c("until"),He=y(),Ap=new D(!1),Cp=y(),Ml=p("h2"),jn=p("a"),Ey=c("Web Components"),Se=y(),Rl=p("h3"),In=p("a"),vy=c("\u81EA\u5B9A\u4E49\u5143\u7D20"),Me=y(),mp=new D(!1),_p=y(),Ol=p("p"),dy=c(`\u5E76\u4E14 vite.config.js \u91CC\u8981\u505A\u76F8\u5173\u8BBE\u7F6E
|
|
\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A`),ys=p("a"),fy=c("Vue \u4E0E Web Components | Vue.js"),this.h()},l(s){v=F(s,"P",{});var n=e(v);A=r(n,"\u6700\u8FD1\u505A\u4E86\u4E00\u4E0B\u8FD9\u4E2A"),u=F(n,"A",{href:!0,rel:!0,target:!0});var Ty=e(u);is=r(Ty,"Vue.js \u6311\u6218"),Ty.forEach(l),d=r(n,"\uFF0C\u5176\u4E2D\u7684\u9898\u76EE\u5927\u591A\u51FA\u81EA"),f=F(n,"A",{href:!0,rel:!0,target:!0});var Uy=e(f);Tl=r(Uy,"Vue3 \u6587\u6863"),Uy.forEach(l),Ke=r(n,`\uFF0C\u90FD\u4E0D\u662F\u5F88\u96BE\uFF0C\u4F46\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9
|
|
\u6BD4\u8F83\u7410\u788E\uFF0C\u7528\u6765\u590D\u4E60\u633A\u597D\u7684\u3002`),n.forEach(l),gp=i(s),w=F(s,"P",{});var Re=e(w);Qe=r(Re,"\u7136\u540E\u8FD9\u662F\u6211\u7684\u7B54\u6848\u548C\u9898\u76EE\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9\uFF0C\u9664\u4E86"),Ul=F(Re,"A",{href:!0});var zy=e(Ul);Ze=r(zy,"\u9F20\u6807\u6307\u9488"),zy.forEach(l),Ye=r(Re,"\u8FD9\u4E2A\u90E8\u5206\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u4E4B\u5916\uFF0C\u5176\u4ED6\u90FD\u90FD\u901A\u8FC7\u4E86\uFF0C\u7136\u540E\u8FD9\u4E2A\u9F20\u6807\u6307\u9488\u4E3A\u4EC0\u4E48\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u6211\u4E5F\u6CA1\u5F04\u660E\u767D\uFF0C\u8BD5\u4E86\u4E0B\u5176\u4ED6\u4EBA\u7684\u4E5F\u901A\u8FC7\u4E0D\u4E86\uFF0C\u597D\u5947\u602A\u2026\u2026"),Re.forEach(l),wp=i(s),zl=F(s,"P",{});var Wy=e(zl);st=r(Wy,"\u8FD9\u91CC\u7701\u53BB\u90E8\u5206\u9898\u76EE\uFF0C\u4E3B\u8981\u5199\u7B54\u6848\u3002"),Wy.forEach(l),kp=i(s),Ds=F(s,"H2",{id:!0});var qy=e(Ds);Wl=F(qy,"A",{href:!0});var Gy=e(Wl);lt=r(Gy,"Built-ins"),Gy.forEach(l),qy.forEach(l),bp=i(s),Es=F(s,"H3",{id:!0});var $y=e(Es);ql=F($y,"A",{href:!0});var Ny=e(ql);at=r(Ny,"DOM \u4F20\u9001\u95E8"),Ny.forEach(l),$y.forEach(l),Bp=i(s),Gl=F(s,"P",{});var Jy=e(Gl);nt=r(Jy,"Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u5185\u7F6E\u7EC4\u4EF6\uFF0C\u5C06\u5176\u63D2\u69FD\u5185\u5BB9\u6E32\u67D3\u5230\u53E6\u4E00\u4E2A DOM\uFF0C\u6210\u4E3A\u8BE5 DOM \u7684\u4E00\u90E8\u5206\u3002"),Jy.forEach(l),Pp=i(s),Mn=E(s,!1),Rn=i(s),vs=F(s,"P",{});var uy=e(vs);ot=r(uy,"\u76F8\u5173\u77E5\u8BC6\u70B9 \uFF1A"),k=F(uy,"A",{href:!0,rel:!0,target:!0});var Xy=e(k);pt=r(Xy,"Teleport | Vue.js"),Xy.forEach(l),uy.forEach(l),xp=i(s),$l=F(s,"BLOCKQUOTE",{});var Ky=e($l);ds=F(Ky,"P",{});var Oe=e(ds);Ft=r(Oe,"\u6709\u65F6\u7EC4\u4EF6\u6A21\u677F\u7684\u4E00\u90E8\u5206\u903B\u8F91\u4E0A\u5C5E\u4E8E\u8BE5\u7EC4\u4EF6\uFF0C\u800C\u4ECE\u6280\u672F\u89D2\u5EA6\u6765\u770B\uFF0C\u6700\u597D\u5C06\u6A21\u677F\u7684\u8FD9\u4E00\u90E8\u5206\u79FB\u52A8\u5230 DOM \u4E2D Vue app \u4E4B\u5916\u7684\u5176\u4ED6\u4F4D\u7F6E"),Nl=F(Oe,"SUP",{id:!0});var Qy=e(Nl);fs=F(Qy,"A",{href:!0,class:!0});var Zy=e(fs);et=r(Zy,"1"),Zy.forEach(l),Qy.forEach(l),tt=r(Oe,"\u3002"),Oe.forEach(l),Ky.forEach(l),jp=i(s),b=F(s,"UL",{});var Le=e(b);On=F(Le,"LI",{});var Yy=e(On);ct=r(Yy,"\u6709\u70B9\u50CF\u4F20\u9001\u95E8\uFF0C\u5C06\u76F8\u5E94\u5143\u7D20\u6E32\u67D3\u5230\u5236\u5B9A\u4F4D\u7F6E"),Yy.forEach(l),rt=i(Le),Ln=F(Le,"LI",{});var si=e(Ln);yt=r(si,"to \u540E\u9762\u5199 css selector"),si.forEach(l),Le.forEach(l),Ip=i(s),us=F(s,"H3",{id:!0});var li=e(us);Jl=F(li,"A",{href:!0});var ai=e(Jl);it=r(ai,"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),ai.forEach(l),li.forEach(l),Vp=i(s),Xl=F(s,"P",{});var ni=e(Xl);Dt=r(ni,"Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u6307\u4EE4\uFF0C\u4EE5\u4FBF\u53EA\u6E32\u67D3\u4E00\u6B21\u5143\u7D20\u548C\u7EC4\u4EF6\uFF0C\u5E76\u4E14\u8DF3\u8FC7\u4EE5\u540E\u7684\u66F4\u65B0\u3002"),ni.forEach(l),Hp=i(s),Tn=E(s,!1),Un=i(s),As=F(s,"P",{});var Ay=e(As);Et=r(Ay,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),zn=F(Ay,"CODE",{});var oi=e(zn);vt=r(oi,"Vue-\u4E8B\u4EF6\u4FEE\u9970\u7B26"),oi.forEach(l),Ay.forEach(l),Sp=i(s),Cs=F(s,"H2",{id:!0});var pi=e(Cs);Kl=F(pi,"A",{href:!0});var Fi=e(Kl);dt=r(Fi,"CSS Features"),Fi.forEach(l),pi.forEach(l),Mp=i(s),ms=F(s,"H3",{id:!0});var ei=e(ms);Ql=F(ei,"A",{href:!0});var ti=e(Ql);ft=r(ti,"\u52A8\u6001 CSS"),ti.forEach(l),ei.forEach(l),Rp=i(s),B=F(s,"P",{});var Te=e(B);ut=r(Te,"Vue \u5355\u6587\u4EF6\u7EC4\u4EF6 "),Wn=F(Te,"CODE",{});var ci=e(Wn);At=r(ci,"<style>"),ci.forEach(l),Ct=r(Te," \u6A21\u5757\u652F\u6301\u7ED9 CSS \u7ED1\u5B9A\u52A8\u6001\u503C\u3002"),Te.forEach(l),Op=i(s),qn=E(s,!1),Gn=i(s),g=F(s,"P",{});var hp=e(g);mt=r(hp,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),$n=F(hp,"CODE",{});var ri=e($n);_t=r(ri,"v-bind"),ri.forEach(l),ht=i(hp),Nn=F(hp,"CODE",{});var yi=e(Nn);gt=r(yi,"Dynamic Styling\u52A8\u6001\u7ED1\u5B9A\u6837\u5F0F"),yi.forEach(l),hp.forEach(l),Lp=i(s),_s=F(s,"H3",{id:!0});var ii=e(_s);Zl=F(ii,"A",{href:!0});var Di=e(Zl);wt=r(Di,"\u5168\u5C40 CSS"),Di.forEach(l),ii.forEach(l),Tp=i(s),Yl=F(s,"P",{});var Ei=e(Yl);kt=r(Ei,"\u7ED9\u5177\u6709 CSS \u4F5C\u7528\u57DF\u7684 Vue \u5355\u6587\u4EF6\u7EC4\u4EF6\u8BBE\u7F6E\u5168\u5C40 CSS \u6837\u5F0F"),Ei.forEach(l),Up=i(s),Jn=E(s,!1),Xn=i(s),sa=F(s,"P",{});var vi=e(sa);bt=r(vi,"\u6216\u8005"),vi.forEach(l),zp=i(s),Kn=E(s,!1),Qn=i(s),hs=F(s,"P",{});var Cy=e(hs);Bt=r(Cy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),P=F(Cy,"A",{href:!0,rel:!0,target:!0});var di=e(P);Pt=r(di,"\u5355\u6587\u4EF6\u7EC4\u4EF6 CSS \u529F\u80FD | Vue.js"),di.forEach(l),Cy.forEach(l),Wp=i(s),gs=F(s,"H2",{id:!0});var fi=e(gs);la=F(fi,"A",{href:!0});var ui=e(la);xt=r(ui,"Components"),ui.forEach(l),fi.forEach(l),qp=i(s),ws=F(s,"H3",{id:!0});var Ai=e(ws);aa=F(Ai,"A",{href:!0});var Ci=e(aa);jt=r(Ci,"DOM \u4F20\u9001\u95E8"),Ci.forEach(l),Ai.forEach(l),Gp=i(s),na=F(s,"P",{});var mi=e(na);It=r(mi,"\u89C1\u4E0A\u9762"),mi.forEach(l),$p=i(s),ks=F(s,"H3",{id:!0});var _i=e(ks);oa=F(_i,"A",{href:!0});var hi=e(oa);Vt=r(hi,"Props \u9A8C\u8BC1"),hi.forEach(l),_i.forEach(l),Np=i(s),pa=F(s,"P",{});var gi=e(pa);Ht=r(gi,"\u9A8C\u8BC1 Button \u7EC4\u4EF6\u7684 Prop \u7C7B\u578B \uFF0C\u4F7F\u5B83\u53EA\u63A5\u6536: primary | ghost | dashed | link | text | default \uFF0C\u4E14\u9ED8\u8BA4\u503C\u4E3A default"),gi.forEach(l),Jp=i(s),Zn=E(s,!1),Yn=i(s),bs=F(s,"P",{});var my=e(bs);St=r(my,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),x=F(my,"A",{href:!0,rel:!0,target:!0});var wi=e(x);Mt=r(wi,"Props | Vue.js"),wi.forEach(l),my.forEach(l),Xp=i(s),Bs=F(s,"H3",{id:!0});var ki=e(Bs);Fa=F(ki,"A",{href:!0});var bi=e(Fa);Rt=r(bi,"\u51FD\u6570\u5F0F\u7EC4\u4EF6"),bi.forEach(l),ki.forEach(l),Kp=i(s),Ps=F(s,"P",{});var _y=e(Ps);Ot=r(_y,"\u8FD9\u9898\u6211\u4E0D\u662F\u5F88\u61C2\uFF0C\u7FFB\u4E86\u4E00\u4E0B\u5927\u5BB6\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u611F\u89C9\u8FD9\u4E2A\u6BD4\u8F83\u80FD\u770B\u61C2\uFF1A"),j=F(_y,"A",{href:!0,rel:!0,target:!0});var Bi=e(j);Lt=r(Bi,"21 - functional component \xB7 Issue #322 \xB7 webfansplz/vuejs-challenges \xB7 GitHub"),Bi.forEach(l),_y.forEach(l),Qp=i(s),so=E(s,!1),lo=i(s),ea=F(s,"P",{});var Pi=e(ea);Tt=r(Pi,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Pi.forEach(l),Zp=i(s),I=F(s,"UL",{});var Ue=e(I);ao=F(Ue,"LI",{});var xi=e(ao);V=F(xi,"A",{href:!0,rel:!0,target:!0});var ji=e(V);Ut=r(ji,"\u6E32\u67D3\u51FD\u6570 & JSX | Vue.js"),ji.forEach(l),xi.forEach(l),zt=i(Ue),no=F(Ue,"LI",{});var Ii=e(no);H=F(Ii,"A",{href:!0,rel:!0,target:!0});var Vi=e(H);Wt=r(Vi,"\u6E32\u67D3\u673A\u5236 | Vue.js"),Vi.forEach(l),Ii.forEach(l),Ue.forEach(l),Yp=i(s),xs=F(s,"H3",{id:!0});var Hi=e(xs);ta=F(Hi,"A",{href:!0});var Si=e(ta);qt=r(Si,"\u6E32\u67D3\u51FD\u6570[h()]"),Si.forEach(l),Hi.forEach(l),sF=i(s),ca=F(s,"BLOCKQUOTE",{});var Mi=e(ca);oo=F(Mi,"P",{});var Ri=e(oo);Gt=r(Ri,"\u4F7F\u7528 h \u6E32\u67D3\u51FD\u6570\u6765\u5B9E\u73B0\u4E00\u4E2A\u7EC4\u4EF6\u3002"),Ri.forEach(l),Mi.forEach(l),lF=i(s),po=E(s,!1),Fo=i(s),js=F(s,"H3",{id:!0});var Oi=e(js);ra=F(Oi,"A",{href:!0});var Li=e(ra);$t=r(Li,"\u6811\u7EC4\u4EF6"),Li.forEach(l),Oi.forEach(l),aF=i(s),ya=F(s,"P",{});var Ti=e(ya);Nt=r(Ti,"\u5B9E\u73B0\u4E00\u4E2A\u6811\u7EC4\u4EF6"),Ti.forEach(l),nF=i(s),eo=E(s,!1),to=i(s),ia=F(s,"P",{});var Ui=e(ia);Jt=r(Ui,"\u53C2\u8003\uFF1A"),Ui.forEach(l),oF=i(s),S=F(s,"UL",{});var ze=e(S);co=F(ze,"LI",{});var zi=e(co);M=F(zi,"A",{href:!0,rel:!0,target:!0});var Wi=e(M);Xt=r(Wi,"208 - Tree Component \xB7 Issue #659 \xB7 webfansplz/vuejs-challenges \xB7 GitHub"),Wi.forEach(l),zi.forEach(l),Kt=i(ze),Is=F(ze,"LI",{});var We=e(Is);R=F(We,"A",{href:!0,rel:!0,target:!0});var qi=e(R);Qt=r(qi,"Creating a Recursive Tree Component in Vue.js | DigitalOcean"),qi.forEach(l),Zt=r(We,`
|
|
\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A`),C=F(We,"A",{href:!0,rel:!0,target:!0});var qe=e(C);Yt=r(qe,"\u5355\u6587\u4EF6\u7EC4\u4EF6 "),ro=F(qe,"CODE",{});var Gi=e(ro);sc=r(Gi,"<script setup>"),Gi.forEach(l),lc=r(qe," | Vue.js"),qe.forEach(l),We.forEach(l),ze.forEach(l),pF=i(s),Vs=F(s,"H2",{id:!0});var $i=e(Vs);Da=F($i,"A",{href:!0});var Ni=e(Da);ac=r(Ni,"Composable Function"),Ni.forEach(l),$i.forEach(l),FF=i(s),Hs=F(s,"P",{});var hy=e(Hs);nc=r(hy,"\u672C\u8282\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),O=F(hy,"A",{href:!0,rel:!0,target:!0});var Ji=e(O);oc=r(Ji,"\u7EC4\u5408\u5F0F\u51FD\u6570 | Vue.js"),Ji.forEach(l),hy.forEach(l),eF=i(s),Ss=F(s,"H3",{id:!0});var Xi=e(Ss);Ea=F(Xi,"A",{href:!0});var Ki=e(Ea);pc=r(Ki,"\u5207\u6362\u5668"),Ki.forEach(l),Xi.forEach(l),tF=i(s),va=F(s,"P",{});var Qi=e(va);Fc=r(Qi,"\u5C1D\u8BD5\u7F16\u5199\u53EF\u7EC4\u5408\u51FD\u6570"),Qi.forEach(l),cF=i(s),yo=E(s,!1),io=i(s),Ms=F(s,"H3",{id:!0});var Zi=e(Ms);da=F(Zi,"A",{href:!0});var Yi=e(da);ec=r(Yi,"\u8BA1\u6570\u5668"),Yi.forEach(l),Zi.forEach(l),rF=i(s),fa=F(s,"P",{});var sD=e(fa);tc=r(sD,"\u5B9E\u73B0\u4E00\u4E2A\u8BA1\u6570\u5668"),sD.forEach(l),yF=i(s),Do=E(s,!1),Eo=i(s),Rs=F(s,"H3",{id:!0});var lD=e(Rs);ua=F(lD,"A",{href:!0});var aD=e(ua);cc=r(aD,"\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570"),aD.forEach(l),lD.forEach(l),iF=i(s),L=F(s,"P",{});var Ge=e(L);rc=r(Ge,"\u5C01\u88C5\u4E00\u4E2A"),vo=F(Ge,"CODE",{});var nD=e(vo);yc=r(nD,"localStorage"),nD.forEach(l),ic=r(Ge,"API"),Ge.forEach(l),DF=i(s),fo=E(s,!1),uo=i(s),Aa=F(s,"P",{});var oD=e(Aa);Dc=r(oD,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),oD.forEach(l),EF=i(s),T=F(s,"UL",{});var $e=e(T);Ao=F($e,"LI",{});var pD=e(Ao);U=F(pD,"A",{href:!0,rel:!0,target:!0});var FD=e(U);Ec=r(FD,"watchEffect()"),FD.forEach(l),pD.forEach(l),vc=i($e),Co=F($e,"LI",{});var eD=e(Co);z=F(eD,"A",{href:!0,rel:!0,target:!0});var tD=e(z);dc=r(tD,"Window.localStorage - Web API \u63A5\u53E3\u53C2\u8003 | MDN"),tD.forEach(l),eD.forEach(l),$e.forEach(l),vF=i(s),Os=F(s,"H3",{id:!0});var cD=e(Os);Ca=F(cD,"A",{href:!0});var rD=e(Ca);fc=r(rD,"\u9F20\u6807\u5750\u6807"),rD.forEach(l),cD.forEach(l),dF=i(s),ma=F(s,"P",{});var yD=e(ma);uc=r(yD,"\u8FD9\u4E2A\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\uFF0C\u4E0D\u77E5\u9053\u4EC0\u4E48\u539F\u56E0\uFF0C\u8BD5\u4E86\u4E0B\u5176\u4ED6\u4EBA\u7684\u4E5F\u6CA1\u80FD\u901A\u8FC7\u2026\u2026"),yD.forEach(l),fF=i(s),mo=E(s,!1),_o=i(s),Ls=F(s,"H2",{id:!0});var iD=e(Ls);_a=F(iD,"A",{href:!0});var DD=e(_a);Ac=r(DD,"Composition API"),DD.forEach(l),iD.forEach(l),uF=i(s),Ts=F(s,"H3",{id:!0});var ED=e(Ts);ha=F(ED,"A",{href:!0});var vD=e(ha);Cc=r(vD,"\u751F\u547D\u5468\u671F\u94A9\u5B50"),vD.forEach(l),ED.forEach(l),AF=i(s),ho=E(s,!1),go=i(s),ga=F(s,"UL",{});var dD=e(ga);wa=F(dD,"LI",{});var gy=e(wa);mc=r(gy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Us=F(gy,"UL",{});var Ne=e(Us);wo=F(Ne,"LI",{});var fD=e(wo);W=F(fD,"A",{href:!0,rel:!0,target:!0});var uD=e(W);_c=r(uD,"\u7EC4\u5408\u5F0F API\uFF1A\u4F9D\u8D56\u6CE8\u5165 | Vue.js"),uD.forEach(l),fD.forEach(l),hc=i(Ne),ko=F(Ne,"LI",{});var AD=e(ko);q=F(AD,"A",{href:!0,rel:!0,target:!0});var CD=e(q);gc=r(CD,"\u7EC4\u5408\u5F0F API\uFF1A\u751F\u547D\u5468\u671F\u94A9\u5B50 | Vue.js"),CD.forEach(l),AD.forEach(l),Ne.forEach(l),gy.forEach(l),dD.forEach(l),CF=i(s),zs=F(s,"H3",{id:!0});var mD=e(zs);ka=F(mD,"A",{href:!0});var _D=e(ka);wc=r(_D,"ref \u5168\u5BB6\u6876"),_D.forEach(l),mD.forEach(l),mF=i(s),bo=E(s,!1),Bo=i(s),ba=F(s,"P",{});var hD=e(ba);kc=r(hD,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),hD.forEach(l),_F=i(s),m=F(s,"UL",{});var Vn=e(m);Po=F(Vn,"LI",{});var gD=e(Po);G=F(gD,"A",{href:!0,rel:!0,target:!0});var wD=e(G);bc=r(wD,"isRef()"),wD.forEach(l),gD.forEach(l),Bc=i(Vn),xo=F(Vn,"LI",{});var kD=e(xo);$=F(kD,"A",{href:!0,rel:!0,target:!0});var bD=e($);Pc=r(bD,"unref()"),bD.forEach(l),kD.forEach(l),xc=i(Vn),jo=F(Vn,"LI",{});var BD=e(jo);N=F(BD,"A",{href:!0,rel:!0,target:!0});var PD=e(N);jc=r(PD,"toRef"),PD.forEach(l),BD.forEach(l),Vn.forEach(l),hF=i(s),Ws=F(s,"H3",{id:!0});var xD=e(Ws);Ba=F(xD,"A",{href:!0});var jD=e(Ba);Ic=r(jD,"\u54CD\u5E94\u6027\u4E22\u5931"),jD.forEach(l),xD.forEach(l),gF=i(s),Pa=F(s,"P",{});var ID=e(Pa);Vc=r(ID,"\u4FDD\u8BC1\u89E3\u6784/\u6269\u5C55\u4E0D\u4E22\u5931\u54CD\u5E94\u6027"),ID.forEach(l),wF=i(s),Io=E(s,!1),Vo=i(s),qs=F(s,"P",{});var wy=e(qs);Hc=r(wy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),J=F(wy,"A",{href:!0,rel:!0,target:!0});var VD=e(J);Sc=r(VD,"toRefs"),VD.forEach(l),wy.forEach(l),kF=i(s),Gs=F(s,"H3",{id:!0});var HD=e(Gs);xa=F(HD,"A",{href:!0});var SD=e(xa);Mc=r(SD,"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),SD.forEach(l),HD.forEach(l),bF=i(s),Ho=E(s,!1),So=i(s),$s=F(s,"P",{});var ky=e($s);Rc=r(ky,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),X=F(ky,"A",{href:!0,rel:!0,target:!0});var MD=e(X);Oc=r(MD,"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),MD.forEach(l),ky.forEach(l),BF=i(s),Ns=F(s,"H3",{id:!0});var RD=e(Ns);ja=F(RD,"A",{href:!0});var OD=e(ja);Lc=r(OD,"watch \u5168\u5BB6\u6876"),OD.forEach(l),RD.forEach(l),PF=i(s),Mo=E(s,!1),Ro=i(s),Js=F(s,"P",{});var by=e(Js);Tc=r(by,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),K=F(by,"A",{href:!0,rel:!0,target:!0});var LD=e(K);Uc=r(LD,"\u4FA6\u542C\u5668 | Vue.js"),LD.forEach(l),by.forEach(l),xF=i(s),Xs=F(s,"H3",{id:!0});var TD=e(Xs);Ia=F(TD,"A",{href:!0});var UD=e(Ia);zc=r(UD,"\u6D45\u5C42 ref"),UD.forEach(l),TD.forEach(l),jF=i(s),Va=F(s,"P",{});var zD=e(Va);Wc=r(zD,"\u54CD\u5E94\u5F0F API: shallowRef"),zD.forEach(l),IF=i(s),Oo=E(s,!1),Lo=i(s),Ks=F(s,"P",{});var By=e(Ks);qc=r(By,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Q=F(By,"A",{href:!0,rel:!0,target:!0});var WD=e(Q);Gc=r(WD,"shallowRef()"),WD.forEach(l),By.forEach(l),VF=i(s),Qs=F(s,"H3",{id:!0});var qD=e(Qs);Ha=F(qD,"A",{href:!0});var GD=e(Ha);$c=r(GD,"\u4F9D\u8D56\u6CE8\u5165"),GD.forEach(l),qD.forEach(l),HF=i(s),Sa=F(s,"P",{});var $D=e(Sa);Nc=r($D,"child.vue"),$D.forEach(l),SF=i(s),To=E(s,!1),Uo=i(s),Zs=F(s,"P",{});var Py=e(Zs);Jc=r(Py,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Z=F(Py,"A",{href:!0,rel:!0,target:!0});var ND=e(Z);Xc=r(ND,"\u7EC4\u5408\u5F0F API\uFF1A\u4F9D\u8D56\u6CE8\u5165 | Vue.js"),ND.forEach(l),Py.forEach(l),MF=i(s),Ys=F(s,"H3",{id:!0});var JD=e(Ys);Ma=F(JD,"A",{href:!0});var XD=e(Ma);Kc=r(XD,"Effect \u4F5C\u7528\u57DF API"),XD.forEach(l),JD.forEach(l),RF=i(s),zo=E(s,!1),Wo=i(s),sl=F(s,"P",{});var xy=e(sl);Qc=r(xy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Y=F(xy,"A",{href:!0,rel:!0,target:!0});var KD=e(Y);Zc=r(KD,"effectScope"),KD.forEach(l),xy.forEach(l),OF=i(s),ll=F(s,"H3",{id:!0});var QD=e(ll);Ra=F(QD,"A",{href:!0});var ZD=e(Ra);Yc=r(ZD,"\u81EA\u5B9A\u4E49 ref"),ZD.forEach(l),QD.forEach(l),LF=i(s),qo=E(s,!1),Go=i(s),al=F(s,"P",{});var jy=e(al);sr=r(jy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ss=F(jy,"A",{href:!0,rel:!0,target:!0});var YD=e(ss);lr=r(YD,"customRef"),YD.forEach(l),jy.forEach(l),TF=i(s),nl=F(s,"H2",{id:!0});var sE=e(nl);Oa=F(sE,"A",{href:!0});var lE=e(Oa);ar=r(lE,"Directives"),lE.forEach(l),sE.forEach(l),UF=i(s),ol=F(s,"H3",{id:!0});var aE=e(ol);La=F(aE,"A",{href:!0});var nE=e(La);nr=r(nE,"\u5927\u5199"),nE.forEach(l),aE.forEach(l),zF=i(s),_=F(s,"P",{});var Hn=e(_);or=r(Hn,"\u521B\u5EFA\u4E00\u4E2A\u81EA\u5B9A\u4E49\u7684\u4FEE\u9970\u7B26 \xA0"),$o=F(Hn,"CODE",{});var oE=e($o);pr=r(oE,"capitalize"),oE.forEach(l),Fr=r(Hn,"\uFF0C\u5B83\u4F1A\u81EA\u52A8\u5C06 \xA0"),No=F(Hn,"CODE",{});var pE=e(No);er=r(pE,"v-model"),pE.forEach(l),tr=r(Hn,`\xA0 \u7ED1\u5B9A\u8F93\u5165\u7684\u5B57\u7B26\u4E32\u503C\u9996\u5B57\u6BCD\u8F6C\u4E3A\u5927\u5199\uFF1A
|
|
App.vue`),Hn.forEach(l),WF=i(s),Jo=E(s,!1),Xo=i(s),Ta=F(s,"P",{});var FE=e(Ta);cr=r(FE,"Input.vue"),FE.forEach(l),qF=i(s),Ko=E(s,!1),Qo=i(s),pl=F(s,"P",{});var Iy=e(pl);rr=r(Iy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ls=F(Iy,"A",{href:!0,rel:!0,target:!0});var eE=e(ls);yr=r(eE,"\u5904\u7406 v-model \u4FEE\u9970\u7B26"),eE.forEach(l),Iy.forEach(l),GF=i(s),Fl=F(s,"H3",{id:!0});var tE=e(Fl);Ua=F(tE,"A",{href:!0});var cE=e(Ua);ir=r(cE,"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),cE.forEach(l),tE.forEach(l),$F=i(s),za=F(s,"P",{});var rE=e(za);Dr=r(rE,"\u89C1\u4E0A\u9762\u3002v-once"),rE.forEach(l),NF=i(s),el=F(s,"H3",{id:!0});var yE=e(el);Wa=F(yE,"A",{href:!0});var iE=e(Wa);Er=r(iE,"\u5207\u6362\u7126\u70B9\u6307\u4EE4"),iE.forEach(l),yE.forEach(l),JF=i(s),Zo=E(s,!1),Yo=i(s),tl=F(s,"P",{});var Vy=e(tl);vr=r(Vy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),as=F(Vy,"A",{href:!0,rel:!0,target:!0});var DE=e(as);dr=r(DE,"\u81EA\u5B9A\u4E49\u6307\u4EE4 | Vue.js"),DE.forEach(l),Vy.forEach(l),XF=i(s),cl=F(s,"H3",{id:!0});var EE=e(cl);qa=F(EE,"A",{href:!0});var vE=e(qa);fr=r(vE,"\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),vE.forEach(l),EE.forEach(l),KF=i(s),Ga=F(s,"P",{});var dE=e(Ga);ur=r(dE,"\u5C1D\u8BD5\u5B9E\u73B0\u4E00\u4E2A\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),dE.forEach(l),QF=i(s),sp=E(s,!1),lp=i(s),rl=F(s,"P",{});var Hy=e(rl);Ar=r(Hy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ns=F(Hy,"A",{href:!0,rel:!0,target:!0});var fE=e(ns);Cr=r(fE,"\u6307\u4EE4\u94A9\u5B50"),fE.forEach(l),Hy.forEach(l),ZF=i(s),yl=F(s,"H3",{id:!0});var uE=e(yl);$a=F(uE,"A",{href:!0});var AE=e($a);mr=r(AE,"\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4"),AE.forEach(l),uE.forEach(l),YF=i(s),ap=E(s,!1),np=i(s),il=F(s,"H3",{id:!0});var CE=e(il);os=F(CE,"A",{href:!0});var Je=e(os);_r=r(Je,"\u5B9E\u73B0\u7B80\u6613\u7248"),op=F(Je,"CODE",{});var mE=e(op);hr=r(mE,"v-model"),mE.forEach(l),gr=r(Je,"\u6307\u4EE4"),Je.forEach(l),CE.forEach(l),se=i(s),pp=E(s,!1),Fp=i(s),Dl=F(s,"H2",{id:!0});var _E=e(Dl);Na=F(_E,"A",{href:!0});var hE=e(Na);wr=r(hE,"Event Handling"),hE.forEach(l),_E.forEach(l),le=i(s),El=F(s,"H3",{id:!0});var gE=e(El);Ja=F(gE,"A",{href:!0});var wE=e(Ja);kr=r(wE,"\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1"),wE.forEach(l),gE.forEach(l),ae=i(s),ep=E(s,!1),tp=i(s),vl=F(s,"P",{});var Sy=e(vl);br=r(Sy,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),ps=F(Sy,"A",{href:!0,rel:!0,target:!0});var kE=e(ps);Br=r(kE,"\u4E8B\u4EF6\u4FEE\u9970\u7B26"),kE.forEach(l),Sy.forEach(l),ne=i(s),dl=F(s,"H3",{id:!0});var bE=e(dl);Xa=F(bE,"A",{href:!0});var BE=e(Xa);Pr=r(BE,"\u6309\u952E\u4FEE\u9970\u7B26"),BE.forEach(l),bE.forEach(l),oe=i(s),cp=E(s,!1),rp=i(s),fl=F(s,"P",{});var My=e(fl);xr=r(My,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),Fs=F(My,"A",{href:!0,rel:!0,target:!0});var PE=e(Fs);jr=r(PE,"\u6309\u952E\u4FEE\u9970\u7B26"),PE.forEach(l),My.forEach(l),pe=i(s),ul=F(s,"H2",{id:!0});var xE=e(ul);Ka=F(xE,"A",{href:!0});var jE=e(Ka);Ir=r(jE,"Global API:General"),jE.forEach(l),xE.forEach(l),Fe=i(s),Al=F(s,"H3",{id:!0});var IE=e(Al);Qa=F(IE,"A",{href:!0});var VE=e(Qa);Vr=r(VE,"\u4E0B\u4E00\u6B21 DOM \u66F4\u65B0"),VE.forEach(l),IE.forEach(l),ee=i(s),h=F(s,"P",{});var Sn=e(h);Hr=r(Sn,"\u5728"),yp=F(Sn,"CODE",{});var HE=e(yp);Sr=r(HE,"Vue.js"),HE.forEach(l),Mr=r(Sn,"\u4E2D\u6539\u53D8\u54CD\u5E94\u5F0F\u72B6\u6001\u65F6\uFF0CDOM \u4E0D\u4F1A\u540C\u6B65\u66F4\u65B0\u3002\xA0"),ip=F(Sn,"CODE",{});var SE=e(ip);Rr=r(SE,"Vue.js"),SE.forEach(l),Or=r(Sn,"\xA0 \u63D0\u4F9B\u4E86\u4E00\u4E2A\u7528\u4E8E\u7B49\u5F85\u4E0B\u4E00\u6B21 DOM \u66F4\u65B0\u7684\u65B9\u6CD5"),Sn.forEach(l),te=i(s),Dp=E(s,!1),Ep=i(s),Cl=F(s,"P",{});var Ry=e(Cl);Lr=r(Ry,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),es=F(Ry,"A",{href:!0,rel:!0,target:!0});var ME=e(es);Tr=r(ME,"nextTick()"),ME.forEach(l),Ry.forEach(l),ce=i(s),ml=F(s,"H2",{id:!0});var RE=e(ml);Za=F(RE,"A",{href:!0});var OE=e(Za);Ur=r(OE,"Lifecycle"),OE.forEach(l),RE.forEach(l),re=i(s),_l=F(s,"H3",{id:!0});var LE=e(_l);Ya=F(LE,"A",{href:!0});var TE=e(Ya);zr=r(TE,"\u751F\u547D\u5468\u671F\u94A9\u5B50"),TE.forEach(l),LE.forEach(l),ye=i(s),sn=F(s,"P",{});var UE=e(sn);ln=F(UE,"A",{href:!0});var zE=e(ln);Wr=r(zE,"\u540C\u4E0A\uFF1A\u751F\u547D\u5468\u671F\u94A9\u5B50"),zE.forEach(l),UE.forEach(l),ie=i(s),hl=F(s,"H2",{id:!0});var WE=e(hl);an=F(WE,"A",{href:!0});var qE=e(an);qr=r(qE,"Reactivity:Advanced"),qE.forEach(l),WE.forEach(l),De=i(s),gl=F(s,"H3",{id:!0});var GE=e(gl);nn=F(GE,"A",{href:!0});var $E=e(nn);Gr=r($E,"\u6D45\u5C42 ref"),$E.forEach(l),GE.forEach(l),Ee=i(s),on=F(s,"P",{});var NE=e(on);pn=F(NE,"A",{href:!0});var JE=e(pn);$r=r(JE,"\u540C\u4E0A\uFF1A\u6D45\u5C42 ref"),JE.forEach(l),NE.forEach(l),ve=i(s),wl=F(s,"H3",{id:!0});var XE=e(wl);Fn=F(XE,"A",{href:!0});var KE=e(Fn);Nr=r(KE,"\u539F\u59CB\u503C API"),KE.forEach(l),XE.forEach(l),de=i(s),vp=E(s,!1),dp=i(s),en=F(s,"P",{});var QE=e(en);Jr=r(QE,"\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),QE.forEach(l),fe=i(s),ts=F(s,"UL",{});var Xe=e(ts);fp=F(Xe,"LI",{});var ZE=e(fp);cs=F(ZE,"A",{href:!0,rel:!0,target:!0});var YE=e(cs);Xr=r(YE,"toRaw"),YE.forEach(l),ZE.forEach(l),Kr=i(Xe),up=F(Xe,"LI",{});var s8=e(up);rs=F(s8,"A",{href:!0,rel:!0,target:!0});var l8=e(rs);Qr=r(l8,"markRaw"),l8.forEach(l),s8.forEach(l),Xe.forEach(l),ue=i(s),kl=F(s,"H3",{id:!0});var a8=e(kl);tn=F(a8,"A",{href:!0});var n8=e(tn);Zr=r(n8,"Effect \u4F5C\u7528\u57DF API"),n8.forEach(l),a8.forEach(l),Ae=i(s),cn=F(s,"P",{});var o8=e(cn);rn=F(o8,"A",{href:!0});var p8=e(rn);Yr=r(p8,"\u540C\u4E0A\uFF1AEffect \u4F5C\u7528\u57DF API"),p8.forEach(l),o8.forEach(l),Ce=i(s),bl=F(s,"H3",{id:!0});var F8=e(bl);yn=F(F8,"A",{href:!0});var e8=e(yn);sy=r(e8,"\u81EA\u5B9A\u4E49 ref"),e8.forEach(l),F8.forEach(l),me=i(s),Dn=F(s,"P",{});var t8=e(Dn);En=F(t8,"A",{href:!0});var c8=e(En);ly=r(c8,"\u540C\u4E0A\uFF1A\u81EA\u5B9A\u4E49 ref"),c8.forEach(l),t8.forEach(l),_e=i(s),Bl=F(s,"H2",{id:!0});var r8=e(Bl);vn=F(r8,"A",{href:!0});var y8=e(vn);ay=r(y8,"Reactivity:Core"),y8.forEach(l),r8.forEach(l),he=i(s),Pl=F(s,"H3",{id:!0});var i8=e(Pl);dn=F(i8,"A",{href:!0});var D8=e(dn);ny=r(D8,"ref \u5168\u5BB6\u6876"),D8.forEach(l),i8.forEach(l),ge=i(s),fn=F(s,"P",{});var E8=e(fn);un=F(E8,"A",{href:!0});var v8=e(un);oy=r(v8,"\u540C\u4E0A\uFF1Aref \u5168\u5BB6\u6876"),v8.forEach(l),E8.forEach(l),we=i(s),xl=F(s,"H3",{id:!0});var d8=e(xl);An=F(d8,"A",{href:!0});var f8=e(An);py=r(f8,"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),f8.forEach(l),d8.forEach(l),ke=i(s),Cn=F(s,"P",{});var u8=e(Cn);mn=F(u8,"A",{href:!0});var A8=e(mn);Fy=r(A8,"\u540C\u4E0A\uFF1A\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),A8.forEach(l),u8.forEach(l),be=i(s),jl=F(s,"H3",{id:!0});var C8=e(jl);_n=F(C8,"A",{href:!0});var m8=e(_n);ey=r(m8,"watch \u5168\u5BB6\u6876"),m8.forEach(l),C8.forEach(l),Be=i(s),hn=F(s,"P",{});var _8=e(hn);gn=F(_8,"A",{href:!0});var h8=e(gn);ty=r(h8,"\u540C\u4E0A\uFF1Awatch \u5168\u5BB6\u6876"),h8.forEach(l),_8.forEach(l),Pe=i(s),Il=F(s,"H2",{id:!0});var g8=e(Il);wn=F(g8,"A",{href:!0});var w8=e(wn);cy=r(w8,"Reactivity:Utilities"),w8.forEach(l),g8.forEach(l),xe=i(s),Vl=F(s,"H3",{id:!0});var k8=e(Vl);kn=F(k8,"A",{href:!0});var b8=e(kn);ry=r(b8,"\u54CD\u5E94\u6027\u4E1F\u5931"),b8.forEach(l),k8.forEach(l),je=i(s),bn=F(s,"P",{});var B8=e(bn);Bn=F(B8,"A",{href:!0});var P8=e(Bn);yy=r(P8,"\u540C\u4E0A\uFF1A\u54CD\u5E94\u6027\u4E1F\u5931"),P8.forEach(l),B8.forEach(l),Ie=i(s),Hl=F(s,"H2",{id:!0});var x8=e(Hl);Pn=F(x8,"A",{href:!0});var j8=e(Pn);iy=r(j8,"Utility Function"),j8.forEach(l),x8.forEach(l),Ve=i(s),Sl=F(s,"H3",{id:!0});var I8=e(Sl);xn=F(I8,"A",{href:!0});var V8=e(xn);Dy=r(V8,"until"),V8.forEach(l),I8.forEach(l),He=i(s),Ap=E(s,!1),Cp=i(s),Ml=F(s,"H2",{id:!0});var H8=e(Ml);jn=F(H8,"A",{href:!0});var S8=e(jn);Ey=r(S8,"Web Components"),S8.forEach(l),H8.forEach(l),Se=i(s),Rl=F(s,"H3",{id:!0});var M8=e(Rl);In=F(M8,"A",{href:!0});var R8=e(In);vy=r(R8,"\u81EA\u5B9A\u4E49\u5143\u7D20"),R8.forEach(l),M8.forEach(l),Me=i(s),mp=E(s,!1),_p=i(s),Ol=F(s,"P",{});var Oy=e(Ol);dy=r(Oy,`\u5E76\u4E14 vite.config.js \u91CC\u8981\u505A\u76F8\u5173\u8BBE\u7F6E
|
|
\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A`),ys=F(Oy,"A",{href:!0,rel:!0,target:!0});var O8=e(ys);fy=r(O8,"Vue \u4E0E Web Components | Vue.js"),O8.forEach(l),Oy.forEach(l),this.h()},h(){t(u,"href","https://cn-vuejs-challenges.netlify.app/questions/14-dynamic-css-values/README.zh-CN.html"),t(u,"rel","nofollow noopener noreferrer external"),t(u,"target","_blank"),t(f,"href","https://staging-cn.vuejs.org/"),t(f,"rel","nofollow noopener noreferrer external"),t(f,"target","_blank"),t(Ul,"href","###%E9%BC%A0%E6%A0%87%E6%8C%87%E9%92%88"),t(Wl,"href","#built-ins"),t(Ds,"id","built-ins"),t(ql,"href","#dom-\u4F20\u9001\u95E8"),t(Es,"id","dom-\u4F20\u9001\u95E8"),Mn.a=Rn,t(k,"href","https://v3.cn.vuejs.org/guide/teleport.html#teleport"),t(k,"rel","nofollow noopener noreferrer external"),t(k,"target","_blank"),t(fs,"href","#fn-1"),t(fs,"class","footnote-ref"),t(Nl,"id","fnref-1"),t(Jl,"href","#\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),t(us,"id","\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),Tn.a=Un,t(Kl,"href","#css-features"),t(Cs,"id","css-features"),t(Ql,"href","#\u52A8\u6001-css"),t(ms,"id","\u52A8\u6001-css"),qn.a=Gn,t(Zl,"href","#\u5168\u5C40-css"),t(_s,"id","\u5168\u5C40-css"),Jn.a=Xn,Kn.a=Qn,t(P,"href","https://staging-cn.vuejs.org/api/sfc-css-features.html"),t(P,"rel","nofollow noopener noreferrer external"),t(P,"target","_blank"),t(la,"href","#components"),t(gs,"id","components"),t(aa,"href","#dom-\u4F20\u9001\u95E8-1"),t(ws,"id","dom-\u4F20\u9001\u95E8-1"),t(oa,"href","#props-\u9A8C\u8BC1"),t(ks,"id","props-\u9A8C\u8BC1"),Zn.a=Yn,t(x,"href","https://staging-cn.vuejs.org/guide/components/props.html#prop-validation"),t(x,"rel","nofollow noopener noreferrer external"),t(x,"target","_blank"),t(Fa,"href","#\u51FD\u6570\u5F0F\u7EC4\u4EF6"),t(Bs,"id","\u51FD\u6570\u5F0F\u7EC4\u4EF6"),t(j,"href","https://github.com/webfansplz/vuejs-challenges/issues/322"),t(j,"rel","nofollow noopener noreferrer external"),t(j,"target","_blank"),so.a=lo,t(V,"href","https://staging-cn.vuejs.org/guide/extras/render-function.html#functional-components"),t(V,"rel","nofollow noopener noreferrer external"),t(V,"target","_blank"),t(H,"href","https://staging-cn.vuejs.org/guide/extras/rendering-mechanism.html"),t(H,"rel","nofollow noopener noreferrer external"),t(H,"target","_blank"),t(ta,"href","#\u6E32\u67D3\u51FD\u6570h"),t(xs,"id","\u6E32\u67D3\u51FD\u6570h"),po.a=Fo,t(ra,"href","#\u6811\u7EC4\u4EF6"),t(js,"id","\u6811\u7EC4\u4EF6"),eo.a=to,t(M,"href","https://github.com/webfansplz/vuejs-challenges/issues/659"),t(M,"rel","nofollow noopener noreferrer external"),t(M,"target","_blank"),t(R,"href","https://www.digitalocean.com/community/tutorials/vuejs-recursive-components"),t(R,"rel","nofollow noopener noreferrer external"),t(R,"target","_blank"),t(C,"href","https://staging-cn.vuejs.org/api/sfc-script-setup.html#recursive-components"),t(C,"rel","nofollow noopener noreferrer external"),t(C,"target","_blank"),t(Da,"href","#composable-function"),t(Vs,"id","composable-function"),t(O,"href","https://staging-cn.vuejs.org/guide/reusability/composables.html"),t(O,"rel","nofollow noopener noreferrer external"),t(O,"target","_blank"),t(Ea,"href","#\u5207\u6362\u5668"),t(Ss,"id","\u5207\u6362\u5668"),yo.a=io,t(da,"href","#\u8BA1\u6570\u5668"),t(Ms,"id","\u8BA1\u6570\u5668"),Do.a=Eo,t(ua,"href","#\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570"),t(Rs,"id","\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570"),fo.a=uo,t(U,"href","https://staging-cn.vuejs.org/api/reactivity-core.html#watcheffect"),t(U,"rel","nofollow noopener noreferrer external"),t(U,"target","_blank"),t(z,"href","https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage"),t(z,"rel","nofollow noopener noreferrer external"),t(z,"target","_blank"),t(Ca,"href","#\u9F20\u6807\u5750\u6807"),t(Os,"id","\u9F20\u6807\u5750\u6807"),mo.a=_o,t(_a,"href","#composition-api"),t(Ls,"id","composition-api"),t(ha,"href","#\u751F\u547D\u5468\u671F\u94A9\u5B50"),t(Ts,"id","\u751F\u547D\u5468\u671F\u94A9\u5B50"),ho.a=go,t(W,"href","https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html"),t(W,"rel","nofollow noopener noreferrer external"),t(W,"target","_blank"),t(q,"href","https://staging-cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted"),t(q,"rel","nofollow noopener noreferrer external"),t(q,"target","_blank"),t(ka,"href","#ref-\u5168\u5BB6\u6876"),t(zs,"id","ref-\u5168\u5BB6\u6876"),bo.a=Bo,t(G,"href","https://staging-cn.vuejs.org/api/reactivity-utilities.html#isref"),t(G,"rel","nofollow noopener noreferrer external"),t(G,"target","_blank"),t($,"href","https://staging-cn.vuejs.org/api/reactivity-utilities.html#unref"),t($,"rel","nofollow noopener noreferrer external"),t($,"target","_blank"),t(N,"href","https://staging-cn.vuejs.org/api/reactivity-utilities.html#toref"),t(N,"rel","nofollow noopener noreferrer external"),t(N,"target","_blank"),t(Ba,"href","#\u54CD\u5E94\u6027\u4E22\u5931"),t(Ws,"id","\u54CD\u5E94\u6027\u4E22\u5931"),Io.a=Vo,t(J,"href","https://staging-cn.vuejs.org/api/reactivity-utilities.html#torefs"),t(J,"rel","nofollow noopener noreferrer external"),t(J,"target","_blank"),t(xa,"href","#\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),t(Gs,"id","\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"),Ho.a=So,t(X,"href","https://staging-cn.vuejs.org/guide/essentials/computed.html#writable-computed"),t(X,"rel","nofollow noopener noreferrer external"),t(X,"target","_blank"),t(ja,"href","#watch-\u5168\u5BB6\u6876"),t(Ns,"id","watch-\u5168\u5BB6\u6876"),Mo.a=Ro,t(K,"href","https://staging-cn.vuejs.org/guide/essentials/watchers.html"),t(K,"rel","nofollow noopener noreferrer external"),t(K,"target","_blank"),t(Ia,"href","#\u6D45\u5C42-ref"),t(Xs,"id","\u6D45\u5C42-ref"),Oo.a=Lo,t(Q,"href","https://staging-cn.vuejs.org/api/reactivity-advanced.html#shallowref"),t(Q,"rel","nofollow noopener noreferrer external"),t(Q,"target","_blank"),t(Ha,"href","#\u4F9D\u8D56\u6CE8\u5165"),t(Qs,"id","\u4F9D\u8D56\u6CE8\u5165"),To.a=Uo,t(Z,"href","https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html"),t(Z,"rel","nofollow noopener noreferrer external"),t(Z,"target","_blank"),t(Ma,"href","#effect-\u4F5C\u7528\u57DF-api"),t(Ys,"id","effect-\u4F5C\u7528\u57DF-api"),zo.a=Wo,t(Y,"href","https://staging-cn.vuejs.org/api/reactivity-advanced.html#effectscope"),t(Y,"rel","nofollow noopener noreferrer external"),t(Y,"target","_blank"),t(Ra,"href","#\u81EA\u5B9A\u4E49-ref"),t(ll,"id","\u81EA\u5B9A\u4E49-ref"),qo.a=Go,t(ss,"href","https://staging-cn.vuejs.org/api/reactivity-advanced.html#customref"),t(ss,"rel","nofollow noopener noreferrer external"),t(ss,"target","_blank"),t(Oa,"href","#directives"),t(nl,"id","directives"),t(La,"href","#\u5927\u5199"),t(ol,"id","\u5927\u5199"),Jo.a=Xo,Ko.a=Qo,t(ls,"href","https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-model"),t(ls,"rel","nofollow noopener noreferrer external"),t(ls,"target","_blank"),t(Ua,"href","#\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4-1"),t(Fl,"id","\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4-1"),t(Wa,"href","#\u5207\u6362\u7126\u70B9\u6307\u4EE4"),t(el,"id","\u5207\u6362\u7126\u70B9\u6307\u4EE4"),Zo.a=Yo,t(as,"href","https://staging-cn.vuejs.org/guide/reusability/custom-directives.html"),t(as,"rel","nofollow noopener noreferrer external"),t(as,"target","_blank"),t(qa,"href","#\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),t(cl,"id","\u9632\u6296\u70B9\u51FB\u6307\u4EE4"),sp.a=lp,t(ns,"href","https://staging-cn.vuejs.org/guide/reusability/custom-directives.html#introduce"),t(ns,"rel","nofollow noopener noreferrer external"),t(ns,"target","_blank"),t($a,"href","#\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4"),t(yl,"id","\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4"),ap.a=np,t(os,"href","#\u5B9E\u73B0\u7B80\u6613\u7248v-model\u6307\u4EE4"),t(il,"id","\u5B9E\u73B0\u7B80\u6613\u7248v-model\u6307\u4EE4"),pp.a=Fp,t(Na,"href","#event-handling"),t(Dl,"id","event-handling"),t(Ja,"href","#\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1"),t(El,"id","\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1"),ep.a=tp,t(ps,"href","https://staging-cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers"),t(ps,"rel","nofollow noopener noreferrer external"),t(ps,"target","_blank"),t(Xa,"href","#\u6309\u952E\u4FEE\u9970\u7B26"),t(dl,"id","\u6309\u952E\u4FEE\u9970\u7B26"),cp.a=rp,t(Fs,"href","https://staging-cn.vuejs.org/guide/essentials/event-handling.html#key-modifiers"),t(Fs,"rel","nofollow noopener noreferrer external"),t(Fs,"target","_blank"),t(Ka,"href","#global-apigeneral"),t(ul,"id","global-apigeneral"),t(Qa,"href","#\u4E0B\u4E00\u6B21-dom-\u66F4\u65B0"),t(Al,"id","\u4E0B\u4E00\u6B21-dom-\u66F4\u65B0"),Dp.a=Ep,t(es,"href","https://staging-cn.vuejs.org/api/general.html#nexttick"),t(es,"rel","nofollow noopener noreferrer external"),t(es,"target","_blank"),t(Za,"href","#lifecycle"),t(ml,"id","lifecycle"),t(Ya,"href","#\u751F\u547D\u5468\u671F\u94A9\u5B50-1"),t(_l,"id","\u751F\u547D\u5468\u671F\u94A9\u5B50-1"),t(ln,"href","#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"),t(an,"href","#reactivityadvanced"),t(hl,"id","reactivityadvanced"),t(nn,"href","#\u6D45\u5C42-ref-1"),t(gl,"id","\u6D45\u5C42-ref-1"),t(pn,"href","#%E6%B5%85%E5%B1%82-ref"),t(Fn,"href","#\u539F\u59CB\u503C-api"),t(wl,"id","\u539F\u59CB\u503C-api"),vp.a=dp,t(cs,"href","https://staging-cn.vuejs.org/api/reactivity-advanced.html#toraw"),t(cs,"rel","nofollow noopener noreferrer external"),t(cs,"target","_blank"),t(rs,"href","https://staging-cn.vuejs.org/api/reactivity-advanced.html#markraw"),t(rs,"rel","nofollow noopener noreferrer external"),t(rs,"target","_blank"),t(tn,"href","#effect-\u4F5C\u7528\u57DF-api-1"),t(kl,"id","effect-\u4F5C\u7528\u57DF-api-1"),t(rn,"href","#effect-%E4%BD%9C%E7%94%A8%E5%9F%9F-api"),t(yn,"href","#\u81EA\u5B9A\u4E49-ref-1"),t(bl,"id","\u81EA\u5B9A\u4E49-ref-1"),t(En,"href","#%E8%87%AA%E5%AE%9A%E4%B9%89-ref"),t(vn,"href","#reactivitycore"),t(Bl,"id","reactivitycore"),t(dn,"href","#ref-\u5168\u5BB6\u6876-1"),t(Pl,"id","ref-\u5168\u5BB6\u6876-1"),t(un,"href","#ref-%E5%85%A8%E5%AE%B6%E6%A1%B6"),t(An,"href","#\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027-1"),t(xl,"id","\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027-1"),t(mn,"href","#%E5%8F%AF%E5%86%99%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"),t(_n,"href","#watch-\u5168\u5BB6\u6876-1"),t(jl,"id","watch-\u5168\u5BB6\u6876-1"),t(gn,"href","#watch-%E5%85%A8%E5%AE%B6%E6%A1%B6"),t(wn,"href","#reactivityutilities"),t(Il,"id","reactivityutilities"),t(kn,"href","#\u54CD\u5E94\u6027\u4E1F\u5931"),t(Vl,"id","\u54CD\u5E94\u6027\u4E1F\u5931"),t(Bn,"href","#%E5%93%8D%E5%BA%94%E6%80%A7%E4%B8%9F%E5%A4%B1"),t(Pn,"href","#utility-function"),t(Hl,"id","utility-function"),t(xn,"href","#until"),t(Sl,"id","until"),Ap.a=Cp,t(jn,"href","#web-components"),t(Ml,"id","web-components"),t(In,"href","#\u81EA\u5B9A\u4E49\u5143\u7D20"),t(Rl,"id","\u81EA\u5B9A\u4E49\u5143\u7D20"),mp.a=_p,t(ys,"href","https://staging-cn.vuejs.org/guide/extras/web-components.html"),t(ys,"rel","nofollow noopener noreferrer external"),t(ys,"target","_blank")},m(s,n){o(s,v,n),a(v,A),a(v,u),a(u,is),a(v,d),a(v,f),a(f,Tl),a(v,Ke),o(s,gp,n),o(s,w,n),a(w,Qe),a(w,Ul),a(Ul,Ze),a(w,Ye),o(s,wp,n),o(s,zl,n),a(zl,st),o(s,kp,n),o(s,Ds,n),a(Ds,Wl),a(Wl,lt),o(s,bp,n),o(s,Es,n),a(Es,ql),a(ql,at),o(s,Bp,n),o(s,Gl,n),a(Gl,nt),o(s,Pp,n),Mn.m(z8,s,n),o(s,Rn,n),o(s,vs,n),a(vs,ot),a(vs,k),a(k,pt),o(s,xp,n),o(s,$l,n),a($l,ds),a(ds,Ft),a(ds,Nl),a(Nl,fs),a(fs,et),a(ds,tt),o(s,jp,n),o(s,b,n),a(b,On),a(On,ct),a(b,rt),a(b,Ln),a(Ln,yt),o(s,Ip,n),o(s,us,n),a(us,Jl),a(Jl,it),o(s,Vp,n),o(s,Xl,n),a(Xl,Dt),o(s,Hp,n),Tn.m(W8,s,n),o(s,Un,n),o(s,As,n),a(As,Et),a(As,zn),a(zn,vt),o(s,Sp,n),o(s,Cs,n),a(Cs,Kl),a(Kl,dt),o(s,Mp,n),o(s,ms,n),a(ms,Ql),a(Ql,ft),o(s,Rp,n),o(s,B,n),a(B,ut),a(B,Wn),a(Wn,At),a(B,Ct),o(s,Op,n),qn.m(q8,s,n),o(s,Gn,n),o(s,g,n),a(g,mt),a(g,$n),a($n,_t),a(g,ht),a(g,Nn),a(Nn,gt),o(s,Lp,n),o(s,_s,n),a(_s,Zl),a(Zl,wt),o(s,Tp,n),o(s,Yl,n),a(Yl,kt),o(s,Up,n),Jn.m(G8,s,n),o(s,Xn,n),o(s,sa,n),a(sa,bt),o(s,zp,n),Kn.m($8,s,n),o(s,Qn,n),o(s,hs,n),a(hs,Bt),a(hs,P),a(P,Pt),o(s,Wp,n),o(s,gs,n),a(gs,la),a(la,xt),o(s,qp,n),o(s,ws,n),a(ws,aa),a(aa,jt),o(s,Gp,n),o(s,na,n),a(na,It),o(s,$p,n),o(s,ks,n),a(ks,oa),a(oa,Vt),o(s,Np,n),o(s,pa,n),a(pa,Ht),o(s,Jp,n),Zn.m(N8,s,n),o(s,Yn,n),o(s,bs,n),a(bs,St),a(bs,x),a(x,Mt),o(s,Xp,n),o(s,Bs,n),a(Bs,Fa),a(Fa,Rt),o(s,Kp,n),o(s,Ps,n),a(Ps,Ot),a(Ps,j),a(j,Lt),o(s,Qp,n),so.m(J8,s,n),o(s,lo,n),o(s,ea,n),a(ea,Tt),o(s,Zp,n),o(s,I,n),a(I,ao),a(ao,V),a(V,Ut),a(I,zt),a(I,no),a(no,H),a(H,Wt),o(s,Yp,n),o(s,xs,n),a(xs,ta),a(ta,qt),o(s,sF,n),o(s,ca,n),a(ca,oo),a(oo,Gt),o(s,lF,n),po.m(X8,s,n),o(s,Fo,n),o(s,js,n),a(js,ra),a(ra,$t),o(s,aF,n),o(s,ya,n),a(ya,Nt),o(s,nF,n),eo.m(K8,s,n),o(s,to,n),o(s,ia,n),a(ia,Jt),o(s,oF,n),o(s,S,n),a(S,co),a(co,M),a(M,Xt),a(S,Kt),a(S,Is),a(Is,R),a(R,Qt),a(Is,Zt),a(Is,C),a(C,Yt),a(C,ro),a(ro,sc),a(C,lc),o(s,pF,n),o(s,Vs,n),a(Vs,Da),a(Da,ac),o(s,FF,n),o(s,Hs,n),a(Hs,nc),a(Hs,O),a(O,oc),o(s,eF,n),o(s,Ss,n),a(Ss,Ea),a(Ea,pc),o(s,tF,n),o(s,va,n),a(va,Fc),o(s,cF,n),yo.m(Q8,s,n),o(s,io,n),o(s,Ms,n),a(Ms,da),a(da,ec),o(s,rF,n),o(s,fa,n),a(fa,tc),o(s,yF,n),Do.m(Z8,s,n),o(s,Eo,n),o(s,Rs,n),a(Rs,ua),a(ua,cc),o(s,iF,n),o(s,L,n),a(L,rc),a(L,vo),a(vo,yc),a(L,ic),o(s,DF,n),fo.m(Y8,s,n),o(s,uo,n),o(s,Aa,n),a(Aa,Dc),o(s,EF,n),o(s,T,n),a(T,Ao),a(Ao,U),a(U,Ec),a(T,vc),a(T,Co),a(Co,z),a(z,dc),o(s,vF,n),o(s,Os,n),a(Os,Ca),a(Ca,fc),o(s,dF,n),o(s,ma,n),a(ma,uc),o(s,fF,n),mo.m(sv,s,n),o(s,_o,n),o(s,Ls,n),a(Ls,_a),a(_a,Ac),o(s,uF,n),o(s,Ts,n),a(Ts,ha),a(ha,Cc),o(s,AF,n),ho.m(lv,s,n),o(s,go,n),o(s,ga,n),a(ga,wa),a(wa,mc),a(wa,Us),a(Us,wo),a(wo,W),a(W,_c),a(Us,hc),a(Us,ko),a(ko,q),a(q,gc),o(s,CF,n),o(s,zs,n),a(zs,ka),a(ka,wc),o(s,mF,n),bo.m(av,s,n),o(s,Bo,n),o(s,ba,n),a(ba,kc),o(s,_F,n),o(s,m,n),a(m,Po),a(Po,G),a(G,bc),a(m,Bc),a(m,xo),a(xo,$),a($,Pc),a(m,xc),a(m,jo),a(jo,N),a(N,jc),o(s,hF,n),o(s,Ws,n),a(Ws,Ba),a(Ba,Ic),o(s,gF,n),o(s,Pa,n),a(Pa,Vc),o(s,wF,n),Io.m(nv,s,n),o(s,Vo,n),o(s,qs,n),a(qs,Hc),a(qs,J),a(J,Sc),o(s,kF,n),o(s,Gs,n),a(Gs,xa),a(xa,Mc),o(s,bF,n),Ho.m(ov,s,n),o(s,So,n),o(s,$s,n),a($s,Rc),a($s,X),a(X,Oc),o(s,BF,n),o(s,Ns,n),a(Ns,ja),a(ja,Lc),o(s,PF,n),Mo.m(pv,s,n),o(s,Ro,n),o(s,Js,n),a(Js,Tc),a(Js,K),a(K,Uc),o(s,xF,n),o(s,Xs,n),a(Xs,Ia),a(Ia,zc),o(s,jF,n),o(s,Va,n),a(Va,Wc),o(s,IF,n),Oo.m(Fv,s,n),o(s,Lo,n),o(s,Ks,n),a(Ks,qc),a(Ks,Q),a(Q,Gc),o(s,VF,n),o(s,Qs,n),a(Qs,Ha),a(Ha,$c),o(s,HF,n),o(s,Sa,n),a(Sa,Nc),o(s,SF,n),To.m(ev,s,n),o(s,Uo,n),o(s,Zs,n),a(Zs,Jc),a(Zs,Z),a(Z,Xc),o(s,MF,n),o(s,Ys,n),a(Ys,Ma),a(Ma,Kc),o(s,RF,n),zo.m(tv,s,n),o(s,Wo,n),o(s,sl,n),a(sl,Qc),a(sl,Y),a(Y,Zc),o(s,OF,n),o(s,ll,n),a(ll,Ra),a(Ra,Yc),o(s,LF,n),qo.m(cv,s,n),o(s,Go,n),o(s,al,n),a(al,sr),a(al,ss),a(ss,lr),o(s,TF,n),o(s,nl,n),a(nl,Oa),a(Oa,ar),o(s,UF,n),o(s,ol,n),a(ol,La),a(La,nr),o(s,zF,n),o(s,_,n),a(_,or),a(_,$o),a($o,pr),a(_,Fr),a(_,No),a(No,er),a(_,tr),o(s,WF,n),Jo.m(rv,s,n),o(s,Xo,n),o(s,Ta,n),a(Ta,cr),o(s,qF,n),Ko.m(yv,s,n),o(s,Qo,n),o(s,pl,n),a(pl,rr),a(pl,ls),a(ls,yr),o(s,GF,n),o(s,Fl,n),a(Fl,Ua),a(Ua,ir),o(s,$F,n),o(s,za,n),a(za,Dr),o(s,NF,n),o(s,el,n),a(el,Wa),a(Wa,Er),o(s,JF,n),Zo.m(iv,s,n),o(s,Yo,n),o(s,tl,n),a(tl,vr),a(tl,as),a(as,dr),o(s,XF,n),o(s,cl,n),a(cl,qa),a(qa,fr),o(s,KF,n),o(s,Ga,n),a(Ga,ur),o(s,QF,n),sp.m(Dv,s,n),o(s,lp,n),o(s,rl,n),a(rl,Ar),a(rl,ns),a(ns,Cr),o(s,ZF,n),o(s,yl,n),a(yl,$a),a($a,mr),o(s,YF,n),ap.m(Ev,s,n),o(s,np,n),o(s,il,n),a(il,os),a(os,_r),a(os,op),a(op,hr),a(os,gr),o(s,se,n),pp.m(vv,s,n),o(s,Fp,n),o(s,Dl,n),a(Dl,Na),a(Na,wr),o(s,le,n),o(s,El,n),a(El,Ja),a(Ja,kr),o(s,ae,n),ep.m(dv,s,n),o(s,tp,n),o(s,vl,n),a(vl,br),a(vl,ps),a(ps,Br),o(s,ne,n),o(s,dl,n),a(dl,Xa),a(Xa,Pr),o(s,oe,n),cp.m(fv,s,n),o(s,rp,n),o(s,fl,n),a(fl,xr),a(fl,Fs),a(Fs,jr),o(s,pe,n),o(s,ul,n),a(ul,Ka),a(Ka,Ir),o(s,Fe,n),o(s,Al,n),a(Al,Qa),a(Qa,Vr),o(s,ee,n),o(s,h,n),a(h,Hr),a(h,yp),a(yp,Sr),a(h,Mr),a(h,ip),a(ip,Rr),a(h,Or),o(s,te,n),Dp.m(uv,s,n),o(s,Ep,n),o(s,Cl,n),a(Cl,Lr),a(Cl,es),a(es,Tr),o(s,ce,n),o(s,ml,n),a(ml,Za),a(Za,Ur),o(s,re,n),o(s,_l,n),a(_l,Ya),a(Ya,zr),o(s,ye,n),o(s,sn,n),a(sn,ln),a(ln,Wr),o(s,ie,n),o(s,hl,n),a(hl,an),a(an,qr),o(s,De,n),o(s,gl,n),a(gl,nn),a(nn,Gr),o(s,Ee,n),o(s,on,n),a(on,pn),a(pn,$r),o(s,ve,n),o(s,wl,n),a(wl,Fn),a(Fn,Nr),o(s,de,n),vp.m(Av,s,n),o(s,dp,n),o(s,en,n),a(en,Jr),o(s,fe,n),o(s,ts,n),a(ts,fp),a(fp,cs),a(cs,Xr),a(ts,Kr),a(ts,up),a(up,rs),a(rs,Qr),o(s,ue,n),o(s,kl,n),a(kl,tn),a(tn,Zr),o(s,Ae,n),o(s,cn,n),a(cn,rn),a(rn,Yr),o(s,Ce,n),o(s,bl,n),a(bl,yn),a(yn,sy),o(s,me,n),o(s,Dn,n),a(Dn,En),a(En,ly),o(s,_e,n),o(s,Bl,n),a(Bl,vn),a(vn,ay),o(s,he,n),o(s,Pl,n),a(Pl,dn),a(dn,ny),o(s,ge,n),o(s,fn,n),a(fn,un),a(un,oy),o(s,we,n),o(s,xl,n),a(xl,An),a(An,py),o(s,ke,n),o(s,Cn,n),a(Cn,mn),a(mn,Fy),o(s,be,n),o(s,jl,n),a(jl,_n),a(_n,ey),o(s,Be,n),o(s,hn,n),a(hn,gn),a(gn,ty),o(s,Pe,n),o(s,Il,n),a(Il,wn),a(wn,cy),o(s,xe,n),o(s,Vl,n),a(Vl,kn),a(kn,ry),o(s,je,n),o(s,bn,n),a(bn,Bn),a(Bn,yy),o(s,Ie,n),o(s,Hl,n),a(Hl,Pn),a(Pn,iy),o(s,Ve,n),o(s,Sl,n),a(Sl,xn),a(xn,Dy),o(s,He,n),Ap.m(Cv,s,n),o(s,Cp,n),o(s,Ml,n),a(Ml,jn),a(jn,Ey),o(s,Se,n),o(s,Rl,n),a(Rl,In),a(In,vy),o(s,Me,n),mp.m(mv,s,n),o(s,_p,n),o(s,Ol,n),a(Ol,dy),a(Ol,ys),a(ys,fy)},p:Iv,d(s){s&&l(v),s&&l(gp),s&&l(w),s&&l(wp),s&&l(zl),s&&l(kp),s&&l(Ds),s&&l(bp),s&&l(Es),s&&l(Bp),s&&l(Gl),s&&l(Pp),s&&Mn.d(),s&&l(Rn),s&&l(vs),s&&l(xp),s&&l($l),s&&l(jp),s&&l(b),s&&l(Ip),s&&l(us),s&&l(Vp),s&&l(Xl),s&&l(Hp),s&&Tn.d(),s&&l(Un),s&&l(As),s&&l(Sp),s&&l(Cs),s&&l(Mp),s&&l(ms),s&&l(Rp),s&&l(B),s&&l(Op),s&&qn.d(),s&&l(Gn),s&&l(g),s&&l(Lp),s&&l(_s),s&&l(Tp),s&&l(Yl),s&&l(Up),s&&Jn.d(),s&&l(Xn),s&&l(sa),s&&l(zp),s&&Kn.d(),s&&l(Qn),s&&l(hs),s&&l(Wp),s&&l(gs),s&&l(qp),s&&l(ws),s&&l(Gp),s&&l(na),s&&l($p),s&&l(ks),s&&l(Np),s&&l(pa),s&&l(Jp),s&&Zn.d(),s&&l(Yn),s&&l(bs),s&&l(Xp),s&&l(Bs),s&&l(Kp),s&&l(Ps),s&&l(Qp),s&&so.d(),s&&l(lo),s&&l(ea),s&&l(Zp),s&&l(I),s&&l(Yp),s&&l(xs),s&&l(sF),s&&l(ca),s&&l(lF),s&&po.d(),s&&l(Fo),s&&l(js),s&&l(aF),s&&l(ya),s&&l(nF),s&&eo.d(),s&&l(to),s&&l(ia),s&&l(oF),s&&l(S),s&&l(pF),s&&l(Vs),s&&l(FF),s&&l(Hs),s&&l(eF),s&&l(Ss),s&&l(tF),s&&l(va),s&&l(cF),s&&yo.d(),s&&l(io),s&&l(Ms),s&&l(rF),s&&l(fa),s&&l(yF),s&&Do.d(),s&&l(Eo),s&&l(Rs),s&&l(iF),s&&l(L),s&&l(DF),s&&fo.d(),s&&l(uo),s&&l(Aa),s&&l(EF),s&&l(T),s&&l(vF),s&&l(Os),s&&l(dF),s&&l(ma),s&&l(fF),s&&mo.d(),s&&l(_o),s&&l(Ls),s&&l(uF),s&&l(Ts),s&&l(AF),s&&ho.d(),s&&l(go),s&&l(ga),s&&l(CF),s&&l(zs),s&&l(mF),s&&bo.d(),s&&l(Bo),s&&l(ba),s&&l(_F),s&&l(m),s&&l(hF),s&&l(Ws),s&&l(gF),s&&l(Pa),s&&l(wF),s&&Io.d(),s&&l(Vo),s&&l(qs),s&&l(kF),s&&l(Gs),s&&l(bF),s&&Ho.d(),s&&l(So),s&&l($s),s&&l(BF),s&&l(Ns),s&&l(PF),s&&Mo.d(),s&&l(Ro),s&&l(Js),s&&l(xF),s&&l(Xs),s&&l(jF),s&&l(Va),s&&l(IF),s&&Oo.d(),s&&l(Lo),s&&l(Ks),s&&l(VF),s&&l(Qs),s&&l(HF),s&&l(Sa),s&&l(SF),s&&To.d(),s&&l(Uo),s&&l(Zs),s&&l(MF),s&&l(Ys),s&&l(RF),s&&zo.d(),s&&l(Wo),s&&l(sl),s&&l(OF),s&&l(ll),s&&l(LF),s&&qo.d(),s&&l(Go),s&&l(al),s&&l(TF),s&&l(nl),s&&l(UF),s&&l(ol),s&&l(zF),s&&l(_),s&&l(WF),s&&Jo.d(),s&&l(Xo),s&&l(Ta),s&&l(qF),s&&Ko.d(),s&&l(Qo),s&&l(pl),s&&l(GF),s&&l(Fl),s&&l($F),s&&l(za),s&&l(NF),s&&l(el),s&&l(JF),s&&Zo.d(),s&&l(Yo),s&&l(tl),s&&l(XF),s&&l(cl),s&&l(KF),s&&l(Ga),s&&l(QF),s&&sp.d(),s&&l(lp),s&&l(rl),s&&l(ZF),s&&l(yl),s&&l(YF),s&&ap.d(),s&&l(np),s&&l(il),s&&l(se),s&&pp.d(),s&&l(Fp),s&&l(Dl),s&&l(le),s&&l(El),s&&l(ae),s&&ep.d(),s&&l(tp),s&&l(vl),s&&l(ne),s&&l(dl),s&&l(oe),s&&cp.d(),s&&l(rp),s&&l(fl),s&&l(pe),s&&l(ul),s&&l(Fe),s&&l(Al),s&&l(ee),s&&l(h),s&&l(te),s&&Dp.d(),s&&l(Ep),s&&l(Cl),s&&l(ce),s&&l(ml),s&&l(re),s&&l(_l),s&&l(ye),s&&l(sn),s&&l(ie),s&&l(hl),s&&l(De),s&&l(gl),s&&l(Ee),s&&l(on),s&&l(ve),s&&l(wl),s&&l(de),s&&vp.d(),s&&l(dp),s&&l(en),s&&l(fe),s&&l(ts),s&&l(ue),s&&l(kl),s&&l(Ae),s&&l(cn),s&&l(Ce),s&&l(bl),s&&l(me),s&&l(Dn),s&&l(_e),s&&l(Bl),s&&l(he),s&&l(Pl),s&&l(ge),s&&l(fn),s&&l(we),s&&l(xl),s&&l(ke),s&&l(Cn),s&&l(be),s&&l(jl),s&&l(Be),s&&l(hn),s&&l(Pe),s&&l(Il),s&&l(xe),s&&l(Vl),s&&l(je),s&&l(bn),s&&l(Ie),s&&l(Hl),s&&l(Ve),s&&l(Sl),s&&l(He),s&&Ap.d(),s&&l(Cp),s&&l(Ml),s&&l(Se),s&&l(Rl),s&&l(Me),s&&mp.d(),s&&l(_p),s&&l(Ol)}}}function Sv(Ll){let v,A;const u=[Ll[0],U8];let is={$$slots:{default:[Hv]},$$scope:{ctx:Ll}};for(let d=0;d<u.length;d+=1)is=Ly(is,u[d]);return v=new Vv({props:is}),{c(){wv(v.$$.fragment)},l(d){kv(v.$$.fragment,d)},m(d,f){bv(v,d,f),A=!0},p(d,[f]){const Tl=f&1?Bv(u,[f&1&&L8(d[0]),f&0&&L8(U8)]):{};f&2&&(Tl.$$scope={dirty:f,ctx:d}),v.$set(Tl)},i(d){A||(Pv(v.$$.fragment,d),A=!0)},o(d){xv(v.$$.fragment,d),A=!1},d(d){jv(v,d)}}}const U8={title:"Vue.js \u6311\u6218\u7EC3\u4E60",created:"2022-08-12T00:00:00.000Z",summary:"\u6211\u7684\u7B54\u6848\u4EE5\u53CA\u76F8\u5173\u77E5\u8BC6\u70B9",tags:["Vue"],slug:"/2022-08-12-vue-challenges.md",path:"/2022-08-12-vue-challenges",toc:[{depth:2,title:"Built-ins",slug:"built-ins"},{depth:3,title:"DOM \u4F20\u9001\u95E8",slug:"dom-\u4F20\u9001\u95E8"},{depth:3,title:"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4",slug:"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"},{depth:2,title:"CSS Features",slug:"css-features"},{depth:3,title:"\u52A8\u6001 CSS",slug:"\u52A8\u6001-css"},{depth:3,title:"\u5168\u5C40 CSS",slug:"\u5168\u5C40-css"},{depth:2,title:"Components",slug:"components"},{depth:3,title:"DOM \u4F20\u9001\u95E8",slug:"dom-\u4F20\u9001\u95E8-1"},{depth:3,title:"Props \u9A8C\u8BC1",slug:"props-\u9A8C\u8BC1"},{depth:3,title:"\u51FD\u6570\u5F0F\u7EC4\u4EF6",slug:"\u51FD\u6570\u5F0F\u7EC4\u4EF6"},{depth:3,title:"\u6E32\u67D3\u51FD\u6570h()",slug:"\u6E32\u67D3\u51FD\u6570h"},{depth:3,title:"\u6811\u7EC4\u4EF6",slug:"\u6811\u7EC4\u4EF6"},{depth:2,title:"Composable Function",slug:"composable-function"},{depth:3,title:"\u5207\u6362\u5668",slug:"\u5207\u6362\u5668"},{depth:3,title:"\u8BA1\u6570\u5668",slug:"\u8BA1\u6570\u5668"},{depth:3,title:"\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570",slug:"\u5B9E\u73B0\u672C\u5730\u5B58\u50A8\u51FD\u6570"},{depth:3,title:"\u9F20\u6807\u5750\u6807",slug:"\u9F20\u6807\u5750\u6807"},{depth:2,title:"Composition API",slug:"composition-api"},{depth:3,title:"\u751F\u547D\u5468\u671F\u94A9\u5B50",slug:"\u751F\u547D\u5468\u671F\u94A9\u5B50"},{depth:3,title:"ref \u5168\u5BB6\u6876",slug:"ref-\u5168\u5BB6\u6876"},{depth:3,title:"\u54CD\u5E94\u6027\u4E22\u5931",slug:"\u54CD\u5E94\u6027\u4E22\u5931"},{depth:3,title:"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027",slug:"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027"},{depth:3,title:"watch \u5168\u5BB6\u6876",slug:"watch-\u5168\u5BB6\u6876"},{depth:3,title:"\u6D45\u5C42 ref",slug:"\u6D45\u5C42-ref"},{depth:3,title:"\u4F9D\u8D56\u6CE8\u5165",slug:"\u4F9D\u8D56\u6CE8\u5165"},{depth:3,title:"Effect \u4F5C\u7528\u57DF API",slug:"effect-\u4F5C\u7528\u57DF-api"},{depth:3,title:"\u81EA\u5B9A\u4E49 ref",slug:"\u81EA\u5B9A\u4E49-ref"},{depth:2,title:"Directives",slug:"directives"},{depth:3,title:"\u5927\u5199",slug:"\u5927\u5199"},{depth:3,title:"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4",slug:"\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4-1"},{depth:3,title:"\u5207\u6362\u7126\u70B9\u6307\u4EE4",slug:"\u5207\u6362\u7126\u70B9\u6307\u4EE4"},{depth:3,title:"\u9632\u6296\u70B9\u51FB\u6307\u4EE4",slug:"\u9632\u6296\u70B9\u51FB\u6307\u4EE4"},{depth:3,title:"\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4",slug:"\u6FC0\u6D3B\u7684\u6837\u5F0F-\u6307\u4EE4"},{depth:3,title:"\u5B9E\u73B0\u7B80\u6613\u7248v-model\u6307\u4EE4",slug:"\u5B9E\u73B0\u7B80\u6613\u7248v-model\u6307\u4EE4"},{depth:2,title:"Event Handling",slug:"event-handling"},{depth:3,title:"\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1",slug:"\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1"},{depth:3,title:"\u6309\u952E\u4FEE\u9970\u7B26",slug:"\u6309\u952E\u4FEE\u9970\u7B26"},{depth:2,title:"Global API:General",slug:"global-apigeneral"},{depth:3,title:"\u4E0B\u4E00\u6B21 DOM \u66F4\u65B0",slug:"\u4E0B\u4E00\u6B21-dom-\u66F4\u65B0"},{depth:2,title:"Lifecycle",slug:"lifecycle"},{depth:3,title:"\u751F\u547D\u5468\u671F\u94A9\u5B50",slug:"\u751F\u547D\u5468\u671F\u94A9\u5B50-1"},{depth:2,title:"Reactivity:Advanced",slug:"reactivityadvanced"},{depth:3,title:"\u6D45\u5C42 ref",slug:"\u6D45\u5C42-ref-1"},{depth:3,title:"\u539F\u59CB\u503C API",slug:"\u539F\u59CB\u503C-api"},{depth:3,title:"Effect \u4F5C\u7528\u57DF API",slug:"effect-\u4F5C\u7528\u57DF-api-1"},{depth:3,title:"\u81EA\u5B9A\u4E49 ref",slug:"\u81EA\u5B9A\u4E49-ref-1"},{depth:2,title:"Reactivity:Core",slug:"reactivitycore"},{depth:3,title:"ref \u5168\u5BB6\u6876",slug:"ref-\u5168\u5BB6\u6876-1"},{depth:3,title:"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027",slug:"\u53EF\u5199\u7684\u8BA1\u7B97\u5C5E\u6027-1"},{depth:3,title:"watch \u5168\u5BB6\u6876",slug:"watch-\u5168\u5BB6\u6876-1"},{depth:2,title:"Reactivity:Utilities",slug:"reactivityutilities"},{depth:3,title:"\u54CD\u5E94\u6027\u4E1F\u5931",slug:"\u54CD\u5E94\u6027\u4E1F\u5931"},{depth:2,title:"Utility Function",slug:"utility-function"},{depth:3,title:"until",slug:"until"},{depth:2,title:"Web Components",slug:"web-components"},{depth:3,title:"\u81EA\u5B9A\u4E49\u5143\u7D20",slug:"\u81EA\u5B9A\u4E49\u5143\u7D20"}],updated:"2022-08-13T08:21:08.878Z"};function Mv(Ll,v,A){return Ll.$$set=u=>{A(0,v=Ly(Ly({},v),T8(u)))},v=T8(v),[v]}class Nv extends _v{constructor(v){super(),hv(this,v,Mv,Sv,gv,{})}}export{Nv as default,U8 as metadata};
|