{"id":1315,"date":"2023-03-18T11:21:51","date_gmt":"2023-03-18T03:21:51","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1315"},"modified":"2023-04-29T09:13:09","modified_gmt":"2023-04-29T01:13:09","slug":"vue-3-initial-experience-project-construction","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/18\/vue-3-initial-experience-project-construction\/","title":{"rendered":"Vue 3.0 \u521d\u4f53\u9a8c\uff08\u9879\u76ee\u642d\u5efa\uff09"},"content":{"rendered":"<h2>\u524d\u8a00<\/h2>\n<h3>6\u5927\u4eae\u70b9<\/h3>\n<ul>\n<li><code>Performance<\/code>\uff1a\u6027\u80fd\u66f4\u6bd4Vue 2.0\u5f3a\u3002<\/li>\n<li><code>Tree shaking support<\/code>\uff1a\u53ef\u4ee5\u5c06\u65e0\u7528\u6a21\u5757\u201c\u526a\u8f91\u201d\uff0c\u4ec5\u6253\u5305\u9700\u8981\u7684\u3002<\/li>\n<li><code>Composition API<\/code>\uff1a\u7ec4\u5408API<\/li>\n<li><code>Fragment<\/code>, <code>Teleport<\/code>, <code>Suspense<\/code>\uff1a\u201c\u788e\u7247\u201d\uff0cTeleport\u5373Protal\u4f20\u9001\u95e8\uff0c\u201c\u60ac\u5ff5\u201d<\/li>\n<li><code>Better TypeScript support<\/code>\uff1a\u66f4\u4f18\u79c0\u7684Ts\u652f\u6301<\/li>\n<li><code>Custom Renderer API<\/code>\uff1a\u66b4\u9732\u4e86\u81ea\u5b9a\u4e49\u6e32\u67d3API<\/li>\n<\/ul>\n<p><!-- more --><\/p>\n<h3>\u642d\u5efa\u5185\u5bb9<\/h3>\n<ul>\n<li>\u57fa\u4e8e<code>vue-cli<\/code>\u5feb\u901f\u642d\u5efa Vue 3.0 \u9879\u76ee<\/li>\n<li>Vue 3.0 \u57fa\u672c\u7279\u6027\u4f53\u9a8c<\/li>\n<li>\u96c6\u6210<code>vue-router<\/code>\u548c vuex 4.0<\/li>\n<\/ul>\n<h2>Vue 3.0 \u9879\u76ee\u521d\u59cb\u5316<\/h2>\n<h3>\u5b89\u88c5 vue-cli<\/h3>\n<pre><code>npm install -g @vue\/cli<\/code><\/pre>\n<p>\u5b89\u88c5\u6210\u529f\u540e\uff0c\u5373\u53ef\u4f7f\u7528<code>vue<\/code>\u547d\u4ee4\uff1a<\/p>\n<pre><code>$ vue -V\n@vue\/cli 4.5.6<\/code><\/pre>\n<h3>\u521d\u59cb\u5316 vue \u9879\u76ee<\/h3>\n<p>\u6700\u65b0\u7248<code>vue-cli<\/code>\u5df2\u652f\u6301\u76f4\u63a5\u521b\u5efa<code>vue3<\/code>\u9879\u76ee<\/p>\n<pre><code>vue create vue3-demo<\/code><\/pre>\n<p>\u8f93\u5165\u547d\u4ee4\u540e\uff0c\u4f1a\u51fa\u73b0\u547d\u4ee4\u884c\u4ea4\u4e92\u7a97\u53e3\uff0c\u8fd9\u91cc\u6211\u4eec\u9009\u62e9<code>Manually select features<\/code>\uff1a<\/p>\n<pre><code class=\"language-bash\">Vue CLI v4.5.6\n? Please pick a preset:\n  Default ([Vue 2] babel, eslint)\n  Default (Vue 3 Preview) ([Vue 3] babel, eslint)\n> Manually select features<\/code><\/pre>\n<p>\u968f\u540e\u6211\u4eec\u52fe\u9009\uff1a<code>Router<\/code>\u3001<code>Vue<\/code>x\u3001<code>CSS Pre-processors<\/code>\u548c<code>Linter \/ Formatter<\/code>\u7b49\u5e38\u7528\u7ec4\u4ef6\uff08\u4f7f\u7528\u7a7a\u683c\u952e\u9009\u4e2d\uff09\uff0c\u8fd9\u4e9b\u90fd\u662f\u5f00\u53d1\u5546\u4e1a\u7ea7\u9879\u76ee\u5fc5\u987b\u7684\uff1a<\/p>\n<pre><code class=\"language-bash\">Vue CLI v4.5.6\n? Please pick a preset: Manually select features\n? Check the features needed for your project:\n (*) Choose Vue version\n (*) Babel\n ( ) TypeScript\n ( ) Progressive Web App (PWA) Support\n>(*) Router\n (*) Vuex\n (*) CSS Pre-processors\n (*) Linter \/ Formatter\n ( ) Unit Testing\n ( ) E2E Testing<\/code><\/pre>\n<p>\u63a5\u4e0b\u6765\u5728\u9009\u62e9 Vue \u7248\u672c\u65f6\u6ce8\u610f\u9009\u62e9<code>3.x<\/code><\/p>\n<pre><code class=\"language-bash\">Vue CLI v4.5.6\n? Please pick a preset: Manually select features\n? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter\n? Choose a version of Vue.js that you want to start the project with\n  2.x\n> 3.x (Preview)<\/code><\/pre>\n<h3>Vue 2.0 \u5347\u7ea7 Vue 3.0 \u9879\u76ee<\/h3>\n<p>\u5982\u679c\u5f53\u524d\u521b\u5efa\u7684\u9879\u76ee\u4e3a Vue 2.0 \u9879\u76ee\uff0c\u90a3\u4e48\u521b\u5efa Vue 3.0 \u9879\u76ee\u9700\u8981\u901a\u8fc7\u63d2\u4ef6\u5347\u7ea7\u7684\u65b9\u5f0f\u6765\u5b9e\u73b0\uff0c\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\uff1a<\/p>\n<pre><code class=\"language-bash\">cd vue3-demo\nvue add vue-next<\/code><\/pre>\n<p>\u6267\u884c\u4e0a\u8ff0\u6307\u4ee4\u540e\uff0c\u4f1a\u81ea\u52a8\u5b89\u88c5<code>vue-cli-plugin-vue-next<\/code>\u63d2\u4ef6\uff08\u67e5\u770b<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/vuejs\/vue-cli-plugin-vue-next\" title=\"\u9879\u76ee\u4ee3\u7801\">\u9879\u76ee\u4ee3\u7801<\/a>\uff09\uff0c\u8be5\u63d2\u4ef6\u4f1a\u5b8c\u6210\u4ee5\u4e0b\u64cd\u4f5c\uff1a<\/p>\n<ul>\n<li>\u5b89\u88c5 Vue 3.0 \u4f9d\u8d56<\/li>\n<li>\u66f4\u65b0 Vue 3.0 webpack loader \u914d\u7f6e\uff0c\u4f7f\u5176\u80fd\u591f\u652f\u6301<code>.vue<\/code>\u6587\u4ef6\u6784\u5efa\uff08\u8fd9\u70b9\u975e\u5e38\u91cd\u8981\uff09<\/li>\n<li>\u521b\u5efa Vue 3.0 \u7684\u6a21\u677f\u4ee3\u7801<\/li>\n<li>\u81ea\u52a8\u5c06\u4ee3\u7801\u4e2d\u7684<code>Vue Router<\/code>\u548c<code>Vuex<\/code>\u5347\u7ea7\u5230 4.0 \u7248\u672c\uff0c\u5982\u679c\u672a\u5b89\u88c5\u5219\u4e0d\u4f1a\u5347\u7ea7<\/li>\n<li>\u81ea\u52a8\u751f\u6210<code>Vue Router<\/code>\u548c<code>Vuex<\/code>\u6a21\u677f\u4ee3\u7801<\/li>\n<\/ul>\n<p>\u5b8c\u6210\u4e0a\u8ff0\u64cd\u4f5c\u540e\uff0c\u9879\u76ee\u6b63\u5f0f\u5347\u7ea7\u5230 Vue 3.0<\/p>\n<blockquote>\n<p>\u6ce8\u610f\u8be5\u63d2\u4ef6\u8fd8\u4e0d\u80fd\u652f\u6301<code>typescript<\/code>\uff0c\u4f7f\u7528<code>typescript<\/code>\u7684\u540c\u5b66\u8fd8\u5f97\u518d\u7b49\u7b49\uff08\u5c31\u662f\u76ee\u524d\u8fd8\u4e0d\u592a\u652f\u6301TS\uff09<\/p>\n<\/blockquote>\n<h2>Vue 3.0 \u57fa\u672c\u7279\u6027\u4f53\u9a8c<\/h2>\n<h3>\u521b\u5efa\u8def\u7531<\/h3>\n<p>\u9879\u76ee\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u9700\u8981\u521b\u5efa\u65b0\u9875\u9762\uff0c\u7136\u540e\u6dfb\u52a0\u8def\u7531\u914d\u7f6e\uff0c<\/p>\n<p>\u6211\u4eec\u5728<code>\/src\/views<\/code>\u76ee\u5f55\u4e0b\u521b\u5efa<code>Test.vue<\/code>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n\n\u3000\u3000\u00a0 \u00a0&lt;h1&gt;vue3.0 \u521d\u4f53\u9a8c&lt;\/h1&gt;\n\u3000\u3000\u00a0 \u00a0&lt;p&gt;\u5c11\u5e74\u4f60\u7684\u5934\u53d1\u53ef\u8fd8\u597d\uff0c\uff1f\uff1f\uff1f\uff1f \u54c8\u54c8\u54c8\u54c8\u54c8&lt;\/p&gt;\n\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n export default {\n }\n&lt;\/script&gt;\n\n&lt;style lang=&quot;less&quot; scoped&gt;\n.test {\n  color: red;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>\u4e4b\u540e\u5728<code>\/src\/router\/index.js<\/code>\u4e2d\u521b\u5efa\u8def\u7531\u914d\u7f6e\uff1a<\/p>\n<pre><code class=\"language-javascript\">import { createRouter, createWebHashHistory } from &#039;vue-router&#039;\nimport Home from &#039;..\/views\/Home.vue&#039;\n\nconst routes = [\n  {\n    path: &#039;\/&#039;,\n    name: &#039;Home&#039;,\n    component: Home  \/\/Vue 2.0 \u5199\u6cd5\n  },\n  {\n    path: &#039;\/about&#039;,\n    name: &#039;About&#039;,\n    component: () =&gt; import(\/* webpackChunkName: &quot;about&quot; *\/ &#039;..\/views\/About.vue&#039;)\n  },\n  {\n    path: &#039;\/test&#039;,\n    name: &#039;Test&#039;,\n    component: () =&gt; import(\/* webpackChunkName: &quot;test&quot; *\/ &#039;..\/views\/Test.vue&#039;)\n  }\n]\n\nconst router = createRouter({\n  history: createWebHashHistory(),\n  routes\n})\n\nexport default router<\/code><\/pre>\n<p>\u521d\u59cb\u5316<code>Vue Router<\/code>\u7684\u8fc7\u7a0b\u4e0e 2.0 \u7248\u672c\u53d8\u5316\u4e0d\u5927\uff0c\u53ea\u662f\u4e4b\u524d\u91c7\u7528\u6784\u9020\u51fd\u6570\u7684\u65b9\u5f0f\uff0c<br \/>\n\u8fd9\u91cc\u6539\u4e3a\u4f7f\u7528<code>createRouter<\/code>\u6765\u521b\u5efa<code>Vue Router<\/code>\u5b9e\u4f8b\uff0c\u914d\u7f6e\u7684\u65b9\u6cd5\u57fa\u672c\u4e00\u81f4\uff0c\u914d\u7f6e\u5b8c\u6210\u540e\u6211\u4eec\u8fd8\u9700\u8981\u5728<code>App.vue<\/code>\u4e2d\u589e\u52a0\u94fe\u63a5\u5230<code>Test.vue<\/code>\u7684\u8def\u7531\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div id=&quot;app&quot;&gt;\n    &lt;div id=&quot;nav&quot;&gt;\n      &lt;router-link to=&quot;\/&quot;&gt;Home&lt;\/router-link&gt; |\n      &lt;router-link to=&quot;\/about&quot;&gt;About&lt;\/router-link&gt; |\n      &lt;router-link to=&quot;\/test&quot;&gt;Test&lt;\/router-link&gt;\n    &lt;\/div&gt;\n    &lt;router-view\/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u542f\u52a8\u9879\u76ee\uff1a<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<h3>\u72b6\u6001\u548c\u4e8b\u4ef6\u7ed1\u5b9a<\/h3>\n<p>Vue 3.0 \u4e2d\u5b9a\u4e49\u72b6\u6001\u7684\u65b9\u6cd5\u6539\u4e3a\u7c7b\u4f3c<code>React Hooks<\/code>\u7684\u65b9\u6cd5\uff0c\u4e0b\u9762\u6211\u4eec\u5728<code>Test.vue<\/code>\u4e2d\u5b9a\u4e49\u4e00\u4e2a\u72b6\u6001<code>count<\/code>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n    &lt;h1&gt;test count: {{count}}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  import { ref } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const count = ref(0)\n      return {\n        count\n      }\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<p>Vue 3.0 \u4e2d\u521d\u59cb\u5316\u72b6\u6001\u901a\u8fc7<code>setup<\/code>\u65b9\u6cd5\uff0c<\/p>\n<p>\u5b9a\u4e49\u72b6\u6001\u9700\u8981\u8c03\u7528<code>ref<\/code>\u65b9\u6cd5\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5b9a\u4e49\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u7528\u6765\u66f4\u65b0<code>count<\/code>\u72b6\u6001\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n    &lt;h1&gt;test count: {{count}}&lt;\/h1&gt;\n    &lt;button @click=&quot;add&quot;&gt;add&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  import { ref } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const count = ref(0)\n      const add = () =&gt; {\n        count.value++\n      }\n      return {\n        count,\n        add\n      }\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u8fd9\u91cc\u7684<code>add<\/code>\u65b9\u6cd5\u4e0d\u518d\u9700\u8981\u5b9a\u4e49\u5728<code>methods<\/code>\u4e2d\uff0c\u4f46\u6ce8\u610f\u66f4\u65b0<code>count<\/code>\u503c\u7684\u65f6\u5019\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528<code>count++<\/code>\uff0c\u800c\u5e94\u4f7f\u7528<code>count.value++<\/code><\/p>\n<p>\u66f4\u65b0\u4ee3\u7801\u540e\uff0c\u70b9\u51fb\u6309\u94ae\uff0c<code>count<\/code>\u7684\u503c\u5c31\u4f1a\u66f4\u65b0\u4e86<\/p>\n<h3>\u8ba1\u7b97\u5c5e\u6027\u548c\u76d1\u542c\u5668<\/h3>\n<p>Vue 3.0 \u4e2d\u8ba1\u7b97\u5c5e\u6027\u548c\u76d1\u542c\u5668\u7684\u5b9e\u73b0\u4f9d\u8d56<code>computed<\/code>\u548c<code>watch<\/code>\u65b9\u6cd5\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n    &lt;h1&gt;test count: {{count}}&lt;\/h1&gt;\n    &lt;div&gt;count * 2 = {{doubleCount}}&lt;\/div&gt;\n    &lt;button @click=&quot;add&quot;&gt;add&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  import { ref, computed, watch } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const count = ref(0)\n      const add = () =&gt; {\n        count.value++\n      }\n      watch(() =&gt; count.value, val =&gt; {\n        console.log(`count is ${val}`)\n      })\n      const doubleCount = computed(() =&gt; count.value * 2)\n      return {\n        count,\n        doubleCount,\n        add\n      }\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u8ba1\u7b97\u5c5e\u6027<code>computed<\/code>\u662f\u4e00\u4e2a\u65b9\u6cd5\uff0c\u91cc\u9762\u9700\u8981\u5305\u542b\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u5f53\u6211\u4eec\u8bbf\u95ee\u8ba1\u7b97\u5c5e\u6027\u8fd4\u56de\u7ed3\u679c\u65f6\uff0c\u4f1a\u81ea\u52a8\u83b7\u53d6\u56de\u8c03\u51fd\u6570\u7684\u503c\uff1a<\/p>\n<pre><code class=\"language-javascript\">const doubleCount = computed(() =&gt; count.value * 2)<\/code><\/pre>\n<p>\u76d1\u542c\u5668<code>watch<\/code>\u540c\u6837\u662f\u4e00\u4e2a\u65b9\u6cd5\uff0c\u5b83\u5305\u542b 2 \u4e2a\u53c2\u6570\uff0c2 \u4e2a\u53c2\u6570\u90fd\u662f<code>function<\/code>\uff1a<\/p>\n<pre><code class=\"language-javascript\">watch(() =&gt; count.value, \n  val =&gt; {\n    console.log(`count is ${val}`)\n  })<\/code><\/pre>\n<p>\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u76d1\u542c\u7684\u503c\uff0c<code>count.value<\/code>\u8868\u793a\u5f53<code>count.value<\/code>\u53d1\u751f\u53d8\u5316\u5c31\u4f1a\u89e6\u53d1\u76d1\u542c\u5668\u7684\u56de\u8c03\u51fd\u6570\uff0c\u5373\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4ee5\u6267\u884c\u76d1\u542c\u65f6\u5019\u7684\u56de\u8c03<\/p>\n<p>\u5982\u679c\u662f2\u4e2a\u4ee5\u4e0a\u7684\u76d1\u542c\u5c5e\u6027\uff0c\u5c31\u662f\u8fd9\u6837\uff1a<\/p>\n<pre><code class=\"language-javascript\">watch(\n  [refA, () =&gt; refB.value],\n  ([a, b], [prevA, prevB]) =&gt; {\n    console.log(`a is: ${a}`)\n    console.log(`b is: ${b}`)\n  }\n)<\/code><\/pre>\n<h3>\u83b7\u53d6\u8def\u7531<\/h3>\n<p>Vue 3.0 \u4e2d\u901a\u8fc7<code>getCurrentInstance<\/code>\u65b9\u6cd5\u83b7\u53d6\u5f53\u524d\u7ec4\u4ef6\u7684\u5b9e\u4f8b\uff0c\u7136\u540e\u901a\u8fc7<code>ctx<\/code>\u5c5e\u6027\u83b7\u5f97\u5f53\u524d\u4e0a\u4e0b\u6587<\/p>\n<p><code>ctx.$router<\/code>\u662f<code>Vue Router<\/code>\u5b9e\u4f8b\uff0c\u91cc\u9762\u5305\u542b\u4e86<code>currentRoute<\/code>\u53ef\u4ee5\u83b7\u53d6\u5230\u5f53\u524d\u7684\u8def\u7531\u4fe1\u606f<\/p>\n<pre><code class=\"language-javascript\">&lt;script&gt;\n  import { getCurrentInstance } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const { ctx } = getCurrentInstance()\n      console.log(ctx.$router.currentRoute.value)\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Vuex \u96c6\u6210<\/h2>\n<p>Vuex \u7684\u96c6\u6210\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n<h3>\u5b9a\u4e49 Vuex \u72b6\u6001<\/h3>\n<p>\u7b2c\u4e00\u6b65\uff0c\u4fee\u6539<code>src\/store\/index.js<\/code>\u6587\u4ef6\uff1a<\/p>\n<pre><code class=\"language-javascript\">import Vuex from &#039;vuex&#039;\n\nexport default Vuex.createStore({\n  state: {\n    test: {\n      a: 1\n    }\n  },\n  mutations: {\n    setTestA(state, value) {\n      state.test.a = value\n    }\n  },\n  actions: {\n  },\n  modules: {\n  }\n})<\/code><\/pre>\n<h3>\u5f15\u7528 Vuex \u72b6\u6001<\/h3>\n<p>\u7b2c\u4e8c\u6b65\uff0c\u5728<code>Test.vue<\/code>\u4e2d\uff0c\u901a\u8fc7\u8ba1\u7b97\u5c5e\u6027\u4f7f\u7528<code>Vuex<\/code>\u72b6\u6001\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n    &lt;h1&gt;test count: {{count}}&lt;\/h1&gt;\n    &lt;div&gt;count * 2 = {{doubleCount}}&lt;\/div&gt;\n    &lt;div&gt;state from vuex {{a}}&lt;\/div&gt;\n    &lt;button @click=&quot;add&quot;&gt;add&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  import { ref, computed, watch, getCurrentInstance } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const count = ref(0)\n      const add = () =&gt; {\n        count.value++\n      }\n      watch(() =&gt; count.value, val =&gt; {\n        console.log(`count is ${val}`)\n      })\n      const doubleCount = computed(() =&gt; count.value * 2)\n      const { ctx } = getCurrentInstance()\n      console.log(ctx.$router.currentRoute.value)\n      const a = computed(() =&gt; ctx.$store.state.test.a)\n      return {\n        count,\n        doubleCount,\n        add,\n        a\n      }\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u8fd9\u91cc\u6211\u4eec\u901a\u8fc7\u8ba1\u7b97\u5c5e\u6027\u6765\u5f15\u7528<code>Vuex<\/code>\u4e2d\u7684\u72b6\u6001\uff1a<\/p>\n<pre><code class=\"language-javascript\">const a = computed(() =&gt; ctx.$store.state.test.a)<\/code><\/pre>\n<p><code>ctx<\/code>\u662f\u4e0a\u8282\u4e2d\u6211\u4eec\u63d0\u5230\u7684\u5f53\u524d\u7ec4\u4ef6\u5b9e\u4f8b<\/p>\n<h3>\u66f4\u65b0 Vuex \u72b6\u6001<\/h3>\n<p>\u66f4\u65b0<code>Vuex<\/code>\u72b6\u6001\u4ecd\u7136\u4f7f\u7528<code>commit<\/code>\u65b9\u6cd5\uff0c\u8fd9\u70b9\u548c Vuex 2.0 \u7248\u672c\u4e00\u81f4\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div class=&quot;test&quot;&gt;\n    &lt;h1&gt;test count: {{count}}&lt;\/h1&gt;\n    &lt;div&gt;count * 2 = {{doubleCount}}&lt;\/div&gt;\n    &lt;div&gt;state from vuex {{a}}&lt;\/div&gt;\n    &lt;button @click=&quot;add&quot;&gt;add&lt;\/button&gt;\n    &lt;button @click=&quot;update&quot;&gt;update a&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  import { ref, computed, watch, getCurrentInstance } from &#039;vue&#039;\n\n  export default {\n    setup () {\n      const count = ref(0)\n      const add = () =&gt; {\n        count.value++\n      }\n      watch(() =&gt; count.value, val =&gt; {\n        console.log(`count is ${val}`)\n      })\n      const doubleCount = computed(() =&gt; count.value * 2)\n      const { ctx } = getCurrentInstance()\n      console.log(ctx.$router.currentRoute.value)\n      const a = computed(() =&gt; ctx.$store.state.test.a)\n      const update = () =&gt; {\n        ctx.$store.commit(&#039;setTestA&#039;, count)\n      }\n      return {\n        count,\n        doubleCount,\n        add,\n        a,\n        update\n      }\n    }\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u8fd9\u91cc\u6211\u4eec\u70b9\u51fb<code>update a<\/code>\u6309\u94ae\u540e\uff0c\u4f1a\u89e6\u53d1<code>update<\/code>\u65b9\u6cd5\uff0c\u6b64\u65f6\u4f1a\u901a\u8fc7<code>ctx.$store.commit<\/code>\u8c03\u7528<code>setTestA<\/code>\u65b9\u6cd5\uff0c\u5c06<code>count<\/code>\u7684\u503c\u8986\u76d6<code>state.test.a<\/code>\u7684\u503c<\/p>\n<p>\u603b\u7684\u6548\u679c\u5462\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u524d\u7aef\/Vue%203.0\u521d\u4f53\u9a8c.png\" alt=\"Vue 3.0\u521d\u4f53\u9a8c\" \/><\/p>\n<h2>\u603b\u7ed3<\/h2>\n<ul>\n<li>Vue 3.0\u90fd\u5199\u5728<code>setup<\/code>\u91cc\uff0c\u4ee5\u524d\u7684\u6240\u6709\u6570\u636e\u72b6\u6001\u90fd\u5199\u5728<code>data<\/code>\u91cc<\/li>\n<li>\u6240\u6709\u65b9\u6cd5\u90fd\u5199\u5728<code>methods<\/code>\u91cc\uff0c\u800c\u73b0\u5728\u53ef\u4ee5\u6839\u636e\u529f\u80fd\u6a21\u5757\u628a\u72b6\u6001\u548c\u65b9\u6cd5\u7b49\u5212\u5206\u5728\u4e00\u8d77\uff0c\u66f4\u5229\u4e8e\u6a21\u5757\u5316<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 6\u5927\u4eae\u70b9 Performance\uff1a\u6027\u80fd\u66f4\u6bd4Vue 2.0\u5f3a\u3002 Tree shaking support\uff1a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1315","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1315\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}