{"id":387,"date":"2023-07-11T22:32:57","date_gmt":"2023-07-11T14:32:57","guid":{"rendered":"https:\/\/www.escook.cn\/?p=387"},"modified":"2023-09-26T21:00:58","modified_gmt":"2023-09-26T13:00:58","slug":"vue3-%e5%9f%ba%e7%a1%80-vite-%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/www.escook.cn\/index.php\/2023\/07\/11\/vue3-%e5%9f%ba%e7%a1%80-vite-%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80\/","title":{"rendered":"Vue3 \u57fa\u7840 \u2013 Vite &#038; \u7ec4\u4ef6\u57fa\u7840"},"content":{"rendered":"<blockquote>\n<p>\u7248\u6743\u5f52\u4f5c\u8005 <strong>\u00a9\u5218\u9f99\u5bbe<\/strong> \u6240\u6709\uff0c\u672c\u6587\u7ae0\u672a\u7ecf\u4f5c\u8005\u5141\u8bb8\uff0c\u7981\u6b62\u79c1\u81ea\u8f6c\u8f7d\uff01<\/p>\n<\/blockquote>\n<h2>1. Vite \u7684\u57fa\u672c\u4f7f\u7528<\/h2>\n<h3>1.1 \u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1 vs \u6784\u5efa\u5de5\u5177<\/h3>\n<h4>1. \u4ec0\u4e48\u662f\u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1<\/h4>\n<p>\u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1\uff0c\u6307\u7684\u5c31\u662f\u628a\u6d4f\u89c8\u5668<strong>\u4e0d\u8bc6\u522b\u7684<\/strong>\u4ee3\u7801\uff0c\u7f16\u8bd1\u6210\u6d4f\u89c8\u5668<strong>\u80fd\u8bc6\u522b\u548c\u8fd0\u884c\u7684<\/strong>\u4ee3\u7801\u3002\u4f8b\u5982\u4e0b\u9762\u7684 <code>v-for<\/code> \u6307\u4ee4\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;ul&gt;\n  &lt;li v-for=&quot;item in todos&quot;&gt;\n    &lt;span&gt;{{ item.task }}&lt;\/span&gt;\n  &lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>\u6d4f\u89c8\u5668\u65e0\u6cd5\u6b63\u786e\u89e3\u6790\u548c\u6267\u884c <code>v-for<\/code> \u6307\u4ee4\uff0c\u56e0\u4e3a\u8fd9\u662f Vue \u6846\u67b6\u63d0\u4f9b\u7684\u7279\u6b8a\u8bed\u6cd5\u3002\u56e0\u6b64\uff0c\u4e3a\u4e86\u4fdd\u8bc1\u6d4f\u89c8\u5668\u6700\u7ec8\u80fd\u6e32\u67d3\u51fa\u5217\u8868\u7684\u7ed3\u6784\uff0cVue \u5fc5\u987b\u505a\u4ee5\u4e0b2\u4ef6\u4e8b\u60c5\uff1a<\/p>\n<ol>\n<li>\u628a<strong>\u6a21\u677f<\/strong>\u7f16\u8bd1\u6210<strong>\u6e32\u67d3\u51fd\u6570<\/strong><\/li>\n<li><strong>\u6267\u884c\u6e32\u67d3\u51fd<\/strong>\u6570\u5e76\u4fdd\u8bc1\u9879\u76ee\u7684<strong>\u6301\u7eed\u8fd0\u884c<\/strong><\/li>\n<\/ol>\n<p>\u56fe\u793a\u5982\u4e0b\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.escook.cn\/wp-content\/uploads\/2023\/07\/image-20230702234638950.png\" alt=\"image-20230702234638950\" style=\"zoom:80%;\" \/><\/p>\n<p>\u6211\u4eec\u4e4b\u524d\u5728\u6d4f\u89c8\u5668\u4e2d\u5f15\u5165\u7684 <code>vue3.global.vue<\/code>  \u5c31\u5b8c\u6574\u7684\u5305\u542b\u4e86 <strong>Compiler<\/strong> \u548c <strong>Runtime<\/strong>\u3002<\/p>\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u6d4f\u89c8\u5668\u5728\u771f\u6b63\u8c03\u7528 Runtime-dom \u8fd0\u884c\u7f51\u9875\u4e4b\u524d\uff0c\u5fc5\u987b\u5148\u8c03\u7528 <strong>compiler-dom<\/strong> \u8fdb\u884c\u6a21\u677f\u7684\u7f16\u8bd1\uff0c\u8fd9\u5c31\u5e26\u6765\u4e86\u4ee5\u4e0b\u4e24\u4e2a\u95ee\u9898\uff1a<\/p>\n<ol>\n<li>\u5982\u679c\u6a21\u677f\u7ed3\u6784\u6bd4\u8f83\u590d\u6742\uff0c\u5219\u5728\u6a21\u677f\u7f16\u8bd1\u9636\u6bb5\u4f1a\u8017\u8d39\u5f88\u957f\u7684\u65f6\u95f4\uff0c\u9020\u6210\u7528\u6237\u4f53\u9a8c\u5dee\u7684\u95ee\u9898\u3002<\/li>\n<li>\u5bfc\u5165\u7684 vue.js \u4f53\u79ef\u8f83\u5927\uff0c\u56e0\u4e3a\u5b83\u5b8c\u6574\u7684\u5305\u542b\u4e86 <strong>Compiler<\/strong> \u548c <strong>Runtime<\/strong>\uff0c\u5bfc\u81f4\u901a\u8fc7\u7f51\u7edc\u52a0\u8f7d vue.js \u65f6\u6bd4\u8f83\u8017\u65f6\u3002<\/li>\n<\/ol>\n<h4>2. \u901a\u8fc7\u6784\u5efa\u5de5\u5177\u8fdb\u884c\u9884\u6784\u5efa<\/h4>\n<p>\u4e3a\u4e86\u89e3\u51b3\u6a21\u677f\u7f16\u8bd1\u8017\u65f6\u95ee\u9898\u548c\u5bfc\u5165\u7684 vue.js \u5305\u4f53\u79ef\u5927\u7684\u95ee\u9898\uff0c\u6211\u4eec\u63a8\u8350\u5927\u5bb6\u901a\u8fc7<strong>\u6784\u5efa\u5de5\u5177<\/strong>\u5bf9 Vue \u9879\u76ee\u8fdb\u884c<strong>\u9884\u6784\u5efa<\/strong>\u3002\u6784\u5efa\u5de5\u5177\u7684\u4f5c\u7528\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.escook.cn\/wp-content\/uploads\/2023\/07\/image-20230703110655276.png\" alt=\"image-20230703110655276\" style=\"zoom:80%;\" \/><\/p>\n<p>\u901a\u8fc7\u9884\u6784\u5efa\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u6a21\u677f\u7f16\u8bd1\u7684\u8fc7\u7a0b\uff0c\u72ec\u7acb\u4e8e\u9879\u76ee\u8fd0\u884c\u4e4b\u524d\u3002\u8fd9\u6837\u505a\u7684\u597d\u5904\u6709\u4ee5\u4e0b\u4e24\u70b9\uff1a<\/p>\n<ol>\n<li>\u8282\u7701\u4e86\u9879\u76ee\u8fd0\u884c\u671f\u95f4\u7684\u6a21\u677f\u7f16\u8bd1\u8fc7\u7a0b\uff0c\u63d0\u9ad8\u4e86\u6027\u80fd<\/li>\n<li>\u51cf\u5c11\u4e86\u5927\u7ea6 14KB \u7684 vue.js \u5305\u7684\u4f53\u79ef\uff0c\u56e0\u4e3a\u53ea\u9700\u8981\u4f9d\u8d56\u4e8e Runtime \u8fd0\u884c\u65f6\uff0c\u4e0d\u518d\u4f9d\u8d56\u4e8e Compiler \u7f16\u8bd1\u5668<\/li>\n<\/ol>\n<h4>3. \u4e3b\u6d41\u7684\u6784\u5efa\u5de5\u5177<\/h4>\n<p>\u76ee\u524d\uff0c\u5e02\u9762\u4e0a\u4e3b\u6d41\u7684\u6784\u5efa\u5de5\u5177\u6709\u4ee5\u4e0b2\u4e2a\uff1a<\/p>\n<ol>\n<li>webpack<\/li>\n<li>vite<\/li>\n<\/ol>\n<p>\u5176\u4e2d webpack \u662f\u4e00\u4e2a\u8001\u724c\u7684\u524d\u7aef\u5de5\u7a0b\u5316\u7684\u6784\u5efa\u5de5\u5177\uff0c\u529f\u80fd\u5f3a\u5927\uff0c\u63d2\u4ef6\u4f17\u591a\uff0c\u751f\u6001\u5b8c\u5584\u3002\u652f\u6301 Vue\uff0cReact\uff0cAngular \u7b49\u4e3b\u6d41\u7684\u524d\u7aef\u6846\u67b6\u3002<\/p>\n<p>\u800c vite \u662f Vue \u5b98\u65b9\u56e2\u961f\u7814\u53d1\u51fa\u7684\u524d\u7aef\u5de5\u7a0b\u5316\u6784\u5efa\u5de5\u5177\uff0c\u4ee5<strong>\u5353\u8d8a\u7684\u6784\u5efa\u6027\u80fd<\/strong>\u800c\u8fc5\u901f\u5d1b\u8d77\uff0c\u540c\u6837\u652f\u6301 Vue\uff0cReact\uff0cAngular \u7b49\u4e3b\u6d41\u7684\u524d\u7aef\u6846\u67b6\u3002<\/p>\n<p>\u5728\u4eca\u540e\u7684 Vue3 \u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u9009\u62e9 vite \u4f5c\u4e3a\u9879\u76ee\u7684\u6784\u5efa\u5de5\u5177\uff0c\u4e3b\u8981\u539f\u56e0\u6709\u4ee5\u4e0b\u4e24\u70b9\uff1a<\/p>\n<ol>\n<li>\u6784\u5efa\u901f\u5ea6\u6781\u5feb\uff0c\u5f00\u53d1\u4f53\u9a8c\u597d<\/li>\n<li>Vue \u5b98\u65b9\u51fa\u54c1\uff0c\u548c Vue3 \u7684\u9879\u76ee\u5b8c\u7f8e\u5951\u5408<\/li>\n<\/ol>\n<blockquote>\n<p>\u53c2\u8003\u6587\u6863\uff1a <a href=\"https:\/\/cn.vitejs.dev\/guide\/why.html\">\u4e3a\u4ec0\u4e48\u9009 Vite<\/a><\/p>\n<\/blockquote>\n<h3>1.2 \u57fa\u4e8e Vite \u521b\u5efa Vue3 \u9879\u76ee<\/h3>\n<ol>\n<li>\n<p>\u6253\u5f00\u7ec8\u7aef\uff0c\u8fd0\u884c\u5982\u4e0b\u7684 npm \u547d\u4ee4\uff0c\u57fa\u4e8e\u547d\u4ee4\u884c\u7684\u65b9\u5f0f\u5feb\u901f\u521b\u5efa vue3 \u7684\u9879\u76ee\uff1a<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest<\/code><\/pre>\n<\/li>\n<li>\n<p>\u901a\u8fc7\u5bf9\u7ec8\u7aef\u8fdb\u884c\u4ea4\u4e92\u5f0f\u7684\u64cd\u4f5c\uff0c\u9009\u62e9\u9879\u76ee\u7684\u914d\u7f6e\uff1a<\/p>\n<pre><code class=\"language-bash\">Need to install the following packages:\n create-vite@4.3.2\nOk to proceed? (y) y\n\u221a Project name: ... code2\n\u221a Select a framework: \u00bb Vue\n\u221a Select a variant: \u00bb JavaScript<\/code><\/pre>\n<\/li>\n<li>\n<p>\u9879\u76ee\u521b\u5efa\u5b8c\u6210\u540e\uff0c\u9700\u8981\u5206\u522b\u6267\u884c\u4ee5\u4e0b3\u4e2a\u547d\u4ee4\uff0c\u4ece\u800c\u628a\u9879\u76ee\u8fd0\u884c\u8d77\u6765\uff1a<\/p>\n<pre><code class=\"language-bash\">cd code2\nnpm install\nnpm run dev<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>1.3 \u719f\u6089\u9879\u76ee\u7684\u76ee\u5f55\u7ed3\u6784<\/h3>\n<ol>\n<li>\u8ba4\u8bc6<strong>\u6839\u76ee\u5f55\u4e0b<\/strong>\u91cd\u8981\u7684<strong>\u6587\u4ef6<\/strong>\u548c<strong>\u6587\u4ef6\u5939<\/strong>\uff1a\n<ul>\n<li>src \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u6e90\u4ee3\u7801\u76ee\u5f55\u3002\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7a0b\u5e8f\u5458\u5199\u7684\u6240\u6709\u4ee3\u7801\uff0c\u90fd\u8981\u653e\u5230 src \u76ee\u5f55\u4e0b\u3002<\/li>\n<li>index.html \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9879\u76ee\u4e3b\u9875\u3002\u5f53\u6211\u4eec\u628a\u9879\u76ee\u8fd0\u884c\u8d77\u6765\u4e4b\u540e\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\u770b\u5230\u7684\u5c31\u662f\u8fd9\u4e2a\u9875\u9762\u3002<\/li>\n<li>package.json \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u5305\u7ba1\u7406\u914d\u7f6e\u6587\u4ef6\u3002\u8bb0\u5f55\u4e86\u9879\u76ee\u7684\u4f9d\u8d56\u5305\uff0c\u8fd8\u63d0\u4f9b\u4e86 <code>dev<\/code> \u548c <code>build<\/code> \u4e24\u4e2a\u547d\u4ee4\u3002<\/li>\n<li>vite.config.js \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 vite \u6784\u5efa\u65f6\u7684\u914d\u7f6e\u6587\u4ef6\u3002\u7528\u6765\u5bf9 vite \u7684\u8fd0\u884c\u65b9\u5f0f\u8fdb\u884c\u4e2a\u6027\u5316\u7684\u914d\u7f6e\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u8ba4\u8bc6 src \u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u548c\u6587\u4ef6\u5939\uff1a\n<ul>\n<li>assets \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9759\u6001\u8d44\u6e90\u7684\u5b58\u653e\u76ee\u5f55\u3002\u4f8b\u5982\u56fe\u7247\u3001CSS\u3001JS\u63d2\u4ef6\u7b49\u90fd\u53ef\u4ee5\u653e\u5230\u6b64\u76ee\u5f55\u4e0b\u3002<\/li>\n<li>components \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u7ec4\u4ef6\u76ee\u5f55\u3002\u7528\u6237\u81ea\u5df1\u5c01\u88c5\u7684 .vue \u7ec4\u4ef6\u53ef\u4ee5\u653e\u5728\u6b64\u76ee\u5f55\u4e0b\u3002<\/li>\n<li>App.vue \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u6574\u4e2a\u9879\u76ee\u7684\u6839\u7ec4\u4ef6\u3002<\/li>\n<li>main.js \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 Vue \u9879\u76ee\u8fd0\u884c\u7684\u5165\u53e3\u3002<\/li>\n<li>style.css \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9879\u76ee\u7684\u5168\u5c40\u6837\u5f0f\u8868\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>1.4 \u4ee5 Compiler + Runtime \u7684\u65b9\u5f0f\u7f16\u5199\u4ee3\u7801<\/h3>\n<ol>\n<li>\n<p>\u5728 <code>index.html<\/code> \u4e2d\uff0c\u7f16\u5199\u6a21\u677f\u7ed3\u6784\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p>\u5728 <code>src\/main.js<\/code> \u4e2d\uff0c\u521b\u5efa <code>app<\/code> \u5b9e\u4f8b\uff0c\u5e76\u63d0\u4f9b data \u6570\u636e\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">import { createApp } from 'vue'\n\nconst app = createApp({\n data() {\n   return {\n     name: 'zs'\n   }\n }\n})\n\napp.mount('#app')<\/code><\/pre>\n<\/li>\n<li>\n<p>\u6b64\u65f6\uff0c\u4f1a\u53d1\u73b0\u6d4f\u89c8\u5668\u7684\u7ec8\u7aef\u63d0\u793a\u4e86\u5982\u4e0b\u7684\u8b66\u544a\u6d88\u606f\uff1a<\/p>\n<pre><code class=\"language-html\">[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias \"vue\" to \"vue\/dist\/vue.esm-bundler.js\".\n at <App><\/code><\/pre>\n<p>\u610f\u601d\u662f\uff1a\u6b65\u9aa42\u4e2d\u7b2c1\u884c\u5bfc\u5165\u7684 <code>vue<\/code>\uff0c\u53ea\u5305\u542b Runtime \u8fd0\u884c\u65f6\uff0c\u4e0d\u5305\u542b Compiler \u7f16\u8bd1\u5668\uff0c\u6240\u4ee5\u65e0\u6cd5\u5728\u6d4f\u89c8\u5668\u4e2d\u7f16\u8bd1\u6b65\u9aa41\u4e2d\u7684\u6a21\u677f\u7ed3\u6784\u3002\u4e3a\u4e86\u80fd\u591f\u652f\u6301\u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1\uff0c\u8bf7\u628a\u5bfc\u5165\u7684 <code>vue<\/code> \u66ff\u6362\u4e3a <code>vue\/dist\/vue.esm-bundler.js<\/code>\u3002<\/p>\n<\/li>\n<li>\n<p>\u6e05\u695a\u4e86\u95ee\u9898\u6240\u5728\u4e4b\u540e\uff0c\u6211\u4eec\u628a <code>src\/main.js<\/code> \u4e2d\u5bfc\u5165 vue \u7684\u4ee3\u7801\u8fdb\u884c\u4fee\u6539\uff1a<\/p>\n<pre><code class=\"language-js\">import { createApp } from 'vue\/dist\/vue.esm-bundler.js'<\/code><\/pre>\n<p>\u4fdd\u5b58\u4e4b\u540e\uff0c\u6211\u4eec\u53d1\u73b0\u9879\u76ee\u53ef\u4ee5\u6b63\u5e38\u7684\u8fd0\u884c\u4e86\u3002\u4f46\u662f\uff0c\u8fd9\u79cd\u8fd0\u884c vue \u9879\u76ee\u7684\u65b9\u5f0f\u5e76\u6ca1\u6709\u628a<strong>\u6784\u5efa\u5de5\u5177\u7684\u4f5c\u7528<\/strong>\u4f53\u73b0\u51fa\u6765\uff1a<\/p>\n<ul>\n<li>\u6784\u5efa\u5de5\u5177\u8d1f\u8d23\u7f16\u8bd1\u6a21\u677f\u7ed3\u6784\uff0c\u4ea7\u51fa\u7f16\u8bd1\u597d\u7684\u4ee3\u7801<\/li>\n<li>\u6d4f\u89c8\u5668\u53ea\u9700\u8981 Vue \u7684 Runtime \u8fd0\u884c\u65f6\uff0c\u5373\u53ef\u628a\u7f16\u8bd1\u597d\u7684\u4ee3\u7801\u76f4\u63a5\u8fd0\u884c\u8d77\u6765<\/li>\n<\/ul>\n<p>\u8fd9\u6837\u505a\u7684\u597d\u5904\u662f\uff1a<\/p>\n<ul>\n<li>\u51cf\u5c11\u4e86 vue.js \u7684\u4f53\u79ef\uff0c\u7f29\u77ed\u4e86\u4f9d\u8d56\u5305\u7684\u52a0\u8f7d\u65f6\u957f<\/li>\n<li>\u514d\u53bb\u4e86\u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1\u8fc7\u7a0b\uff0c\u63d0\u9ad8\u4e86\u9879\u76ee\u7684\u8fd0\u884c\u6027\u80fd<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>1.5 \u4ee5 Runtime \u7684\u65b9\u5f0f\u7f16\u5199\u4ee3\u7801<\/h3>\n<p>Vue \u5efa\u8bae\u6211\u4eec\u628a\u6a21\u677f\u548c\u6570\u636e\uff0c\u5168\u90e8\u5c01\u88c5\u5230 <code>.vue<\/code> \u6587\u4ef6\u4e2d\u3002\u8fd9\u6837\u53ef\u4ee5\u5145\u5206\u53d1\u6325\u6784\u5efa\u5de5\u5177\u7684\u4f5c\u7528\uff0c\u5bf9\u6574\u4e2a\u9879\u76ee\u4e2d\u7684 <code>.vue<\/code> \u6587\u4ef6\u8fdb\u884c<strong>\u9884\u6784\u5efa\uff08\u6a21\u677f\u7f16\u8bd1\uff09<\/strong>\u3002\u5f53\u6211\u4eec\u5728\u8fd0\u884c\u9879\u76ee\u7684\u65f6\u5019\uff0c\u53ea\u9700\u8981\u5bfc\u5165 Runtime \u7248\u672c\u7684 vue.js \u5373\u53ef\u3002<\/p>\n<p>\u4e00\u4e2a <code>.vue<\/code> \u6587\u4ef6\u7684\u57fa\u672c\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script&gt;&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u6240\u4ee5\uff0c\u6211\u4eec\u53ef\u4ee5\u628a <strong>1.4 \u5c0f\u8282<\/strong>\u4e2d\u7684\u529f\u80fd\uff0c\u5c01\u88c5\u5230 <code>src\/App.vue<\/code> \u4e2d\uff0c\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u6a21\u677f\u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script&gt;\nimport { ref } from &#039;vue&#039;\n\nexport default {\n  \/\/ setup \u51fd\u6570\u662f\u54cd\u5e94\u5f0f API \u7684\u5165\u53e3\n  setup() {\n    \/\/ \u5b9a\u4e49\u54cd\u5e94\u5f0f\u6570\u636e\n    const name = ref(&#039;liulongbin&#039;)\n\n    \/\/ \u628a\u6570\u636e\u66b4\u9732\u7ed9\u6a21\u677f\u4f7f\u7528\n    return {\n      name\n    }\n  }\n}\n&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style&gt;\nh1 {\n  color: red;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u6700\u540e\uff0c\u9700\u8981\u4fee\u6539 <code>src\/main.js<\/code> \u4e2d\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ 1. \u5bfc\u5165\u53ea\u5305\u542b Runtime \u8fd0\u884c\u65f6\u7684 vue\nimport { createApp } from &#039;vue&#039;\n\/\/ 2. \u5bfc\u5165\u8981\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u7684 .vue \u6587\u4ef6\uff08\u7ec4\u4ef6\uff09\nimport App from &#039;.\/App.vue&#039;\n\n\/\/ 3. \u8c03\u7528 createApp() \u51fd\u6570\uff0c\u5e76\u6307\u5b9a\u8981\u6e32\u67d3\u201c\u7ec4\u4ef6\u201d\nconst app = createApp(App)\n\n\/\/ 4. \u6307\u5b9a\u6302\u8f7d\u7684\u533a\u57df\napp.mount(&#039;#app&#039;)<\/code><\/pre>\n<h2>2. Vue \u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528<\/h2>\n<h3>2.1 \u7ec4\u4ef6\u7684\u6982\u5ff5<\/h3>\n<h4>1. \u4ec0\u4e48\u662f\u7ec4\u4ef6<\/h4>\n<p><strong>\u7ec4\u4ef6\u662f\u5bf9 UI \u7ed3\u6784\u7684\u5c01\u88c5\u548c\u590d\u7528<\/strong>\u3002\u5728\u5b9e\u9645\u5e94\u7528\u4e2d\uff0c\u7ec4\u4ef6\u5e38\u5e38\u88ab\u7ec4\u7ec7\u6210<strong>\u5c42\u5c42\u5d4c\u5957<\/strong>\u7684<strong>\u6811\u72b6\u7ed3\u6784<\/strong>\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.escook.cn\/wp-content\/uploads\/2023\/07\/components.7fbb3771.png\" alt=\"\u7ec4\u4ef6\u6811\" style=\"zoom:55%;\" \/><\/p>\n<p>\u5728 Vue \u9879\u76ee\u4e2d\uff0c\u7ec4\u4ef6\u901a\u5e38\u88ab\u5b9a\u4e49\u4e3a\u4ee5 <code>.vue<\/code> \u7ed3\u5c3e\u7684\u6587\u4ef6\u3002\u6211\u4eec\u53ef\u4ee5\u5728 <code>.vue <\/code> \u7ec4\u4ef6\u5185\u5c01\u88c5\u81ea\u5b9a\u4e49\u7684\u5185\u5bb9\u4e0e\u903b\u8f91\u3002<\/p>\n<h4>2. \u5b9a\u4e49\u4e00\u4e2a\u7ec4\u4ef6<\/h4>\n<p>\u5f53\u4f7f\u7528 vite \u7b49\u6784\u5efa\u5de5\u5177\u65f6\uff0c\u6211\u4eec\u901a\u5e38\u4f1a\u628a\u7ec4\u4ef6\u5b9a\u4e49\u5728\u4e00\u4e2a\u5355\u72ec\u7684 <code>.vue<\/code> \u6587\u4ef6\u4e2d\uff0c\u8fd9\u88ab\u53eb\u505a<strong>\u5355\u6587\u4ef6\u7ec4\u4ef6<\/strong>\uff08Single File Component\uff0c\u7b80\u79f0\u4e3a\uff1a<strong>SFC<\/strong>\uff09\u3002\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u4ee3\u7801\u5b9a\u4e49\u4e86\u540d\u4e3a <code>ButtonCounter.vue<\/code> \u7684\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u6a21\u677f\u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h2&gt;\u5f53\u524d\u7684 count \u503c\u4e3a\uff1a{{ count }}&lt;\/h2&gt;\n  &lt;button @click=&quot;add&quot;&gt;+1&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a\u903b\u8f91 --&gt;\n&lt;script&gt;\nimport { ref } from &#039;vue&#039;\n\nexport default {\n  setup() {\n    \/\/ \u54cd\u5e94\u5f0f\u6570\u636e\n    const count = ref(0)\n    \/\/ \u65b9\u6cd5\u4e8b\u4ef6\u5904\u7406\u5668\n    const add = () =&gt; count.value++\n\n    return {\n      count,\n      add\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h4>3. \u4f7f\u7528\u7ec4\u4ef6<\/h4>\n<p>\u5047\u8bbe\u6211\u4eec\u8981\u5728 <code>App.vue<\/code> \u7ec4\u4ef6\u4e2d\uff0c\u4f7f\u7528\u521a\u624d\u5b9a\u4e49\u7684 <code>ButtonCounter.vue<\/code> \u7ec4\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u5728 <code>App.vue<\/code> \u4e2d\u4f7f\u7528 <code>import<\/code> \u5bfc\u5165 <code>ButtonCounter<\/code> \u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">import ButtonCounter from &#039;.\/components\/ButtonCounter.vue&#039;<\/code><\/pre>\n<p>\u7136\u540e\uff0c\u5728 <code>components<\/code> \u8282\u70b9\u4e0b\u6ce8\u518c\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">export default {\n  setup() { \/* \u7701\u7565\u5176\u5b83\u4ee3\u7801 *\/ },\n  components: {\n    ButtonCounter\n  }\n}<\/code><\/pre>\n<p>\u6700\u540e\uff0c\u5728\u6a21\u677f\u7ed3\u6784\u4e2d\u4ee5\u6807\u7b7e\u7684\u5f62\u5f0f\uff0c\u4f7f\u7528\u521a\u624d\u6ce8\u518c\u7684 <code>ButtonCounter<\/code> \u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n  &lt;hr \/&gt;\n  &lt;!-- \u4f7f\u7528 ButtonCounter \u7ec4\u4ef6 --&gt;\n  &lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h4>4. \u7ec4\u4ef6\u4e4b\u95f4\u7684\u5173\u7cfb<\/h4>\n<p>\u7ec4\u4ef6\u4e4b\u95f4\u7684\u5173\u7cfb\u5206\u4e3a\uff1a<\/p>\n<ol>\n<li>\u7236\u5b50\u5173\u7cfb\uff08\u4f8b\u5982\uff1a\u6839\u7ec4\u4ef6 App \u548c Header \u7ec4\u4ef6\u5c5e\u4e8e\u7236\u5b50\u5173\u7cfb\uff09<\/li>\n<li>\u5144\u5f1f\u5173\u7cfb\uff08\u4f8b\u5982\uff1aHeader \u7ec4\u4ef6\u548c Main \u7ec4\u4ef6\u5c5e\u4e8e\u5144\u5f1f\u5173\u7cfb\uff09<\/li>\n<li>\u540e\u4ee3\u5173\u7cfb\uff08\u4f8b\u5982\uff1a\u6839\u7ec4\u4ef6 App \u548c Article \u7ec4\u4ef6\u5c5e\u4e8e\u540e\u4ee3\u5173\u7cfb\uff09<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/www.escook.cn\/wp-content\/uploads\/2023\/07\/components.7fbb3771.png\" alt=\"\u7ec4\u4ef6\u6811\" style=\"zoom:55%;\" \/><\/p>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u6709\u76f4\u63a5\u5d4c\u5957\u5173\u7cfb\u7684\uff0c\u5c5e\u4e8e\u7236\u5b50\u5173\u7cfb\uff1b\u82e5\u662f\u95f4\u63a5\u7684\u5d4c\u5957\u5173\u7cfb\uff0c\u5219\u5c5e\u4e8e\u540e\u4ee3\u5173\u7cfb\u3002<\/p>\n<\/blockquote>\n<h4>5. script setup \u8bed\u6cd5\u7cd6<\/h4>\n<p>\u5728 SFC \u4e2d\uff0c\u4e3a\u4e86\u7b80\u5316 <code>setup<\/code> \u5165\u53e3\u51fd\u6570\u7684\u4ee3\u7801\uff0cVue \u63a8\u8350\u4f7f\u7528 <strong>script setup \u8bed\u6cd5\u7cd6<\/strong>\uff0c\u5b83\u7684\u683c\u5f0f\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;&lt;\/template&gt;\n\n&lt;script setup&gt;&lt;\/script&gt;\n\n&lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u4f8b\u5982\uff0c\u4f7f\u7528 script setup \u8bed\u6cd5\u7cd6\u628a <code>ButtonCounter.vue<\/code> \u7ec4\u4ef6\u6539\u9020\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h1&gt;\u5f53\u524d\u7684 count \u503c\u4e3a\uff1a{{ count }}&lt;\/h1&gt;\n  &lt;button @click=&quot;add&quot;&gt;+1&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\n\/\/ \u9876\u5c42\u53d8\u91cf\uff0c\u65b9\u6cd5\u7b49\u90fd\u53ef\u4ee5\u5728\u6a21\u677f\u4e2d\u88ab\u8bbf\u95ee\u5230\nconst count = ref(0)\nconst add = () =&gt; count.value++\n&lt;\/script&gt;\n\n&lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u540c\u65f6\uff0c\u5728 <code>App.vue<\/code> \u7ec4\u4ef6\u4e2d\u4f7f\u7528 <code>ButtonCounter.vue<\/code> \u7ec4\u4ef6\u65f6\uff0c\u53ef\u4ee5\u6539\u9020\u6210 script setup \u7684\u5199\u6cd5\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n  &lt;hr \/&gt;\n  &lt;!-- \u4f7f\u7528 ButtonCounter \u7ec4\u4ef6 --&gt;\n  &lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\n  import { ref } from &#039;vue&#039;\n  \/\/ \u9876\u5c42\u53d8\u91cf\uff0c\u90fd\u53ef\u4ee5\u5728\u6a21\u677f\u4e2d\u76f4\u63a5\u4f7f\u7528\n  import ButtonCounter from &#039;.\/components\/ButtonCounter.vue&#039;\n  const name = ref(&#039;liulongbin&#039;)\n&lt;\/script&gt;<\/code><\/pre>\n<h3>2.2 \u6df7\u5408\u4f7f\u7528\u9009\u9879\u5f0f API \u548c\u7ec4\u5408\u5f0f API<\/h3>\n<h4>1. \u666e\u901a script + setup \u5165\u53e3\u51fd\u6570<\/h4>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h2&gt;\u5f53\u524d\u7684 count \u503c\u4e3a\uff1a{{ count }}&lt;\/h2&gt;\n  &lt;button @click=&quot;add&quot;&gt;+1&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ref } from &#039;vue&#039;\n\nexport default {\n  \/\/ \u5176\u5b83\u9009\u9879\u5f0f API\n  name: &#039;BtnCount&#039;,\n  \/\/ \u7ec4\u5408\u5f0f API \u7684\u5165\u53e3\n  setup() {\n    const count = ref(0)\n    const add = () =&gt; count.value++\n\n    return {\n      count,\n      add\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h4>2. \u666e\u901a script + script setup<\/h4>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h2&gt;\u5f53\u524d\u7684 count \u503c\u4e3a\uff1a{{ count }}&lt;\/h2&gt;\n  &lt;button @click=&quot;add&quot;&gt;+1&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nconst count = ref(0)\nconst add = () =&gt; count.value++\n&lt;\/script&gt;\n\n&lt;script&gt;\nexport default {\n  name: &#039;BtnCount&#039;\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h4>3. script setup + defineOptions \u5b8f\u51fd\u6570<\/h4>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h2&gt;\u5f53\u524d\u7684 count \u503c\u4e3a\uff1a{{ count }}&lt;\/h2&gt;\n  &lt;button @click=&quot;add&quot;&gt;+1&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\n\/\/ \u5b8f\u51fd\u6570\uff0c\u4e0d\u9700\u8981\u5bfc\u5165\u5c31\u80fd\u76f4\u63a5\u4f7f\u7528\n\/\/ Vue \u5728\u7f16\u8bd1\u9636\u6bb5\uff0c\u4f1a\u628a defineOptions \u4e2d\u7684\u914d\u7f6e\uff0c\u7f16\u8bd1\u4e3a\u9009\u9879\u5f0f API\ndefineOptions({\n  name: &#039;BtnCount&#039;\n})\n\nimport { ref } from &#039;vue&#039;\nconst count = ref(0)\nconst add = () =&gt; count.value++\n&lt;\/script&gt;\n<\/code><\/pre>\n<h3>2.3 SFC \u4e2d\u7684\u6837\u5f0f<\/h3>\n<h4>1. \u6837\u5f0f\u51b2\u7a81\u95ee\u9898<\/h4>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5728\u7ec4\u4ef6\u4e2d\u58f0\u660e\u7684 <code>&lt;style&gt;<\/code> \u5c5e\u4e8e<strong>\u5168\u5c40\u6837\u5f0f<\/strong>\uff0c\u8fd9\u4e9b\u6837\u5f0f\u9664\u4e86\u4f1a\u5f71\u54cd\u7ec4\u4ef6\u81ea\u8eab\u7684\u5143\u7d20\uff0c\u8fd8\u4f1a\u5f71\u54cd\u5230\u5176\u5b83\u7ec4\u4ef6\u4e2d\u7684\u5143\u7d20\u3002\u56e0\u4e3a\u8fd9\u4e9b\u7ec4\u4ef6\u7ecf\u8fc7 Vue \u7f16\u8bd1\u4e4b\u540e\uff0c\u90fd\u4f1a\u88ab\u5448\u73b0\u5728 <code>index.html<\/code> \u9875\u9762\u4e2d\uff0c\u6240\u4ee5\u5f88\u5bb9\u6613\u51fa\u73b0\u6837\u5f0f\u51b2\u7a81\u7684\u95ee\u9898\u3002<\/p>\n<p>\u4f8b\u5982 <code>App.vue<\/code> \u7ec4\u4ef6\u4e2d\u7ed9 h1 \u6807\u7b7e\u5b9a\u4e49\u7684\u6837\u5f0f\uff0c\u4f1a\u5f71\u54cd\u5230 <code>Son.vue<\/code> \u7ec4\u4ef6\u4e2d\u7684 h1\u3002\u76f8\u5e94\u7684\uff0c\u5728 <code>Son.vue<\/code> \u7ec4\u4ef6\u4e2d\u4e3a h1 \u6807\u7b7e\u5b9a\u4e49\u7684\u6837\u5f0f\uff0c\u4e5f\u4f1a\u5f71\u54cd\u5230 <code>App.vue<\/code> \u7ec4\u4ef6\u4e2d\u7684 h1\u3002<\/p>\n<p><code>App.vue<\/code> \u7ec4\u4ef6\u4e2d\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h1&gt;\u8fd9\u662f App \u6839\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n\n  &lt;hr \/&gt;\n  &lt;Son&gt;&lt;\/Son&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script setup&gt;\nimport Son from &#039;.\/components\/Son.vue&#039;\n&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style&gt;\nh1 {\n  color: red;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<p><code>Son.vue<\/code> \u7ec4\u4ef6\u4e2d\u7684\u6837\u5f0f\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h1&gt;\u8fd9\u662f Son \u5b50\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n  &lt;p&gt;\u8fd9\u662f Son \u5b50\u7ec4\u4ef6\u4e2d\u7684\u6bb5\u843d&lt;\/p&gt;\n&lt;\/template&gt;\n\n&lt;style&gt;\nh1 {\n  font-size: 16px;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<h4>2. \u89e3\u51b3\u6837\u5f0f\u51b2\u7a81<\/h4>\n<p>\u89e3\u51b3\u6837\u5f0f\u51b2\u7a81\u7684\u65b9\u5f0f\u6709\u5f88\u591a\u79cd\uff0c\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4f7f\u7528<strong>\u81ea\u5b9a\u4e49\u5c5e\u6027 + \u5c5e\u6027\u9009\u62e9\u5668<\/strong>\u7684\u65b9\u5f0f\u6765\u89e3\u51b3\u7ec4\u4ef6\u4e4b\u95f4\u6837\u5f0f\u51b2\u7a81\u7684\u95ee\u9898\u3002\u5b9e\u73b0\u601d\u8def\u5982\u4e0b\uff1a<\/p>\n<ol>\n<li>\u4e3a\u6bcf\u4e2a SFC \u7ec4\u4ef6\u6307\u5b9a\u552f\u4e00\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027\u540d<\/li>\n<li>\u628a\u81ea\u5b9a\u4e49\u7684\u5c5e\u6027\u540d\uff0c\u6dfb\u52a0\u7ed9\u5f53\u524d\u7ec4\u4ef6\u7684\u6bcf\u4e00\u4e2a\u5143\u7d20<\/li>\n<li>\u7ed9\u5f53\u524d\u7ec4\u4ef6\u7684\u6837\u5f0f\u9009\u62e9\u5668\uff0c\u6dfb\u52a0\u4e00\u4e2a\u4ea4\u96c6\u7684\u5c5e\u6027\u9009\u62e9\u5668<\/li>\n<\/ol>\n<p>\u4f8b\u5982\uff0c\u7ed9 <code>App.vue<\/code> \u6307\u5b9a\u4e00\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027 <code>data-v-001<\/code>\uff0c\u5219\u628a <code>App.vue<\/code> \u4e2d\u7684\u6a21\u677f\u7ed3\u6784\u548c\u6837\u5f0f\u4fee\u6539\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;h1 data-v-001&gt;\u8fd9\u662f App \u6839\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n\n  &lt;hr data-v-001 \/&gt;\n  &lt;Son&gt;&lt;\/Son&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script setup&gt;\nimport Son from &#039;.\/components\/Son.vue&#039;\n&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style&gt;\nh1[data-v-001] {\n  color: red;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u7ed9 <code>Son.vue<\/code> \u6307\u5b9a\u4e00\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027 <code>data-v-002<\/code>\uff0c\u5219\u628a <code>Son.vue<\/code> \u4e2d\u7684\u6a21\u677f\u7ed3\u6784\u548c\u6837\u5f0f\u4fee\u6539\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;h1 data-v-002&gt;\u8fd9\u662f Son \u5b50\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n  &lt;p data-v-002&gt;\u8fd9\u662f Son \u5b50\u7ec4\u4ef6\u4e2d\u7684\u6bb5\u843d&lt;\/p&gt;\n&lt;\/template&gt;\n\n&lt;style&gt;\nh1[data-v-002] {\n  font-size: 16px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u8fd9\u6837\uff0c\u5c31\u6210\u529f\u7684\u89e3\u51b3\u4e86\u7ec4\u4ef6\u4e4b\u95f4\u7684\u6837\u5f0f\u51b2\u7a81\u95ee\u9898\u3002<\/p>\n<p>\u56e0\u4e3a\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u7684\u6837\u5f0f\uff0c\u90fd\u6709\u6dfb\u52a0\u4e86<strong>\u552f\u4e00\u7684\u5c5e\u6027\u9009\u62e9\u5668<\/strong>\uff0c\u4ece\u800c\u4fdd\u8bc1\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u6837\u5f0f\u53ea\u4f1a\u5f71\u54cd\u81ea\u8eab\u7684\u5143\u7d20\u3002<\/p>\n<p>\u5176\u5b9e Vue \u4e3a\u4e86\u7b80\u5316\u7528\u6237\u7684\u7f16\u7801\u590d\u6742\u5ea6\uff0c\u4e3a <code>&lt;style&gt;<\/code> \u63d0\u4f9b\u4e86 <code>scoped<\/code> \u9009\u9879\u3002Vue \u5728\u7f16\u8bd1 SFC \u6a21\u677f\u7684\u65f6\u5019\uff0c\u5982\u679c\u53d1\u73b0 <code>&lt;style scoped&gt;<\/code> \u7684\u5199\u6cd5\uff0c\u5c31\u4f1a\u81ea\u52a8\u7ed9\u5f53\u524d\u7ec4\u4ef6\u751f\u6210\u4e00\u4e2a\u552f\u4e00\u7684 <code>data-v-*<\/code> \u5c5e\u6027\u9009\u62e9\u5668\uff0c\u5e76\u81ea\u52a8\u628a\u5c5e\u6027\u9009\u62e9\u5668\u6dfb\u52a0\u5230\u6bcf\u4e2a\u5143\u7d20\u548c\u6bcf\u4e2aCSS\u9009\u62e9\u5668\u4e0a\u3002<\/p>\n<h4>3. \u6839\u5143\u7d20\u4e0e scoped<\/h4>\n<p>\u5728 Vue3 \u4e2d\u7684 SFC \u7ec4\u4ef6\u5185\uff0c<code>&lt;template&gt;<\/code> \u533a\u57df\u5141\u8bb8\u5b58\u5728<strong>\u591a\u4e2a\u6839\u5143\u7d20<\/strong>\uff0c\u540c\u65f6\uff0c\u4e5f\u652f\u6301 Vue2 \u4e2d\u7684<strong>\u552f\u4e00\u6839\u5143\u7d20<\/strong>\u7684\u5199\u6cd5\u3002\u5f53\u7236\u5b50\u7ec4\u4ef6\u540c\u65f6\u5e94\u7528 <code>scoped<\/code> \u65f6\uff1a<\/p>\n<ol>\n<li>\u5982\u679c\u5b50\u7ec4\u4ef6\u7684 <code>&lt;template&gt;<\/code> \u4e2d\u5b58\u5728\u591a\u4e2a\u6839\u5143\u7d20\uff0c\u4e0d\u4f1a\u628a\u7236\u7ec4\u4ef6\u7684 <code>data-v-*<\/code> \u6dfb\u52a0\u7ed9\u5b50\u7ec4\u4ef6\u7684\u6839\u5143\u7d20\u3002<\/li>\n<li>\u5982\u679c\u5b50\u7ec4\u4ef6\u7684 <code>&lt;template&gt;<\/code> \u4e2d\u53ea\u6709\u552f\u4e00\u7684\u6839\u5143\u7d20\uff0c\u5219\u4f1a\u628a\u7236\u7ec4\u4ef6\u7684 <code>data-v-*<\/code> \u6dfb\u52a0\u7ed9\u5b50\u7ec4\u4ef6\u7684\u6839\u5143\u7d20\u3002<\/li>\n<\/ol>\n<h4>4. \u6df1\u5ea6\u9009\u62e9\u5668<\/h4>\n<p>\u5f53\u7236\u7ec4\u4ef6\u5f00\u542f\u4e86 <code>&lt;style&gt;<\/code> \u6807\u7b7e\u7684 <code>scoped<\/code> \u9009\u9879\u4e4b\u540e\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u7236\u7ec4\u4ef6\u4e2d\u7f16\u5199\u7684\u6837\u5f0f\u65e0\u6cd5\u5f71\u54cd\u5230\u5b50\u7ec4\u4ef6\uff0c\u8fd9\u5b8c\u5168\u7b26\u5408<strong>\u9632\u6b62\u7ec4\u4ef6\u4e4b\u95f4\u6837\u5f0f\u51b2\u7a81<\/strong>\u7684\u9700\u6c42\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u8fd9\u4e5f\u4ea7\u751f\u4e86\u4e00\u4e2a\u8d1f\u9762\u7684\u4f5c\u7528\uff1a<strong>\u5728\u4e0d\u6539\u52a8\u5b50\u7ec4\u4ef6\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u7236\u7ec4\u4ef6\u4e2d\u65e0\u6cd5\u5fae\u8c03\u5b50\u7ec4\u4ef6\u4e2d\u7684\u4efb\u4f55\u6837\u5f0f<\/strong>\uff01<\/p>\n<p>\u89e3\u51b3\u65b9\u6848\u5f88\u7b80\u5355\uff0c\u4f7f\u7528 <code>:deep()<\/code> \u8fd9\u4e2a\u4f2a\u7c7b\uff0c\u628a\u5b50\u7ec4\u4ef6\u7684\u9009\u62e9\u5668\u5305\u88f9\u8d77\u6765\u5373\u53ef\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u6837\u5f0f --&gt;\n&lt;style scoped&gt;\nh1 {\n  color: red;\n}\n\n\/* \u628a\u5b50\u7ec4\u4ef6\u7684\u9009\u62e9\u5668\uff0c\u4f7f\u7528 :deep() \u5305\u88f9\u8d77\u6765 *\/\n:deep(p) {\n  color: green;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u6700\u7ec8\u751f\u6210\u7684\u6837\u5f0f\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-css\">[data-v-7a7a37b1] p {\n    color: green;\n}<\/code><\/pre>\n<h4>5. CSS \u4e2d\u7684 v-bind<\/h4>\n<p>SFC \u4e2d\u7684 <code>&lt;style&gt;<\/code> \u6807\u7b7e\u652f\u6301\u4f7f\u7528 <code>v-bind()<\/code> \u8fd9\u4e2a CSS \u51fd\u6570\u5c06<strong>\u54cd\u5e94\u5f0f\u6570\u636e<\/strong>\u7ed1\u5b9a\u4e3a <strong>CSS \u5c5e\u6027\u7684\u503c<\/strong>\u3002\u4f8b\u5982\u628a\u54cd\u5e94\u5f0f\u6570\u636e <code>count<\/code> \u7ed1\u5b9a\u4e3a <code>h1<\/code> \u5143\u7d20\u7684 <code>font-size<\/code> \u503c\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;!-- \u70b9\u51fb\u6309\u94ae\uff0c\u8ba9 count \u6570\u503c\u81ea\u589e +1 --&gt;\n  &lt;button @click=&quot;count++&quot;&gt;+1&lt;\/button&gt;\n  &lt;h1&gt;\u8fd9\u662f App \u6839\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script setup&gt;\nimport { ref, computed } from &#039;vue&#039;\n\n\/\/ \u5b57\u4f53\u5927\u5c0f\uff0c\u521d\u59cb\u503c\u4e3a\u6570\u503c 12\uff0c\u4e0d\u5e26 px \u5355\u4f4d\nconst count = ref(12)\n\/\/ \u8ba1\u7b97\u5c5e\u6027\uff1a\u4e3a\u5b57\u4f53\u5927\u5c0f\u6dfb\u52a0 px \u5355\u4f4d\u503c\nconst fsize = computed(() =&gt; count.value + &#039;px&#039;)\n&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style scoped&gt;\nh1 {\n  color: red;\n  \/* \u628a font-size \u7684\u503c\u7ed1\u5b9a\u4e3a\u8ba1\u7b97\u5c5e\u6027 fsize \u7684\u503c *\/\n  font-size: v-bind(fsize);\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<h4>6. \u57fa\u4e8e\u7ec4\u5408\u5f0f API \u5c01\u88c5\u81ea\u5df1\u7684 Hooks API<\/h4>\n<p>\u7ecf\u8fc7\u6211\u4eec\u7684\u5206\u6790\uff0c\u53d1\u73b0 <strong>2.3.5 \u5c0f\u8282<\/strong>\u4e2d\uff0c\u4e3a\u4e86\u4fdd\u8bc1\u529f\u80fd\u7684\u6b63\u5e38\u8fd0\u884c\uff0c\u6211\u4eec\u53ea\u9700\u8981\u62ff\u5230 <code>count<\/code> \u548c <code>fsize<\/code> \u5373\u53ef\u3002\u5176\u4e2d\uff1a<\/p>\n<ol>\n<li>count \u662f\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684 ref \u6570\u636e\uff0c\u662f\u4e00\u4e2a number \u6570\u5b57\u7c7b\u578b\u7684\u503c\uff1b\u5f53\u70b9\u51fb\u6309\u94ae\u65f6\uff0c\u9700\u8981\u8ba9 count \u503c\u81ea\u589e<\/li>\n<li>fsize \u662f\u4e00\u4e2a\u8ba1\u7b97\u5c5e\u6027\uff0c\u5b83\u4f9d\u8d56\u4e8e count \u503c\u7684\u53d8\u5316\uff0c\u8ba1\u7b97\u7684\u7ed3\u679c\u662f\u5f97\u5230\u4e00\u4e2a\u5e26\u6709 <code>px<\/code> \u5355\u4f4d\u7684\u5b57\u7b26\u4e32\uff1b\u6211\u4eec\u4f1a\u628a\u5b83\u7ed1\u5b9a\u4e3a\u5143\u7d20\u7684 <code>font-size<\/code> \u5c5e\u6027\u503c<\/li>\n<\/ol>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u628a <code>count<\/code> \u548c <code>fsize<\/code> \u521b\u5efa\u7684\u8fc7\u7a0b\uff0c\u5c01\u88c5\u4e3a\u81ea\u5b9a\u4e49\u7684 Hooks\u3002\u8fc7\u7a0b\u5982\u4e0b\uff1a<\/p>\n<p>\u5728 <code>src<\/code> \u76ee\u5f55\u4e0b\u521b\u5efa <code>hooks<\/code> \u6587\u4ef6\u5939\uff0c\u5e76\u5728 hooks \u6587\u4ef6\u5939\u4e0b\u65b0\u5efa\u540d\u4e3a <code>index.js<\/code> \u7684\u6587\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ 1. \u5bfc\u5165\u9700\u8981\u7684\u7ec4\u5408\u5f0f API \u51fd\u6570\nimport { ref, computed } from &#039;vue&#039;\n\n\/\/ 2. \u5411\u5916\u5bfc\u51fa\u4e00\u4e2a\u540d\u4e3a useXXX \u7684\u81ea\u5b9a\u4e49 Hooks \u51fd\u6570\uff0c\u5176\u4e2d n \u4e3a\u521d\u59cb\u6570\u636e\nexport const useSizePx = (n) =&gt; {\n  \/\/ 2.1 \u5b9a\u4e49\u54cd\u5e94\u5f0f\u6570\u636e\n  const size = ref(n)\n  \/\/ 2.2 \u5b9a\u4e49\u4f9d\u8d56\u4e8e size \u7684 computed \u8ba1\u7b97\u5c5e\u6027\n  const sizePx = computed(() =&gt; size.value + &#039;px&#039;)\n\n  \/\/ 3. \u4ee5\u6570\u7ec4\u7684\u5f62\u5f0f\uff0c\u5411\u5916\u66b4\u9732 size \u548c sizePx \u4e24\u4efd\u6570\u636e\uff0c\u4f9b\u7528\u6237\u4f7f\u7528\n  return [size, sizePx]\n}<\/code><\/pre>\n<p>\u5728 <code>App.vue<\/code> \u4e2d\u5bfc\u5165\u81ea\u5b9a\u4e49\u7684 Hooks \u51fd\u6570\uff0c\u4f20\u5165\u521d\u59cb\u503c\uff0c\u5e76\u4f7f\u7528\u6570\u7ec4\u7684\u89e3\u6784\u64cd\u4f5c\uff0c\u5f97\u5230 Hooks \u8fd4\u56de\u7684 ref \u6570\u636e\u548c computed \u8ba1\u7b97\u5c5e\u6027\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;!-- \u7ed3\u6784 --&gt;\n&lt;template&gt;\n  &lt;button @click=&quot;count++&quot;&gt;+1&lt;\/button&gt;\n  &lt;h1&gt;\u8fd9\u662f App \u6839\u7ec4\u4ef6\u4e2d\u7684\u6807\u9898&lt;\/h1&gt;\n&lt;\/template&gt;\n\n&lt;!-- \u884c\u4e3a --&gt;\n&lt;script setup&gt;\nimport { useSizePx } from &#039;.\/hooks\/index.js&#039;\nconst [count, fsize] = useSizePx(12)\n&lt;\/script&gt;\n\n&lt;!-- \u6837\u5f0f --&gt;\n&lt;style scoped&gt;\nh1 {\n  color: red;\n  font-size: v-bind(fsize);\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<blockquote>\n<p>\u81ea\u5b9a\u4e49 Hooks \u7684\u597d\u5904\u662f\uff1a\u5b9e\u73b0\u4e86\u4e1a\u52a1\u4ee3\u7801\u7684<strong>\u5c01\u88c5<\/strong>\u548c<strong>\u590d\u7528<\/strong>\u3002<\/p>\n<\/blockquote>\n<h4>7. \u542f\u7528 less \u8bed\u6cd5<\/h4>\n<p>\u5728 SFC \u4e2d\u7f16\u5199\u6837\u5f0f\u65f6\uff0c\u5982\u679c\u60f3\u8981\u4f7f\u7528 less \u8bed\u6cd5\u7f16\u5199 CSS \u6837\u5f0f\uff0c\u9700\u8981\u6309\u7167\u4ee5\u4e0b\u4e24\u4e2a\u6b65\u9aa4\u8fdb\u884c\u914d\u7f6e\uff1a<\/p>\n<p>\u6b65\u9aa41\uff1a\u8fd0\u884c\u4ee5\u4e0b\u7684 npm \u547d\u4ee4\uff0c\u5b89\u88c5 less \u4f9d\u8d56\u5305\uff1a<\/p>\n<pre><code class=\"language-html\">npm install less -D<\/code><\/pre>\n<p>\u6b65\u9aa42\uff1a\u4e3a <code>&lt;style&gt;<\/code> \u6807\u7b7e\u6dfb\u52a0 <code>lang=&quot;less&quot;<\/code> \u5c5e\u6027\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;style lang=&quot;less&quot; scoped&gt;\nh1 {\n  color: red;\n  font-size: v-bind(fsize);\n\n  span {\n    color: cyan;\n  }\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u7136\u540e\uff0c\u5c31\u53ef\u4ee5\u6109\u5feb\u7684\u4f7f\u7528 less \u8bed\u6cd5\u5566~<\/p>\n<h3>2.4 \u7ec4\u4ef6\u6ce8\u518c<\/h3>\n<h4>1. \u5168\u5c40\u6ce8\u518c\u7ec4\u4ef6<\/h4>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 <a href=\"https:\/\/cn.vuejs.org\/guide\/essentials\/application.html\">Vue \u5e94\u7528\u5b9e\u4f8b<\/a>\u7684 <code>app.component()<\/code> \u65b9\u6cd5\uff0c\u8ba9\u7ec4\u4ef6\u5728\u5f53\u524d Vue \u5e94\u7528\u4e2d\u5168\u5c40\u53ef\u7528\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">app.component(&#039;\u6ce8\u518c\u540d\u79f0&#039;, \u8981\u6ce8\u518c\u7684\u7ec4\u4ef6)<\/code><\/pre>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre><code class=\"language-js\">import Counter from &#039;.\/components\/Counter.vue&#039;\n\/\/ \u4f7f\u7528 app.component() \u51fd\u6570\u6ce8\u518c\u5168\u5c40\u7ec4\u4ef6\napp.component(&#039;ButtonCounter&#039;, Counter)<\/code><\/pre>\n<p>\u6ce8\u518c\u597d\u7684\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5728\u4efb\u4f55\u7ec4\u4ef6\u4e2d\u88ab\u4f7f\u7528\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;<\/code><\/pre>\n<h4>2. \u5c40\u90e8\u6ce8\u518c\u7ec4\u4ef6<\/h4>\n<p>\u5728<strong>\u9009\u9879\u5f0f API<\/strong> \u4e2d\uff0c\u9700\u8981\u6309\u7167\u4ee5\u4e0b3\u4e2a\u6b65\u9aa4\u6ce8\u518c\u5c40\u90e8\u7ec4\u4ef6\uff08\u79c1\u6709\u7ec4\u4ef6\uff09\uff1a<\/p>\n<ol>\n<li>\u5bfc\u5165\u9700\u8981\u4f7f\u7528\u7684\u7ec4\u4ef6<\/li>\n<li>\u5728 <code>components<\/code> \u9009\u9879\u4e0b\u6ce8\u518c\u5bfc\u5165\u7684\u7ec4\u4ef6<\/li>\n<li>\u4ee5\u6807\u7b7e\u7684\u5f62\u5f0f\u4f7f\u7528\u6ce8\u518c\u597d\u7684\u7ec4\u4ef6<\/li>\n<\/ol>\n<p>\u4f8b\u5982\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u5c31\u4f7f\u7528\u4e86\u9009\u9879\u5f0f API \u6ce8\u518c\u4e86 ButtonCounter \u5b50\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;!-- 3. \u4f7f\u7528 --&gt;\n  &lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n\/\/ 1. \u5bfc\u5165\nimport ButtonCounter from &#039;.\/components\/ButtonCounter.vue&#039;\n\nexport default {\n  \/\/ 2. \u6ce8\u518c\n  components: {\n    ButtonCounter\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u5728 <strong>script setup<\/strong> \u4e2d\uff0c<strong>\u514d\u53bb\u4e86\u6ce8\u518c\u7ec4\u4ef6\u7684\u6b65\u9aa4<\/strong>\uff0c\u56e0\u4e3a\u9876\u5c42\u53d8\u91cf\u53ef\u4ee5\u76f4\u63a5\u5728\u6a21\u677f\u4e2d\u4f7f\u7528\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;!-- 2. \u4f7f\u7528 --&gt;\n  &lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\n\/\/ 1. \u5bfc\u5165\nimport ButtonCounter from &#039;.\/components\/ButtonCounter.vue&#039;\n&lt;\/script&gt;<\/code><\/pre>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u5728\u7236\u7ec4\u4ef6\u4e2d\u5c40\u90e8\u6ce8\u518c\u7684\u5b50\u7ec4\u4ef6\uff0c\u53ea\u80fd\u5728\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff01<\/p>\n<\/blockquote>\n<h4>3. \u7ec4\u4ef6\u540d\u683c\u5f0f<\/h4>\n<p>\u65e0\u8bba\u662f\u5168\u5c40\u6ce8\u518c\u8fd8\u662f\u5c40\u90e8\u6ce8\u518c\u7ec4\u4ef6\uff0c\u90fd\u9700\u8981\u63d0\u4f9b\u7ec4\u4ef6\u7684\u6ce8\u518c\u540d\u79f0\u3002Vue \u5b98\u65b9<strong>\u63a8\u8350<\/strong>\u4f7f\u7528 <strong>PascalCase<\/strong>\uff08\u5927\u9a7c\u5cf0\uff09 \u683c\u5f0f\u7684\u6ce8\u518c\u540d\u79f0\u3002<\/p>\n<p>\u56e0\u4e3a PascalCase \u683c\u5f0f\u7684\u540d\u79f0\u80fd\u5f88\u597d\u7684\u628a <strong>HTML \u6807\u7b7e<\/strong>\u548c<strong>\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/strong>\u533a\u5206\u5f00\u6765\u3002<\/p>\n<p>\u4f8b\u5982 <code>&lt;ButtonCounter&gt;&lt;\/ButtonCounter&gt;<\/code> \u5c31\u662f\u4f7f\u7528\u4e86 PascalCase \u683c\u5f0f\u7684\u7ec4\u4ef6\u540d\u79f0\u3002<\/p>\n<p>\u4e0d\u8fc7\u5462\uff0c\u4ee5 PascalCase \u683c\u5f0f\u6ce8\u518c\u6216\u5bfc\u5165\u7684\u7ec4\u4ef6\uff0c\u4e5f\u80fd\u57fa\u4e8e kebab-case \u683c\u5f0f\u7684\u6807\u7b7e\u8fdb\u884c\u4f7f\u7528\uff0c\u4f8b\u5982 <code>&lt;button-counter&gt;&lt;\/button-counter&gt;<\/code>\u3002<\/p>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u63a8\u8350\u5927\u5bb6\u4eca\u540e\u5728\u5bfc\u5165\u7ec4\u4ef6\u3001\u6ce8\u518c\u7ec4\u4ef6\u3001\u4f7f\u7528\u7ec4\u4ef6\u65f6\u90fd\u7edf\u4e00\u4f7f\u7528\u5927\u9a7c\u5cf0\u7684\u65b9\u5f0f\u3002<\/p>\n<\/blockquote>\n<h3>2.5 \u52a8\u6001\u7ec4\u4ef6 &amp; KeepAlive<\/h3>\n<p>\u5f53\u6211\u4eec\u9700\u8981\u5728\u540c\u4e00\u4e2a\u4f4d\u7f6e\u5207\u6362\u5c55\u793a\u4e0d\u540c\u7684\u7ec4\u4ef6\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u52a8\u6001\u7ec4\u4ef6\u6765\u5b9e\u73b0\u6b64\u529f\u80fd\u3002<\/p>\n<h4>1. component \u5143\u7d20\u548c is \u5c5e\u6027<\/h4>\n<p><strong>component \u5143\u7d20<\/strong>\u662f\u4e00\u4e2a<strong>\u7ec4\u4ef6\u7684\u5360\u4f4d\u7b26<\/strong>\uff0c\u5177\u4f53\u5728 component \u5143\u7d20\u6240\u5728\u7684\u4f4d\u7f6e\u5c55\u793a\u54ea\u4e2a\u7ec4\u4ef6\uff0c\u7531 <code>is<\/code> \u5c5e\u6027\u51b3\u5b9a\u3002<\/p>\n<p><code>is<\/code> \u5c5e\u6027\u7684\u503c\u53ef\u4ee5\u662f\uff1a<\/p>\n<ul>\n<li>\u88ab\u6ce8\u518c\u7684\u7ec4\u4ef6\u540d<\/li>\n<li>\u5bfc\u5165\u7684\u7ec4\u4ef6\u5bf9\u8c61<\/li>\n<\/ul>\n<p>\u4f8b\u5982\uff0c\u5b9a\u4e49 <code>ComLight.vue<\/code> \u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.box {\n  width: 500px;\n  height: 300px;\n  background-color: #efefef;\n  box-shadow: 1px 1px 10px #ccc;\n  border-radius: 10px;\n  padding: 10px;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u518d\u5b9a\u4e49 <code>ComDark.vue<\/code> \u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.box {\n  width: 500px;\n  height: 300px;\n  background-color: #2b2b2b;\n  box-shadow: 1px 1px 10px #888;\n  border-radius: 10px;\n  padding: 10px;\n  color: white;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u5728 <code>App.vue<\/code> \u4e2d\u901a\u8fc7 <code>v-if<\/code> \u6307\u4ee4\u5b9e\u73b0\u7ec4\u4ef6\u7684\u6309\u9700\u5c55\u793a\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;button @click=&quot;flag = false&quot;&gt;Light&lt;\/button&gt;\n  &lt;button @click=&quot;flag = true&quot;&gt;Dark&lt;\/button&gt;\n\n  &lt;hr \/&gt;\n  &lt;ComLight v-if=&quot;!flag&quot;&gt;&lt;\/ComLight&gt;\n  &lt;ComDark v-else&gt;&lt;\/ComDark&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nimport ComLight from &#039;.\/components\/ComLight.vue&#039;\nimport ComDark from &#039;.\/components\/ComDark.vue&#039;\n\nconst flag = ref(false)\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u5728 <code>App.vue<\/code> \u4e2d\u901a\u8fc7 <code>:is<\/code> \u6307\u5b9a\u5bfc\u5165\u7684<strong>\u7ec4\u4ef6\u5bf9\u8c61<\/strong>\uff0c\u4ece\u800c\u5b9e\u73b0\u7ec4\u4ef6\u7684\u6309\u9700\u5c55\u793a\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;button @click=&quot;flag = false&quot;&gt;Light&lt;\/button&gt;\n  &lt;button @click=&quot;flag = true&quot;&gt;Dark&lt;\/button&gt;\n\n  &lt;hr \/&gt;\n  &lt;component :is=&quot;flag ? ComDark : ComLight&quot;&gt;&lt;\/component&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\n\/\/ ComLight \u548c ComDark \u662f\u5bfc\u5165\u7684\u7ec4\u4ef6\u5bf9\u8c61\nimport ComLight from &#039;.\/components\/ComLight.vue&#039;\nimport ComDark from &#039;.\/components\/ComDark.vue&#039;\n\nconst flag = ref(false)\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u5728 <code>App.vue<\/code> \u4e2d\u901a\u8fc7 <code>:is<\/code> \u6307\u5b9a\u6ce8\u518c\u7684<strong>\u7ec4\u4ef6\u540d\u79f0<\/strong>\uff0c\u4ece\u800c\u5b9e\u73b0\u7ec4\u4ef6\u7684\u6309\u9700\u5c55\u793a\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;button @click=&quot;flag = false&quot;&gt;Light&lt;\/button&gt;\n  &lt;button @click=&quot;flag = true&quot;&gt;Dark&lt;\/button&gt;\n\n  &lt;hr \/&gt;\n  &lt;component :is=&quot;flag ? &#039;MyDark&#039; : &#039;MyLight&#039;&quot;&gt;&lt;\/component&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport ComLight from &#039;.\/components\/ComLight.vue&#039;\nimport ComDark from &#039;.\/components\/ComDark.vue&#039;\n\nexport default {\n  data() {\n    return {\n      flag: false\n    }\n  },\n  \/\/ MyLight \u548c MyDark \u662f\u6ce8\u518c\u540d\u79f0\n  components: {\n    MyLight: ComLight,\n    MyDark: ComDark\n  }\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<h4>2. \u4f7f\u7528 KeepAlive \u4fdd\u6301\u7ec4\u4ef6\u7684\u72b6\u6001<\/h4>\n<p><code>&lt;KeepAlive&gt;<\/code> \u662f\u4e00\u4e2a\u5185\u7f6e\u7ec4\u4ef6\uff0c\u5b83\u7684\u529f\u80fd\u662f\u5728\u591a\u4e2a\u7ec4\u4ef6\u95f4\u52a8\u6001\u5207\u6362\u65f6<strong>\u7f13\u5b58\u88ab\u79fb\u9664\u7684\u7ec4\u4ef6\u5b9e\u4f8b<\/strong>\u3002<\/p>\n<p>\u5728 <code>ComLight.vue<\/code> \u7ec4\u4ef6\u4e2d\u65b0\u589e\u8ba1\u6570\u5668\u529f\u80fd\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;div class=&quot;box&quot;&gt;\n    &lt;h1&gt;{{ count }}&lt;\/h1&gt;\n    &lt;button @click=&quot;count++&quot;&gt;+1&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nconst count = ref(0)\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n.box {\n  width: 500px;\n  height: 300px;\n  background-color: #efefef;\n  box-shadow: 1px 1px 10px #ccc;\n  border-radius: 10px;\n  padding: 10px;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u5728 <code>ComDark.vue<\/code> \u7ec4\u4ef6\u4e2d\u65b0\u589e\u6587\u672c\u6846\u7684\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;div class=&quot;box&quot;&gt;\n    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot; \/&gt;\n    &lt;p&gt;\u6d88\u606f\u662f\uff1a{{ msg }}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nconst msg = ref(&#039;&#039;)\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n.box {\n  width: 500px;\n  height: 300px;\n  background-color: #2b2b2b;\n  box-shadow: 1px 1px 10px #888;\n  border-radius: 10px;\n  padding: 10px;\n  color: white;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u6700\u540e\uff0c\u5728 <code>App.vue<\/code> \u6839\u7ec4\u4ef6\u4e2d\uff0c\u4f7f\u7528 <code>&lt;KeepAlive&gt;<\/code> \u7ec4\u4ef6\u628a <code>&lt;component :is&gt;<\/code> \u7684\u52a8\u6001\u7ec4\u4ef6\u5305\u88f9\u8d77\u6765\uff0c\u5373\u53ef\u5b9e\u73b0\u7ec4\u4ef6\u7684\u7f13\u5b58\uff1a<\/p>\n<pre><code class=\"language-html\">  &lt;KeepAlive&gt;\n    &lt;component :is=&quot;flag ? &#039;MyDark&#039; : &#039;MyLight&#039;&quot;&gt;&lt;\/component&gt;\n  &lt;\/KeepAlive&gt;<\/code><\/pre>\n<h4>3. \u7f13\u5b58\u5b9e\u4f8b\u7684\u751f\u547d\u5468\u671f<\/h4>\n<p>\u88ab KeepAlive \u7684\u7ec4\u4ef6\uff0c\u4f1a\u6709\u4e24\u79cd\u72b6\u6001\uff1a<strong>\u88ab\u7f13\u5b58<\/strong>\u6216<strong>\u88ab\u6fc0\u6d3b<\/strong>\u3002\u5982\u679c\u7a0b\u5e8f\u5458\u60f3<strong>\u76d1\u542c\u8fd9\u4e24\u79cd\u72b6\u6001\u7684\u5207\u6362<\/strong>\uff0c\u5e76<strong>\u6267\u884c\u7279\u5b9a\u7684\u64cd\u4f5c<\/strong>\uff0c\u6b64\u65f6\u53ef\u4ee5\u4f7f\u7528 <code>onActivated(fn)<\/code> \u548c <code>onDeactivated(fn)<\/code> \u8fd9\u4e24\u4e2a\u7ec4\u5408\u5f0f API \u8fdb\u884c\u76d1\u542c\u3002<\/p>\n<p><strong>onDeactivated(fn)<\/strong> \u4f1a\u4e3a\u5f53\u524d\u7ec4\u4ef6\u6ce8\u518c\u4e00\u4e2a<strong>\u88ab\u7f13\u5b58\u65f6\u7684\u56de\u8c03<\/strong>\uff0c\u5f53\u7ec4\u4ef6\u4ece\u88ab\u6fc0\u6d3b\u7684\u72b6\u6001<strong>\u5207\u6362\u81f3<\/strong>\u88ab\u7f13\u5b58\u7684\u72b6\u6001\u65f6\uff0c\u6216<strong>\u88ab\u5378\u8f7d<\/strong>\u65f6\uff0c\u4f1a\u89e6\u53d1\u8fd9\u4e2a\u56de\u8c03\u7684\u6267\u884c\u3002<\/p>\n<p><strong>onActivated(fn)<\/strong> \u4f1a\u4e3a\u5f53\u524d\u7ec4\u4ef6\u6ce8\u518c\u4e00\u4e2a<strong>\u88ab\u6fc0\u6d3b\u65f6\u7684\u56de\u8c03<\/strong>\uff0c\u5f53\u7ec4\u4ef6<strong>\u9996\u6b21\u88ab\u521b\u5efa<\/strong>\u65f6\uff0c\u6216\u7ec4\u4ef6\u4ece\u88ab\u7f13\u5b58\u7684\u72b6\u6001<strong>\u5207\u6362\u81f3<\/strong>\u88ab\u6fc0\u6d3b\u7684\u72b6\u6001\u65f6\uff0c\u4f1a\u89e6\u53d1\u8fd9\u4e2a\u56de\u8c03\u7684\u6267\u884c\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u5728 <code>ComDark.vue<\/code> \u7ec4\u4ef6\u88ab\u6fc0\u6d3b\u65f6\uff0c\u8ba9\u6587\u672c\u6846\u81ea\u52a8\u83b7\u53d6\u5149\u6807\u7684\u7126\u70b9\uff1a<\/p>\n<pre><code class=\"language-jsx\">&lt;template&gt;\n  &lt;div class=&quot;box&quot;&gt;\n    &lt;!-- \u4e3a\u6587\u672c\u6846\u6dfb\u52a0 ref \u5f15\u7528 --&gt;\n    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot; ref=&quot;iptRef&quot; \/&gt;\n    &lt;p&gt;\u6d88\u606f\u662f\uff1a{{ msg }}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\n\/\/ \u6309\u9700\u5bfc\u5165 onActivated \u548c onDeactivated \u4e24\u4e2a\u7ec4\u5408\u5f0f API\nimport { ref, onActivated, onDeactivated } from &#039;vue&#039;\nconst msg = ref(&#039;&#039;)\n\/\/ \u83b7\u53d6\u9875\u9762\u4e0a DOM \u5143\u7d20\u7684\u5f15\u7528\nconst iptRef = ref(null)\n\n\/\/ \u76d1\u542c\u7ec4\u4ef6\u88ab\u521b\u5efa\u548c\u88ab\u6fc0\u6d3b\u7684\u751f\u547d\u5468\u671f\u4e8b\u4ef6\nonActivated(() =&gt; {\n  console.log(&#039;Dark \u7ec4\u4ef6\u88ab\u6fc0\u6d3b\u4e86\uff01&#039;)\n  \/\/ \u8ba9\u6587\u672c\u6846\u81ea\u52a8\u83b7\u53d6\u5149\u6807\u7126\u70b9\n  iptRef.value.focus()\n})\n\n\/\/ \u76d1\u542c\u7ec4\u4ef6\u88ab\u7f13\u5b58\u548c\u88ab\u5378\u8f7d\u7684\u751f\u547d\u5468\u671f\u4e8b\u4ef6\nonDeactivated(() =&gt; {\n  console.log(&#039;Dark \u7ec4\u4ef6\u88ab\u7f13\u5b58\u8d77\u6765\u4e86\uff01&#039;)\n})\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n.box {\n  width: 500px;\n  height: 300px;\n  background-color: #2b2b2b;\n  box-shadow: 1px 1px 10px #888;\n  border-radius: 10px;\n  padding: 10px;\n  color: white;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u53ea\u80fd\u5728\u88ab KeepAlive \u7684\u7ec4\u4ef6\u4e0a\u4f7f\u7528 onActivated \u548c onDeactivated \u8fd9\u4e24\u4e2a API\u3002<\/p>\n<\/blockquote>\n<h4>4. \u6700\u5927\u7f13\u5b58\u5b9e\u4f8b\u6570<\/h4>\n<p>\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4f20\u5165 <code>max<\/code> prop \u6765\u9650\u5236\u53ef\u88ab\u7f13\u5b58\u7684\u6700\u5927\u7ec4\u4ef6\u5b9e\u4f8b\u6570\u3002<code>&lt;KeepAlive&gt;<\/code> \u7684\u884c\u4e3a\u5728\u6307\u5b9a\u4e86 <code>max<\/code> \u540e\u7c7b\u4f3c\u4e00\u4e2a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cache_replacement_policies#Least_recently_used_(LRU)\">LRU \u7f13\u5b58<\/a>\uff1a\u5982\u679c\u7f13\u5b58\u7684\u5b9e\u4f8b\u6570\u91cf\u5373\u5c06\u8d85\u8fc7\u6307\u5b9a\u7684\u90a3\u4e2a\u6700\u5927\u6570\u91cf\uff0c\u5219<strong>\u6700\u4e45\u6ca1\u6709\u88ab\u8bbf\u95ee<\/strong>\u7684\u7f13\u5b58\u5b9e\u4f8b<strong>\u5c06\u88ab\u9500\u6bc1<\/strong>\uff0c\u4ee5\u4fbf\u4e3a\u65b0\u7684\u5b9e\u4f8b\u817e\u51fa\u7a7a\u95f4\u3002<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;button @click=&quot;comName = &#039;MyLight&#039;&quot;&gt;Light&lt;\/button&gt;\n  &lt;button @click=&quot;comName = &#039;MyDark&#039;&quot;&gt;Dark&lt;\/button&gt;\n  &lt;button @click=&quot;comName = &#039;MyCyan&#039;&quot;&gt;Cyan&lt;\/button&gt;\n\n  &lt;hr \/&gt;\n\n  &lt;KeepAlive :max=&quot;2&quot;&gt;\n    &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n  &lt;\/KeepAlive&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h4>5. \u5305\u542b Or \u6392\u9664<\/h4>\n<p><code>&lt;KeepAlive&gt;<\/code> \u9ed8\u8ba4\u4f1a\u7f13\u5b58\u5185\u90e8\u7684\u6240\u6709\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u4f46\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 <code>include<\/code> \u548c <code>exclude<\/code> prop \u6765\u5b9a\u5236\u8be5\u884c\u4e3a\u3002\u5176\u4e2d\uff1a<\/p>\n<ul>\n<li>include \u8868\u793a\u6307\u5b9a\u54ea\u4e9b\u7ec4\u4ef6\u9700\u8981\u88ab\u7f13\u5b58<\/li>\n<li>exclude \u8868\u793a\u6307\u5b9a\u54ea\u4e9b\u7ec4\u4ef6\u4e0d\u9700\u8981\u88ab\u7f13\u5b58<\/li>\n<\/ul>\n<p>\u8fd9\u4e24\u4e2a prop \u7684\u503c\u90fd\u53ef\u4ee5\u662f\u4e00\u4e2a<strong>\u4ee5\u82f1\u6587\u9017\u53f7\u5206\u9694\u7684\u5b57\u7b26\u4e32<\/strong>\u3001\u4e00\u4e2a<strong>\u6b63\u5219\u8868\u8fbe\u5f0f<\/strong>\uff0c\u6216\u662f\u5305\u542b\u8fd9\u4e24\u79cd\u7c7b\u578b\u7684\u4e00\u4e2a<strong>\u6570\u7ec4<\/strong>\u3002<\/p>\n<p>\u5728\u6307\u5b9a include \u6216 exclude \u7684\u503c\u65f6\uff0cKeepAlive \u4f1a\u6839\u636e\u7ec4\u4ef6\u7684 <a href=\"https:\/\/cn.vuejs.org\/api\/options-misc.html#name\"><code>name<\/code><\/a> \u540d\u79f0\u8fdb\u884c\u5339\u914d\u3002\u56e0\u6b64\uff1a<\/p>\n<ul>\n<li>\u5728 3.2.34 \u4ee5\u4e0b\u7684\u7248\u672c\u4e2d\uff0c\u5fc5\u987b\u4e3a\u7ec4\u4ef6\u663e\u5f0f\u58f0\u660e\u4e00\u4e2a <code>name<\/code> \u9009\u9879<\/li>\n<li>\u5728 3.2.34 \u6216\u4ee5\u4e0a\u7684\u7248\u672c\u4e2d\uff0c\u4f7f\u7528 <code>&lt;script setup&gt;<\/code> \u7684 SFC \u4f1a\u81ea\u52a8\u6839\u636e\u6587\u4ef6\u540d\u751f\u6210\u5bf9\u5e94\u7684 <code>name<\/code> \u9009\u9879\uff0c\u65e0\u9700\u518d\u624b\u52a8\u58f0\u660e<\/li>\n<\/ul>\n<p><strong>\u5b57\u7b26\u4e32\u7c7b\u578b<\/strong>\u7684 include \u503c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u4f7f\u7528\u82f1\u6587\u7684\u9017\u53f7\uff0c\u5206\u5272\u591a\u4e2a\u7ec4\u4ef6\u7684 name --&gt;\n&lt;!-- include \u8868\u793a\u8fd9\u4e9b\u7ec4\u4ef6\u9700\u8981\u88ab\u7f13\u5b58\uff0c\u672a\u5305\u542b\u5728 include \u4e2d\u7684\u7ec4\u4ef6\u5c06\u4e0d\u4f1a\u88ab\u7f13\u5b58\u54e6 --&gt;\n&lt;KeepAlive include=&quot;ComLight,ComDark&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<p><strong>\u5b57\u7b26\u4e32\u7c7b\u578b<\/strong>\u7684 exclude \u503c\uff08\u5982\u679c\u9700\u8981\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u5f88\u591a\uff0c\u4f46\u662f\u4e0d\u9700\u8981\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u8f83\u5c11\uff0c\u6b64\u65f6\u53ef\u4ee5\u4f7f\u7528 exclude \u63d0\u9ad8\u7f16\u7801\u6548\u7387\uff09\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u4f7f\u7528\u82f1\u6587\u7684\u9017\u53f7\uff0c\u5206\u5272\u591a\u4e2a\u7ec4\u4ef6\u7684 name --&gt;\n&lt;!-- exclude \u8868\u793a\u8fd9\u4e9b\u7ec4\u4ef6\u4e0d\u9700\u8981\u88ab\u7f13\u5b58\uff0c\u672a\u5305\u542b\u5728 include \u4e2d\u7684\u7ec4\u4ef6\u5c06\u4f1a\u88ab\u7f13\u5b58\u54e6 --&gt;\n&lt;KeepAlive exclude=&quot;ComCyan&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<p><strong>\u6b63\u5219\u7c7b\u578b<\/strong>\u7684 include \u503c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u5fc5\u987b\u628a include \u6539\u4e3a v-bind \u7684\u5f62\u5f0f --&gt;\n&lt;!-- \u503c\u4e3a \/\u6b63\u5219\u5339\u914d\/ \u7684\u683c\u5f0f --&gt;\n&lt;KeepAlive :include=&quot;\/Com(Light|Dark)\/&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<p><strong>\u6b63\u5219\u7c7b\u578b<\/strong>\u7684 exclude \u503c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u5fc5\u987b\u628a exclude \u6539\u4e3a v-bind \u7684\u5f62\u5f0f --&gt;\n&lt;!-- \u503c\u4e3a \/\u6b63\u5219\u5339\u914d\/ \u7684\u683c\u5f0f --&gt;\n&lt;KeepAlive :exclude=&quot;\/.*Cyan\/&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<p><strong>\u6570\u7ec4\u7c7b\u578b<\/strong>\u7684 include \u503c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u5fc5\u987b\u628a include \u6539\u4e3a v-bind \u7684\u5f62\u5f0f --&gt;\n&lt;!-- \u7ed1\u5b9a\u7684\u503c\u4e3a\u6570\u7ec4\uff0c\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\u9879\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u6216\u6b63\u5219 --&gt;\n&lt;KeepAlive :include=&quot;[&#039;ComLight&#039;, \/.*Dark\/]&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<p><strong>\u6570\u7ec4\u7c7b\u578b<\/strong>\u7684 exclude  \u503c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u5fc5\u987b\u628a exclude \u6539\u4e3a v-bind \u7684\u5f62\u5f0f --&gt;\n&lt;!-- \u7ed1\u5b9a\u7684\u503c\u4e3a\u6570\u7ec4\uff0c\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\u9879\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u6216\u6b63\u5219 --&gt;\n&lt;KeepAlive :exclude=&quot;[&#039;ComLight&#039;, \/.*Dark\/]&quot;&gt;\n  &lt;component :is=&quot;comName&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<h4>6. \u52a8\u6001\u6dfb\u52a0\u6216\u79fb\u9664\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6<\/h4>\n<blockquote>\n<p>\u6574\u4f53\u601d\u8def\u5206\u6790\uff1a\u5148\u5b9e\u73b0\u7ec4\u4ef6\u7684\u6309\u9700\u5207\u6362\u529f\u80fd\uff0c\u518d\u5b9e\u73b0\u52a8\u6001\u6dfb\u52a0\u6216\u79fb\u9664\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u3002<\/p>\n<\/blockquote>\n<ol>\n<li>\n<p>\u5728 <code>App.vue<\/code> \u4e2d\uff0c\u5bfc\u5165\u9700\u8981\u7528\u5230\u76843\u4e2a\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u5bfc\u5165\u9700\u8981\u7684\u7ec4\u4ef6\nimport ComLight from '.\/components\/ComLight.vue'\nimport ComDark from '.\/components\/ComDark.vue'\nimport ComCyan from '.\/components\/ComCyan.vue'<\/code><\/pre>\n<\/li>\n<li>\n<p>\u58f0\u660e\u52a8\u6001\u5c55\u793a\u7684\u7ec4\u4ef6\u5217\u8868\uff0c\u5e76\u4f7f\u7528\u7d22\u5f15\u6765\u63a7\u5236\u5f53\u524d\u5c55\u793a\u7684\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">import { ref } from 'vue'\n\n\/\/ \u52a8\u6001\u7ec4\u4ef6\u5217\u8868\nconst coms = [ComLight, ComDark, ComCyan]\n\/\/ \u8981\u5c55\u793a\u7684\u7ec4\u4ef6\u7d22\u5f15\nconst index = ref(0)<\/code><\/pre>\n<\/li>\n<li>\n<p>\u5728\u6a21\u677f\u4e2d\uff0c\u4f7f\u7528 <code>component<\/code> \u5143\u7d20\u5c55\u793a\u52a8\u6001\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;component :is=&quot;coms[index]&quot;&gt;&lt;\/component&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p>\u70b9\u51fb\u4e0d\u540c\u7684\u6309\u94ae\uff0c\u5207\u6362 index \u7684\u503c\uff0c\u4ece\u800c\u5c55\u793a\u5bf9\u5e94\u7684\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;button @click=&quot;index = 0&quot;&gt;Light&lt;\/button&gt;\n&lt;button @click=&quot;index = 1&quot;&gt;Dark&lt;\/button&gt;\n&lt;button @click=&quot;index = 2&quot;&gt;Cyan&lt;\/button&gt;<\/code><\/pre>\n<p>\u81f3\u6b64\uff0c\u7ec4\u4ef6\u7684\u6309\u9700\u5c55\u793a\u529f\u80fd\u5c31\u5df2\u7ecf\u5b9e\u73b0\u5566\u3002\u63a5\u4e0b\u6765\uff0c\u8981\u7740\u624b\u5b9e\u73b0\u52a8\u6001\u6dfb\u52a0\u548c\u79fb\u9664\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u3002<\/p>\n<\/li>\n<li>\n<p>\u9996\u5148\uff0c\u5b9a\u4e49\u4e00\u4e2a\u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u540d\u79f0\u7684\u6570\u7ec4\uff0c\u5b83\u662f\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684\u6570\u636e\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u88ab\u7f13\u5b58\u7684\u7ec4\u4ef6\u540d\u79f0\u7684\u6570\u7ec4\nconst cacheNames = ref(['ComLight'])<\/code><\/pre>\n<\/li>\n<li>\n<p>\u5176\u6b21\uff0c\u5728\u6a21\u677f\u7ed3\u6784\u4e2d\u7528 <code>KeepAlive<\/code> \u7ec4\u4ef6\u628a <code>component<\/code> \u5143\u7d20\u5305\u88f9\u8d77\u6765\uff0c\u5e76\u4f7f\u7528 <code>:include=&quot;cacheNames&quot;<\/code> \u6307\u5b9a\u8981\u7f13\u5b58\u7684\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;KeepAlive :include=&quot;cacheNames&quot;&gt;\n &lt;component :is=&quot;coms[index]&quot;&gt;&lt;\/component&gt;\n&lt;\/KeepAlive&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p>\u63a5\u4e0b\u6765\uff0c\u5b9a\u4e49\u628a\u7ec4\u4ef6\u52a0\u5165\u7f13\u5b58\u548c\u79fb\u9664\u7f13\u5b58\u7684\u4e24\u4e2a\u65b9\u6cd5\uff0c\u5b83\u4eec\u90fd\u63a5\u6536\u4e00\u4e2a\u7ec4\u4ef6\u7684 name \u540d\u79f0\u4f5c\u4e3a\u53c2\u6570\uff1a<\/p>\n<pre><code class=\"language-js\">\/\/ \u6dfb\u52a0\u65b0\u7684\u7ec4\u4ef6\u7f13\u5b58\nconst addCache = (name) => {\n if (cacheNames.value.includes(name)) return\n cacheNames.value.push(name)\n}\n\n\/\/ \u79fb\u9664\u5df2\u5b58\u5728\u7684\u7f13\u5b58\nconst removeCache = (name) => {\n if (!cacheNames.value.includes(name)) return\n cacheNames.value = cacheNames.value.filter((item) => item !== name)\n}<\/code><\/pre>\n<\/li>\n<li>\n<p>\u6700\u540e\uff0c\u5728\u6a21\u677f\u7ed3\u6784\u4e2d\u65b0\u589e3\u4e2a\u6309\u94ae\uff0c\u7528\u6765\u628a\u7ec4\u4ef6\u52a0\u5165\u7f13\u5b58\u6216\u79fb\u9664\u7f13\u5b58\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;button @click=&quot;addCache(&#039;ComDark&#039;)&quot;&gt;\u7f13\u5b58ComDark&lt;\/button&gt;\n&lt;button @click=&quot;addCache(&#039;ComCyan&#039;)&quot;&gt;\u7f13\u5b58ComCyan&lt;\/button&gt;\n&lt;button @click=&quot;removeCache(&#039;ComLight&#039;)&quot;&gt;\u4e0d\u7f13\u5b58ComLight&lt;\/button&gt;<\/code><\/pre>\n<\/li>\n<\/ol>\n<blockquote>\n<p>\u7248\u6743\u5f52\u4f5c\u8005 <strong>\u00a9\u5218\u9f99\u5bbe<\/strong> \u6240\u6709\uff0c\u672c\u6587\u7ae0\u672a\u7ecf\u4f5c\u8005\u5141\u8bb8\uff0c\u7981\u6b62\u79c1\u81ea\u8f6c\u8f7d\uff01<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u7248\u6743\u5f52\u4f5c\u8005 \u00a9\u5218\u9f99\u5bbe \u6240\u6709\uff0c\u672c\u6587\u7ae0\u672a\u7ecf\u4f5c\u8005\u5141\u8bb8\uff0c\u7981\u6b62\u79c1\u81ea\u8f6c\u8f7d\uff01 1. Vite \u7684\u57fa\u672c\u4f7f\u7528 1.1 \u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1 vs \u6784\u5efa\u5de5\u5177 1. \u4ec0\u4e48\u662f\u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1 \u6d4f\u89c8\u5668\u5185\u7684\u6a21\u677f\u7f16\u8bd1\uff0c\u6307\u7684\u5c31\u662f\u628a\u6d4f\u89c8\u5668\u4e0d\u8bc6\u522b\u7684\u4ee3\u7801\uff0c\u7f16\u8bd1\u6210\u6d4f\u89c8\u5668\u80fd\u8bc6\u522b\u548c\u8fd0\u884c\u7684\u4ee3\u7801\u3002\u4f8b\u5982\u4e0b\u9762\u7684 v-for \u6307\u4ee4\uff1a &lt;ul&gt; &lt;li v-for=&quot;item in todos&quot;&gt; &lt;span&gt;{{ item.task }}&lt;\/span&gt; &lt;\/li&gt; &lt;\/ul&gt; \u6d4f\u89c8\u5668\u65e0\u6cd5\u6b63\u786e\u89e3\u6790\u548c\u6267\u884c v-for \u6307\u4ee4\uff0c\u56e0\u4e3a\u8fd9\u662f Vue \u6846\u67b6\u63d0\u4f9b\u7684\u7279\u6b8a\u8bed\u6cd5\u3002\u56e0\u6b64\uff0c\u4e3a\u4e86\u4fdd\u8bc1\u6d4f\u89c8\u5668\u6700\u7ec8\u80fd\u6e32\u67d3\u51fa\u5217\u8868\u7684\u7ed3\u6784\uff0cVue \u5fc5\u987b\u505a\u4ee5\u4e0b2\u4ef6\u4e8b\u60c5\uff1a \u628a\u6a21\u677f\u7f16\u8bd1\u6210\u6e32\u67d3\u51fd\u6570 \u6267\u884c\u6e32\u67d3\u51fd\u6570\u5e76\u4fdd\u8bc1\u9879\u76ee\u7684\u6301\u7eed\u8fd0\u884c \u56fe\u793a\u5982\u4e0b\uff1a \u6211\u4eec\u4e4b\u524d\u5728\u6d4f\u89c8\u5668\u4e2d\u5f15\u5165\u7684 vue3.global.vue \u5c31\u5b8c\u6574\u7684\u5305\u542b\u4e86 Compiler \u548c Runtime\u3002 \u4e5f\u5c31\u662f\u8bf4\uff0c\u6d4f\u89c8\u5668\u5728\u771f\u6b63\u8c03\u7528 Runtime-dom \u8fd0\u884c\u7f51\u9875\u4e4b\u524d\uff0c\u5fc5\u987b\u5148\u8c03\u7528 compiler-dom \u8fdb\u884c\u6a21\u677f\u7684\u7f16\u8bd1\uff0c\u8fd9\u5c31\u5e26\u6765\u4e86\u4ee5\u4e0b\u4e24\u4e2a\u95ee\u9898\uff1a \u5982\u679c\u6a21\u677f\u7ed3\u6784\u6bd4\u8f83\u590d\u6742\uff0c\u5219\u5728\u6a21\u677f\u7f16\u8bd1\u9636\u6bb5\u4f1a\u8017\u8d39\u5f88\u957f\u7684\u65f6\u95f4\uff0c\u9020\u6210\u7528\u6237\u4f53\u9a8c\u5dee\u7684\u95ee\u9898\u3002 \u5bfc\u5165\u7684 vue.js \u4f53\u79ef\u8f83\u5927\uff0c\u56e0\u4e3a\u5b83\u5b8c\u6574\u7684\u5305\u542b\u4e86 Compiler \u548c Runtime\uff0c\u5bfc\u81f4\u901a\u8fc7\u7f51\u7edc\u52a0\u8f7d vue.js \u65f6\u6bd4\u8f83\u8017\u65f6\u3002 2. \u901a\u8fc7\u6784\u5efa\u5de5\u5177\u8fdb\u884c\u9884\u6784\u5efa \u4e3a\u4e86\u89e3\u51b3\u6a21\u677f\u7f16\u8bd1\u8017\u65f6\u95ee\u9898\u548c\u5bfc\u5165\u7684 vue.js \u5305\u4f53\u79ef\u5927\u7684\u95ee\u9898\uff0c\u6211\u4eec\u63a8\u8350\u5927\u5bb6\u901a\u8fc7\u6784\u5efa\u5de5\u5177\u5bf9 Vue \u9879\u76ee\u8fdb\u884c\u9884\u6784\u5efa\u3002\u6784\u5efa\u5de5\u5177\u7684\u4f5c\u7528\u5982\u4e0b\u56fe\u6240\u793a\uff1a \u901a\u8fc7\u9884\u6784\u5efa\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u6a21\u677f\u7f16\u8bd1\u7684\u8fc7\u7a0b\uff0c\u72ec\u7acb\u4e8e\u9879\u76ee\u8fd0\u884c\u4e4b\u524d\u3002\u8fd9\u6837\u505a\u7684\u597d\u5904\u6709\u4ee5\u4e0b\u4e24\u70b9\uff1a \u8282\u7701\u4e86\u9879\u76ee\u8fd0\u884c\u671f\u95f4\u7684\u6a21\u677f\u7f16\u8bd1\u8fc7\u7a0b\uff0c\u63d0\u9ad8\u4e86\u6027\u80fd \u51cf\u5c11\u4e86\u5927\u7ea6 14KB \u7684 vue.js \u5305\u7684\u4f53\u79ef\uff0c\u56e0\u4e3a\u53ea\u9700\u8981\u4f9d\u8d56\u4e8e Runtime \u8fd0\u884c\u65f6\uff0c\u4e0d\u518d\u4f9d\u8d56\u4e8e Compiler \u7f16\u8bd1\u5668 3. \u4e3b\u6d41\u7684\u6784\u5efa\u5de5\u5177 \u76ee\u524d\uff0c\u5e02\u9762\u4e0a\u4e3b\u6d41\u7684\u6784\u5efa\u5de5\u5177\u6709\u4ee5\u4e0b2\u4e2a\uff1a webpack vite \u5176\u4e2d webpack \u662f\u4e00\u4e2a\u8001\u724c\u7684\u524d\u7aef\u5de5\u7a0b\u5316\u7684\u6784\u5efa\u5de5\u5177\uff0c\u529f\u80fd\u5f3a\u5927\uff0c\u63d2\u4ef6\u4f17\u591a\uff0c\u751f\u6001\u5b8c\u5584\u3002\u652f\u6301 Vue\uff0cReact\uff0cAngular \u7b49\u4e3b\u6d41\u7684\u524d\u7aef\u6846\u67b6\u3002 \u800c vite \u662f Vue \u5b98\u65b9\u56e2\u961f\u7814\u53d1\u51fa\u7684\u524d\u7aef\u5de5\u7a0b\u5316\u6784\u5efa\u5de5\u5177\uff0c\u4ee5\u5353\u8d8a\u7684\u6784\u5efa\u6027\u80fd\u800c\u8fc5\u901f\u5d1b\u8d77\uff0c\u540c\u6837\u652f\u6301 Vue\uff0cReact\uff0cAngular \u7b49\u4e3b\u6d41\u7684\u524d\u7aef\u6846\u67b6\u3002 \u5728\u4eca\u540e\u7684 Vue3 \u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u9009\u62e9 vite \u4f5c\u4e3a\u9879\u76ee\u7684\u6784\u5efa\u5de5\u5177\uff0c\u4e3b\u8981\u539f\u56e0\u6709\u4ee5\u4e0b\u4e24\u70b9\uff1a \u6784\u5efa\u901f\u5ea6\u6781\u5feb\uff0c\u5f00\u53d1\u4f53\u9a8c\u597d Vue \u5b98\u65b9\u51fa\u54c1\uff0c\u548c Vue3 \u7684\u9879\u76ee\u5b8c\u7f8e\u5951\u5408 \u53c2\u8003\u6587\u6863\uff1a \u4e3a\u4ec0\u4e48\u9009 Vite 1.2 \u57fa\u4e8e Vite \u521b\u5efa Vue3 \u9879\u76ee \u6253\u5f00\u7ec8\u7aef\uff0c\u8fd0\u884c\u5982\u4e0b\u7684 npm \u547d\u4ee4\uff0c\u57fa\u4e8e\u547d\u4ee4\u884c\u7684\u65b9\u5f0f\u5feb\u901f\u521b\u5efa vue3 \u7684\u9879\u76ee\uff1a npm create vite@latest \u901a\u8fc7\u5bf9\u7ec8\u7aef\u8fdb\u884c\u4ea4\u4e92\u5f0f\u7684\u64cd\u4f5c\uff0c\u9009\u62e9\u9879\u76ee\u7684\u914d\u7f6e\uff1a Need to install the following packages: create-vite@4.3.2 Ok to proceed? (y) y \u221a Project name: &#8230; code2 \u221a Select a framework: \u00bb Vue \u221a Select a variant: \u00bb JavaScript \u9879\u76ee\u521b\u5efa\u5b8c\u6210\u540e\uff0c\u9700\u8981\u5206\u522b\u6267\u884c\u4ee5\u4e0b3\u4e2a\u547d\u4ee4\uff0c\u4ece\u800c\u628a\u9879\u76ee\u8fd0\u884c\u8d77\u6765\uff1a cd code2 npm install npm run dev 1.3 \u719f\u6089\u9879\u76ee\u7684\u76ee\u5f55\u7ed3\u6784 \u8ba4\u8bc6\u6839\u76ee\u5f55\u4e0b\u91cd\u8981\u7684\u6587\u4ef6\u548c\u6587\u4ef6\u5939\uff1a src \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u6e90\u4ee3\u7801\u76ee\u5f55\u3002\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7a0b\u5e8f\u5458\u5199\u7684\u6240\u6709\u4ee3\u7801\uff0c\u90fd\u8981\u653e\u5230 src \u76ee\u5f55\u4e0b\u3002 index.html \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9879\u76ee\u4e3b\u9875\u3002\u5f53\u6211\u4eec\u628a\u9879\u76ee\u8fd0\u884c\u8d77\u6765\u4e4b\u540e\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\u770b\u5230\u7684\u5c31\u662f\u8fd9\u4e2a\u9875\u9762\u3002 package.json \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u5305\u7ba1\u7406\u914d\u7f6e\u6587\u4ef6\u3002\u8bb0\u5f55\u4e86\u9879\u76ee\u7684\u4f9d\u8d56\u5305\uff0c\u8fd8\u63d0\u4f9b\u4e86 dev \u548c build \u4e24\u4e2a\u547d\u4ee4\u3002 vite.config.js \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 vite \u6784\u5efa\u65f6\u7684\u914d\u7f6e\u6587\u4ef6\u3002\u7528\u6765\u5bf9 vite \u7684\u8fd0\u884c\u65b9\u5f0f\u8fdb\u884c\u4e2a\u6027\u5316\u7684\u914d\u7f6e\u3002 \u8ba4\u8bc6 src \u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u548c\u6587\u4ef6\u5939\uff1a assets \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9759\u6001\u8d44\u6e90\u7684\u5b58\u653e\u76ee\u5f55\u3002\u4f8b\u5982\u56fe\u7247\u3001CSS\u3001JS\u63d2\u4ef6\u7b49\u90fd\u53ef\u4ee5\u653e\u5230\u6b64\u76ee\u5f55\u4e0b\u3002 components \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u7ec4\u4ef6\u76ee\u5f55\u3002\u7528\u6237\u81ea\u5df1\u5c01\u88c5\u7684 .vue \u7ec4\u4ef6\u53ef\u4ee5\u653e\u5728\u6b64\u76ee\u5f55\u4e0b\u3002 App.vue \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u6574\u4e2a\u9879\u76ee\u7684\u6839\u7ec4\u4ef6\u3002 main.js \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 Vue \u9879\u76ee\u8fd0\u884c\u7684\u5165\u53e3\u3002 style.css \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 \u9879\u76ee\u7684\u5168\u5c40\u6837\u5f0f\u8868\u3002 1.4 \u4ee5 Compiler + Runtime \u7684\u65b9\u5f0f\u7f16\u5199\u4ee3\u7801 \u5728 index.html &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[12,14],"class_list":["post-387","post","type-post","status-publish","format-standard","hentry","category-vue","tag-vue3"],"_links":{"self":[{"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/posts\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":12,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/posts\/387\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.escook.cn\/index.php\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}