From 4695c4fde0e6e7b34bf6eb3c84922b9a411c67a4 Mon Sep 17 00:00:00 2001
From: jaywcjlove <jaywcjlove@users.noreply.github.com>
Date: Wed, 2 Nov 2022 17:09:43 +0000
Subject: [PATCH] doc: update vue.md (#10).
 df3e04ba92257533c9a776634b2a49b120e51816

---
 docs/vue.html | 997 +++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    |   4 +-
 2 files changed, 997 insertions(+), 4 deletions(-)

diff --git a/docs/vue.html b/docs/vue.html
index 9d91aa4d..a642598d 100644
--- a/docs/vue.html
+++ b/docs/vue.html
@@ -42,7 +42,7 @@
 <p>渐进式 JavaScript 框架 <a href="https://cn.vuejs.org/">Vue 3</a> 备忘清单的快速参考列表，包含常用 API 和示例。</p>
 </div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
   <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
-</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#创建应用">创建应用</a><a aria-hidden="true" class="leve3 tocs-link" href="#应用实例">应用实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-cdn-使用-vue">通过 CDN 使用 Vue</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-es-模块构建版本">使用 ES 模块构建版本</a><a aria-hidden="true" class="leve2 tocs-link" href="#模板语法">模板语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#文本插值">文本插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#原始-html">原始 HTML</a><a aria-hidden="true" class="leve3 tocs-link" href="#attribute-绑定">Attribute 绑定</a><a aria-hidden="true" class="leve3 tocs-link" href="#布尔型-attribute">布尔型 Attribute</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态绑定多个值">动态绑定多个值</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-javascript-表达式">使用 JavaScript 表达式</a><a aria-hidden="true" class="leve3 tocs-link" href="#仅支持表达式例子都是无效">仅支持表达式(例子都是无效)</a><a aria-hidden="true" class="leve3 tocs-link" href="#调用函数">调用函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令-directives">指令 Directives</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数-arguments">参数 Arguments</a><a aria-hidden="true" class="leve3 tocs-link" href="#绑定事件">绑定事件</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态参数">动态参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态的事件名称">动态的事件名称</a><a aria-hidden="true" class="leve3 tocs-link" href="#修饰符-modifiers">修饰符 Modifiers</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令语法">指令语法</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
+</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#创建应用">创建应用</a><a aria-hidden="true" class="leve3 tocs-link" href="#应用实例">应用实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-cdn-使用-vue">通过 CDN 使用 Vue</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-es-模块构建版本">使用 ES 模块构建版本</a><a aria-hidden="true" class="leve2 tocs-link" href="#模板语法">模板语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#文本插值">文本插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#原始-html">原始 HTML</a><a aria-hidden="true" class="leve3 tocs-link" href="#attribute-绑定">Attribute 绑定</a><a aria-hidden="true" class="leve3 tocs-link" href="#布尔型-attribute">布尔型 Attribute</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态绑定多个值">动态绑定多个值</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-javascript-表达式">使用 JavaScript 表达式</a><a aria-hidden="true" class="leve3 tocs-link" href="#仅支持表达式例子都是无效">仅支持表达式(例子都是无效)</a><a aria-hidden="true" class="leve3 tocs-link" href="#调用函数">调用函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令-directives">指令 Directives</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数-arguments">参数 Arguments</a><a aria-hidden="true" class="leve3 tocs-link" href="#绑定事件">绑定事件</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态参数">动态参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态的事件名称">动态的事件名称</a><a aria-hidden="true" class="leve3 tocs-link" href="#修饰符-modifiers">修饰符 Modifiers</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令语法">指令语法</a><a aria-hidden="true" class="leve2 tocs-link" href="#响应式基础">响应式基础</a><a aria-hidden="true" class="leve3 tocs-link" href="#声明状态">声明状态</a><a aria-hidden="true" class="leve3 tocs-link" href="#声明方法">声明方法</a><a aria-hidden="true" class="leve3 tocs-link" href="#有状态方法">有状态方法</a><a aria-hidden="true" class="leve2 tocs-link" href="#api-参考">API 参考</a><a aria-hidden="true" class="leve3 tocs-link" href="#应用实例---全局-api">应用实例 - (全局 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#通用---全局-api">通用 - (全局 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#setup---组合式-api">setup() - (组合式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#响应式-工具---组合式-api">响应式: 工具 - (组合式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#生命周期钩子---组合式-api">生命周期钩子 - (组合式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#依赖注入---组合式-api">依赖注入 - (组合式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#响应式-核心---组合式-api">响应式: 核心 - (组合式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#状态选项---选项式-api">状态选项 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#生命周期选项---选项式-api">生命周期选项 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#其他杂项---选项式-api">其他杂项 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#渲染选项---选项式-api">渲染选项 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#组件实例---选项式-api">组件实例 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合选项---选项式-api">组合选项 - (选项式 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令---内置内容">指令 - (内置内容)</a><a aria-hidden="true" class="leve3 tocs-link" href="#组件---内置内容">组件 - (内置内容)</a><a aria-hidden="true" class="leve3 tocs-link" href="#特殊-attributes---内置内容">特殊 Attributes - (内置内容)</a><a aria-hidden="true" class="leve3 tocs-link" href="#特殊元素---内置内容">特殊元素 - (内置内容)</a><a aria-hidden="true" class="leve3 tocs-link" href="#语法定义---单文件组件">语法定义 - (单文件组件)</a><a aria-hidden="true" class="leve3 tocs-link" href="#script-setup---单文件组件">&#x3C;script setup> - (单文件组件)</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-功能---单文件组件">CSS 功能 - (单文件组件)</a><a aria-hidden="true" class="leve3 tocs-link" href="#渲染函数---进阶-api">渲染函数 - (进阶 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#服务端渲染---进阶-api">服务端渲染 - (进阶 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#typescript-工具类型---进阶-api">TypeScript 工具类型 - (进阶 API)</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义渲染---进阶-api">自定义渲染 - (进阶 API)</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
 <p>Vue 是一套用于构建用户界面的渐进式框架</p>
 <ul class="style-round">
@@ -220,7 +220,1000 @@
 </span><span class="code-line">  ┆   ╰─ Argument 跟随冒号或速记符号
 </span><span class="code-line">  ╰─ Name 以 v- 开头使用速记时可以省略
 </span></code></pre>
-</div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
+</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式基础"><a aria-hidden="true" tabindex="-1" href="#响应式基础"><span class="icon icon-link"></span></a>响应式基础</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明状态"><a aria-hidden="true" tabindex="-1" href="#声明状态"><span class="icon icon-link"></span></a>声明状态</h3><div class="wrap-body">
+<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
+</span></code></pre>
+<hr>
+<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明方法"><a aria-hidden="true" tabindex="-1" href="#声明方法"><span class="icon icon-link"></span></a>声明方法</h3><div class="wrap-body">
+<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line">  {{ count }}
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
+</span></code></pre>
+<hr>
+<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
+</span><span class="code-line">      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">    <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
+</span><span class="code-line highlight-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="有状态方法"><a aria-hidden="true" tabindex="-1" href="#有状态方法"><span class="icon icon-link"></span></a>有状态方法</h3><div class="wrap-body">
+<pre class="wrap-text "><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> debounce <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'lodash-es'</span>
+</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token comment">// 每个实例都有了自己的预置防抖的处理函数</span>
+</span><span class="code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">debouncedClick</span> <span class="token operator">=</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token function">unmounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token comment">// 最好是在组件卸载时</span>
+</span><span class="code-line">    <span class="token comment">// 清除掉防抖计时器</span>
+</span><span class="code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">debouncedClick</span><span class="token punctuation">.</span><span class="token method function property-access">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">      <span class="token comment">// ... 对点击的响应 ...</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+<!--rehype:className=wrap-text -->
+</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="api-参考"><a aria-hidden="true" tabindex="-1" href="#api-参考"><span class="icon icon-link"></span></a>API 参考</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="应用实例---全局-api"><a aria-hidden="true" tabindex="-1" href="#应用实例---全局-api"><span class="icon icon-link"></span></a>应用实例 - (全局 API)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-3-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createApp()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#create-app">#</a></td></tr><tr><td align="left"><code>createSSRApp()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#create-ssr-app">#</a></td></tr><tr><td align="left"><code>app.mount()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-mount">#</a></td></tr><tr><td align="left"><code>app.unmount()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-unmount">#</a></td></tr><tr><td align="left"><code>app.provide()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-provide">#</a></td></tr><tr><td align="left"><code>app.component()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-component">#</a></td></tr><tr><td align="left"><code>app.directive()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-directive">#</a></td></tr><tr><td align="left"><code>app.use()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-use">#</a></td></tr><tr><td align="left"><code>app.mixin()</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-mixin">#</a></td></tr><tr><td align="left"><code>app.version</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-version">#</a></td></tr><tr><td align="left"><code>app.config</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config">#</a></td></tr><tr><td align="left"><code>app.config.errorHandler</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-errorhandler">#</a></td></tr><tr><td align="left"><code>app.config.warnHandler</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-warnhandler">#</a></td></tr><tr><td align="left"><code>app.config.performance</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-performance">#</a></td></tr><tr><td align="left"><code>app.config.compilerOptions</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-compileroptions">#</a></td></tr><tr><td align="left"><code>app.config.globalProperties</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-globalproperties">#</a></td></tr><tr><td align="left"><code>app.config.optionMergeStrategies</code></td><td align="left"><a href="https://cn.vuejs.org//api/application.html#app-config-optionmergestrategies">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="通用---全局-api"><a aria-hidden="true" tabindex="-1" href="#通用---全局-api"><span class="icon icon-link"></span></a>通用 - (全局 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>version</code></td><td align="left"><a href="https://cn.vuejs.org//api/general.html#version">#</a></td></tr><tr><td align="left"><code>nextTick()</code></td><td align="left"><a href="https://cn.vuejs.org//api/general.html#nexttick">#</a></td></tr><tr><td align="left"><code>defineComponent()</code></td><td align="left"><a href="https://cn.vuejs.org//api/general.html#definecomponent">#</a></td></tr><tr><td align="left"><code>defineAsyncComponent()</code></td><td align="left"><a href="https://cn.vuejs.org//api/general.html#defineasynccomponent">#</a></td></tr><tr><td align="left"><code>defineCustomElement()</code></td><td align="left"><a href="https://cn.vuejs.org//api/general.html#definecustomelement">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="setup---组合式-api"><a aria-hidden="true" tabindex="-1" href="#setup---组合式-api"><span class="icon icon-link"></span></a>setup() - (组合式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本使用</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-setup.html#basic-usage">#</a></td></tr><tr><td align="left"><code>访问 Props</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-setup.html#accessing-props">#</a></td></tr><tr><td align="left"><code>Setup 上下文</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-setup.html#setup-context">#</a></td></tr><tr><td align="left"><code>与渲染函数一起使用</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-setup.html#usage-with-render-functions">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应式-工具---组合式-api"><a aria-hidden="true" tabindex="-1" href="#响应式-工具---组合式-api"><span class="icon icon-link"></span></a>响应式: 工具 - (组合式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>isRef()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#isref">#</a></td></tr><tr><td align="left"><code>unref()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#unref">#</a></td></tr><tr><td align="left"><code>toRef()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#toref">#</a></td></tr><tr><td align="left"><code>toRefs()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#torefs">#</a></td></tr><tr><td align="left"><code>isProxy()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#isproxy">#</a></td></tr><tr><td align="left"><code>isReactive()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#isreactive">#</a></td></tr><tr><td align="left"><code>isReadonly()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-utilities.html#isreadonly">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="生命周期钩子---组合式-api"><a aria-hidden="true" tabindex="-1" href="#生命周期钩子---组合式-api"><span class="icon icon-link"></span></a>生命周期钩子 - (组合式 API)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>onMounted()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onmounted">#</a></td></tr><tr><td align="left"><code>onUpdated()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onupdated">#</a></td></tr><tr><td align="left"><code>onUnmounted()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onunmounted">#</a></td></tr><tr><td align="left"><code>onBeforeMount()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforemount">#</a></td></tr><tr><td align="left"><code>onBeforeUpdate()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforeupdate">#</a></td></tr><tr><td align="left"><code>onBeforeUnmount()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforeunmount">#</a></td></tr><tr><td align="left"><code>onErrorCaptured()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onerrorcaptured">#</a></td></tr><tr><td align="left"><code>onRenderTracked()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onrendertracked">#</a></td></tr><tr><td align="left"><code>onRenderTriggered()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onrendertriggered">#</a></td></tr><tr><td align="left"><code>onActivated()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onactivated">#</a></td></tr><tr><td align="left"><code>onDeactivated()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#ondeactivated">#</a></td></tr><tr><td align="left"><code>onServerPrefetch()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-lifecycle.html#onserverprefetch">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="依赖注入---组合式-api"><a aria-hidden="true" tabindex="-1" href="#依赖注入---组合式-api"><span class="icon icon-link"></span></a>依赖注入 - (组合式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-dependency-injection.html#provide">#</a></td></tr><tr><td align="left"><code>inject()</code></td><td align="left"><a href="https://cn.vuejs.org//api/composition-api-dependency-injection.html#inject">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应式-核心---组合式-api"><a aria-hidden="true" tabindex="-1" href="#响应式-核心---组合式-api"><span class="icon icon-link"></span></a>响应式: 核心 - (组合式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>ref()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#ref">#</a></td></tr><tr><td align="left"><code>computed ()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#computed">#</a></td></tr><tr><td align="left"><code>reactive()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#reactive">#</a></td></tr><tr><td align="left"><code>readonly()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#readonly">#</a></td></tr><tr><td align="left"><code>watchEffect()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#watcheffect">#</a></td></tr><tr><td align="left"><code>watchPostEffect()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#watchposteffect">#</a></td></tr><tr><td align="left"><code>watchSyncEffect()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#watchsynceffect">#</a></td></tr><tr><td align="left"><code>watch()</code></td><td align="left"><a href="https://cn.vuejs.org//api/reactivity-core.html#watch">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="状态选项---选项式-api"><a aria-hidden="true" tabindex="-1" href="#状态选项---选项式-api"><span class="icon icon-link"></span></a>状态选项 - (选项式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>data</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#data">#</a></td></tr><tr><td align="left"><code>props</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#props">#</a></td></tr><tr><td align="left"><code>computed</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#computed">#</a></td></tr><tr><td align="left"><code>methods</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#methods">#</a></td></tr><tr><td align="left"><code>watch</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#watch">#</a></td></tr><tr><td align="left"><code>emits</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#emits">#</a></td></tr><tr><td align="left"><code>expose</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-state.html#expose">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="生命周期选项---选项式-api"><a aria-hidden="true" tabindex="-1" href="#生命周期选项---选项式-api"><span class="icon icon-link"></span></a>生命周期选项 - (选项式 API)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>beforeCreate</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#beforecreate">#</a></td></tr><tr><td align="left"><code>created</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#created">#</a></td></tr><tr><td align="left"><code>beforeMount</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#beforemount">#</a></td></tr><tr><td align="left"><code>mounted</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#mounted">#</a></td></tr><tr><td align="left"><code>beforeUpdate</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#beforeupdate">#</a></td></tr><tr><td align="left"><code>updated</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#updated">#</a></td></tr><tr><td align="left"><code>beforeUnmount</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#beforeunmount">#</a></td></tr><tr><td align="left"><code>unmounted</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#unmounted">#</a></td></tr><tr><td align="left"><code>errorCaptured</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#errorcaptured">#</a></td></tr><tr><td align="left"><code>renderTracked</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#rendertracked">#</a></td></tr><tr><td align="left"><code>renderTriggered</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#rendertriggered-sup-classvt-badge-dev-only">#</a></td></tr><tr><td align="left"><code>activated</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#activated">#</a></td></tr><tr><td align="left"><code>deactivated</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#deactivated">#</a></td></tr><tr><td align="left"><code>serverPrefetch</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-lifecycle.html#serverprefetch">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="其他杂项---选项式-api"><a aria-hidden="true" tabindex="-1" href="#其他杂项---选项式-api"><span class="icon icon-link"></span></a>其他杂项 - (选项式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-misc.html#name">#</a></td></tr><tr><td align="left"><code>inheritAttrs</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-misc.html#inheritattrs">#</a></td></tr><tr><td align="left"><code>components</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-misc.html#components">#</a></td></tr><tr><td align="left"><code>directives</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-misc.html#directives">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="渲染选项---选项式-api"><a aria-hidden="true" tabindex="-1" href="#渲染选项---选项式-api"><span class="icon icon-link"></span></a>渲染选项 - (选项式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>template</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-rendering.html#template">#</a></td></tr><tr><td align="left"><code>render</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-rendering.html#render">#</a></td></tr><tr><td align="left"><code>compilerOptions</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-rendering.html#compileroptions">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="组件实例---选项式-api"><a aria-hidden="true" tabindex="-1" href="#组件实例---选项式-api"><span class="icon icon-link"></span></a>组件实例 - (选项式 API)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>$data</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#data">#</a></td></tr><tr><td align="left"><code>$props</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#props">#</a></td></tr><tr><td align="left"><code>$el</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#el">#</a></td></tr><tr><td align="left"><code>$options</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#options">#</a></td></tr><tr><td align="left"><code>$parent</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#parent">#</a></td></tr><tr><td align="left"><code>$root</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#root">#</a></td></tr><tr><td align="left"><code>$slots</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#slots">#</a></td></tr><tr><td align="left"><code>$refs</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#refs">#</a></td></tr><tr><td align="left"><code>$attrs</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#attrs">#</a></td></tr><tr><td align="left"><code>$watch()</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#watch">#</a></td></tr><tr><td align="left"><code>$emit()</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#emit">#</a></td></tr><tr><td align="left"><code>$forceUpdate()</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#forceupdate">#</a></td></tr><tr><td align="left"><code>$nextTick()</code></td><td align="left"><a href="https://cn.vuejs.org//api/component-instance.html#nexttick">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合选项---选项式-api"><a aria-hidden="true" tabindex="-1" href="#组合选项---选项式-api"><span class="icon icon-link"></span></a>组合选项 - (选项式 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-composition.html#provide">#</a></td></tr><tr><td align="left"><code>inject</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-composition.html#inject">#</a></td></tr><tr><td align="left"><code>mixins</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-composition.html#mixins">#</a></td></tr><tr><td align="left"><code>extends</code></td><td align="left"><a href="https://cn.vuejs.org//api/options-composition.html#extends">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="指令---内置内容"><a aria-hidden="true" tabindex="-1" href="#指令---内置内容"><span class="icon icon-link"></span></a>指令 - (内置内容)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-text</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-text">#</a></td></tr><tr><td align="left"><code>v-html</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-html">#</a></td></tr><tr><td align="left"><code>v-show</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-show">#</a></td></tr><tr><td align="left"><code>v-if</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-if">#</a></td></tr><tr><td align="left"><code>v-else</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-else">#</a></td></tr><tr><td align="left"><code>v-else-if</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-else-if">#</a></td></tr><tr><td align="left"><code>v-for</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-for">#</a></td></tr><tr><td align="left"><code>v-on</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-on">#</a></td></tr><tr><td align="left"><code>v-bind</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-bind">#</a></td></tr><tr><td align="left"><code>v-model</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-model">#</a></td></tr><tr><td align="left"><code>v-slot</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-slot">#</a></td></tr><tr><td align="left"><code>v-pre</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-pre">#</a></td></tr><tr><td align="left"><code>v-once</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-once">#</a></td></tr><tr><td align="left"><code>v-memo</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-memo">#</a></td></tr><tr><td align="left"><code>v-cloak</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-directives.html#v-cloak">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组件---内置内容"><a aria-hidden="true" tabindex="-1" href="#组件---内置内容"><span class="icon icon-link"></span></a>组件 - (内置内容)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;Transition></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-components.html#transition">#</a></td></tr><tr><td align="left"><code>&#x3C;TransitionGroup></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-components.html#transitiongroup">#</a></td></tr><tr><td align="left"><code>&#x3C;KeepAlive></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-components.html#keepalive">#</a></td></tr><tr><td align="left"><code>&#x3C;Teleport></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-components.html#teleport">#</a></td></tr><tr><td align="left"><code>&#x3C;Suspense></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-components.html#suspense">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="特殊-attributes---内置内容"><a aria-hidden="true" tabindex="-1" href="#特殊-attributes---内置内容"><span class="icon icon-link"></span></a>特殊 Attributes - (内置内容)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>key</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-special-attributes.html#key">#</a></td></tr><tr><td align="left"><code>ref</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-special-attributes.html#ref">#</a></td></tr><tr><td align="left"><code>is</code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-special-attributes.html#is">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="特殊元素---内置内容"><a aria-hidden="true" tabindex="-1" href="#特殊元素---内置内容"><span class="icon icon-link"></span></a>特殊元素 - (内置内容)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;component></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-special-elements.html#component">#</a></td></tr><tr><td align="left"><code>&#x3C;slot></code></td><td align="left"><a href="https://cn.vuejs.org//api/built-in-special-elements.html#slot">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="语法定义---单文件组件"><a aria-hidden="true" tabindex="-1" href="#语法定义---单文件组件"><span class="icon icon-link"></span></a>语法定义 - (单文件组件)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>总览</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#overview">#</a></td></tr><tr><td align="left"><code>相应语言块</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#language-blocks">#</a></td></tr><tr><td align="left"><code>自动名称推导</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#automatic-name-inference">#</a></td></tr><tr><td align="left"><code>预处理器</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#pre-processors">#</a></td></tr><tr><td align="left"><code>Src 导入</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#src-imports">#</a></td></tr><tr><td align="left"><code>注释</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-spec.html#comments">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="script-setup---单文件组件"><a aria-hidden="true" tabindex="-1" href="#script-setup---单文件组件"><span class="icon icon-link"></span></a>&#x3C;script setup> - (单文件组件)</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本语法</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#basic-syntax">#</a></td></tr><tr><td align="left"><code>响应式</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#reactivity">#</a></td></tr><tr><td align="left"><code>使用组件</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#using-components">#</a></td></tr><tr><td align="left"><code>使用自定义指令</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#using-custom-directives">#</a></td></tr><tr><td align="left"><code>defineProps() 和 defineEmits()</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#defineprops-defineemits">#</a></td></tr><tr><td align="left"><code>defineExpose</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#defineexpose">#</a></td></tr><tr><td align="left"><code>useSlots() 和 useAttrs()</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#useslots-useattrs">#</a></td></tr><tr><td align="left"><code>与普通的 &#x26;lt;script&#x26;gt; 一起使用</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#usage-alongside-normal-script">#</a></td></tr><tr><td align="left"><code>顶层 await</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#top-level-await">#</a></td></tr><tr><td align="left"><code>针对 TypeScript 的功能</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#typescript-only-features">#</a></td></tr><tr><td align="left"><code>限制</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-script-setup.html#restrictions">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-功能---单文件组件"><a aria-hidden="true" tabindex="-1" href="#css-功能---单文件组件"><span class="icon icon-link"></span></a>CSS 功能 - (单文件组件)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>组件作用域 CSS</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-css-features.html#scoped-css">#</a></td></tr><tr><td align="left"><code>CSS Modules</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-css-features.html#css-modules">#</a></td></tr><tr><td align="left"><code>CSS 中的 v-bind()</code></td><td align="left"><a href="https://cn.vuejs.org//api/sfc-css-features.html#v-bind-in-css">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="渲染函数---进阶-api"><a aria-hidden="true" tabindex="-1" href="#渲染函数---进阶-api"><span class="icon icon-link"></span></a>渲染函数 - (进阶 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>h()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#h">#</a></td></tr><tr><td align="left"><code>mergeProps()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#mergeprops">#</a></td></tr><tr><td align="left"><code>cloneVNode()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#clonevnode">#</a></td></tr><tr><td align="left"><code>isVNode()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#isvnode">#</a></td></tr><tr><td align="left"><code>resolveComponent()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#resolvecomponent">#</a></td></tr><tr><td align="left"><code>resolveDirective()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#resolvedirective">#</a></td></tr><tr><td align="left"><code>withDirectives()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#withdirectives">#</a></td></tr><tr><td align="left"><code>withModifiers()</code></td><td align="left"><a href="https://cn.vuejs.org//api/render-function.html#withmodifiers">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="服务端渲染---进阶-api"><a aria-hidden="true" tabindex="-1" href="#服务端渲染---进阶-api"><span class="icon icon-link"></span></a>服务端渲染 - (进阶 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>renderToString()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#rendertostring">#</a></td></tr><tr><td align="left"><code>renderToNodeStream()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#rendertonodestream">#</a></td></tr><tr><td align="left"><code>pipeToNodeWritable()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#pipetonodewritable">#</a></td></tr><tr><td align="left"><code>renderToWebStream()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#rendertowebstream">#</a></td></tr><tr><td align="left"><code>pipeToWebWritable()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#pipetowebwritable">#</a></td></tr><tr><td align="left"><code>renderToSimpleStream()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#rendertosimplestream">#</a></td></tr><tr><td align="left"><code>useSSRContext()</code></td><td align="left"><a href="https://cn.vuejs.org//api/ssr.html#usessrcontext">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="typescript-工具类型---进阶-api"><a aria-hidden="true" tabindex="-1" href="#typescript-工具类型---进阶-api"><span class="icon icon-link"></span></a>TypeScript 工具类型 - (进阶 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>PropType&#x3C;T></code></td><td align="left"><a href="https://cn.vuejs.org//api/utility-types.html#proptypet">#</a></td></tr><tr><td align="left"><code>ComponentCustomProperties</code></td><td align="left"><a href="https://cn.vuejs.org//api/utility-types.html#componentcustomproperties">#</a></td></tr><tr><td align="left"><code>ComponentCustomOptions</code></td><td align="left"><a href="https://cn.vuejs.org//api/utility-types.html#componentcustomoptions">#</a></td></tr><tr><td align="left"><code>ComponentCustomProps</code></td><td align="left"><a href="https://cn.vuejs.org//api/utility-types.html#componentcustomprops">#</a></td></tr><tr><td align="left"><code>CSSProperties</code></td><td align="left"><a href="https://cn.vuejs.org//api/utility-types.html#cssproperties">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义渲染---进阶-api"><a aria-hidden="true" tabindex="-1" href="#自定义渲染---进阶-api"><span class="icon icon-link"></span></a>自定义渲染 - (进阶 API)</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createRenderer()</code></td><td align="left"><a href="https://cn.vuejs.org//api/custom-renderer.html#create-renderer">#</a></td></tr></tbody></table>
+</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
+<ul>
+<li><a href="https://cn.vuejs.org/">Vue 3.x 官方文档</a></li>
+<li><a href="https://router.vuejs.org/zh/">Vue Router 4.x 官方文档</a></li>
+</ul>
+</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
   window.onhashchange = function () {
     anchorPoint()
diff --git a/index.html b/index.html
index 06ece763..b9da1361 100644
--- a/index.html
+++ b/index.html
@@ -46,10 +46,10 @@
 <a href="./docs/c.html" style="background: rgb(92 107 192/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 38 42">
 <path fill="currentColor" fill-rule="evenodd" d="M20.096,0.28575 C21.6507561,1.15835976 24.653163,2.84381008 27.7615951,4.58873655 L28.7451648,5.14086432 C32.0250464,6.98202246 35.2659268,8.80121341 36.903,9.71975 C37.582,10.09975 38,10.80375 38,11.56575 L38,30.43275 C38,31.19475 37.582,31.89875 36.903,32.27975 C35.3482439,33.1523598 32.345837,34.8378101 29.2374049,36.5827365 L28.2538352,37.1348643 C24.9739536,38.9760225 21.7330732,40.7952134 20.096,41.71375 C19.417,42.09475 18.581,42.09475 17.903,41.71375 C16.3482439,40.8411402 13.345837,39.1556899 10.2374049,37.4107635 L9.2538352,36.8586357 C5.9739536,35.0174775 2.73307317,33.1982866 1.096,32.27975 C0.418,31.89875 0,31.19575 0,30.43375 L0,11.56675 C0,10.80475 0.418,10.10075 1.097,9.71975 C4.451,7.83675 14.549,2.16875 17.903,0.28575 C18.582,-0.09525 19.418,-0.09525 20.096,0.28575 Z M19,6.99975 C11.273,6.99975 5,13.27275 5,20.99975 C5,28.72675 11.273,34.99975 19,34.99975 C24.2106279,34.99975 28.7600712,32.1471979 31.1706024,27.9198213 L25.0359394,24.544542 C23.8185152,26.6113911 21.5699125,27.99975 19,27.99975 C15.137,27.99975 12,24.86275 12,20.99975 C12,17.13575 15.136,13.99975 19,13.99975 C21.527968,13.99975 23.7450291,15.3427307 24.9755084,17.353858 L31.0544381,13.8798146 C28.6157645,9.76264004 24.1280833,6.99975 19,6.99975 Z"></path>
 </svg><span>C</span></a><!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
-<a href="./docs/cmake.html" style="background: rgb(92 107 192/var(\-\-bg\-opacity));"><svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+<a href="./docs/cmake.html" style="background: rgb(92 107 192/var(\-\-bg\-opacity));" class="contributing"><svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
   <path d="M11.769.066.067 23.206l12.76-10.843zm11.438 23.868L7.471 17.587 0 23.934zm.793-.198L12.298.463l1.719 19.24zM12.893 12.959l-5.025 4.298 5.62 2.248z"></path>
 </svg>
-<span>CMake</span></a><!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
+<span>CMake</span></a><!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
 <a href="./docs/docker.html" style="background: rgb(72 143 223/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512" height="1em" width="1em">
   <path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path>
 </svg>