{"@attributes":{"version":"2.0"},"channel":{"title":"code\u524d\u7aef\u7f51","link":"https:\/\/www.codeqd.com\/","description":"\u5b66\u6280\u672f\uff0c\u6765code\u524d\u7aef\u5f00\u53d1\u7f51","item":[{"title":"Vue3\u91ccwatch\u76f4\u63a5\u5199ref\u53d8\u91cf\u540d\u4e3a\u4ec0\u4e48\u6ca1\u6548\u679c\uff1fwatch ref\u7684value\u5230\u5e95\u8981\u4e0d\u8981\u52a0\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421763.html","description":"<p>\u8eab\u8fb9\u6700\u8fd1\u6709\u597d\u51e0\u4e2a\u521a\u4eceVue2\u8f6c\u8fc7\u6765\u7684\u524d\u7aef\u5c0f\u4f19\u4f34\u95ee\u6211\u7c7b\u4f3c\u7684\u95ee\u9898\uff1a\u201c\u660e\u660e\u6211\u628aref\u5b9a\u4e49\u7684\u54cd\u5e94\u5f0f\u53d8\u91cf\u76f4\u63a5\u4e22\u8fdbwatch\u91cc\u4e86\uff0c\u600e\u4e48\u6539\u6570\u636e\u7684\u65f6\u5019\u4e00\u70b9\u53cd\u5e94\u90fd\u6ca1\u6709\uff1f\u662f\u4e0d\u662f\u5f97\u52a0\u4e2a.value\u624d\u884c\uff1f\u4f46\u6709\u65f6\u5019\u597d\u50cf\u53c8\u4e0d\u7528\u52a0\uff1f\u201d\u8bf4\u5b9e\u8bdd\uff0c\u8fd9\u4e24\u4e2a\u95ee\u9898\u786e\u5b9e\u662f\u65b0\u624b\u8e29\u5751\u7387\u6700\u9ad8\u7684Vue3 watch\u77e5\u8bc6\u70b9\u4e86\uff0c\u8fde\u6211\u81ea\u5df1\u521a\u5b66\u7684\u65f6\u5019\u4e5f\u7ed5\u4e86\u597d\u51e0\u5929\u624d\u7406\u6e05\u695a\uff0c\u4eca\u5929\u5c31\u7ed3\u5408\u5b9e\u9645\u5f00\u53d1\u573a\u666f\uff0c\u628a\u8fd9\u4e8b\u513f\u5f7b\u5e95\u63b0\u626f\u660e\u767d\uff0c\u4e0d\u4ec5\u4f1a\u8bb2\u7ed3\u8bba\uff0c\u8fd8\u4f1a\u6316\u6316\u80cc\u540eVue3\u54cd\u5e94\u5f0f\u7cfb\u7edf\u7684\u5c0f\u539f\u7406\uff0c\u8ba9\u4f60\u4e0d\u7ba1\u4ee5\u540e\u9047\u5230\u4ec0\u4e48ref\u548cwatch\u7684\u7ec4\u5408\uff0c\u90fd\u80fd\u7a33\u51c6\u72e0\u5730\u5199\u5bf9\u3002<\/p>\n<h2>\u5148\u7ed9\u4f60\u4e00\u4e2a\u6700\u5e72\u8106\u7684\u7ed3\u8bba\uff1a\u8981\u4e0d\u8981\u52a0.value\u5206\u4e24\u79cd\u6838\u5fc3\u60c5\u51b5<\/h2>\n<p>\u5176\u5b9e\u4e0d\u7528\u8bb0\u4e00\u5806\u590d\u6742\u7684\u89c4\u5219,\u5c31\u4e24\u79cd\u573a\u666f\u2014\u2014\u4f60\u60f3\u76d1\u542c\u7684\u662f\u201cref\u8fd9\u4e2a\u5bb9\u5668\u672c\u8eab\u7684\u66ff\u6362\u201d\uff0c\u8fd8\u662f\u201cref\u5bb9\u5668\u91cc\u5b58\u7684\u5177\u4f53\u503c\u7684\u53d8\u5316\u201d\uff1f\u628a\u8fd9\u4e24\u4e2a\u6838\u5fc3\u9700\u6c42\u5206\u6e05\u695a\uff0c\u52a0\u4e0d\u52a0.value\u7684\u95ee\u9898\u81ea\u7136\u8fce\u5203\u800c\u89e3\uff0c\u4e3e\u4e2a\u6700\u7b80\u5355\u7684\u4f8b\u5b50\uff1a\u4f60\u6709\u4e00\u4e2a\u88c5\u82f9\u679c\u7684\u5851\u6599\u888b\uff08ref\u5bb9\u5668\uff09\uff0c\u4f60\u662f\u60f3\u770b\u770b\u201c\u4ec0\u4e48\u65f6\u5019\u8fd9\u4e2a\u5851\u6599\u888b\u88ab\u6362\u6210\u4e86\u88c5\u9999\u8549\u7684\u201d\uff0c\u8fd8\u662f\u201c\u4ec0\u4e48\u65f6\u5019\u888b\u5b50\u91cc\u7684\u82f9\u679c\u88ab\u5403\u6389\u6216\u8005\u6362\u6210\u6a58\u5b50\u4e86\u201d\uff1f\u5bf9\uff0c\u5c31\u662f\u8fd9\u4e2a\u610f\u601d\u3002<\/p>\n<h2>\u53ea\u60f3\u770bref\u91cc\u5177\u4f53\u503c\u7684\u53d8\u5316\uff1f\u7edd\u5927\u591a\u6570\u65b0\u624b\u7684\u9700\u6c42\uff0cwatch\u7b2c\u4e00\u4e2a\u53c2\u6570\u53ef\u4ee5\u76f4\u63a5\u5199\u53d8\u91cf\u540d\uff0c\u4e0d\u7528\u52a0.value<\/h2>\n<p>\u8fd9\u4e2a\u573a\u666f\u662f\u5f00\u53d1\u4e2d\u5360\u6bd490%\u4ee5\u4e0a\u7684\u60c5\u51b5\uff0c\u6bd4\u5982\u4f60\u76d1\u542c\u7528\u6237\u8f93\u5165\u6846\u7684\u5185\u5bb9\uff08\u7528ref\u7ed1\u7684v-model\uff09\u3001\u76d1\u542c\u9875\u9762\u6eda\u52a8\u7684\u9ad8\u5ea6\uff08\u7528ref\u5b58\u7684refTop\u503c\uff09\u3001\u76d1\u542c\u8d2d\u7269\u8f66\u6570\u91cf\u7684\u53d8\u5316\uff08\u7528ref\u5b58\u7684cartCount\uff09\u2014\u2014\u8fd9\u4e9b\u90fd\u662f\u201c\u60f3\u77e5\u9053\u5bb9\u5668\u91cc\u7684\u5185\u5bb9\u53d8\u4e86\u6ca1\u201d\uff0c\u4e0d\u662f\u201c\u60f3\u6362\u4e2a\u5bb9\u5668\u201d\u3002<\/p>\n<p>\u90a3\u4e3a\u4ec0\u4e48Vue2\u7684\u65f6\u5019\u4e0d\u80fd\u8fd9\u4e48\u5199\uff1fVue2\u91cc\u5982\u679c\u7528data\u5b9a\u4e49\u7684\u53d8\u91cf\uff0c\u76f4\u63a5\u5199\u8fdb\u53bbwatch\u5c31\u4f1a\u76d1\u542c\uff1b\u4f46Vue3\u91ccref\u672c\u8d28\u662f\u4e00\u4e2a<strong>\u53ea\u6709\u4e00\u4e2avalue\u5c5e\u6027\u7684\u666e\u901a\u5bf9\u8c61<\/strong>\u554a\uff01\u5982\u679c\u76f4\u63a5\u628a\u8fd9\u4e2a\u5bf9\u8c61\u4f20\u7ed9watch\uff0c\u6309\u9053\u7406\u8bf4\uff0cVue3\u7684\u54cd\u5e94\u5f0f\u5e94\u8be5\u53ea\u76d1\u542c\u8fd9\u4e2a\u5bf9\u8c61\u672c\u8eab\u7684\u5f15\u7528\u53d8\u5316\u624d\u5bf9\u2014\u2014\u4f46\u4e3a\u4ec0\u4e48\u504f\u504fref\u5c31\u53ef\u4ee5\u76f4\u63a5\u76d1\u542cvalue\u7684\u53d8\u5316\u5462\uff1f<\/p>\n<p>\u8fd9\u91cc\u5c31\u8981\u63d0\u4e00\u4e0bVue3 watch\u7684\u201c\u5c0f\u667a\u80fd\u201d\u4e86\uff1a\u5f53watch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f<strong>ref\u5bf9\u8c61\u672c\u8eab\uff08\u4e0d\u662f.value\uff09<\/strong>\u7684\u65f6\u5019\uff0cVue3\u7684\u5185\u90e8\u903b\u8f91\u4f1a\u81ea\u52a8\u628a\u8fd9\u4e2aref\u201c\u89e3\u5305\u201d\uff0c\u53bb\u76d1\u542c\u5b83\u5185\u90e8\u7684.value\u5c5e\u6027\u7684\u53d8\u5316\uff0c\u8fd9\u662f\u5c24\u96e8\u6eaa\u548cVue\u56e2\u961f\u4e3a\u4e86\u65b9\u4fbf\u5f00\u53d1\u8005\u505a\u7684\u4e00\u4e2a<strong>\u8bed\u6cd5\u7cd6\uff08Syntactic Sugar\uff09<\/strong>\uff0c\u6bd5\u7adf\u5927\u90e8\u5206\u65f6\u5019\u5927\u5bb6\u90fd\u662f\u5173\u5fc3\u503c\uff0c\u4e0d\u662f\u5173\u5fc3\u5bb9\u5668\u672c\u8eab\u3002<\/p>\n<p>\u90a3\u6211\u4eec\u53ef\u4ee5\u5199\u4e00\u6bb5\u4ee3\u7801\u6d4b\u8bd5\u4e00\u4e0b\u8fd9\u4e2a\u573a\u666f\u662f\u4e0d\u662f\u771f\u7684\u6210\u7acb\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\n\/\/ \u5b9a\u4e49\u4e00\u4e2a\u88c5\u8d2d\u7269\u8f66\u6570\u91cf\u7684ref\u5bb9\u5668\nconst cartCount = ref(0)\n\/\/ \u76f4\u63a5\u628acartCount\u8fd9\u4e2a\u5bf9\u8c61\u4e22\u8fdbwatch\uff0c\u4e0d\u52a0.value\nwatch(cartCount, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u8d2d\u7269\u8f66\u6570\u91cf\u53d8\u4e86\uff01\u65b0\u6570\u91cf\u662f&#39;, newVal, &#39;\u65e7\u6570\u91cf\u662f&#39;, oldVal)\n})\n\/\/ \u6a21\u62df\u7528\u6237\u70b9\u51fb\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d\u6309\u94ae\uff0c\u4fee\u6539.value\ncartCount.value++\n\/\/ \u8fd9\u65f6\u5019\u63a7\u5236\u53f0\u5e94\u8be5\u4f1a\u6253\u5370\uff1a\u8d2d\u7269\u8f66\u6570\u91cf\u53d8\u4e86\uff01\u65b0\u6570\u91cf\u662f 1 \u65e7\u6570\u91cf\u662f 0<\/pre>\n<p>\u4f60\u770b,\u662f\u4e0d\u662f\u5b8c\u5168\u6ca1\u95ee\u9898\uff1f\u5b8c\u5168\u6ca1\u6709\u51fa\u73b0\u5927\u5bb6\u62c5\u5fc3\u7684\u201c\u6ca1\u6548\u679c\u201d\u7684\u60c5\u51b5\uff0c\u800c\u4e14\u8fd9\u91cc\u8fd8\u6709\u4e2a\u5c0f\u7ec6\u8282\uff1awatch\u56de\u8c03\u51fd\u6570\u91cc\u7684newVal\u548coldVal\uff0c\u76f4\u63a5\u5c31\u662fref\u5bb9\u5668\u91cc\u7684\u5177\u4f53\u503c\uff0c\u4e0d\u662fref\u5bf9\u8c61\u672c\u8eab\u2014\u2014\u8fd9\u4e5f\u662f\u89e3\u5305\u5e26\u6765\u7684\u597d\u5904\uff0c\u4e0d\u7528\u4f60\u518d\u5728\u56de\u8c03\u91cc\u5199newVal.value\u4e86\uff0c\u7701\u4e86\u4e00\u6b65\u3002<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u8981\u6ce8\u610f\u4e00\u4e2a\u4f8b\u5916\uff1a\u5982\u679c\u4f60\u7684ref\u5bb9\u5668\u91cc\u5b58\u7684\u662f<strong>\u53e6\u4e00\u4e2a\u5bf9\u8c61\u6216\u8005\u6570\u7ec4<\/strong>\uff0c\u90a3\u76f4\u63a5\u5199ref\u5bf9\u8c61\u672c\u8eab\u7684\u8bdd\uff0c\u9ed8\u8ba4\u53ea\u80fd\u76d1\u542c\u201c\u8fd9\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5f15\u7528\u88ab\u5b8c\u5168\u66ff\u6362\u201d\uff0c\u4e0d\u80fd\u76d1\u542c\u201c\u5bf9\u8c61\u91cc\u7684\u67d0\u4e2a\u5c5e\u6027\u53d8\u4e86\u201d\u6216\u8005\u201c\u6570\u7ec4\u91cc\u7684\u5143\u7d20\u88ab\u6dfb\u52a0\/\u5220\u9664\u4e86\u201d\u2014\u2014\u8fd9\u4e2a\u65f6\u5019\u5c31\u8981\u7528\u5230watch\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570options\u91cc\u7684<strong>deep: true<\/strong>\u4e86\uff0c\u4f46\u8fd9\u4e0d\u662f\u4eca\u5929\u7684\u91cd\u70b9\uff0c\u4eca\u5929\u4e3b\u8981\u8bb2\u52a0\u4e0d\u52a0.value\u7684\u95ee\u9898\uff0c\u8fd9\u4e2adeep\u7684\u7ec6\u8282\u6211\u4eec\u540e\u9762\u53ef\u4ee5\u5355\u72ec\u804a\u3002<\/p>\n<h2>\u60f3\u770bref\u5bb9\u5668\u672c\u8eab\u7684\u66ff\u6362\uff1f\u8fd9\u4e2a\u9700\u6c42\u6bd4\u8f83\u5c11\u89c1\uff0c\u4f46\u975e\u5e38\u91cd\u8981\uff0c\u5fc5\u987b\u52a0.value\uff08\u54e6\u4e0d\u5bf9\uff0c\u7b49\u4e00\u4e0b\uff0c\u53cd\u8fc7\u6765\uff1f\u76f4\u63a5\u5199ref\u5bf9\u8c61\u672c\u8eab\u4f1a\u4e0d\u4f1a\uff1f\uff09<\/h2>\n<p>\u7b49\u7b49\u7b49,\u8fd9\u91cc\u521a\u624d\u5dee\u70b9\u8bf4\u53cd\u4e86\uff01\u521a\u624d\u573a\u666f\u4e00\u6211\u4eec\u8bf4\u201c\u76f4\u63a5\u5199ref\u5bf9\u8c61\u672c\u8eab\u662f\u89e3\u5305\u76d1\u542c.value\u201d\uff0c\u90a3\u5982\u679c\u6211\u4eec\u60f3\u76d1\u542c\u201c\u8fd9\u4e2aref\u5bf9\u8c61\u88ab\u5b8c\u5168\u66ff\u6362\u6210\u53e6\u4e00\u4e2aref\u5bf9\u8c61\u201d\uff0c\u5e94\u8be5\u600e\u4e48\u505a\uff1f<\/p>\n<p>\u8fd9\u4e2a\u573a\u666f\u786e\u5b9e\u5f88\u5c11\u89c1,\u4f46\u4e5f\u4e0d\u662f\u6ca1\u6709\uff0c\u6bd4\u5982\u4f60\u5199\u4e86\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u6709\u4e00\u4e2a\u201c\u6570\u636e\u6e90\u5207\u6362\u201d\u7684\u529f\u80fd\uff1a\u521d\u59cb\u7528\u7684\u662f\u672c\u5730mock\u6570\u636e\u7684ref\uff0c\u540e\u6765\u7528\u6237\u70b9\u51fb\u201c\u5207\u6362\u5230\u5b9e\u65f6\u6570\u636e\u201d\uff0c\u4f60\u5c31\u628a\u8fd9\u4e2aref\u76f4\u63a5\u66ff\u6362\u6210\u4e86\u4ece\u63a5\u53e3\u8bf7\u6c42\u56de\u6765\u7684\u65b0ref\u2014\u2014\u8fd9\u4e2a\u65f6\u5019\u4f60\u53ef\u80fd\u5c31\u60f3\u76d1\u542c\u8fd9\u4e2a\u201c\u5bb9\u5668\u88ab\u66ff\u6362\u201d\u7684\u4e8b\u4ef6\uff0c\u505a\u4e00\u4e9b\u521d\u59cb\u5316\u7684\u64cd\u4f5c\u3002<\/p>\n<p>\u90a3\u8fd9\u4e2a\u65f6\u5019,\u76f4\u63a5\u5199ref\u5bf9\u8c61\u672c\u8eab\u80af\u5b9a\u4e0d\u884c\u554a\uff0c\u56e0\u4e3aVue3\u4f1a\u81ea\u52a8\u89e3\u5305\u53bb\u76d1\u542c\u91cc\u9762\u7684.value\uff0c\u90a3\u600e\u4e48\u529e\uff1f\u8fd9\u91cc\u6709\u4e24\u4e2a\u65b9\u6cd5\uff0c\u4f46<strong>\u5176\u4e2d\u4e00\u4e2a\u65b9\u6cd5\u91cc\u4f1a\u6d89\u53ca\u5230\u201c\u4e3b\u52a8\u89e3\u5305\u7136\u540e\u76d1\u542c\uff1f\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u662f\u76d1\u542cref\u672c\u8eab\u7684\u5f15\u7528\uff0c\u4e0d\u5e0c\u671b\u5b83\u88ab\u81ea\u52a8\u89e3\u5305\u201d\u2014\u2014\u54e6\u5bf9\u4e86\uff01\u7528watch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u4e00\u4e2a<\/strong>\u7bad\u5934\u51fd\u6570**\uff0c\u8fd4\u56de\u8fd9\u4e2aref\u5bf9\u8c61\u672c\u8eab\uff0c\u8fd9\u6837Vue3\u7684\u81ea\u52a8\u89e3\u5305\u673a\u5236\u5c31\u4e0d\u4f1a\u751f\u6548\u4e86\uff0c\u4f1a\u76f4\u63a5\u76d1\u542c\u4f60\u8fd4\u56de\u7684\u8fd9\u4e2a\u503c\u7684\u5f15\u7528\u53d8\u5316\uff01<\/p>\n<p>\u7b49\u4e00\u4e0b,\u521a\u624d\u5dee\u70b9\u6df7\u6dc6\u4e86\u201c\u52a0\u4e0d\u52a0.value\u5728\u7b2c\u4e00\u4e2a\u53c2\u6570\u91cc\u201d\u548c\u201c\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u4ec0\u4e48\u201d\u2014\u2014\u6211\u4eec\u8fd8\u662f\u7528\u4ee3\u7801\u628a\u8fd9\u4e24\u79cd\u60c5\u51b5\uff08\u60f3\u76d1\u542cvalue\u53d8\u5316\u548c\u60f3\u76d1\u542cref\u672c\u8eab\u53d8\u5316\uff09\u90fd\u5bf9\u6bd4\u5199\u4e00\u904d\uff0c\u8fd9\u6837\u66f4\u6e05\u695a\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\n\/\/ \u521d\u59cb\u7528\u7684\u672c\u5730mock\u6570\u636eref\nconst mockDataSource = ref([\n  { id: 1, name: &#39;\u82f9\u679c&#39;, price: 5 },\n  { id: 2, name: &#39;\u9999\u8549&#39;, price: 3 }\n])\n\/\/ \u7b2c\u4e00\u4e2a\u60c5\u51b5\uff1a\u76f4\u63a5\u5199dataSource\uff08\u8fd9\u91ccdataSource\u521d\u59cb\u662fmockDataSource\u7684\u5f15\u7528\uff09\u2014\u2014\u81ea\u52a8\u89e3\u5305\u76d1\u542c.value\n\/\/ \u6ce8\u610f\uff1a\u8fd9\u91cc\u6211\u4eec\u5148\u628adataSource\u8d4b\u503c\u4e3amockDataSource\nlet dataSource = mockDataSource\n\/\/ \u76d1\u542c\u5177\u4f53\u503c\u7684\u53d8\u5316\uff08\u6bd4\u5982mock\u6570\u636e\u91cc\u7684\u82f9\u679c\u4ef7\u683c\u53d8\u4e86\uff09\nwatch(dataSource, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u6570\u636e\u6e90\u7684\u5177\u4f53\u5185\u5bb9\u53d8\u4e86\uff01&#39;)\n  console.log(&#39;\u65b0\u5185\u5bb9\u524d2\u4e2a\uff1a&#39;, newVal.slice(0, 2))\n  console.log(&#39;\u65e7\u5185\u5bb9\u524d2\u4e2a\uff1a&#39;, oldVal.slice(0, 2))\n})\n\/\/ \u7b2c\u4e8c\u4e2a\u60c5\u51b5\uff1a\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56dedataSource\u8fd9\u4e2a\u53d8\u91cf\u672c\u8eab\u2014\u2014\u4e0d\u81ea\u52a8\u89e3\u5305\uff0c\u76d1\u542c\u5f15\u7528\u53d8\u5316\nwatch(() =&gt; dataSource, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u6570\u636e\u6e90\u7684\u5bb9\u5668\uff08\u5f15\u7528\uff09\u88ab\u5b8c\u5168\u66ff\u6362\u4e86\uff01&#39;)\n  console.log(&#39;\u65b0\u5bb9\u5668\u7684id\uff1a&#39;, newVal.value[0]?.id) \/\/ \u8fd9\u91ccnewVal\u548coldVal\u90fd\u662fref\u5bf9\u8c61\uff0c\u6240\u4ee5\u8981\u52a0.value\n  console.log(&#39;\u65e7\u5bb9\u5668\u7684id\uff1a&#39;, oldVal.value[0]?.id)\n})\n\/\/ \u73b0\u5728\u6a21\u62df\u4e24\u4e2a\u64cd\u4f5c\uff0c\u5206\u522b\u89e6\u53d1\u4e24\u4e2awatch\n\/\/ \u64cd\u4f5c\u4e00\uff1a\u4fee\u6539mockDataSource\u7684\u5177\u4f53\u503c\u2014\u2014\u53ea\u4f1a\u89e6\u53d1\u7b2c\u4e00\u4e2awatch\nmockDataSource.value[0].price = 6\n\/\/ \u63a7\u5236\u53f0\u5e94\u8be5\u5148\u6253\u5370\uff1a\u6570\u636e\u6e90\u7684\u5177\u4f53\u5185\u5bb9\u53d8\u4e86\uff01\u7136\u540e\u6253\u5370\u5177\u4f53\u7684\u65b0\u65e7\u4ef7\u683c\n\/\/ \u64cd\u4f5c\u4e8c\uff1a\u5207\u6362\u5230\u5b9e\u65f6\u6570\u636e\u2014\u2014\u628adataSource\u66ff\u6362\u6210\u65b0\u7684ref\u5bf9\u8c61\u2014\u2014\u53ea\u4f1a\u89e6\u53d1\u7b2c\u4e8c\u4e2awatch\nconst realTimeDataSource = ref([\n  { id: 101, name: &#39;\u5b9e\u65f6\u82f9\u679c&#39;, price: 5.8 },\n  { id: 102, name: &#39;\u5b9e\u65f6\u9999\u8549&#39;, price: 3.2 }\n])\ndataSource = realTimeDataSource\n\/\/ \u63a7\u5236\u53f0\u5e94\u8be5\u63a5\u7740\u6253\u5370\uff1a\u6570\u636e\u6e90\u7684\u5bb9\u5668\uff08\u5f15\u7528\uff09\u88ab\u5b8c\u5168\u66ff\u6362\u4e86\uff01\u7136\u540e\u6253\u5370\u65b0\u7684id<\/pre>\n<p>\u54e6,\u5bf9\u4e86\uff01\u521a\u624d\u5dee\u70b9\u5fd8\u4e86\u4e00\u4e2a\u70b9\uff1a<strong>\u5982\u679c\u4f60\u7684ref\u662f\u76f4\u63a5\u5728\u7ec4\u4ef6\u7684setup\u9876\u5c42\u6216\u8005<script setup>\u91cc\u5b9a\u4e49\u7684\uff0c\u4f60\u662f\u4e0d\u80fd\u76f4\u63a5\u66ff\u6362\u8fd9\u4e2aref\u53d8\u91cf\u672c\u8eab\u7684\u5f15\u7528\u7684\uff01<\/strong> \u56e0\u4e3a\u5728<script setup>\u6216\u8005setup\u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61\u91cc\uff0cref\u53d8\u91cf\u662f\u201c\u7ed1\u5b9a\u5728\u7ec4\u4ef6\u5b9e\u4f8b\u4e0a\u7684\u54cd\u5e94\u5f0f\u5f15\u7528\u201d\uff0c\u4f60\u4e0d\u80fd\u50cf\u521a\u624d\u4ee3\u7801\u91cc\u7684\u666e\u901a\u53d8\u91cfdataSource\u90a3\u6837\uff0c\u76f4\u63a5\u628a\u5b83\u8d4b\u503c\u6210\u53e6\u4e00\u4e2a\u4e1c\u897f\u2014\u2014\u9664\u975e\u4f60\u7528\u7684\u662flet\u58f0\u660e\u7684\u666e\u901a\u53d8\u91cf\uff0c\u7136\u540e\u8fd9\u4e2a\u666e\u901a\u53d8\u91cf\u5b58\u7684\u662fref\u5bf9\u8c61\u7684\u5f15\u7528\uff08\u5c31\u50cf\u521a\u624d\u4ee3\u7801\u91cc\u7684dataSource\uff09\uff0c\u8fd9\u4e2a\u7ec6\u8282\u5176\u5b9e\u4e5f\u633a\u91cd\u8981\u7684\uff0c\u65b0\u624b\u5bb9\u6613\u72af\u8fd9\u4e2a\u9519\uff1a\u4ee5\u4e3a<script setup>\u91cc\u7684ref\u662f\u666e\u901a\u53d8\u91cf\uff0c\u60f3\u6539\u5c31\u6539\u5f15\u7528\uff0c\u7ed3\u679c\u62a5\u9519\u6216\u8005\u6ca1\u6548\u679c\u3002<\/p>\n<p>\u90a3\u521a\u624d\u4ee3\u7801\u91cc\u7684\u7b2c\u4e8c\u4e2awatch,\u6709\u6ca1\u6709\u53ef\u80fd\u7528\u201c\u52a0\u4e0d\u52a0.value\u201d\u6765\u5b9e\u73b0\uff1f\u6bd4\u5982\u6211\u4eec\u521a\u624d\u63d0\u5230\u7684\u2014\u2014\u201c\u5982\u679c\u52a0\u4e86.value\uff0cVue3\u4f1a\u600e\u4e48\u5904\u7406\uff1f\u201d\u8fd9\u4e2a\u95ee\u9898\u6211\u4eec\u521a\u624d\u5176\u5b9e\u8fd8\u6ca1\u6b63\u9762\u56de\u7b54\uff0c\u73b0\u5728\u521a\u597d\u53ef\u4ee5\u804a\u3002<\/p>\n<h2>\u7b2c\u4e00\u4e2a\u53c2\u6570\u76f4\u63a5\u52a0\u4e86.value\u4f1a\u600e\u4e48\u6837\uff1f100%\u89e6\u53d1\u65b0\u624b\u7684\u201c\u6ca1\u6548\u679c\u201d\u5669\u68a6\uff0c\u5343\u4e07\u4e0d\u8981\u5728\u76d1\u542c\u5177\u4f53\u503c\u53d8\u5316\u7684\u65f6\u5019\u8fd9\u4e48\u5199\uff01<\/h2>\n<p>\u7ec8\u4e8e\u5230\u4e86\u6700\u6838\u5fc3\u7684\u65b0\u624b\u8e29\u5751\u573a\u666f\u4e86\uff01\u521a\u624d\u6709\u5c0f\u4f19\u4f34\u95ee\uff1a\u201c\u6211\u660e\u660e\u8bb0\u5f97ref\u7684.value\u624d\u662f\u5177\u4f53\u503c\uff0c\u90a3\u6211\u76f4\u63a5\u628a.value\u4e22\u8fdbwatch\u91cc\u76d1\u542c\u5177\u4f53\u503c\u7684\u53d8\u5316\uff0c\u662f\u4e0d\u662f\u66f4\u2018\u89c4\u8303\u2019\uff1f\u66f4\u7b26\u5408\u5e95\u5c42\u903b\u8f91\uff1f\u201d\u7ed3\u679c\u4e00\u8fd0\u884c\uff0c\u4fee\u6539cartCount.value\u7684\u65f6\u5019\uff0c\u63a7\u5236\u53f0\u4e00\u70b9\u53cd\u5e94\u90fd\u6ca1\u6709\uff01<\/p>\n<p>\u4e3a\u4ec0\u4e48\u4f1a\u8fd9\u6837\uff1f\u56e0\u4e3a<strong>Vue3\u7684watch\u53ea\u80fd\u76d1\u542c\u201c\u54cd\u5e94\u5f0f\u6570\u636e\u201d\u6216\u8005\u201c\u8fd4\u56de\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u7bad\u5934\u51fd\u6570\u201d\u6216\u8005\u201cref\u5bf9\u8c61\u672c\u8eab\uff08\u81ea\u52a8\u89e3\u5305\uff09\u201d\u6216\u8005\u201creactive\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\uff08\u901a\u8fc7\u7bad\u5934\u51fd\u6570\u8fd4\u56de\uff09\u201d\u2014\u2014\u5982\u679c\u4f60\u76f4\u63a5\u628aref\u7684.value\uff08\u6bd4\u5982cartCount.value\u521d\u59cb\u662f0\uff0c\u662f\u4e2a\u539f\u59cb\u503c\uff09\u4e22\u8fdbwatch\u91cc\uff0c\u90a3\u76f8\u5f53\u4e8e\u4f60\u7ed9watch\u4f20\u4e86\u4e00\u4e2a<\/strong>\u6b7b\u7684\u666e\u901a\u539f\u59cb\u503c<\/p>\n<p>\u4ec0\u4e48\u53eb\u201c\u6b7b\u7684\u666e\u901a\u539f\u59cb\u503c\u201d\uff1f\u6bd4\u5982\u4f60\u5199watch(0, callback)\uff0c\u4f60\u89c9\u5f97\u8fd9\u4e2awatch\u4f1a\u6709\u53cd\u5e94\u5417\uff1f\u80af\u5b9a\u4e0d\u4f1a\u554a\uff0c0\u6c38\u8fdc\u662f0\uff0c\u4e0d\u4f1a\u53d8\uff0c\u90a3\u4f60\u5199watch(cartCount.value, callback)\uff0c\u672c\u8d28\u4e0a\u548c\u5199watch(0, callback)\u662f\u4e00\u6a21\u4e00\u6837\u7684\uff01\u56e0\u4e3acartCount.value\u5728watch\u521d\u59cb\u5316\u7684\u65f6\u5019\uff0c\u5c31\u5df2\u7ecf\u88ab\u53d6\u51fa\u6765\u4e86\uff0c\u53d8\u6210\u4e86\u4e00\u4e2a\u666e\u901a\u7684\u539f\u59cb\u503c\uff08\u5982\u679c\u521d\u59cb\u662f\u5bf9\u8c61\u7684\u8bdd\uff0c\u90a3\u5c31\u662f\u4e00\u4e2a\u666e\u901a\u5bf9\u8c61\u7684\u5f15\u7528\uff0c\u4f46\u4e5f\u4e0d\u662f\u54cd\u5e94\u5f0f\u7684\uff0c\u9664\u975e\u4f60\u7528\u4e86toRef\u4e4b\u7c7b\u7684\uff0c\u4f46\u8fd9\u4e2a\u4e5f\u4e0d\u662f\u91cd\u70b9\uff09\uff0c\u6240\u4ee5\u4e0d\u7ba1\u4f60\u540e\u9762\u600e\u4e48\u4fee\u6539cartCount.value\uff0cwatch\u91cc\u5b58\u7684\u90a3\u4e2a\u521d\u59cb\u503c\u90fd\u4e0d\u4f1a\u77e5\u9053\uff01<\/p>\n<p>\u6211\u4eec\u8fd8\u662f\u7528\u4ee3\u7801\u6f14\u793a\u4e00\u4e0b\u8fd9\u4e2a\u201c\u6ca1\u6548\u679c\u201d\u7684\u5669\u68a6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst cartCount = ref(0)\n\/\/ \u9519\u8bef\u5199\u6cd5\uff01\u76f4\u63a5\u4f20.value\nwatch(cartCount.value, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u8fd9\u4e2a\u6c38\u8fdc\u4e0d\u4f1a\u6253\u5370\uff01&#39;)\n})\n\/\/ \u6b63\u786e\u5199\u6cd5\uff01\u76f4\u63a5\u4f20ref\u5bf9\u8c61\u672c\u8eab\nwatch(cartCount, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u8fd9\u4e2a\u624d\u4f1a\u6253\u5370\uff01\u65b0\u503c&#39;, newVal)\n})\n\/\/ \u4fee\u6539cartCount.value\ncartCount.value++\n\/\/ \u63a7\u5236\u53f0\u53ea\u4f1a\u6253\u5370\u7b2c\u4e8c\u4e2awatch\u7684\u5185\u5bb9<\/pre>\n<p>\u592a\u771f\u5b9e\u4e86\u6709\u6ca1\u6709\uff1f\u6211\u521a\u5b66\u7684\u65f6\u5019\u5c31\u72af\u8fc7\u8fd9\u4e2a\u9519\uff0c\u6539\u4e86\u534a\u5929\u4ee3\u7801\u624d\u53d1\u73b0\u662f\u591a\u5199\u4e86\u4e00\u4e2a.value\uff01\u6240\u4ee5\u65b0\u624b\u670b\u53cb\u4e00\u5b9a\u8981\u8bb0\u4f4f\uff1a<strong>\u53ea\u8981\u4f60\u662f\u5728<script setup>\u6216\u8005setup\u51fd\u6570\u91cc\uff0c\u60f3\u76d1\u542cref\u5bb9\u5668\u91cc\u5177\u4f53\u503c\u7684\u53d8\u5316\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u76f4\u63a5\u5199ref\u53d8\u91cf\u540d\uff0c\u5343\u4e07\u5343\u4e07\u4e0d\u8981\u52a0.value\uff01<\/strong><\/p>\n<h2>\u90a3\u6709\u6ca1\u6709\u4ec0\u4e48\u65f6\u5019\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u52a0.value\u662f\u5bf9\u7684\uff1f<\/h2>\n<p>\u521a\u624d\u8bf4\u4e86,\u76f4\u63a5\u4f20\u539f\u59cb\u503c\u7684.value\u80af\u5b9a\u4e0d\u5bf9\uff0c\u4f46\u5982\u679c\u4f60\u7684ref\u5bb9\u5668\u91cc\u5b58\u7684\u662f<strong>\u53e6\u4e00\u4e2areactive\u5bf9\u8c61\u6216\u8005ref\u5bf9\u8c61<\/strong>\uff0c\u90a3\u6709\u6ca1\u6709\u53ef\u80fd\uff1f\u5176\u5b9e\u4e5f\u4e0d\u7528\uff0c\u56e0\u4e3a\u76f4\u63a5\u4f20ref\u5bf9\u8c61\u672c\u8eab\uff0c\u914d\u5408deep: true\u6216\u8005\u5176\u4ed6options\uff0c\u5c31\u80fd\u89e3\u51b3\u5927\u90e8\u5206\u95ee\u9898\uff0c\u4e0d\u8fc7\u4e3e\u4e00\u4e2a\u6781\u7aef\u4e00\u70b9\u7684\u4f8b\u5b50\uff1a\u4f60\u6709\u4e00\u4e2arefA\uff0c\u91cc\u9762\u5b58\u7684\u662frefB\uff0c\u4f60\u53ea\u60f3\u76d1\u542crefB\u8fd9\u4e2a\u5bb9\u5668\u7684\u66ff\u6362\uff0c\u4e0d\u60f3\u76d1\u542crefB\u91cc\u9762\u7684\u503c\u7684\u53d8\u5316\u2014\u2014\u8fd9\u4e2a\u65f6\u5019\u4f60\u53ef\u4ee5\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56derefA.value\uff08\u4e5f\u5c31\u662frefB\u672c\u8eab\uff09\uff0c\u8fd9\u6837\u5c31\u4e0d\u4f1a\u81ea\u52a8\u89e3\u5305\u4e24\u6b21\uff08\u54e6\u4e0d\u5bf9\uff0c\u81ea\u52a8\u89e3\u5305\u53ea\u4f1a\u89e3\u4e00\u5c42\uff09\uff0c\u53ea\u4f1a\u76d1\u542crefB\u7684\u5f15\u7528\u53d8\u5316\uff0c\u4e0d\u8fc7\u8fd9\u4e2a\u4f8b\u5b50\u592a\u6781\u7aef\u4e86\uff0c\u5b9e\u9645\u5f00\u53d1\u4e2d\u51e0\u4e4e\u9047\u4e0d\u5230\uff0c\u6240\u4ee5\u5927\u5bb6\u53ef\u4ee5\u4e0d\u7528\u592a\u7ea0\u7ed3\uff0c\u53ea\u8981\u8bb0\u4f4f\u521a\u624d\u7684\u4e09\u4e2a\u6838\u5fc3\u573a\u666f\uff08\u5c24\u5176\u662f\u524d\u4e24\u4e2a\uff09\u5c31\u591f\u4e86\u3002<\/p>\n<h2>3\u53e5\u8bdd\u5f7b\u5e95\u8bb0\u4f4f\u52a0\u4e0d\u52a0.value<\/h2>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u8bb0\u5fc6,\u6211\u628a\u4eca\u5929\u7684\u5185\u5bb9\u6d53\u7f29\u6210\u4e863\u53e5\u8bdd\uff0c\u80cc\u4e0b\u6765\u4ee5\u540e\u518d\u4e5f\u4e0d\u4f1a\u8e29\u8fd9\u4e2a\u5751\uff1a<\/p>\n<ol>\n<li><strong>90%\u7684\u573a\u666f\uff08\u76d1\u542cref\u91cc\u7684\u5177\u4f53\u503c\u53d8\u5316\uff09\uff1a\u76f4\u63a5\u5199ref\u53d8\u91cf\u540d\uff0cVue3\u81ea\u52a8\u89e3\u5305\uff0c\u56de\u8c03\u91cc\u7684newVal\/oldVal\u4e5f\u662f\u5177\u4f53\u503c\uff0c\u4e0d\u7528\u518d\u52a0.value<\/strong><\/li>\n<li><strong>\u5f88\u5c11\u89c1\u7684\u573a\u666f\uff08\u76d1\u542cref\u5bb9\u5668\u672c\u8eab\u7684\u5f15\u7528\u66ff\u6362\uff09\uff1a\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56deref\u53d8\u91cf\u540d\uff08\u4e0d\u80fd\u52a0.value\uff09\uff0c\u56de\u8c03\u91cc\u7684newVal\/oldVal\u662fref\u5bf9\u8c61\uff0c\u8bb0\u5f97\u52a0.value\u53d6\u5185\u5bb9<\/strong><\/li>\n<li><strong>\u7edd\u5bf9\u7981\u6b62\u7684\u573a\u666f\uff08\u76d1\u542c\u5177\u4f53\u503c\u53d8\u5316\u5374\u76f4\u63a5\u4f20.value\uff09\uff1a\u76f8\u5f53\u4e8e\u4f20\u4e86\u4e00\u4e2a\u6b7b\u503c\uff0c\u6c38\u8fdc\u4e0d\u4f1a\u89e6\u53d1\uff0c\u8c01\u5199\u8c01\u540e\u6094<\/strong><\/li>\n<\/ol>\n<p>\u6700\u540e\u518d\u8865\u5145\u4e00\u53e5\uff1a\u5982\u679c\u4f60\u7684\u9879\u76ee\u91cc\u7528\u4e86VueUse\u7684useWatch\uff0c\u5176\u5b9e\u89c4\u5219\u548cVue3\u539f\u751f\u7684watch\u662f\u5b8c\u5168\u4e00\u6837\u7684\uff0c\u4e0d\u7528\u62c5\u5fc3\u4e0d\u517c\u5bb9\uff0c\u5e0c\u671b\u4eca\u5929\u7684\u5185\u5bb9\u80fd\u5e2e\u5230\u6b63\u5728Vue3\u5751\u91cc\u6323\u624e\u7684\u4f60\uff0c\u5982\u679c\u8fd8\u6709\u5176\u4ed6Vue3\u7684\u95ee\u9898\uff0c\u6b22\u8fce\u968f\u65f6\u6765\u95ee\u6211\uff01<\/p>","pubDate":"Sun, 19 Apr 2026 20:01:11 +0800"},{"title":"Vue3\u5f00\u53d1\u522b\u53ea\u4f1a\u7528window.onresize\uff01watch\u76d1\u542cDOM\u5143\u7d20\u548c\u7a97\u53e3\u5c3a\u5bf8\u7684\u5b9e\u7528\u65b9\u6cd5\u6709\u54ea\u4e9b\u5751\u8981\u907f\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421762.html","description":"<p>\u65e5\u5e38\u505aPC\u7aef\u3001\u79fb\u52a8\u7aef\u9002\u914d\u6216\u8005\u54cd\u5e94\u5f0f\u7ec4\u4ef6\u7684\u65f6\u5019\uff0c\u5c3a\u5bf8\u53d8\u5316\u662f\u7ed5\u4e0d\u5f00\u7684\u9700\u6c42\uff0c\u5f88\u591a\u521a\u63a5\u89e6Vue3\u7684\u540c\u5b66\u53ef\u80fd\u4e0b\u610f\u8bc6\u8fd8\u662f\u6cbf\u7528Vue2\u6216\u8005\u539f\u751fJS\u7684\u8001\u601d\u8def\uff0c\u76f4\u63a5\u5199window.onresize\uff0c\u6b8a\u4e0d\u77e5\u8fd9\u4e2a\u65b9\u6cd5\u5728Vue3\u91cc\u6709\u6027\u80fd\u3001\u54cd\u5e94\u5f0f\u7ed1\u5b9a\u3001\u4f5c\u7528\u57df\u8fd9\u4e00\u5806\u9ebb\u70e6\u4e8b\uff1b\u4e5f\u6709\u4eba\u4f1a\u76f4\u63a5\u7528watch\u53bb\u76d1\u542cdata\u91cc\u5b58\u7684innerWidth\/innerHeight\uff0c\u4f46\u8981\u4e48\u6ca1\u5904\u7406\u9632\u6296\u8282\u6d41\u5361\u6210\u72d7\uff0c\u8981\u4e48\u7ec4\u4ef6\u9500\u6bc1\u6ca1\u6e05\u7406\u5185\u5b58\u51fabug\uff0c\u8981\u4e48\u60f3\u76d1\u542c\u7279\u5b9aDOM\u5bb9\u5668\u5374\u627e\u4e0d\u5230\u6b63\u786e\u7684\u76d1\u542c\u6e90\u3002<\/p>\n<p>\u4eca\u5929\u54b1\u4eec\u5c31\u628aVue3\u76d1\u542c\u5c3a\u5bf8\u7684\u4e24\u79cd\u6838\u5fc3\u573a\u666f\u2014\u2014<strong>\u5168\u5c40\u7a97\u53e3\u5c3a\u5bf8\u76d1\u542c<\/strong>\u548c<strong>\u5c40\u90e8DOM\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c<\/strong>\u2014\u2014\u62c6\u5f00\u6765\u804a\uff0c\u6bcf\u79cd\u573a\u666f\u90fd\u8bb2\u5b9e\u7528\u3001\u53ef\u76f4\u63a5\u590d\u5236\u7684\u65b9\u6848\uff0c\u91cd\u70b9\u8e29\u8e29\u65b0\u624b\u5bb9\u6613\u6389\u8fdb\u53bb\u7684\u90a3\u4e9b\u5751\uff0c\u6700\u540e\u518d\u603b\u7ed3\u4e00\u4e2a\u4e0d\u540c\u9700\u6c42\u4e0b\u7684\u65b9\u6848\u9009\u62e9\u6e05\u5355\uff0c\u4fdd\u8bc1\u770b\u5b8c\u5c31\u80fd\u4e0a\u624b\u3002<\/p>\n<h2>\u5168\u5c40\u7a97\u53e3\u5c3a\u5bf8\u76d1\u542c\uff1a\u522b\u518d\u5199window.onresize\u4e86\uff01<\/h2>\n<p>\u5148\u8bf4\u8bf4\u6700\u5e38\u89c1\u7684\u5168\u5c40\u7a97\u53e3\u573a\u666f,\u6bd4\u5982\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\u5bbd\u5ea6\u5207\u6362\u5e03\u5c40\u65ad\u70b9\uff0c\u6216\u8005\u9876\u90e8\u5bfc\u822a\u680f\u3001\u4fa7\u8fb9\u680f\u7684\u9ad8\u5ea6\u8c03\u6574\uff0c\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u76f4\u63a5\u5199window.onresize\uff1f\u54b1\u4eec\u4e3e\u4e2a\u4f8b\u5b50\u4f60\u5c31\u61c2\u4e86\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u274c Vue3\u91cc\u7684\u9519\u8bef\u5199\u6cd5\uff08\u867d\u7136\u80fd\u8dd1\uff0c\u4f46\u6bdb\u75c5\u4e00\u5806\uff09\n&lt;script setup&gt;\nimport { ref } from &#39;vue&#39;\nconst screenWidth = ref(window.innerWidth)\nwindow.onresize = () =&gt; {\n  screenWidth.value = window.innerWidth\n}\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u4ee3\u7801\u7684\u95ee\u9898\u80fd\u5217\u4e00\u5806\uff1a<\/p>\n<ol>\n<li><strong>\u4f5c\u7528\u57df\u51b2\u7a81<\/strong>\uff1a\u5982\u679c\u540c\u4e00\u4e2a\u9875\u9762\u6709\u597d\u51e0\u4e2a\u7ec4\u4ef6\u90fd\u5199\u4e86window.onresize\uff0c\u540e\u9762\u7684\u4f1a\u628a\u524d\u9762\u7684\u76f4\u63a5\u8986\u76d6\u6389\uff0c\u6bd4\u5982\u4fa7\u8fb9\u680f\u7684\u5e03\u5c40\u6ca1\u751f\u6548\uff0c\u53ea\u6709\u6700\u540e\u4e00\u4e2a\u52a0\u8f7d\u7684\u5e95\u90e8\u7ec4\u4ef6\u89e6\u53d1\u4e86\u903b\u8f91\u3002<\/li>\n<li><strong>\u6ca1\u6709\u9632\u6296\/\u8282\u6d41<\/strong>\uff1a\u7528\u6237\u62d6\u52a8\u7a97\u53e3\u8fb9\u7f18\u7684\u65f6\u5019\uff0cresize\u4e8b\u4ef6\u4f1a\u6bcf\u79d2\u89e6\u53d1\u51e0\u5341\u6b21\u751a\u81f3\u4e0a\u767e\u6b21\uff0c\u76f4\u63a5\u4fee\u6539ref\u6216\u8005\u6267\u884cDOM\u64cd\u4f5c\u7684\u8bdd\uff0c\u6d4f\u89c8\u5668\u4f1a\u75af\u72c2\u91cd\u7ed8\u91cd\u6392\uff0c\u9875\u9762\u5361\u5f97\u50cfPPT\u3002<\/li>\n<li><strong>\u7ec4\u4ef6\u9500\u6bc1\u6ca1\u6e05\u7406<\/strong>\uff1a\u9875\u9762\u8df3\u8f6c\u5230\u6ca1\u6709\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u8def\u7531\u65f6\uff0cresize\u7684\u56de\u8c03\u51fd\u6570\u8fd8\u5728\u5185\u5b58\u91cc\u8fd0\u884c\uff0c\u65f6\u95f4\u957f\u4e86\u4f1a\u5185\u5b58\u6cc4\u6f0f\uff0c\u624b\u673a\u7aef\u6216\u8005\u4f4e\u914d\u7535\u8111\u4e0a\u5c24\u5176\u660e\u663e\uff0c\u751a\u81f3\u4f1a\u76f4\u63a5\u95ea\u9000\u3002<\/li>\n<\/ol>\n<p>\u90a3\u6b63\u786e\u7684\u6253\u5f00\u65b9\u5f0f\u662f\u4ec0\u4e48\uff1f\u7528Vue3\u63d0\u4f9b\u7684<strong>addEventListener\u7ed3\u5408ref+onMounted+onUnmounted\uff0c\u518d\u52a0\u4e2a\u9632\u6296<\/strong>\u5c31\u884c\uff0c\u8fd9\u91cc\u7684\u9632\u6296\u53ef\u4ee5\u81ea\u5df1\u5199\u4e2a\u7b80\u5355\u7684\uff0c\u4e5f\u53ef\u4ee5\u7528lodash-es\u7684debounce\uff0c\u4e0d\u8fc7\u5f88\u591a\u9879\u76ee\u4e0d\u60f3\u5f15\u5165\u989d\u5916\u7684\u5c0f\u5de5\u5177\u5305\uff0c\u90a3\u54b1\u4eec\u5c31\u81ea\u5df1\u5199\u4e00\u4e2a\u901a\u7528\u7684\u9632\u6296\u51fd\u6570\uff1a<\/p>\n<h3>\u81ea\u5df1\u5199\u901a\u7528\u9632\u6296+\u539f\u751fAPI\u7ec4\u5408\u7684\u65b9\u6848<\/h3>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u2705 \u6b63\u786e\u5199\u6cd5\uff1a\u81ea\u5df1\u5199\u9632\u6296\uff0c\u624b\u52a8\u7ed1\u5b9a+\u6e05\u7406\u4e8b\u4ef6\n&lt;script setup&gt;\nimport { ref, onMounted, onUnmounted } from &#39;vue&#39;\n\/\/ \u901a\u7528\u9632\u6296\u51fd\u6570\uff0cdelay\u9ed8\u8ba4\u8bbe200ms\uff0c\u9002\u914d\u5927\u591a\u6570\u573a\u666f\nconst debounce = (fn, delay = 200) =&gt; {\n  let timer = null\n  return (...args) =&gt; {\n    if (timer) clearTimeout(timer)\n    timer = setTimeout(() =&gt; {\n      fn.apply(this, args)\n    }, delay)\n  }\n}\nconst screenWidth = ref(window.innerWidth)\nconst screenHeight = ref(window.innerHeight)\n\/\/ \u5b9a\u4e49\u66f4\u65b0\u5c3a\u5bf8\u7684\u51fd\u6570\nconst updateScreenSize = () =&gt; {\n  screenWidth.value = window.innerWidth\n  screenHeight.value = window.innerHeight\n}\n\/\/ \u7528\u9632\u6296\u5305\u88c5\u4e00\u4e0b\nconst debouncedUpdate = debounce(updateScreenSize)\nonMounted(() =&gt; {\n  \/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\u7ed1\u5b9a\u4e8b\u4ef6\n  window.addEventListener(&#39;resize&#39;, debouncedUpdate)\n  \/\/ \u53ef\u4ee5\u989d\u5916\u7ed1\u5b9aorientationchange\u4e8b\u4ef6\uff0c\u9002\u914d\u624b\u673a\u6a2a\u7ad6\u5c4f\u5207\u6362\n  window.addEventListener(&#39;orientationchange&#39;, debouncedUpdate)\n})\nonUnmounted(() =&gt; {\n  \/\/ \u7ec4\u4ef6\u5378\u8f7d\u524d\u5fc5\u987b\u6e05\u7406\u4e8b\u4ef6\uff01\uff01\u8fd9\u4e2a\u662f\u65b0\u624b\u6700\u5bb9\u6613\u5fd8\u7684\u5751\n  window.removeEventListener(&#39;resize&#39;, debouncedUpdate)\n  window.removeEventListener(&#39;orientationchange&#39;, debouncedUpdate)\n})\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u4e2a\u65b9\u6848\u57fa\u672c\u4e0a\u89e3\u51b3\u4e86\u524d\u9762\u63d0\u5230\u7684\u6240\u6709\u95ee\u9898\uff1a\u7528addEventListener\u907f\u514d\u8986\u76d6\uff0c\u81ea\u5df1\u5199\u7684\u9632\u6296\u63a7\u5236\u89e6\u53d1\u9891\u7387\uff0conMounted\/onUnmounted\u7ed1\u5b9a\u548c\u6e05\u7406\u4e8b\u4ef6\u9632\u5185\u5b58\u6cc4\u6f0f\uff0c\u989d\u5916\u52a0\u7684orientationchange\u9002\u914d\u624b\u673a\u7aef\u3002<\/p>\n<p>\u4e0d\u8fc7\u5982\u679c\u4f60\u9879\u76ee\u91cc\u5df2\u7ecf\u7528\u4e86lodash\u6216\u8005lodash-es\uff0c\u90a3\u76f4\u63a5\u7528debounce\u6216\u8005throttle\u5c31\u884c\uff0c\u4e0d\u7528\u81ea\u5df1\u5199\uff0c\u4f46\u8981\u6ce8\u610f\uff1alodash\u662fCommonJS\u89c4\u8303\uff0cVue3\u7684script setup\u662fES Module\uff0c\u6240\u4ee5\u8981\u5f15\u5165lodash-es\u7684debounce\uff0c\u4e0d\u7136\u6253\u5305\u7684\u65f6\u5019\u4f1a\u6709\u95ee\u9898\uff0c\u8fd8\u5f97\u989d\u5916\u914d\u7f6ebabel\uff0c\u53e6\u5916\u8981\u641e\u6e05\u695a\u9632\u6296\u548c\u8282\u6d41\u7684\u533a\u522b\uff1a\u9632\u6296\u662f\u201c\u7b49\u7528\u6237\u505c\u4e0b\u6765\u4e0d\u64cd\u4f5c\u4e86\u518d\u6267\u884c\u201d\uff0c\u6bd4\u5982\u641c\u7d22\u6846\u8f93\u5165\u3001\u7a97\u53e3\u8c03\u6574\uff1b\u8282\u6d41\u662f\u201c\u6bcf\u9694\u56fa\u5b9a\u65f6\u95f4\u6267\u884c\u4e00\u6b21\u201d\uff0c\u6bd4\u5982\u6eda\u52a8\u6761\u6eda\u52a8\u3001\u9f20\u6807\u79fb\u52a8\uff0c\u6240\u4ee5\u76d1\u542cresize\u4e00\u822c\u7528\u9632\u6296\u5c31\u884c\uff0c\u4f46\u5982\u679c\u662f\u90a3\u79cd\u9700\u8981\u5b9e\u65f6\u770b\u5230\u53d8\u5316\u7684\u573a\u666f\uff08\u6bd4\u5982\u505a\u4e00\u4e2a\u62d6\u62fd\u8c03\u6574\u7a97\u53e3\u5927\u5c0f\u7684\u9884\u89c8\u5de5\u5177\uff09\uff0c\u53ef\u4ee5\u628adelay\u8bbe\u5f97\u77ed\u4e00\u70b9\uff0c\u6bd4\u598250ms\uff0c\u6216\u8005\u6362\u6210throttle\u3002<\/p>\n<h3>\u7528VueUse\u7684useWindowSize\uff1a\u61d2\u4eba\u798f\u97f3\uff01<\/h3>\n<p>\u5982\u679c\u4f60\u7684\u9879\u76ee\u5141\u8bb8\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93,\u90a3VueUse\u7edd\u5bf9\u662fVue3\u5f00\u53d1\u7684\u795e\u5668\uff0c\u91cc\u9762\u5c01\u88c5\u4e86\u8d85\u591a\u5b9e\u7528\u7684Composition API\uff0c\u5176\u4e2d\u5c31\u6709\u4e13\u95e8\u76d1\u542c\u5168\u5c40\u7a97\u53e3\u5c3a\u5bf8\u7684useWindowSize\uff0c\u4eba\u5bb6\u5df2\u7ecf\u5e2e\u4f60\u628a\u9632\u6296\u3001\u4e8b\u4ef6\u7ed1\u5b9a\u6e05\u7406\u3001\u624b\u673a\u6a2a\u7ad6\u5c4f\u8fd9\u4e9b\u4e8b\u60c5\u90fd\u505a\u597d\u4e86\uff0c\u76f4\u63a5\u7528\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u2705 \u66f4\u7b80\u5355\u7684\u5199\u6cd5\uff1a\u7528VueUse\u7684useWindowSize\n&lt;script setup&gt;\nimport { useWindowSize } from &#39;@vueuse\/core&#39;\n\/\/ \u53ef\u4ee5\u76f4\u63a5\u4f20options\u914d\u7f6e\u9632\u6296\/\u8282\u6d41\nconst { width, height } = useWindowSize({\n  initialWidth: 1920, \/\/ \u521d\u59cb\u5bbd\u5ea6\uff0cSSR\u7684\u65f6\u5019\u6709\u7528\n  initialHeight: 1080, \/\/ \u521d\u59cb\u9ad8\u5ea6\n  listenOrientation: true, \/\/ \u76d1\u542c\u624b\u673a\u6a2a\u7ad6\u5c4f\uff0c\u9ed8\u8ba4true\n  debounce: 200, \/\/ \u9632\u6296\u65f6\u95f4\uff0c\u4e5f\u53ef\u4ee5\u4f20throttle\n})\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u4e2a\u65b9\u6848\u8d85\u7ea7\u7b80\u5355,\u4ee3\u7801\u91cf\u5c11\uff0c\u800c\u4e14\u7ecf\u8fc7\u4e86VueUse\u56e2\u961f\u7684\u4f18\u5316\uff0c\u6027\u80fd\u548c\u517c\u5bb9\u6027\u90fd\u6ca1\u95ee\u9898\uff0c\u9002\u5408\u5927\u591a\u6570\u61d2\u4eba\u5f00\u53d1\u8005\uff0c\u4e0d\u8fc7\u5982\u679c\u4f60\u9879\u76ee\u91cc\u4e0d\u60f3\u5f15\u5165\u592a\u591a\u7b2c\u4e09\u65b9\u5e93\uff0c\u90a3\u8fd8\u662f\u7528\u524d\u9762\u7684\u539f\u751fAPI\u7ec4\u5408\u65b9\u6848\u5427\u3002<\/p>\n<hr \/>\n<h2>\u5c40\u90e8DOM\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c\uff1a\u522b\u518d\u7528offsetWidth\/offsetHeight\u5b9a\u65f6\u8f6e\u8be2\u4e86\uff01<\/h2>\n<p>\u63a5\u4e0b\u6765\u662f\u53e6\u4e00\u79cd\u5e38\u89c1\u7684\u573a\u666f\uff1a\u76d1\u542c<strong>\u7279\u5b9aDOM\u5143\u7d20<\/strong>\u7684\u5c3a\u5bf8\u53d8\u5316\uff0c\u6bd4\u5982\u505a\u4e00\u4e2a\u53ef\u62d6\u62fd\u8c03\u6574\u5927\u5c0f\u7684\u5bb9\u5668\u3001\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u7684\u9ad8\u5ea6\u81ea\u9002\u5e94\u3001\u56fe\u7247\u52a0\u8f7d\u540e\u7236\u5bb9\u5668\u7684\u9ad8\u5ea6\u53d8\u5316\u7b49\u7b49\uff0c\u5f88\u591a\u521a\u63a5\u89e6\u8fd9\u4e2a\u9700\u6c42\u7684\u540c\u5b66\u53ef\u80fd\u4f1a\u7528setInterval\u6216\u8005setTimeout\u5b9a\u65f6\u53bb\u83b7\u53d6\u5143\u7d20\u7684offsetWidth\/offsetHeight\uff0c\u7136\u540e\u5bf9\u6bd4\u4e4b\u524d\u7684\u503c\uff0c\u5982\u679c\u4e0d\u4e00\u6837\u5c31\u6267\u884c\u903b\u8f91\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u274c \u5c40\u90e8DOM\u76d1\u542c\u7684\u9519\u8bef\u5199\u6cd5\uff1a\u5b9a\u65f6\u8f6e\u8be2\uff0c\u6027\u80fd\u5dee\uff0c\u4e0d\u591f\u7cbe\u51c6\n&lt;script setup&gt;\nimport { ref, onMounted, onUnmounted } from &#39;vue&#39;\nconst containerRef = ref(null)\nconst containerWidth = ref(0)\nconst containerHeight = ref(0)\nlet timer = null\nonMounted(() =&gt; {\n  \/\/ \u6bcf500ms\u8f6e\u8be2\u4e00\u6b21\n  timer = setInterval(() =&gt; {\n    if (containerRef.value) {\n      const newWidth = containerRef.value.offsetWidth\n      const newHeight = containerRef.value.offsetHeight\n      if (newWidth !== containerWidth.value || newHeight !== containerHeight.value) {\n        containerWidth.value = newWidth\n        containerHeight.value = newHeight\n        \/\/ \u6267\u884c\u4f60\u7684\u903b\u8f91\n      }\n    }\n  }, 500)\n})\nonUnmounted(() =&gt; {\n  \/\/ \u8bb0\u5f97\u6e05\u7406\u5b9a\u65f6\u5668\n  if (timer) clearInterval(timer)\n})\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u4e2a\u5199\u6cd5\u7684\u95ee\u9898\u4e5f\u5f88\u660e\u663e\uff1a<\/p>\n<ol>\n<li><strong>\u6027\u80fd\u5dee<\/strong>\uff1a\u4e0d\u7ba1\u5143\u7d20\u5c3a\u5bf8\u6709\u6ca1\u6709\u53d8\u5316\uff0c\u90fd\u4f1a\u6bcf500ms\u6267\u884c\u4e00\u6b21\u83b7\u53d6\u548c\u5bf9\u6bd4\u64cd\u4f5c\uff0c\u9891\u7e41\u8c03\u7528offsetWidth\/offsetHeight\u4f1a\u89e6\u53d1\u6d4f\u89c8\u5668\u7684\u91cd\u6392\uff08Reflow\uff09\uff0c\u56e0\u4e3aoffsetWidth\/offsetHeight\u662f\u9700\u8981\u6d4f\u89c8\u5668\u8ba1\u7b97\u5e03\u5c40\u7684\u5c5e\u6027\uff0c\u4e0d\u50cfclientWidth\/clientHeight\u90a3\u4e48\u201c\u8f7b\u91cf\u201d\uff0c\u4f46\u5373\u4f7f\u662fclientWidth\/clientHeight\uff0c\u9891\u7e41\u83b7\u53d6\u4e5f\u4e0d\u597d\u3002<\/li>\n<li><strong>\u4e0d\u591f\u7cbe\u51c6<\/strong>\uff1a\u5982\u679c\u5143\u7d20\u5c3a\u5bf8\u53d8\u5316\u7684\u95f4\u9694\u5c0f\u4e8e500ms\uff0c\u90a3\u5c31\u4f1a\u4e22\u5931\u53d8\u5316\uff0c\u6bd4\u5982\u56fe\u7247\u52a0\u8f7d\u540e\u7236\u5bb9\u5668\u9ad8\u5ea6\u77ac\u95f4\u4ece0\u53d8\u5230500px\uff0c\u4f46\u5b9a\u65f6\u5668\u4e0b\u4e00\u6b21\u8f6e\u8be2\u8981\u7b49499ms\uff0c\u7528\u6237\u5c31\u4f1a\u770b\u5230\u7a7a\u767d\u6216\u8005\u5e03\u5c40\u95ea\u70c1\uff1b\u5982\u679c\u628a\u8f6e\u8be2\u95f4\u9694\u8bbe\u5f97\u592a\u77ed\uff0c\u6bd4\u598250ms\uff0c\u90a3\u6027\u80fd\u95ee\u9898\u5c31\u66f4\u4e25\u91cd\u4e86\u3002<\/li>\n<li><strong>\u4e0d\u591f\u4f18\u96c5<\/strong>\uff1a\u5b9a\u65f6\u8f6e\u8be2\u662f\u4e00\u79cd\u201c\u4e3b\u52a8\u67e5\u8be2\u201d\u7684\u65b9\u5f0f\uff0c\u800c\u73b0\u4ee3\u6d4f\u89c8\u5668\u63d0\u4f9b\u4e86\u4e00\u79cd\u201c\u88ab\u52a8\u76d1\u542c\u201d\u7684\u65b9\u5f0f\u2014\u2014ResizeObserver\uff0c\u6027\u80fd\u66f4\u597d\uff0c\u66f4\u7cbe\u51c6\uff0c\u66f4\u4f18\u96c5\u3002<\/li>\n<\/ol>\n<p>\u90a3\u6b63\u786e\u7684\u6253\u5f00\u65b9\u5f0f\u662f\u4ec0\u4e48\uff1f\u7528<strong>ResizeObserver\u7ed3\u5408ref+onMounted+onUnmounted<\/strong>\u5c31\u884c\uff0c\u4e0d\u9700\u8981\u5f15\u5165\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93\uff0cResizeObserver\u662f\u73b0\u4ee3\u6d4f\u89c8\u5668\uff08Chrome 64+\u3001Firefox 69+\u3001Safari 13.1+\u3001Edge 79+\uff09\u539f\u751f\u652f\u6301\u7684API\uff0c\u4e13\u95e8\u7528\u6765\u76d1\u542cDOM\u5143\u7d20\u7684\u5c3a\u5bf8\u53d8\u5316\uff0c\u652f\u6301\u76d1\u542ccontent-box\u3001border-box\u3001padding-box\u4e09\u79cd\u76d2\u5b50\u6a21\u578b\uff0c\u6027\u80fd\u975e\u5e38\u597d\uff0c\u56e0\u4e3a\u5b83\u53ea\u4f1a\u5728\u5143\u7d20\u5c3a\u5bf8\u771f\u6b63\u53d8\u5316\u7684\u65f6\u5019\u89e6\u53d1\u56de\u8c03\uff0c\u800c\u4e14\u56de\u8c03\u662f\u5728\u6d4f\u89c8\u5668\u7684\u4e0b\u4e00\u6b21\u6e32\u67d3\u4e4b\u524d\u6267\u884c\u7684\uff0c\u4e0d\u4f1a\u9020\u6210\u5e03\u5c40\u95ea\u70c1\u3002<\/p>\n<h3>\u539f\u751fResizeObserver+Vue3\u7ec4\u5408\u7684\u65b9\u6848<\/h3>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u2705 \u6b63\u786e\u5199\u6cd5\uff1a\u7528ResizeObserver\u88ab\u52a8\u76d1\u542c\n&lt;script setup&gt;\nimport { ref, onMounted, onUnmounted } from &#39;vue&#39;\nconst containerRef = ref(null)\nconst containerWidth = ref(0)\nconst containerHeight = ref(0)\nlet resizeObserver = null\n\/\/ \u5b9a\u4e49\u66f4\u65b0\u5c3a\u5bf8\u7684\u51fd\u6570\nconst updateContainerSize = (entries) =&gt; {\n  \/\/ entries\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u56e0\u4e3aResizeObserver\u53ef\u4ee5\u540c\u65f6\u76d1\u542c\u591a\u4e2a\u5143\u7d20\n  const entry = entries[0]\n  \/\/ \u83b7\u53d6content-box\u7684\u5c3a\u5bf8\uff0c\u9ed8\u8ba4\u5c31\u662fcontent-box\n  const { width, height } = entry.contentRect\n  \/\/ \u5982\u679c\u8981\u83b7\u53d6border-box\u7684\u5c3a\u5bf8\uff0c\u53ef\u4ee5\u7528entry.borderBoxSize\n  \/\/ const borderBoxSize = entry.borderBoxSize[0] || entry.borderBoxSize\n  \/\/ const width = borderBoxSize.inlineSize\n  \/\/ const height = borderBoxSize.blockSize\n  \/\/ \u66f4\u65b0ref\n  containerWidth.value = width\n  containerHeight.value = height\n  \/\/ \u6267\u884c\u4f60\u7684\u903b\u8f91\uff0c\u6bd4\u5982\u8c03\u6574\u5b50\u5143\u7d20\u7684\u5e03\u5c40\n}\nonMounted(() =&gt; {\n  if (containerRef.value) {\n    \/\/ \u521d\u59cb\u5316ResizeObserver\n    resizeObserver = new ResizeObserver(updateContainerSize)\n    \/\/ \u76d1\u542c\u5bb9\u5668\u5143\u7d20\n    resizeObserver.observe(containerRef.value)\n  }\n})\nonUnmounted(() =&gt; {\n  \/\/ \u7ec4\u4ef6\u5378\u8f7d\u524d\u5fc5\u987b\u6e05\u7406ResizeObserver\uff01\uff01\u8fd9\u4e2a\u4e5f\u662f\u65b0\u624b\u6700\u5bb9\u6613\u5fd8\u7684\u5751\n  if (resizeObserver) {\n    \/\/ \u5148\u53d6\u6d88\u76d1\u542c\u5f53\u524d\u5143\u7d20\n    resizeObserver.unobserve(containerRef.value)\n    \/\/ \u518d\u65ad\u5f00ResizeObserver\u5b9e\u4f8b\uff0c\u91ca\u653e\u5185\u5b58\n    resizeObserver.disconnect()\n  }\n})\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u4e2a\u65b9\u6848\u5b8c\u7f8e\u89e3\u51b3\u4e86\u524d\u9762\u5b9a\u65f6\u8f6e\u8be2\u7684\u6240\u6709\u95ee\u9898\uff1a\u88ab\u52a8\u76d1\u542c\uff0c\u53ea\u6709\u5143\u7d20\u5c3a\u5bf8\u53d8\u5316\u7684\u65f6\u5019\u624d\u89e6\u53d1\uff0c\u6027\u80fd\u597d\uff1b\u89e6\u53d1\u53ca\u65f6\uff0c\u4e0d\u4f1a\u4e22\u5931\u53d8\u5316\uff0c\u4e0d\u4f1a\u9020\u6210\u5e03\u5c40\u95ea\u70c1\uff1b\u652f\u6301\u591a\u79cd\u76d2\u5b50\u6a21\u578b\uff0c\u975e\u5e38\u7075\u6d3b\uff1b\u4ee3\u7801\u91cf\u4e5f\u4e0d\u591a\uff0c\u5bb9\u6613\u7406\u89e3\u3002<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u6709\u51e0\u4e2a\u65b0\u624b\u5bb9\u6613\u8e29\u7684\u5c0f\u5751,\u54b1\u4eec\u5355\u72ec\u8bf4\u4e00\u4e0b\uff1a<\/p>\n<ol>\n<li><strong>entries\u662f\u6570\u7ec4<\/strong>\uff1a\u56e0\u4e3aResizeObserver\u7684\u6784\u9020\u51fd\u6570\u53ef\u4ee5\u540c\u65f6\u89c2\u5bdf\u591a\u4e2aDOM\u5143\u7d20\uff0c\u6240\u4ee5\u56de\u8c03\u51fd\u6570\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570entries\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u6bcf\u4e2a\u5143\u7d20\u5bf9\u5e94\u4e00\u4e2a\u88ab\u89c2\u5bdf\u7684\u5143\u7d20\u7684\u4fe1\u606f\uff0c\u5982\u679c\u4f60\u53ea\u89c2\u5bdf\u4e00\u4e2a\u5143\u7d20\uff0c\u76f4\u63a5\u53d6entries[0]\u5c31\u884c\u3002<\/li>\n<li><strong>contentRect\u548cborderBoxSize\/paddingBoxSize\u7684\u533a\u522b<\/strong>\uff1acontentRect\u662f\u53ea\u8bfb\u7684\uff0c\u8fd4\u56de\u7684\u662fcontent-box\u7684\u5c3a\u5bf8\uff0c\u5355\u4f4d\u662fpx\uff0c\u800c\u4e14\u4f1a\u56db\u820d\u4e94\u5165\u5230\u6574\u6570\uff1bborderBoxSize\u548cpaddingBoxSize\u662fResizeObserver Level 2\u65b0\u589e\u7684\u5c5e\u6027\uff0c\u8fd4\u56de\u7684\u662f\u6570\u7ec4\uff08\u4e3a\u4e86\u517c\u5bb9\u591a\u5217\u5e03\u5c40\uff09\uff0c\u6bcf\u4e2a\u5143\u7d20\u6709inlineSize\u548cblockSize\u4e24\u4e2a\u5c5e\u6027\uff0c\u5355\u4f4d\u4e5f\u662fpx\uff0c\u4f46\u4e0d\u4f1a\u56db\u820d\u4e94\u5165\uff0c\u662f\u6d6e\u70b9\u6570\uff0c\u66f4\u7cbe\u51c6\uff0c\u5982\u679c\u4f60\u9700\u8981\u652f\u6301\u8001\u7248\u672c\u7684\u6d4f\u89c8\u5668\uff08\u6bd4\u5982Chrome 64-87\uff09\uff0c\u90a3\u8fd8\u662f\u7528contentRect\u5427\uff0c\u56e0\u4e3a\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4e0d\u652f\u6301borderBoxSize\u548cpaddingBoxSize\uff1b\u5982\u679c\u53ea\u9700\u8981\u652f\u6301\u73b0\u4ee3\u6d4f\u89c8\u5668\uff0c\u90a3\u63a8\u8350\u7528borderBoxSize\/paddingBoxSize\uff0c\u66f4\u7cbe\u51c6\u3002<\/li>\n<li><strong>SSR\u7684\u65f6\u5019\u8981\u6ce8\u610f<\/strong>\uff1aResizeObserver\u662f\u6d4f\u89c8\u5668\u7aef\u7684API\uff0c\u5728Node.js\u73af\u5883\u4e0b\uff08\u6bd4\u5982SSR\u6e32\u67d3\u7684\u65f6\u5019\uff09\u662f\u4e0d\u5b58\u5728\u7684\uff0c\u6240\u4ee5\u5982\u679c\u4f60\u7684\u9879\u76ee\u662fSSR\u7684\uff0c\u90a3\u8981\u52a0\u4e2a\u5224\u65ad\uff0c\u53ea\u6709\u5728\u6d4f\u89c8\u5668\u7aef\u7684\u65f6\u5019\u624d\u521d\u59cb\u5316ResizeObserver\uff1a<pre class=\"brush:javascript;toolbar:false\">onMounted(() =&gt; {\nif (typeof window !== &#39;undefined&#39; &amp;&amp; containerRef.value) {\n \/\/ \u521d\u59cb\u5316ResizeObserver\u7684\u4ee3\u7801\n}\n})<\/pre>\n<\/li>\n<\/ol>\n<h3>\u7528VueUse\u7684useResizeObserver\uff1a\u518d\u6b21\u5b89\u5229VueUse\uff01<\/h3>\n<p>\u548cuseWindowSize\u4e00\u6837,VueUse\u4e5f\u5c01\u88c5\u4e86\u4e13\u95e8\u76d1\u542c\u5c40\u90e8DOM\u5143\u7d20\u5c3a\u5bf8\u7684useResizeObserver\uff0c\u4eba\u5bb6\u5df2\u7ecf\u5e2e\u4f60\u628a\u76d2\u5b50\u6a21\u578b\u9009\u62e9\u3001\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u5904\u7406\u3001SSR\u5904\u7406\u3001\u5b9e\u4f8b\u6e05\u7406\u8fd9\u4e9b\u4e8b\u60c5\u90fd\u505a\u597d\u4e86\uff0c\u76f4\u63a5\u7528\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u2705 \u66f4\u7b80\u5355\u7684\u5199\u6cd5\uff1a\u7528VueUse\u7684useResizeObserver\n&lt;script setup&gt;\nimport { ref } from &#39;vue&#39;\nimport { useResizeObserver } from &#39;@vueuse\/core&#39;\nconst containerRef = ref(null)\nconst containerWidth = ref(0)\nconst containerHeight = ref(0)\n\/\/ \u76f4\u63a5\u4f20ref\u548c\u56de\u8c03\u51fd\u6570\nuseResizeObserver(containerRef, (entries) =&gt; {\n  const entry = entries[0]\n  const { width, height } = entry.contentRect\n  containerWidth.value = width\n  containerHeight.value = height\n  \/\/ \u6267\u884c\u4f60\u7684\u903b\u8f91\n})\n&lt;\/script&gt;<\/pre>\n<p>\u4f60\u770b,\u8fd9\u4e2a\u4ee3\u7801\u91cf\u662f\u4e0d\u662f\u66f4\u5c11\u4e86\uff1f\u800c\u4e14VueUse\u7684useResizeObserver\u8fd8\u652f\u6301\u540c\u65f6\u76d1\u542c\u591a\u4e2a\u5143\u7d20\uff0c\u53ea\u9700\u8981\u4f20\u4e00\u4e2a\u6570\u7ec4\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">const container1Ref = ref(null)\nconst container2Ref = ref(null)\nuseResizeObserver([container1Ref, container2Ref], (entries) =&gt; {\n  entries.forEach((entry) =&gt; {\n    console.log(entry.target, entry.contentRect)\n  })\n})<\/pre>\n<p>\u8fd9\u4e2a\u65b9\u6848\u8d85\u7ea7\u9002\u5408\u61d2\u4eba\u5f00\u53d1\u8005,\u518d\u6b21\u5f3a\u70c8\u5b89\u5229VueUse\uff01<\/p>\n<hr \/>\n<h2>\u4e0d\u540c\u9700\u6c42\u4e0b\u7684\u65b9\u6848\u9009\u62e9\u6e05\u5355<\/h2>\n<p>\u6700\u540e\u54b1\u4eec\u603b\u7ed3\u4e00\u4e2a\u4e0d\u540c\u9700\u6c42\u4e0b\u7684\u65b9\u6848\u9009\u62e9\u6e05\u5355,\u65b9\u4fbf\u5927\u5bb6\u5feb\u901f\u627e\u5230\u9002\u5408\u81ea\u5df1\u7684\u65b9\u6848\uff1a\n| \u9700\u6c42\u573a\u666f                     | \u662f\u5426\u5141\u8bb8\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93 | \u63a8\u8350\u65b9\u6848                                  |\n|------------------------------|----------------------|-------------------------------------------|\n| \u5168\u5c40\u7a97\u53e3\u5c3a\u5bf8\u76d1\u542c\uff08PC\/\u79fb\u52a8\u7aef\uff09 | \u5426                   | \u539f\u751faddEventListener+ref+onMounted+onUnmounted+\u81ea\u5df1\u5199\u7684\u9632\u6296 |\n| \u5168\u5c40\u7a97\u53e3\u5c3a\u5bf8\u76d1\u542c\uff08PC\/\u79fb\u52a8\u7aef\uff09 | \u662f                   | VueUse\u7684useWindowSize                     |\n| \u5c40\u90e8DOM\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c           | \u5426                   | \u539f\u751fResizeObserver+ref+onMounted+onUnmounted |\n| \u5c40\u90e8DOM\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c           | \u662f                   | VueUse\u7684useResizeObserver                 |\n| \u9700\u8981\u652f\u6301\u8001\u7248\u672c\u6d4f\u89c8\u5668\uff08Chrome&lt;64\uff09 | \u662f\/\u5426                | \u5b9a\u65f6\u8f6e\u8be2\uff08\u4f46\u8981\u6ce8\u610f\u6027\u80fd\u548c\u7cbe\u51c6\u5ea6\uff09+ \u53ef\u4ee5\u5c1d\u8bd5\u5f15\u5165resize-observer-polyfill |<\/p>\n<p>\u8fd9\u91cc\u518d\u8865\u5145\u4e00\u4e0b,\u5982\u679c\u4f60\u7684\u9879\u76ee\u9700\u8981\u652f\u6301\u8001\u7248\u672c\u7684\u6d4f\u89c8\u5668\uff08\u6bd4\u5982Chrome&lt;64\u3001Firefox&lt;69\u3001Safari&lt;13.1\uff09\uff0c\u90a3\u539f\u751f\u7684ResizeObserver\u662f\u7528\u4e0d\u4e86\u7684\uff0c\u8fd9\u65f6\u5019\u4f60\u53ef\u4ee5\u9009\u62e9\u4e24\u79cd\u65b9\u6848\uff1a<\/p>\n<ol>\n<li><strong>\u5b9a\u65f6\u8f6e\u8be2<\/strong>\uff1a\u8fd9\u4e2a\u65b9\u6848\u4e0d\u9700\u8981\u5f15\u5165\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93\uff0c\u4f46\u8981\u6ce8\u610f\u6027\u80fd\u548c\u7cbe\u51c6\u5ea6\uff0c\u5efa\u8bae\u628a\u8f6e\u8be2\u95f4\u9694\u8bbe\u4e3a100-200ms\uff0c\u800c\u4e14\u53ea\u5728\u5143\u7d20\u53ef\u80fd\u53d8\u5316\u7684\u65f6\u5019\u5f00\u542f\u8f6e\u8be2\uff0c\u6bd4\u5982\u56fe\u7247\u52a0\u8f7d\u7684\u65f6\u5019\u3001\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u8f93\u5165\u7684\u65f6\u5019\uff0c\u5176\u4ed6\u65f6\u5019\u53ef\u4ee5\u5173\u95ed\u8f6e\u8be2\u3002<\/li>\n<li><strong>\u5f15\u5165resize-observer-polyfill<\/strong>\uff1a\u8fd9\u4e2apolyfill\u662f\u7531Google\u7684\u4e00\u4f4d\u5de5\u7a0b\u5e08\u5199\u7684\uff0c\u517c\u5bb9\u6027\u975e\u5e38\u597d\uff0c\u652f\u6301IE11+\uff0c\u800c\u4e14\u6027\u80fd\u4e5f\u4e0d\u9519\uff0c\u548c\u539f\u751f\u7684ResizeObserver\u7528\u6cd5\u51e0\u4e4e\u4e00\u6837\uff0c\u53ea\u9700\u8981\u5148\u5f15\u5165polyfill\u5c31\u884c\uff1a<pre class=\"brush:javascript;toolbar:false\">\/\/ \u5148\u5f15\u5165polyfill\nimport ResizeObserver from &#39;resize-observer-polyfill&#39;\n\/\/ \u7136\u540e\u5c31\u53ef\u4ee5\u50cf\u539f\u751f\u7684\u4e00\u6837\u7528\u4e86<\/pre>\n<\/li>\n<\/ol>\n<hr \/>\n<h2>\u6700\u540e\u7684\u6700\u540e\uff1a\u65b0\u624b\u907f\u5751\u603b\u7ed3<\/h2>\n<ol>\n<li><strong>\u5168\u5c40\u7a97\u53e3\u76d1\u542c\u522b\u7528window.onresize\uff0c\u8981\u7528addEventListener<\/strong>\uff1a\u907f\u514d\u4f5c\u7528\u57df\u51b2\u7a81\u3002<\/li>\n<li><strong>\u4e0d\u7ba1\u662f\u5168\u5c40\u8fd8\u662f\u5c40\u90e8\u76d1\u542c\uff0c\u90fd\u8981\u52a0\u9632\u6296\/\u8282\u6d41<\/strong>\uff1a\u5168\u5c40\u76d1\u542c\u7528\u9632\u6296\uff0c\u6eda\u52a8\u6761\u3001\u9f20\u6807\u79fb\u52a8\u7528\u8282\u6d41\uff0c\u63a7\u5236\u89e6\u53d1\u9891\u7387\uff0c\u907f\u514d\u6027\u80fd\u95ee\u9898\u3002<\/li>\n<li><strong>\u4e0d\u7ba1\u662f\u5168\u5c40\u8fd8\u662f\u5c40\u90e8\u76d1\u542c\uff0c\u7ec4\u4ef6\u5378\u8f7d\u524d\u90fd\u8981\u6e05\u7406<\/strong>\uff1a\u5168\u5c40\u76d1\u542c\u6e05\u7406addEventListener\uff0c\u5c40\u90e8\u76d1\u542c\u6e05\u7406ResizeObserver\u7684unobserve\u548cdisconnect\uff0c\u907f\u514d\u5185\u5b58\u6cc4\u6f0f\u3002<\/li>\n<li><strong>\u5c40\u90e8DOM\u76d1\u542c\u522b\u7528\u5b9a\u65f6\u8f6e\u8be2\uff0c\u8981\u7528ResizeObserver<\/strong>\uff1a\u88ab\u52a8\u76d1\u542c\uff0c\u6027\u80fd\u597d\uff0c\u66f4\u7cbe\u51c6\uff0c\u66f4\u4f18\u96c5\u3002<\/li>\n<li><strong>\u5982\u679c\u5141\u8bb8\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93\uff0c\u5f3a\u70c8\u5b89\u5229VueUse<\/strong>\uff1a\u91cc\u9762\u5c01\u88c5\u4e86\u8d85\u591a\u5b9e\u7528\u7684Composition API\uff0c\u4ee3\u7801\u91cf\u5c11\uff0c\u6027\u80fd\u597d\uff0c\u517c\u5bb9\u6027\u597d\uff0c\u80fd\u5927\u5927\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002<\/li>\n<\/ol>\n<p>\u597d\u5566,\u4eca\u5929\u5173\u4e8eVue3 watch resize\u7684\u5b9e\u7528\u65b9\u6cd5\u548c\u907f\u5751\u6307\u5357\u5c31\u804a\u5230\u8fd9\u91cc\u5566\uff0c\u5e0c\u671b\u80fd\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01\u5982\u679c\u5927\u5bb6\u8fd8\u6709\u4ec0\u4e48\u95ee\u9898\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u54e6\uff01<\/p>","pubDate":"Sun, 19 Apr 2026 14:01:17 +0800"},{"title":"Vue3\u600e\u4e48\u76d1\u542cPinia\u6216\u8005Vuex store\u91cc\u7684\u6df1\u5c42\u5d4c\u5957\u503c\uff1f\u6709\u54ea\u4e9b\u5751\u8981\u907f\u5f00\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421761.html","description":"<p>\u5927\u5bb6\u597d\u5440,\u6211\u662f\u6700\u8fd1\u5728\u5e2e\u56e2\u961f\u91cd\u6784Vue2\u8001\u9879\u76ee\u8e29\u4e86\u65e0\u6570Pinia\/Vuex watch\u5751\u7684\u524d\u7aef\u5c0f\u6768\uff0c\u8fd9\u6bb5\u65f6\u95f4\u88ab\u540c\u4e8b\u8ffd\u7740\u95ee\u4e86\u4e0d\u4e0b\u5341\u6b21\u201c\u6df1\u5c42\u6570\u636e\u4e3a\u4ec0\u4e48watch\u6ca1\u53cd\u5e94\uff1f\u201d\u201cwatchImmediate\u660e\u660e\u52a0\u4e86\uff0c\u7ec4\u4ef6\u6302\u8f7d\u8fd8\u662f\u6ca1\u62ff\u5230\u503c\uff1f\u201d\u8fd9\u7c7b\u95ee\u9898\uff0c\u5e72\u8106\u6574\u7406\u6210\u4e00\u7bc7\u8d85\u8be6\u7ec6\u7684\u95ee\u7b54\u5f0f\u5e72\u8d27\uff0c\u628a\u8e29\u8fc7\u7684\u5751\u3001\u6b63\u786e\u7684\u5199\u6cd5\u3001\u6027\u80fd\u4f18\u5316\u7684\u5c0f\u6280\u5de7\u5168\u90fd\u8bf4\u900f\u3002<\/p>\n<p>\u9996\u5148\u5148\u8bf4\u660e\u54e6,\u4e0d\u7ba1\u4f60\u7528\u7684\u662f\u73b0\u5728\u5927\u5bb6\u66f4\u63a8\u8350\u7684Pinia\uff08\u6bd5\u7adfVue3\u5b98\u65b9\u4eb2\u513f\u5b50\uff0c2024\u5e74GitHub Star\u5df2\u7ecf\u5febVuex\u7684\u4e94\u500d\u4e86\uff0c\u800c\u4e14Vuex5\u5b98\u65b9\u4e5f\u76f4\u63a5\u5e9f\u5f03\u63d0\u4e86Pinia\u7684\u66ff\u4ee3\u65b9\u6848\uff09\uff0c\u8fd8\u662f\u8fd8\u5728\u7ef4\u62a4\u8001\u9879\u76ee\u7528\u5230\u7684Vuex4\uff0c\u57fa\u7840\u7684\u76d1\u542c\u903b\u8f91\u662f\u4e00\u6837\u7684\u2014\u2014\u6838\u5fc3\u90fd\u662f\u5229\u7528Vue3\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\uff0c\u4e0d\u7ba1\u662fProxy\u4ee3\u7406\u7684state\u8fd8\u662fref\/reactive\u5305\u88f9\u7684state\uff0c\u672c\u8d28\u90fd\u662fgetter\u6536\u96c6\u4f9d\u8d56\u3001setter\u89e6\u53d1\u66f4\u65b0\uff0c\u4f46\u5177\u4f53\u5230\u5199\u6cd5\u7ec6\u8282\u3001\u6df1\u5c42\u503c\u76d1\u542c\u3001\u8fd8\u6709\u4e0d\u540c\u7c7b\u578bstore\u7684\u9002\u914d\uff0c\u5dee\u5f02\u53ef\u5c31\u5927\u4e86\u3002<\/p>\n<h2>\u4e3a\u4ec0\u4e48\u660e\u660estore\u91cc\u7684\u6df1\u5c42\u503c\u53d8\u4e86\uff0cwatch\u5374\u6ca1\u89e6\u53d1\uff1f<\/h2>\n<p>\u8fd9\u7edd\u5bf9\u662f\u6700\u591a\u4eba\u9047\u5230\u7684\u7b2c\u4e00\u4e2a\u5927\u5751\uff01\u5148\u522b\u6025\u7740\u9a82Vue\u7684\u54cd\u5e94\u5f0f\uff0c\u5148\u56de\u5fc6\u4e0b\u4f60\u662f\u4e0d\u662f\u8e29\u4e86\u8fd9\u51e0\u4e2a\u5e38\u89c1\u7684\u96f7\uff1a<\/p>\n<h3>\u96f7\u533a1\uff1a\u76f4\u63a5\u4fee\u6539\u4e86Pinia\/Vuex\u7684state\uff0c\u4e0d\u662f\u901a\u8fc7getter\u6216\u8005mutation\/action\uff1f<\/h3>\n<p>\u4e0d\u5bf9\u4e0d\u5bf9,Vuex4\u8981\u6c42\u662f\u5fc5\u987b\u901a\u8fc7mutation\u540c\u6b65\u6539state\u3001action\u5f02\u6b65\u6539mutation\uff0c\u5426\u5219Vue DevTools\u6ca1\u6cd5\u8ffd\u8e2a\uff0c\u4e0d\u8fc7\u4e25\u683c\u6765\u8bf4Vuex4\u672c\u8eab\u7684\u54cd\u5e94\u5f0f\u8fd8\u662f\u4f1a\u751f\u6548\uff1f\u54e6\u4e0d\u5bf9\u4e0d\u5bf9\uff0cVuex3\u8001\u7248\u672c\u5982\u679c\u4e0d\u7528Vue.set\/this.$set\u6216\u8005Object.assign\u66ff\u6362\u6574\u4e2a\u5bf9\u8c61\uff0c\u6df1\u5c42\u5d4c\u5957\u975e\u54cd\u5e94\u5f0f\u521d\u59cb\u5316\u7684\u5c5e\u6027\u624d\u4e0d\u4f1a\u66f4\u65b0\uff0c\u4f46Vue3\u4e0d\u7ba1\u662fVuex4\u8fd8\u662fPinia\uff0cstate\u90fd\u662f\u9ed8\u8ba4\u7528Proxy\u4ee3\u7406\u7684\uff0c\u7406\u8bba\u4e0a\u76f4\u63a5\u4fee\u6539\u6df1\u5c42\u5c5e\u6027\u4e5f\u80fd\u89e6\u53d1\u66f4\u65b0\u2014\u2014\u4f46\u5c0f\u6768\u8fd9\u91cc\u771f\u7684\u771f\u7684\u5efa\u8bae\u4f60\u522b\u8fd9\u4e48\u5e72\uff01\u4e0d\u7ba1\u662f\u53ef\u7ef4\u62a4\u6027\u3001\u4ee3\u7801\u89c4\u8303\u8fd8\u662fVue DevTools\u7684\u8c03\u8bd5\u4f53\u9a8c\uff0cPinia\u5c31\u7528action\/mutation\uff08Pinia\u5176\u5b9eaction\u4e5f\u53ef\u4ee5\u76f4\u63a5\u6539\uff0c\u4e0d\u9700\u8981\u5355\u72ecmutation\uff0c\u7b80\u5316\u4e86\u6d41\u7a0b\uff0c\u8fd9\u70b9\u6bd4Vuex4\u723d\u5f88\u591a\uff09\uff0cVuex4\u5c31\u4e25\u683c\u8d70\u540c\u6b65mutation\u5f02\u6b65action\u7684\u8def\u5b50\uff0c\u8fd9\u662f\u4e3a\u4e86\u56e2\u961f\u534f\u4f5c\u548c\u540e\u7eed\u6392\u67e5\u95ee\u9898\u3002<\/p>\n<h3>\u96f7\u533a2\uff1awatch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u5199\u7684\u662fstore.xxx\u6df1\u5c42\u5c5e\u6027\u7684\u8d4b\u503c\uff0c\u4e0d\u662f\u51fd\u6570\u8fd4\u56de\u503c\uff1f<\/h3>\n<p>\u8fd9\u624d\u662f90%\u7684\u65b0\u624b\u8e29\u7684\u6700\u5927\u7684\u96f7\uff01\u4e3e\u4e2a\u53cd\u4f8b\uff0c\u6bd4\u5982\u4f60Pinia\u91cc\u7684userStore\u6709\u4e2aprofile\u5c5e\u6027\uff0c\u662f\u4e2a\u5bf9\u8c61\uff0c\u91cc\u9762\u6709\u4e2aaddress\u5c5e\u6027\uff0c\u4f60\u76f4\u63a5\u8fd9\u4e48\u5199\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u9519\u8bef\u5199\u6cd5\uff01\nwatch(userStore.profile.address, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u5730\u5740\u53d8\u4e86&#39;, newVal)\n})<\/pre>\n<p>\u4e3a\u4ec0\u4e48\u9519\uff1f\u56e0\u4e3aVue3\u7684watch\u7b2c\u4e00\u4e2a\u53c2\u6570\u5982\u679c\u662f\u666e\u901a\u7684\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5e03\u5c14\u8fd9\u79cd\u57fa\u672c\u7c7b\u578b\u7684\u53d8\u91cf\uff0c\u6216\u8005\u662f\u76f4\u63a5\u8bbf\u95ee\u7684\u6df1\u5c42\u5c5e\u6027\u7684<strong>\u503c\u672c\u8eab<\/strong>\uff08\u6bd4\u5982\u4e0a\u9762\u7684userStore.profile.address\uff0c\u5982\u679c\u521d\u59cb\u5316\u662f\u4e2a\u7a7a\u5b57\u7b26\u4e32\"\"\uff0c\u90a3watch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u5c31\u662f\"\"\u8fd9\u4e2a\u5b57\u9762\u91cf\uff0c\u6839\u672c\u4e0d\u4f1a\u548cstore\u91cc\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u5efa\u7acb\u4f9d\u8d56\u5173\u7cfb\uff01\uff09\uff0c\u90a3\u5b83\u53ea\u4f1a\u5728\u7ec4\u4ef6\u521d\u59cb\u5316\u7b2c\u4e00\u6b21\u89e3\u6790\u7684\u65f6\u5019\u770b\u4e00\u773c\u8fd9\u4e2a\u503c\uff0c\u4e4b\u540e\u4e0d\u7ba1store\u91cc\u600e\u4e48\u53d8\uff0c\u90fd\u4e0d\u4f1a\u89e6\u53d1\u66f4\u65b0\u2014\u2014\u56e0\u4e3a\u5b57\u9762\u91cf\u672c\u8eab\u4e0d\u662f\u54cd\u5e94\u5f0f\u7684\uff0cwatch\u6ca1\u6cd5\u8ffd\u8e2a\u5b83\u7684\u53d8\u5316\u3002<\/p>\n<p>\u90a3\u6b63\u786e\u7684\u5199\u6cd5\u662f\u4ec0\u4e48\uff1f\u628a\u7b2c\u4e00\u4e2a\u53c2\u6570\u5199\u6210<strong>\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u8fd9\u4e2a\u6df1\u5c42\u5c5e\u6027\u7684\u8bbf\u95ee\u8def\u5f84<\/strong>\uff01\u6216\u8005\u5982\u679c\u662fPinia\u91cc\u76f4\u63a5\u5bfc\u51fa\u7684useStore\u91cc\u7684ref\u5305\u88f9\u7684state\uff0c\u90a3\u76f4\u63a5\u4f20ref\u4e5f\u53ef\u4ee5\uff0c\u4f46\u6df1\u5c42\u5c5e\u6027\u4e0d\u7ba1\u662f\u8c01\uff0c\u90fd\u5f97\u7528\u7bad\u5934\u51fd\u6570\uff01\u518d\u4e3e\u51e0\u4e2a\u4e0d\u540c\u573a\u666f\u7684\u6b63\u786e\u4f8b\u5b50\uff1a<\/p>\n<h4>\u573a\u666f1\uff1aPinia\u91cc\u76f4\u63a5\u76d1\u542c\u9876\u5c42\/\u6df1\u5c42\u5c5e\u6027<\/h4>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u5148\u5f15\u5165useUserStore\nimport { useUserStore } from &#39;@\/stores\/user&#39;\n\/\/ \u7ec4\u4ef6\u91cc\u83b7\u53d6store\u5b9e\u4f8b\nconst userStore = useUserStore()\n\/\/ \u76d1\u542c\u9876\u5c42\u57fa\u672c\u7c7b\u578b\uff1a\u53ef\u4ee5\u76f4\u63a5\u4f20userStore.username\u5417\uff1f\n\/\/ \u7406\u8bba\u4e0aPinia 2.x+\u7684useStore\u5982\u679c\u662fsetup\u5199\u6cd5\uff0c\u5bfc\u51fa\u7684state\u662fref\u5305\u88f9\u7684\uff0c\u90a3\u76f4\u63a5\u4f20\u662f\u53ef\u4ee5\u7684\n\/\/ \u4f46\u4e3a\u4e86\u7edf\u4e00\u5199\u6cd5\uff0c\u4e0d\u7ba1\u9876\u5c42\u8fd8\u662f\u6df1\u5c42\uff0c\u90fd\u7528\u7bad\u5934\u51fd\u6570\u6700\u7a33\u59a5\uff0c\u907f\u514dsetup\/option\u5199\u6cd5\u6df7\u7528\u51fa\u95ee\u9898\nwatch(\n  () =&gt; userStore.username, \/\/ \u9876\u5c42\u57fa\u672c\u7c7b\u578b\u7bad\u5934\u51fd\u6570\u5199\u6cd5\n  (newVal, oldVal) =&gt; {\n    console.log(&#39;\u7528\u6237\u540d\u53d8\u4e86&#39;, newVal, oldVal)\n  }\n)\n\/\/ \u76d1\u542c\u6df1\u5c42\u5bf9\u8c61\u5c5e\u6027\uff1a\u5fc5\u987b\u7528\u7bad\u5934\u51fd\u6570\uff01\nwatch(\n  () =&gt; userStore.profile.address, \/\/ \u6df1\u5c42\u5bf9\u8c61\u5c5e\u6027\n  (newVal, oldVal) =&gt; {\n    console.log(&#39;\u7528\u6237\u5730\u5740\u53d8\u4e86&#39;, newVal, oldVal)\n  }\n)\n\/\/ \u76d1\u542c\u6574\u4e2a\u6df1\u5c42\u5bf9\u8c61\uff08\u6bd4\u5982profile\uff09\u7684\u67d0\u4e2a\u5c5e\u6027\u53d8\u5316\uff0c\u6216\u8005\u6574\u4e2a\u5bf9\u8c61\u5f15\u7528\u53d8\u5316\uff1f\n\/\/ \u5982\u679c\u53ea\u60f3\u76d1\u542c\u5f15\u7528\u53d8\u5316\uff08\u6bd4\u5982\u6574\u4e2aprofile\u88ab\u91cd\u65b0\u8d4b\u503c\u4e86\uff09\uff0c\u76f4\u63a5\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u6574\u4e2a\u5bf9\u8c61\u5c31\u884c\n\/\/ \u5982\u679c\u60f3\u76d1\u542c\u5bf9\u8c61\u91cc\u7684\u4efb\u610f\u4e00\u4e2a\u5c5e\u6027\u53d8\u5316\uff08\u4e0d\u7ba1\u662f\u7b2c\u4e00\u5c42\u8fd8\u662f\u7b2c\u4e09\u5c42\uff09\uff0c\u5c31\u5f97\u52a0deep: true<\/pre>\n<h4>\u573a\u666f2\uff1aVuex4\u91cc\u7684\u76d1\u542c<\/h4>\n<p>Vuex4\u7684store.state\u672c\u8d28\u662f\u4e00\u4e2a\u7528reactive\u5305\u88f9\u7684\u5bf9\u8c61\uff0c\u6240\u4ee5\u4e0d\u7ba1\u9876\u5c42\u8fd8\u662f\u6df1\u5c42\uff0c\u90fd\u5fc5\u987b\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u8bbf\u95ee\u8def\u5f84\uff0c\u800c\u4e14Vuex4\u7684useStore\u4e0d\u7ba1\u600e\u4e48\u5199\uff0cstate\u90fd\u4e0d\u662f\u5355\u72ec\u7684ref\uff0c\u6240\u4ee5\u66f4\u4e0d\u80fd\u76f4\u63a5\u4f20state.xxx\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u5f15\u5165useStore\nimport { useStore } from &#39;vuex&#39;\n\/\/ \u83b7\u53d6\u5b9e\u4f8b\nconst store = useStore()\n\/\/ \u76d1\u542c\u9876\u5c42\u57fa\u672c\u7c7b\u578b\nwatch(\n  () =&gt; store.state.user.username,\n  (newVal) =&gt; {\n    console.log(&#39;Vuex\u7528\u6237\u540d\u53d8\u4e86&#39;, newVal)\n  }\n)\n\/\/ \u76d1\u542c\u6df1\u5c42\u5bf9\u8c61\u5c5e\u6027\nwatch(\n  () =&gt; store.state.user.profile.address,\n  (newVal) =&gt; {\n    console.log(&#39;Vuex\u7528\u6237\u5730\u5740\u53d8\u4e86&#39;, newVal)\n  }\n)<\/pre>\n<h3>\u96f7\u533a3\uff1a\u6ca1\u6709\u52a0deep: true\u5c31\u60f3\u76d1\u542c\u6df1\u5c42\u5bf9\u8c61\u7684\u4efb\u610f\u5c5e\u6027\u53d8\u5316\uff1f<\/h3>\n<p>\u521a\u624d\u63d0\u5230\u4e86,\u5982\u679c\u53ea\u662f\u76d1\u542c\u6df1\u5c42\u5bf9\u8c61\u7684\u67d0\u4e2a<strong>\u5177\u4f53\u5c5e\u6027<\/strong>\uff08\u6bd4\u5982address\uff09\uff0c\u90a3\u4e0d\u9700\u8981\u52a0deep: true\uff0c\u56e0\u4e3a\u7bad\u5934\u51fd\u6570\u5df2\u7ecf\u660e\u786e\u544a\u8bc9watch\u201c\u6211\u8981\u8ffd\u8e2a\u7684\u662fuserStore.profile.address\u8fd9\u4e2a\u8def\u5f84\u4e0b\u7684\u503c\u7684\u53d8\u5316\u201d\uff0c\u53ea\u8981\u8fd9\u4e2a\u8def\u5f84\u4e0b\u7684\u503c\uff08\u4e0d\u7ba1\u662f\u57fa\u672c\u7c7b\u578b\u8fd8\u662f\u5bf9\u8c61\u5f15\u7528\uff09\u53d8\u4e86\uff0cwatch\u5c31\u4f1a\u89e6\u53d1\u3002<\/p>\n<p>\u4f46\u5982\u679c\u4f60\u7684\u9700\u6c42\u662f\u201c\u76d1\u542c\u6574\u4e2aprofile\u5bf9\u8c61\u7684\u4efb\u610f\u4e00\u4e2a\u5c5e\u6027\u3001\u5b50\u5c5e\u6027\u3001\u5b50\u5b50\u5c5e\u6027\u53d8\u5316\u201d\u2014\u2014\u6bd4\u5982profile\u91cc\u6709name\u3001age\u3001address\uff0caddress\u91cc\u53c8\u6709province\u3001city\u3001district\uff0c\u4e0d\u7ba1\u6539\u4e86province\u8fd8\u662fage\u8fd8\u662f\u6574\u4e2aaddress\uff0c\u90fd\u8981\u89e6\u53d1watch\u2014\u2014\u90a3\u8fd9\u65f6\u5019\u4f60\u5c31\u5f97\u52a0deep: true\u4e86\u3002<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u8981\u6ce8\u610f\u4e00\u4e2a<strong>\u6027\u80fd\u5927\u5751<\/strong>\uff01deep: true\u4f1a\u9012\u5f52\u904d\u5386\u6574\u4e2a\u88ab\u76d1\u542c\u7684\u5bf9\u8c61\uff0c\u6536\u96c6\u6240\u6709\u5c5e\u6027\u7684\u4f9d\u8d56\uff0c\u53ea\u8981\u5bf9\u8c61\u91cc\u6709\u4efb\u4f55\u4e00\u4e2a\u5c5e\u6027\u53d1\u751f\u53d8\u5316\uff0c\u5c31\u4f1a\u89e6\u53d1watch\u56de\u8c03\uff0c\u54ea\u6015\u4f60\u53ea\u662f\u6539\u4e86\u4e00\u4e2a\u6839\u672c\u4e0d\u5173\u5fc3\u7684\u4e34\u65f6\u5b50\u5c5e\u6027\u2014\u2014\u5982\u679c\u8fd9\u4e2a\u5bf9\u8c61\u7279\u522b\u5927\uff08\u6bd4\u5982\u4e00\u4e2a\u5305\u542b\u51e0\u767e\u6761\u6570\u636e\u7684\u6570\u7ec4\uff0c\u6bcf\u6761\u6570\u636e\u53c8\u662f\u5d4c\u5957\u4e09\u5c42\u7684\u5bf9\u8c61\uff09\uff0c\u90a3deep: true\u4f1a\u7ed9\u6d4f\u89c8\u5668\u5e26\u6765\u5f88\u5927\u7684\u6027\u80fd\u8d1f\u62c5\uff0c\u751a\u81f3\u53ef\u80fd\u5bfc\u81f4\u9875\u9762\u5361\u987f\uff01<\/p>\n<p>\u90a3\u6709\u6ca1\u6709\u66ff\u4ee3deep: true\u7684\u65b9\u6cd5\uff1f\u5f53\u7136\u6709\uff01\u5c31\u662f<strong>\u628a\u4f60\u5173\u5fc3\u7684\u90a3\u4e9b\u53ef\u80fd\u53d8\u5316\u7684\u8def\u5f84\uff0c\u5199\u6210\u4e00\u4e2a\u6570\u7ec4\u4f20\u7ed9watch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570<\/strong>\uff0c\u8fd9\u6837\u53ea\u4f1a\u6536\u96c6\u8fd9\u4e9b\u7279\u5b9a\u8def\u5f84\u7684\u4f9d\u8d56\uff0c\u4e0d\u4f1a\u9012\u5f52\u6574\u4e2a\u5bf9\u8c61\uff0c\u6027\u80fd\u4f1a\u597d\u5f88\u591a\u5f88\u591a\uff01<\/p>\n<p>\u4e3e\u4e2a\u4f8b\u5b50,\u5982\u679c\u4f60\u53ea\u5173\u5fc3profile\u91cc\u7684name\u3001age\u3001address.city\u8fd9\u4e09\u4e2a\u5c5e\u6027\u53d8\u5316\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ Pinia\/Vuex\u901a\u7528\uff0c\u6027\u80fd\u4f18\u5316\u5199\u6cd5\uff0c\u66ff\u4ee3deep: true\nwatch(\n  [\n    () =&gt; userStore.profile.name,\n    () =&gt; userStore.profile.age,\n    () =&gt; userStore.profile.address.city\n  ],\n  ([newName, newAge, newCity], [oldName, oldAge, oldCity]) =&gt; {\n    console.log(&#39;\u5173\u5fc3\u7684\u5c5e\u6027\u53d8\u4e86\uff1a&#39;, { newName, oldName, newAge, oldAge, newCity, oldCity })\n  }\n)<\/pre>\n<p>\u662f\u4e0d\u662f\u5f88\u9999\uff1f\u800c\u4e14\u8fd9\u4e2a\u6570\u7ec4\u7684\u5143\u7d20\u53ef\u4ee5\u662f\u4efb\u610f\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u3001\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u7684\u8def\u5f84\uff0c\u751a\u81f3\u53ef\u4ee5\u6df7\u7740\u6765\uff01<\/p>\n<h2>watchImmediate\u52a0\u4e86\uff0c\u4f46\u7ec4\u4ef6\u6302\u8f7d\u7b2c\u4e00\u6b21\u6267\u884c\u7684\u65f6\u5019\uff0c\u62ff\u5230\u7684oldVal\u662fundefined\uff1f\u8fd9\u6b63\u5e38\u5417\uff1f<\/h2>\n<p>\u5f88\u591a\u4eba\u4f1a\u9047\u5230\u8fd9\u4e2a\u95ee\u9898,\u5c31\u4f1a\u614c\uff1a\u201c\u662f\u4e0d\u662f\u6211\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u6709\u95ee\u9898\uff1f\u662f\u4e0d\u662fwatch\u5199\u5f97\u4e0d\u5bf9\uff1f\u201d\u522b\u614c\uff0c\u8fd9<strong>\u5b8c\u5168\u662f\u6b63\u5e38\u7684\uff01<\/strong><\/p>\n<p>\u56e0\u4e3awatchImmediate\u7684\u4f5c\u7528\u662f\u201c\u8ba9watch\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u7acb\u5373\u6267\u884c\u4e00\u6b21\u56de\u8c03\u51fd\u6570\u201d\uff0c\u4f46\u8fd9\u65f6\u5019\u7b2c\u4e00\u6b21\u6267\u884c\u56de\u8c03\uff0c\u5e76\u6ca1\u6709\u53d1\u751f\u201c\u6570\u636e\u53d8\u5316\u201d\u8fd9\u4e2a\u4e8b\u4ef6\u2014\u2014Vue3\u627e\u4e0d\u5230\u4e4b\u524d\u7684\u65e7\u503c\uff0c\u6240\u4ee5\u5c31\u53ea\u80fd\u7ed9oldVal\u8d4b\u503cundefined\u4e86\u3002<\/p>\n<p>\u90a3\u5982\u679c\u4f60\u7b2c\u4e00\u6b21\u6267\u884cwatchImmediate\u7684\u65f6\u5019,\u9700\u8981\u7528\u5230\u201c\u65e7\u503c\u201d\uff08\u6bd4\u5982\u65e7\u503c\u548c\u65b0\u503c\u5bf9\u6bd4\uff0c\u51b3\u5b9a\u8981\u4e0d\u8981\u66f4\u65b0\u67d0\u4e2aDOM\u6216\u8005\u8c03\u7528\u67d0\u4e2a\u63a5\u53e3\uff09\uff0c\u600e\u4e48\u529e\uff1f<\/p>\n<p>\u6709\u4e24\u4e2a\u89e3\u51b3\u65b9\u6cd5\uff1a<\/p>\n<h3>\u65b9\u6cd51\uff1a\u5728\u7ec4\u4ef6\u6302\u8f7d\u524d\uff08\u6bd4\u5982onBeforeMount\u6216\u8005setup\u7684\u6700\u5f00\u59cb\uff09\uff0c\u624b\u52a8\u83b7\u53d6\u4e00\u6b21store\u91cc\u7684\u521d\u59cb\u503c\uff0c\u5b58\u5230\u4e00\u4e2a\u53d8\u91cf\u91cc\u5f53\u201c\u521d\u59cb\u65e7\u503c\u201d<\/h3>\n<pre class=\"brush:javascript;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch, onBeforeMount } from &#39;vue&#39;\nconst userStore = useUserStore()\nlet initialOldAddress = &#39;&#39;\n\/\/ \u5728\u7ec4\u4ef6\u6302\u8f7d\u524d\u5148\u5b58\u521d\u59cb\u503c\nonBeforeMount(() =&gt; {\n  initialOldAddress = userStore.profile.address\n})\n\/\/ \u52a0watchImmediate\nwatch(\n  () =&gt; userStore.profile.address,\n  (newVal, oldVal) =&gt; {\n    \/\/ \u5982\u679c\u662f\u7b2c\u4e00\u6b21\u6267\u884c\uff08oldVal\u662fundefined\uff09\uff0c\u5c31\u7528\u6211\u4eec\u5b58\u7684initialOldAddress\n    const actualOldVal = oldVal === undefined ? initialOldAddress : oldVal\n    if (actualOldVal !== newVal) {\n      console.log(&#39;\u5b9e\u9645\u65e7\u503c\u548c\u65b0\u503c\u4e0d\u4e00\u6837\uff0c\u624d\u6267\u884c\u903b\u8f91&#39;, actualOldVal, newVal)\n      \/\/ \u6bd4\u5982\u8c03\u7528\u63a5\u53e3\u66f4\u65b0\u5730\u5740\n    }\n  },\n  { immediate: true }\n)<\/pre>\n<h3>\u65b9\u6cd52\uff1a\u5982\u679c\u4f60\u7528\u7684\u662fPinia\u7684setup\u5199\u6cd5\uff0c\u5e76\u4e14\u8fd9\u4e2astate\u662f\u4f60\u81ea\u5df1\u7528ref\/reactive\u521d\u59cb\u5316\u7684\uff0c\u90a3\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684watch\u56de\u8c03\u91cc\uff0c\u7b2c\u4e00\u6b21\u6267\u884c\u65f6\u624b\u52a8\u8df3\u8fc7\u5bf9\u6bd4\u903b\u8f91\uff0c\u6216\u8005\u76f4\u63a5\u7528ref\u7684.value\u7684\u521d\u59cb\u503c\u5f53oldVal<\/h3>\n<p>\u4e0d\u8fc7\u65b9\u6cd51\u66f4\u901a\u7528,\u4e0d\u7ba1\u662fPinia\u8fd8\u662fVuex\uff0c\u4e0d\u7ba1\u662fsetup\u8fd8\u662foption\u5199\u6cd5\uff0c\u90fd\u80fd\u7528\u3002<\/p>\n<h2>\u600e\u4e48\u76d1\u542cstore\u91cc\u7684getter\uff1f\u548c\u76d1\u542cstate\u6709\u4ec0\u4e48\u4e0d\u4e00\u6837\uff1f<\/h2>\n<p>\u76d1\u542cgetter\u7684\u65b9\u6cd5\u548c\u76d1\u542cstate\u7684\u6df1\u5c42\u5c5e\u6027\u7684\u65b9\u6cd5<strong>\u51e0\u4e4e\u4e00\u6a21\u4e00\u6837<\/strong>\u2014\u2014\u5c31\u662f\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56degetter\u7684\u8c03\u7528\u7ed3\u679c\uff08\u5982\u679cgetter\u9700\u8981\u4f20\u53c2\u6570\u7684\u8bdd\uff0c\u7bad\u5934\u51fd\u6570\u91cc\u4e5f\u8981\u4f20\uff09\uff01<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u6709\u4e2a\u5173\u952e\u70b9\u8981\u641e\u6e05\u695a\uff1agetter\u7684\u672c\u8d28\u662f\u4e00\u4e2a<strong>\u8ba1\u7b97\u5c5e\u6027<\/strong>\uff0c\u5b83\u7684\u4f9d\u8d56\u662f\u5b83\u5185\u90e8\u7528\u5230\u7684\u6240\u6709state\u6216\u8005\u5176\u4ed6getter\u2014\u2014\u53ea\u6709\u5f53\u5b83\u7684\u4f9d\u8d56\u53d1\u751f\u53d8\u5316\uff0c\u5bfc\u81f4\u5b83\u7684\u8fd4\u56de\u503c\u53d8\u5316\u65f6\uff0cwatch\u624d\u4f1a\u89e6\u53d1\uff1b\u5982\u679c\u5b83\u7684\u4f9d\u8d56\u53d8\u4e86\uff0c\u4f46\u8fd4\u56de\u503c\u6ca1\u53d8\u5316\uff08\u6bd4\u5982getter\u8fd4\u56de\u7684\u662f\u6570\u7ec4\u7684\u957f\u5ea6\uff0c\u6570\u7ec4\u91cc\u7684\u5143\u7d20\u503c\u53d8\u4e86\u4f46\u6570\u91cf\u6ca1\u53d8\uff09\uff0c\u90a3watch\u662f\u4e0d\u4f1a\u89e6\u53d1\u7684\u2014\u2014\u8fd9\u4e00\u70b9\u6bd4\u76f4\u63a5\u76d1\u542cstate\u66f4\u9ad8\u6548\uff0c\u56e0\u4e3aVue3\u7684\u8ba1\u7b97\u5c5e\u6027\u6709\u7f13\u5b58\u673a\u5236\uff0c\u53ea\u6709\u4f9d\u8d56\u53d8\u4e86\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\u8fd4\u56de\u503c\uff0c\u5426\u5219\u76f4\u63a5\u8fd4\u56de\u7f13\u5b58\u503c\u3002<\/p>\n<p>\u4e3e\u4e2a\u5e26\u53c2\u6570\u7684getter\u7684\u76d1\u542c\u4f8b\u5b50\uff08\u6bd4\u5982Pinia\u91cc\u7684userStore\u6709\u4e2agetFriendsById getter\uff0c\u4f20\u4e00\u4e2auserId\u8fd4\u56de\u5bf9\u5e94\u7684\u597d\u53cb\u4fe1\u606f\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch, ref } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u5047\u8bbe\u8fd9\u662f\u6211\u4eec\u5f53\u524d\u8981\u67e5\u770b\u8be6\u60c5\u7684\u597d\u53cbID\nconst currentFriendId = ref(1)\n\/\/ \u76d1\u542c\u5e26\u53c2\u6570\u7684getter\uff1a\u7bad\u5934\u51fd\u6570\u91cc\u8981\u4f20\u5165\u53c2\u6570\uff08\u53ef\u4ee5\u662fref\uff0c\u4e5f\u53ef\u4ee5\u662f\u56fa\u5b9a\u503c\uff09\nwatch(\n  () =&gt; userStore.getFriendsById(currentFriendId.value),\n  (newFriend, oldFriend) =&gt; {\n    console.log(&#39;\u5f53\u524d\u597d\u53cb\u4fe1\u606f\u53d8\u4e86&#39;, newFriend, oldFriend)\n  },\n  { immediate: true, deep: true } \/\/ \u5982\u679c\u597d\u53cb\u4fe1\u606f\u662f\u6df1\u5c42\u5bf9\u8c61\uff0c\u9700\u8981\u52a0deep: true\u5417\uff1f\n  \/\/ \u8fd9\u91cc\u8981\u6ce8\u610f\uff1a\u5982\u679cgetter\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u65b0\u521b\u5efa\u7684\u5bf9\u8c61\/\u6570\u7ec4\uff08\u6bd4\u5982return [...state.friends.filter(xxx)]\uff09\uff0c\n  \/\/ \u90a3\u5373\u4f7f\u5185\u90e8\u5143\u7d20\u6ca1\u53d8\u5316\uff0c\u6bcf\u6b21\u4f9d\u8d56\u53d8\u4e86getter\u8fd4\u56de\u7684\u90fd\u662f\u65b0\u5f15\u7528\uff0c\u8fd9\u65f6\u5019\u4e0d\u52a0deep: true\u4e5f\u4f1a\u89e6\u53d1watch\uff01\n  \/\/ \u4f46\u5982\u679cgetter\u8fd4\u56de\u7684\u662fstate\u91cc\u7684\u539f\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5f15\u7528\uff08\u6bd4\u5982return state.friends.find(xxx)\uff09\uff0c\n  \/\/ \u90a3\u8981\u76d1\u542c\u8fd9\u4e2a\u539f\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5185\u90e8\u5c5e\u6027\u53d8\u5316\uff0c\u8fd8\u662f\u5f97\u52a0deep: true\uff0c\u6216\u8005\u7528\u521a\u624d\u8bf4\u7684\u6570\u7ec4\u8def\u5f84\u76d1\u542c\u6cd5\n)<\/pre>\n<p>\u8fd9\u4e5f\u662f\u5f88\u591a\u4eba\u4f1a\u5ffd\u7565\u7684getter\u76d1\u542c\u7684\u53e6\u4e00\u4e2a\u70b9\uff1agetter\u7684\u8fd4\u56de\u503c\u7684\u7c7b\u578b\uff08\u539f\u5f15\u7528\u8fd8\u662f\u65b0\u5f15\u7528\uff09\u4f1a\u5f71\u54cdwatch\u7684\u89e6\u53d1\u6761\u4ef6\u2014\u2014\u5982\u679c\u4f60\u60f3\u907f\u514d\u4e0d\u5fc5\u8981\u7684watch\u89e6\u53d1\uff0c\u5c31\u5c3d\u91cf\u8ba9getter\u8fd4\u56de\u539f\u5f15\u7528\uff08\u9664\u975e\u4f60\u786e\u5b9e\u9700\u8981\u6bcf\u6b21\u90fd\u8fd4\u56de\u65b0\u7684\uff09\uff1b\u5982\u679c\u4f60\u786e\u5b9e\u9700\u8981\u6bcf\u6b21\u90fd\u8fd4\u56de\u65b0\u5f15\u7528\uff0c\u4f46\u53c8\u4e0d\u60f3\u6bcf\u6b21\u90fd\u89e6\u53d1watch\uff0c\u90a3\u53ef\u4ee5\u52a0\u4e00\u4e2a<code>flush: 'post'<\/code>\u5417\uff1f\u4e0d\u5bf9\uff0cflush\u662f\u63a7\u5236\u56de\u8c03\u6267\u884c\u65f6\u673a\u7684\uff0c\u4e0d\u662f\u63a7\u5236\u89e6\u53d1\u6761\u4ef6\u7684\u2014\u2014\u8fd9\u65f6\u5019\u53ef\u4ee5\u7528Vue3\u7684<code>watchEffect<\/code>\u5417\uff1f\u4e5f\u4e0d\u5bf9\uff0cwatchEffect\u6ca1\u6709\u5bf9\u6bd4\u673a\u5236\u2014\u2014\u54e6\u5bf9\u4e86\uff0c\u53ef\u4ee5\u7528<code>computed<\/code>\u5148\u5bf9getter\u7684\u8fd4\u56de\u503c\u505a\u4e00\u4e2a\u201c\u6d45\u5bf9\u6bd4\u201d\u6216\u8005\u201c\u6df1\u5bf9\u6bd4\u201d\uff0c\u7136\u540e\u518d\u76d1\u542c\u8fd9\u4e2acomputed\u7684\u7ed3\u679c\uff01<\/p>\n<p>\u6bd4\u5982\u4f60\u6709\u4e2agetter\u8fd4\u56de\u7684\u662f\u6bcf\u6b21\u90fd\u65b0\u521b\u5efa\u7684\u6570\u7ec4,\u4f46\u4f60\u53ea\u60f3\u5728\u6570\u7ec4\u7684\u5143\u7d20\u5185\u5bb9\uff08\u6d45\u5bf9\u6bd4\uff09\u53d1\u751f\u53d8\u5316\u65f6\u624d\u89e6\u53d1watch\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch, computed } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u5148\u5bf9getter\u7684\u8fd4\u56de\u503c\u505a\u6d45\u5bf9\u6bd4\uff0c\u8fd4\u56de\u4e00\u4e2acomputed\nconst shallowFriendsList = computed(() =&gt; {\n  return userStore.getFilteredFriends() \/\/ \u5047\u8bbe\u8fd9\u4e2agetter\u6bcf\u6b21\u90fd\u8fd4\u56de\u65b0\u7684\u6570\u7ec4\n})\n\/\/ \u7136\u540e\u76d1\u542c\u8fd9\u4e2acomputed\uff0c\u8fd9\u65f6\u5019\u53ea\u6709\u5f53\u6570\u7ec4\u7684\u5143\u7d20\u5185\u5bb9\u6d45\u5bf9\u6bd4\u4e0d\u4e00\u6837\u65f6\uff0c\u624d\u4f1a\u89e6\u53d1watch\nwatch(\n  shallowFriendsList,\n  (newList, oldList) =&gt; {\n    console.log(&#39;\u597d\u53cb\u5217\u8868\u7684\u5143\u7d20\u5185\u5bb9\u771f\u7684\u53d8\u4e86&#39;, newList, oldList)\n  },\n  { immediate: true } \/\/ \u8fd9\u91cc\u4e0d\u9700\u8981deep: true\u4e86\uff0c\u56e0\u4e3acomputed\u7684\u6d45\u5bf9\u6bd4\u5df2\u7ecf\u5904\u7406\u4e86\n)<\/pre>\n<h2>watch\u548cwatchEffect\u6709\u4ec0\u4e48\u533a\u522b\uff1f\u76d1\u542cstore\u7684\u65f6\u5019\u5e94\u8be5\u9009\u54ea\u4e2a\uff1f<\/h2>\n<p>\u8fd9\u4e5f\u662fVue3\u91cc\u7684\u7ecf\u5178\u95ee\u9898,\u4e0d\u8fc7\u7ed3\u5408store\u7684\u573a\u666f\uff0c\u7b54\u6848\u4f1a\u66f4\u660e\u786e\uff1a<\/p>\n<h3>\u5148\u7b80\u5355\u8bf4\u4e0b\u4e24\u8005\u7684\u6838\u5fc3\u533a\u522b<\/h3>\n<ol>\n<li><strong>\u4f9d\u8d56\u6536\u96c6\u65b9\u5f0f\u4e0d\u540c<\/strong>\uff1awatch\u9700\u8981\u4f60<strong>\u660e\u786e\u6307\u5b9a\u8981\u76d1\u542c\u7684\u54cd\u5e94\u5f0f\u6570\u636e\/\u8def\u5f84<\/strong>\uff08\u7b2c\u4e00\u4e2a\u53c2\u6570\uff09\uff1bwatchEffect\u4e0d\u9700\u8981\u4f60\u6307\u5b9a\uff0c\u5b83\u4f1a<strong>\u81ea\u52a8\u6536\u96c6\u56de\u8c03\u51fd\u6570\u5185\u90e8\u7528\u5230\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u6570\u636e\/\u8def\u5f84\u7684\u4f9d\u8d56<\/strong>\u3002<\/li>\n<li><strong>\u89e6\u53d1\u65f6\u673a\u4e0d\u540c<\/strong>\uff1awatch\u9ed8\u8ba4\u662f<strong>\u61d2\u6267\u884c<\/strong>\u7684\u2014\u2014\u53ea\u6709\u5f53\u4f60\u6307\u5b9a\u7684\u76d1\u542c\u6570\u636e\u53d8\u5316\u65f6\uff0c\u624d\u4f1a\u89e6\u53d1\u56de\u8c03\uff08\u9664\u975e\u52a0\u4e86immediate: true\uff09\uff1bwatchEffect\u662f<strong>\u7acb\u5373\u6267\u884c<\/strong>\u7684\u2014\u2014\u7ec4\u4ef6\u6302\u8f7d\u540e\u7b2c\u4e00\u6b21\u89e3\u6790setup\u7684\u65f6\u5019\u5c31\u4f1a\u81ea\u52a8\u6267\u884c\u4e00\u6b21\u56de\u8c03\uff0c\u7136\u540e\u81ea\u52a8\u6536\u96c6\u4f9d\u8d56\u3002<\/li>\n<li><strong>\u56de\u8c03\u53c2\u6570\u4e0d\u540c<\/strong>\uff1awatch\u4f1a\u7ed9\u4f60<strong>\u65b0\u503c\u548c\u65e7\u503c<\/strong>\u4e24\u4e2a\u53c2\u6570\uff08\u5982\u679c\u76d1\u542c\u7684\u662f\u6570\u7ec4\uff0c\u4f1a\u7ed9\u4f60\u65b0\u503c\u6570\u7ec4\u548c\u65e7\u503c\u6570\u7ec4\uff09\uff1bwatchEffect<strong>\u4e0d\u4f1a\u7ed9\u4f60\u4efb\u4f55\u53c2\u6570<\/strong>\uff0c\u4f60\u53ea\u80fd\u5728\u56de\u8c03\u5185\u90e8\u81ea\u5df1\u83b7\u53d6\u5f53\u524d\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u503c\u3002<\/li>\n<li><strong>\u6027\u80fd\u4e0d\u540c<\/strong>\uff1a\u56e0\u4e3awatch\u662f\u660e\u786e\u6307\u5b9a\u4f9d\u8d56\u7684\uff0c\u6240\u4ee5\u5b83\u7684\u6027\u80fd\u901a\u5e38\u6bd4watchEffect\u597d\u4e00\u70b9\u70b9\uff08\u5c24\u5176\u662f\u5f53\u56de\u8c03\u51fd\u6570\u5185\u90e8\u7528\u5230\u4e86\u5f88\u591a\u4f60\u5e76\u4e0d\u60f3\u76d1\u542c\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u65f6\uff09\uff1b\u4f46\u5982\u679c\u4f60\u7684\u56de\u8c03\u51fd\u6570\u5185\u90e8\u7528\u5230\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u6570\u636e\u4f60\u90fd\u60f3\u76d1\u542c\uff0c\u90a3watchEffect\u4f1a\u66f4\u7b80\u6d01\u3002<\/li>\n<\/ol>\n<h3>\u76d1\u542cstore\u7684\u65f6\u5019\u5e94\u8be5\u9009\u54ea\u4e2a\uff1f<\/h3>\n<p>\u7ed3\u5408store\u7684\u573a\u666f,\u5c0f\u6768\u7ed9\u4f60\u51e0\u4e2a\u660e\u786e\u7684\u9009\u62e9\u5efa\u8bae\uff1a<\/p>\n<h4>\u5efa\u8bae1\uff1a\u5982\u679c\u4f60\u7684\u903b\u8f91\u662f\u201c\u53ea\u5bf9store\u91cc\u76841-3\u4e2a\u7279\u5b9a\u8def\u5f84\u7684\u6570\u636e\u53d8\u5316\u611f\u5174\u8da3\u201d\u2014\u2014\u9009watch\uff01<\/h4>\n<p>\u6bd4\u5982\u521a\u624d\u63d0\u5230\u7684\u53ea\u76d1\u542c\u7528\u6237\u540d\u3001\u5730\u5740\u7684\u4f8b\u5b50\uff0c\u7528watch\u660e\u786e\u6307\u5b9a\u4f9d\u8d56\uff0c\u4ee3\u7801\u53ef\u8bfb\u6027\u66f4\u9ad8\uff0c\u4e5f\u4e0d\u4f1a\u56e0\u4e3a\u56de\u8c03\u91cc\u4e0d\u5c0f\u5fc3\u7528\u5230\u4e86\u5176\u4ed6\u54cd\u5e94\u5f0f\u6570\u636e\uff08\u6bd4\u5982\u7ec4\u4ef6\u81ea\u5df1\u7684localLoading\uff09\u800c\u89e6\u53d1\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\u3002<\/p>\n<h4>\u5efa\u8bae2\uff1a\u5982\u679c\u4f60\u7684\u903b\u8f91\u662f\u201c\u5bf9store\u91cc\u7684N\u4e2a\u8def\u5f84\u7684\u6570\u636e\u53d8\u5316\u90fd\u611f\u5174\u8da3\uff0c\u5e76\u4e14\u8fd9\u4e9b\u8def\u5f84\u5728\u56de\u8c03\u91cc\u521a\u597d\u90fd\u7528\u5230\u4e86\u201d\u2014\u2014\u9009watchEffect\uff01<\/h4>\n<p>\u6bd4\u5982\u4f60\u8981\u5728\u7ec4\u4ef6\u91cc\u663e\u793a\u7528\u6237\u7684\u5b8c\u6574\u4fe1\u606f,\u5b8c\u6574\u4fe1\u606f\u7531\u7528\u6237\u540d\u3001\u5934\u50cf\u3001\u5e74\u9f84\u3001\u6027\u522b\u3001\u5730\u5740\u8fd95\u4e2astore\u91cc\u7684\u8def\u5f84\u7ec4\u6210\uff0c\u53ea\u8981\u5176\u4e2d\u4efb\u4f55\u4e00\u4e2a\u53d8\u5316\uff0c\u4f60\u90fd\u8981\u91cd\u65b0\u8ba1\u7b97\u6216\u8005\u91cd\u65b0\u6e32\u67d3\u5b8c\u6574\u4fe1\u606f\u7684\u5c55\u793a\u903b\u8f91\u2014\u2014\u8fd9\u65f6\u5019\u7528watchEffect\u4f1a\u66f4\u7b80\u6d01\uff0c\u4e0d\u7528\u628a5\u4e2a\u8def\u5f84\u90fd\u5199\u5230\u6570\u7ec4\u91cc\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watchEffect } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u81ea\u52a8\u6536\u96c6\u56de\u8c03\u91cc\u7528\u5230\u7684\u6240\u6709store\u8def\u5f84\u7684\u4f9d\u8d56\nwatchEffect(() =&gt; {\n  console.log(&#39;\u7528\u6237\u5b8c\u6574\u4fe1\u606f\u53d8\u4e86\uff1a&#39;, {\n    username: userStore.username,\n    avatar: userStore.avatar,\n    age: userStore.profile.age,\n    gender: userStore.profile.gender,\n    address: userStore.profile.address\n  })\n  \/\/ \u6bd4\u5982\u66f4\u65b0DOM\u7684\u5b8c\u6574\u4fe1\u606f\u5c55\u793a\n})<\/pre>\n<h4>\u5efa\u8bae3\uff1a\u5982\u679c\u4f60\u7684\u903b\u8f91\u9700\u8981\u7528\u5230\u201c\u65e7\u503c\u201d\u2014\u2014\u5fc5\u987b\u9009watch\uff01<\/h4>\n<p>\u56e0\u4e3awatchEffect\u6ca1\u6709\u65e7\u503c\u53c2\u6570,\u8fd9\u662f\u786c\u4f24\u3002<\/p>\n<h4>\u5efa\u8bae4\uff1a\u5982\u679c\u4f60\u7684\u903b\u8f91\u9700\u8981\u63a7\u5236\u6267\u884c\u65f6\u673a\uff08\u6bd4\u5982\u8981\u5728DOM\u66f4\u65b0\u540e\u518d\u6267\u884c\uff0c\u907f\u514d\u76f4\u63a5\u64cd\u4f5cDOM\u65f6\u62ff\u5230\u7684\u662f\u65e7DOM\uff09\u2014\u2014\u4e24\u8005\u90fd\u53ef\u4ee5\uff0c\u4f46watch\u66f4\u65b9\u4fbf\uff01<\/h4>\n<p>\u56e0\u4e3awatch\u53ef\u4ee5\u76f4\u63a5\u5728\u7b2c\u4e09\u4e2a\u53c2\u6570\u91cc\u52a0<code>flush: 'post'<\/code>\uff08\u9ed8\u8ba4\u662f'pre'\uff0c\u5728DOM\u66f4\u65b0\u524d\u6267\u884c\uff1b\u8fd8\u6709'sync'\uff0c\u540c\u6b65\u6267\u884c\uff0c\u614e\u7528\uff0c\u4f1a\u5f71\u54cd\u6027\u80fd\uff09\uff1bwatchEffect\u867d\u7136\u4e5f\u53ef\u4ee5\u7528<code>watchEffect(() =&gt; {}, { flush: 'post' })<\/code>\uff0c\u4f46\u7ed3\u5408\u65e7\u503c\u7684\u9700\u6c42\uff0c\u8fd8\u662fwatch\u66f4\u5e38\u7528\u3002<\/p>\n<h2>\u76d1\u542cstore\u7684\u65f6\u5019\u8fd8\u6709\u54ea\u4e9b\u6027\u80fd\u4f18\u5316\u7684\u5c0f\u6280\u5de7\uff1f<\/h2>\n<p>\u521a\u624d\u5df2\u7ecf\u63d0\u5230\u4e86\u4e24\u4e2a\uff1a\u4e00\u4e2a\u662f\u7528\u6570\u7ec4\u8def\u5f84\u76d1\u542c\u6cd5\u66ff\u4ee3deep: true\uff0c\u53e6\u4e00\u4e2a\u662f\u7528computed\u5148\u505a\u6d45\/\u6df1\u5bf9\u6bd4\u518d\u76d1\u542c\uff0c\u9664\u6b64\u4e4b\u5916\uff0c\u8fd8\u6709\u51e0\u4e2a\u5c0f\u6280\u5de7\u53ef\u4ee5\u5e2e\u4f60\u63d0\u5347\u6027\u80fd\uff1a<\/p>\n<h3>\u6280\u5de71\uff1a\u5c3d\u91cf\u5728Pinia\/Vuex\u91cc\u628a\u590d\u6742\u7684\u8ba1\u7b97\u903b\u8f91\u653e\u5230getter\u91cc\uff0c\u7136\u540e\u76d1\u542cgetter\u800c\u4e0d\u662f\u76d1\u542cstate<\/h3>\n<p>\u56e0\u4e3agetter\u6709\u7f13\u5b58\u673a\u5236,\u53ea\u6709\u4f9d\u8d56\u53d8\u4e86\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0c\u5426\u5219\u76f4\u63a5\u8fd4\u56de\u7f13\u5b58\u503c\u2014\u2014\u8fd9\u6837\u53ef\u4ee5\u907f\u514d\u5728\u7ec4\u4ef6\u7684watch\u56de\u8c03\u91cc\u91cd\u590d\u8ba1\u7b97\u590d\u6742\u7684\u903b\u8f91\u3002<\/p>\n<h3>\u6280\u5de72\uff1a\u5982\u679c\u4f60\u7684watch\u56de\u8c03\u91cc\u6709\u5f02\u6b65\u64cd\u4f5c\uff08\u6bd4\u5982\u8c03\u7528\u63a5\u53e3\uff09\uff0c\u8981\u8bb0\u5f97\u6e05\u9664\u4e0a\u4e00\u6b21\u7684\u5f02\u6b65\u64cd\u4f5c<\/h3>\n<p>\u6bd4\u5982\u4f60\u76d1\u542c\u7684\u662f\u7528\u6237\u641c\u7d22\u7684\u5173\u952e\u8bcd\uff08\u5173\u952e\u8bcd\u5b58\u5728store\u91cc\uff09\uff0c\u53ea\u8981\u5173\u952e\u8bcd\u53d8\u5316\uff0c\u5c31\u8c03\u7528\u63a5\u53e3\u641c\u7d22\u2014\u2014\u5982\u679c\u7528\u6237\u8f93\u5165\u5f88\u5feb\uff0c\u4e0a\u4e00\u6b21\u7684\u63a5\u53e3\u8fd8\u6ca1\u8fd4\u56de\uff0c\u65b0\u7684\u5173\u952e\u8bcd\u53c8\u53d8\u4e86\uff0c\u8fd9\u65f6\u5019\u4f60\u9700\u8981\u6e05\u9664\u4e0a\u4e00\u6b21\u7684\u63a5\u53e3\u8bf7\u6c42\uff0c\u5426\u5219\u53ef\u80fd\u4f1a\u51fa\u73b0\u201c\u540e\u8f93\u5165\u7684\u5173\u952e\u8bcd\u5148\u8fd4\u56de\u7ed3\u679c\uff0c\u5148\u8f93\u5165\u7684\u5173\u952e\u8bcd\u540e\u8fd4\u56de\u7ed3\u679c\uff0c\u5bfc\u81f4\u5c55\u793a\u7684\u641c\u7d22\u7ed3\u679c\u9519\u8bef\u201d\u7684\u95ee\u9898\u3002<\/p>\n<p>\u600e\u4e48\u6e05\u9664\u4e0a\u4e00\u6b21\u7684\u5f02\u6b65\u64cd\u4f5c\uff1f\u53ef\u4ee5\u7528AbortController\uff08\u8fd9\u662f\u73b0\u5728\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301\u7684\uff0c\u63a8\u8350\uff09\uff0c\u6216\u8005\u7528\u4e00\u4e2aref\u53d8\u91cf\u6765\u8bb0\u5f55\u4e0a\u4e00\u6b21\u7684\u8bf7\u6c42ID\uff0c\u7136\u540e\u5728\u63a5\u53e3\u8fd4\u56de\u65f6\u5bf9\u6bd4ID\u662f\u5426\u4e00\u81f4\uff0c\u5982\u679c\u4e0d\u4e00\u81f4\u5c31\u5ffd\u7565\u7ed3\u679c\u3002<\/p>\n<p>\u4e3e\u4e2a\u7528AbortController\u7684\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { useSearchStore } from &#39;@\/stores\/search&#39;\nimport { watch, ref } from &#39;vue&#39;\nconst searchStore = useSearchStore()\n\/\/ \u8bb0\u5f55\u641c\u7d22\u7ed3\u679c\nconst searchResults = ref([])\n\/\/ \u8bb0\u5f55\u52a0\u8f7d\u72b6\u6001\nconst searchLoading = ref(false)\n\/\/ \u8bb0\u5f55\u9519\u8bef\u4fe1\u606f\nconst searchError = ref(&#39;&#39;)\n\/\/ \u76d1\u542c\u641c\u7d22\u5173\u952e\u8bcd\nwatch(\n  () =&gt; searchStore.keyword,\n  async (newKeyword) =&gt; {\n    \/\/ \u5982\u679c\u5173\u952e\u8bcd\u4e3a\u7a7a\uff0c\u76f4\u63a5\u6e05\u7a7a\u7ed3\u679c\uff0c\u4e0d\u8bf7\u6c42\u63a5\u53e3\n    if (!newKeyword.trim()) {\n      searchResults.value = []\n      searchLoading.value = false\n      searchError.value = &#39;&#39;\n      return\n    }\n    \/\/ \u6e05\u9664\u4e0a\u4e00\u6b21\u7684\u8bf7\u6c42\n    if (window.lastSearchAbortController) {\n      window.lastSearchAbortController.abort()\n    }\n    \/\/ \u521b\u5efa\u65b0\u7684AbortController\n    const abortController = new AbortController()\n    window.lastSearchAbortController = abortController\n    const signal = abortController.signal\n    searchLoading.value = true\n    searchError.value = &#39;&#39;\n    try {\n      \/\/ \u8c03\u7528\u63a5\u53e3\uff0c\u4f20\u5165signal\n      const res = await fetch(`\/api\/search?keyword=${encodeURIComponent(newKeyword)}`, { signal })\n      const data = await res.json()\n      searchResults.value = data.list\n    } catch (err) {\n      \/\/ \u5982\u679c\u662fAbortError\uff0c\u8bf4\u660e\u662f\u7528\u6237\u4e3b\u52a8\u53d6\u6d88\u7684\uff0c\u4e0d\u9700\u8981\u5c55\u793a\u9519\u8bef\u4fe1\u606f\n      if (err.name !== &#39;AbortError&#39;) {\n        searchError.value = err.message || &#39;\u641c\u7d22\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5&#39;\n        searchResults.value = []\n      }\n    } finally {\n      \/\/ \u4e0d\u7ba1\u6210\u529f\u5931\u8d25\uff0c\u90fd\u8981\u8bbe\u7f6eloading\u4e3afalse\n      searchLoading.value = false\n    }\n  },\n  { immediate: true }\n)<\/pre>\n<h3>\u6280\u5de73\uff1a\u5982\u679c\u4f60\u7684\u7ec4\u4ef6\u662f\u6761\u4ef6\u6e32\u67d3\u7684\uff08\u6bd4\u5982v-if\uff09\uff0c\u8981\u8bb0\u5f97\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\u6e05\u9664watch<\/h3>\n<p>\u4e0d\u8fc7Vue3\u7684watch\u548cwatchEffect\u90fd\u662f<strong>\u81ea\u52a8\u6e05\u7406<\/strong>\u7684\u2014\u2014\u53ea\u8981\u7ec4\u4ef6\u5378\u8f7d\u4e86\uff0c\u5b83\u4eec\u5c31\u4f1a\u81ea\u52a8\u505c\u6b62\u76d1\u542c\uff0c\u6240\u4ee5\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u4f60\u4e0d\u9700\u8981\u624b\u52a8\u6e05\u7406\uff1b\u4f46\u5982\u679c\u4f60\u662f\u5728\u7ec4\u4ef6\u5916\u90e8\uff08\u6bd4\u5982\u5de5\u5177\u51fd\u6570\u91cc\uff09\u521b\u5efa\u7684watch\uff0c\u90a3\u5c31\u8981\u8bb0\u5f97\u624b\u52a8\u8c03\u7528watch\u8fd4\u56de\u7684stop\u51fd\u6570\u6765\u505c\u6b62\u76d1\u542c\uff0c\u5426\u5219\u4f1a\u9020\u6210\u5185\u5b58\u6cc4\u6f0f\uff01<\/p>\n<p>\u4e3e\u4e2a\u624b\u52a8\u6e05\u7406\u7684\u4f8b\u5b50\uff08\u867d\u7136\u7ec4\u4ef6\u5185\u90e8\u4e0d\u9700\u8981\uff0c\u4f46\u4e3a\u4e86\u6f14\u793a\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch, onUnmounted } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u521b\u5efawatch\uff0c\u83b7\u53d6stop\u51fd\u6570\nconst stopWatch = watch(\n  () =&gt; userStore.username,\n  (newVal) =&gt; {\n    console.log(&#39;\u7528\u6237\u540d\u53d8\u4e86&#39;, newVal)\n  }\n)\n\/\/ \u7ec4\u4ef6\u5378\u8f7d\u65f6\u624b\u52a8\u8c03\u7528stop\u51fd\u6570\uff08\u5176\u5b9e\u4e0d\u9700\u8981\uff0c\u81ea\u52a8\u6e05\u7406\u7684\uff09\nonUnmounted(() =&gt; {\n  stopWatch()\n  console.log(&#39;watch\u5df2\u505c\u6b62&#39;)\n})<\/pre>\n<h2>\u603b\u7ed3\u4e00\u4e0bVue3\u76d1\u542cstore value\u7684\u6b63\u786e\u6b65\u9aa4<\/h2>\n<ol>\n<li><strong>\u9009\u62e9\u5408\u9002\u7684store<\/strong>\uff1a\u4f18\u5148\u7528Pinia\uff0c\u6bd4Vuex4\u7b80\u6d01\u5f88\u591a\uff0c\u5b98\u65b9\u4eb2\u513f\u5b50\u3002<\/li>\n<li><strong>\u660e\u786e\u8981\u76d1\u542c\u7684\u5185\u5bb9<\/strong>\uff1a\u662f\u9876\u5c42\u5c5e\u6027\u3001\u6df1\u5c42\u5c5e\u6027\u3001\u6574\u4e2a\u5bf9\u8c61\u8fd8\u662fgetter\u3002<\/li>\n<li><strong>\u9009\u62e9\u6b63\u786e\u7684\u76d1\u542c\u65b9\u5f0f<\/strong>\uff1a<ul>\n<li>\u660e\u786e\u6307\u5b9a1-3\u4e2a\u4f9d\u8d56 \u2192 watch + \u7bad\u5934\u51fd\u6570\/\u6570\u7ec4\u8def\u5f84\u3002<\/li>\n<li>\u81ea\u52a8\u6536\u96c6\u56de\u8c03\u91cc\u7684\u6240\u6709\u4f9d\u8d56 \u2192 watchEffect\u3002<\/li>\n<li>\u9700\u8981\u65e7\u503c \u2192 \u5fc5\u987bwatch\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u907f\u514d\u8e29\u5751<\/strong>\uff1a<ul>\n<li>\u6df1\u5c42\u5c5e\u6027\u5fc5\u987b\u7528\u7bad\u5934\u51fd\u6570\u8fd4\u56de\u8def\u5f84\u3002<\/li>\n<li>\u4e0d\u8981\u968f\u4fbf\u7528deep: true\uff0c\u80fd\u7528\u6570\u7ec4\u8def\u5f84\u5c31\u7528\u6570\u7ec4\u8def\u5f84\u3002<\/li>\n<li>watchImmediate\u7b2c\u4e00\u6b21\u6267\u884coldVal\u662fundefined\u662f\u6b63\u5e38\u7684\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u6027\u80fd\u4f18\u5316<\/strong>\uff1a<ul>\n<li>\u7528getter\u7f13\u5b58\u590d\u6742\u8ba1\u7b97\u3002<\/li>\n<li>\u5f02\u6b65\u64cd\u4f5c\u8bb0\u5f97\u7528AbortController\u6e05\u9664\u3002<\/li>\n<li>\u7ec4\u4ef6\u5916\u90e8\u7684watch\u8bb0\u5f97\u624b\u52a8\u6e05\u7406\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\u597d\u5566,\u4ee5\u4e0a\u5c31\u662f\u5c0f\u6768\u6574\u7406\u7684\u5173\u4e8eVue3\u76d1\u542cstore value\u7684\u6240\u6709\u5e72\u8d27\uff0c\u4ece\u57fa\u7840\u5199\u6cd5\u5230\u5e38\u89c1\u5751\uff0c\u518d\u5230\u6027\u80fd\u4f18\u5316\uff0c\u5168\u90fd\u8bf4\u900f\u4e86\uff01\u5982\u679c\u8fd8\u6709\u4ec0\u4e48\u95ee\u9898\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u54e6\uff5e<\/p>","pubDate":"Sun, 19 Apr 2026 08:02:00 +0800"},{"title":"Vue3 setup\u91cc\u7684watch\u600e\u4e48\u7528\uff1f\u548cVue2 watch\/watchEffect\u6709\u5565\u4e0d\u540c\uff1f\u8e29\u8fc7\u54ea\u4e9b\u5751\u8981\u6ce8\u610f\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421760.html","description":"<h2>\u4e3a\u4ec0\u4e48Vue3\u8981\u628awatch\u653e\u5728setup\u91cc\uff1f\u8001\u5199\u6cd5\u8fd8\u80fd\u7528\u5417\uff1f<\/h2>\n<p>\u521a\u4eceVue2\u8f6c\u8fc7\u6765\u7684\u670b\u53cb,\u7b2c\u4e00\u53cd\u5e94\u53ef\u80fd\u662f\uff1a\u201c\u597d\u597d\u7684\u9009\u9879\u5f0fAPI watch\u4e0d\u7528\uff0c\u975e\u5f97\u585e\u5230setup\u7ec4\u5408\u5f0f\u91cc\u6298\u817e\uff1f\u201d\u5176\u5b9e\u8fd9\u4e0d\u662f\u778e\u6298\u817e\uff0c\u662fVue3\u4e3a\u4e86<strong>\u903b\u8f91\u590d\u7528\u3001\u4ee3\u7801\u53ef\u7ef4\u62a4\u6027\u3001\u7c7b\u578b\u63a8\u5bfc\u66f4\u53cb\u597d<\/strong>\u505a\u7684\u6838\u5fc3\u8c03\u6574\u3002<\/p>\n<p>\u5148\u7ed9\u9897\u5b9a\u5fc3\u4e38\uff1aVue3\u5b8c\u5168\u517c\u5bb9\u9009\u9879\u5f0fAPI\uff0c\u4f60\u5728\u5355\u6587\u4ef6\u7ec4\u4ef6\u91cc\u5199<code>&lt;script&gt;<\/code>\u6807\u7b7e\u4e0d\u5e26setup\uff0c\u7ee7\u7eed\u7528\u539f\u6765\u7684<code>watch: { \u6570\u636e\u540d(newVal, oldVal) { \u903b\u8f91 } }<\/code>\u5b8c\u5168\u6ca1\u95ee\u9898\uff0c\u4f46\u4e00\u65e6\u4f60\u5f00\u59cb\u7528\u7ec4\u5408\u5f0fAPI\uff0c\u5c31\u4f1a\u53d1\u73b0\u628a\u76f8\u5173\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u3001\u64cd\u4f5c\u903b\u8f91\u3001\u76d1\u542c\u903b\u8f91\u653e\u5728\u540c\u4e00\u5757\u4ee3\u7801\u91cc\uff0c\u6bd4\u628a\u5b83\u4eec\u62c6\u5728data\u3001methods\u3001watch\u4e09\u4e2a\u5730\u65b9\u8212\u670d\u592a\u591a\u2014\u2014\u6bd4\u5982\u4f60\u505a\u4e00\u4e2a\u641c\u7d22\u7ec4\u4ef6\uff0c\u641c\u7d22\u5173\u952e\u8bcd\u7684\u76d1\u542c\u3001\u641c\u7d22\u51fd\u6570\u3001\u641c\u7d22\u7ed3\u679c\u7684\u5c55\u793a\u6570\u636e\uff0c\u90fd\u53ef\u4ee5\u6324\u5728\u201c\u641c\u7d22\u6a21\u5757\u201d\u7684\u6ce8\u91ca\u5757\u4e0b\uff0c\u4e0b\u6b21\u6539\u641c\u7d22\u529f\u80fd\u4e0d\u7528\u8df3\u6765\u8df3\u53bb\u3002<\/p>\n<p>\u800c\u4e14\u7ec4\u5408\u5f0f\u7684watch\u548cTypeScript\u7b80\u76f4\u662f\u7edd\u914d\uff01\u4f60\u4e0d\u7528\u518d\u50cf\u9009\u9879\u5f0f\u90a3\u6837\u7ed9watch\u91cc\u7684this\u5199<code>as any<\/code>\u6216\u8005\u590d\u6742\u7684\u63a5\u53e3\u58f0\u660e\uff0cTypeScript\u80fd\u76f4\u63a5\u4ece\u4f60\u5b9a\u4e49\u7684ref\u3001reactive\u91cc\u63a8\u65ad\u51fa\u76d1\u542c\u6570\u636e\u7684\u7c7b\u578b\uff0c\u8fde\u56de\u8c03\u53c2\u6570newVal\u3001oldVal\u7684\u7c7b\u578b\u90fd\u5e2e\u4f60\u6807\u597d\uff0c\u5199\u4ee3\u7801\u7684\u65f6\u5019\u81ea\u52a8\u8865\u5168\u723d\u5230\u98de\u8d77\uff0c\u540e\u671f\u91cd\u6784\u4e5f\u4e0d\u5bb9\u6613\u51fa\u7c7b\u578b\u9519\u8bef\u3002<\/p>\n<h2>setup\u91cc\u7684watch\u57fa\u7840\u7528\u6cd5\u6709\u54ea\u4e9b\uff1f\u548cVue2\u6709\u5565\u4e0d\u4e00\u6837\u7684\u53c2\u6570\uff1f<\/h2>\n<p>\u7ec4\u5408\u5f0f\u7684watch\u548c\u9009\u9879\u5f0f\u7684\u6838\u5fc3\u903b\u8f91\u5dee\u4e0d\u591a\uff1a<strong>\u76d1\u542c\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u53d8\u5316\uff0c\u6570\u636e\u53d8\u4e86\u5c31\u6267\u884c\u6307\u5b9a\u7684\u56de\u8c03\u51fd\u6570<\/strong>\uff0c\u4f46\u53c2\u6570\u5199\u6cd5\u66f4\u7075\u6d3b\uff0c\u76d1\u542c\u7684\u5bf9\u8c61\u4e5f\u66f4\u4e30\u5bcc\u3002<\/p>\n<h3>\u6700\u57fa\u7840\u7684\u5355\u6570\u636e\u76d1\u542c<\/h3>\n<p>\u4e0d\u7ba1\u662fref\u8fd8\u662freactive\u7684\u5c5e\u6027,\u90fd\u53ef\u4ee5\u7528watch\u5355\u72ec\u76d1\u542c\uff0c\u5148\u4e3e\u4e2aref\u7684\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst count = ref(0)\n\/\/ \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u8981\u76d1\u542c\u7684\u6570\u636e\uff0c\u7b2c\u4e8c\u4e2a\u662f\u56de\u8c03\uff0c\u56de\u8c03\u53c2\u6570\u4f9d\u6b21\u662f\u65b0\u503c\u3001\u65e7\u503c\nwatch(count, (newCount, oldCount) =&gt; {\n  console.log(`count\u4ece${oldCount}\u53d8\u6210\u4e86${newCount}`)\n})<\/pre>\n<p>\u5982\u679c\u662freactive\u7684\u5c5e\u6027,\u4e0d\u80fd\u76f4\u63a5\u4f20reactive\u5bf9\u8c61\u672c\u8eab\uff08\u540e\u9762\u4f1a\u8bb2\u76f4\u63a5\u4f20\u7684\u5751\uff09\uff0c\u5f97\u4f20\u4e00\u4e2a\u8fd4\u56de\u8be5\u5c5e\u6027\u7684\u7bad\u5934\u51fd\u6570\uff0c\u6216\u8005\u7528<code>() =&gt; reactiveObj.prop<\/code>\u7684\u5f62\u5f0f\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { reactive, watch } from &#39;vue&#39;\nconst user = reactive({ name: &#39;\u5f20\u4e09&#39;, age: 18 })\n\/\/ \u76d1\u542c\u5355\u4e2areactive\u5c5e\u6027\uff0c\u5fc5\u987b\u7528 getter \u51fd\u6570\nwatch(() =&gt; user.age, (newAge, oldAge) =&gt; {\n  console.log(`user\u7684age\u4ece${oldAge}\u53d8\u6210\u4e86${newAge}`)\n})<\/pre>\n<p>\u8fd9\u91cc\u7b2c\u4e00\u4e2a\u4e0d\u540c\u5c31\u51fa\u6765\u4e86\uff1a<strong>Vue2\u91cc\u76d1\u542c\u5bf9\u8c61\u5c5e\u6027\u53ef\u4ee5\u76f4\u63a5\u5199<code>'user.age'<\/code>\u5b57\u7b26\u4e32\u8def\u5f84\uff0cVue3\u7ec4\u5408\u5f0f\u91cc\u867d\u7136\u4e5f\u652f\u6301\u5b57\u7b26\u4e32\uff0c\u4f46\u5b98\u65b9\u66f4\u63a8\u8350\u7528getter\u51fd\u6570\uff0c\u56e0\u4e3a\u7c7b\u578b\u63a8\u5bfc\u66f4\u597d\uff0c\u4e5f\u66f4\u7b26\u5408\u51fd\u6570\u5f0f\u7f16\u7a0b\u7684\u98ce\u683c<\/strong>\u3002<\/p>\n<h3>\u591a\u6570\u636e\u540c\u65f6\u76d1\u542c<\/h3>\n<p>\u8fd9\u4e2a\u529f\u80fdVue2\u5176\u5b9e\u4e5f\u6709,\u4f46\u5199\u6cd5\u662f\u628a\u591a\u4e2a\u6570\u636e\u540d\u653e\u5728\u4e00\u4e2a\u6570\u7ec4\u91cc\u5f53watch\u7684\u952e\uff0c\u56de\u8c03\u91cc\u7684\u53c2\u6570\u4e5f\u662f\u4e00\u4e2a\u5bf9\u5e94\u987a\u5e8f\u7684\u6570\u7ec4\uff0cVue3\u7ec4\u5408\u5f0f\u91cc\u7684\u5199\u6cd5\u66f4\u7edf\u4e00\uff0c\u76f4\u63a5\u628a\u8981\u76d1\u542c\u7684\u591a\u4e2a\u6570\u636e\u6e90\uff08ref\u3001getter\u51fd\u6570\u90fd\u53ef\u4ee5\u6df7\u7740\u6765\uff09\u653e\u5728\u7b2c\u4e00\u4e2a\u53c2\u6570\u7684\u6570\u7ec4\u91cc\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, reactive, watch } from &#39;vue&#39;\nconst count = ref(0)\nconst user = reactive({ name: &#39;\u5f20\u4e09&#39; })\n\/\/ \u6df7\u7740\u76d1\u542cref\u548creactive\u7684getter\uff0c\u56de\u8c03\u53c2\u6570\u4e5f\u662f\u6570\u7ec4\nwatch([count, () =&gt; user.name], ([newCount, newName], [oldCount, oldName]) =&gt; {\n  console.log(`count\u53d8\u4e86\uff1a${oldCount}\u2192${newCount}\uff0cname\u53d8\u4e86\uff1a${oldName}\u2192${newName}`)\n})<\/pre>\n<p>\u8fd9\u4e2a\u529f\u80fd\u7279\u522b\u9002\u5408\u90a3\u79cd\u201c\u591a\u4e2a\u6761\u4ef6\u6ee1\u8db3\u4e00\u4e2a\u5c31\u89e6\u53d1\u64cd\u4f5c\u201d\u6216\u8005\u201c\u9700\u8981\u62ff\u5230\u591a\u4e2a\u53d8\u5316\u540e\u7684\u503c\u4e00\u8d77\u5904\u7406\u201d\u7684\u573a\u666f\uff0c\u6bd4\u5982\u8868\u5355\u7684\u63d0\u4ea4\u72b6\u6001\u76d1\u542c\uff1a\u53ea\u6709\u5f53\u7528\u6237\u540d\u3001\u5bc6\u7801\u3001\u9a8c\u8bc1\u7801\u90fd\u586b\u5bf9\u4e86\uff0c\u63d0\u4ea4\u6309\u94ae\u624d\u53d8\u53ef\u7528\u2014\u2014\u4e0d\u8fc7\u8fd9\u91cc\u53ef\u80fd\u7528computed\u66f4\u5408\u9002\uff0c\u4f46\u76d1\u542c\u4e5f\u662f\u6ca1\u95ee\u9898\u7684\u3002<\/p>\n<h3>\u65b0\u589e\u7684\u914d\u7f6e\u9879\u4f60\u5f97\u77e5\u9053<\/h3>\n<p>Vue3\u7ec4\u5408\u5f0f\u7684watch\u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61,\u9664\u4e86\u4fdd\u7559Vue2\u7684<code>immediate<\/code>\uff08\u7acb\u5373\u6267\u884c\u4e00\u6b21\u56de\u8c03\uff09\u3001<code>deep<\/code>\uff08\u6df1\u5ea6\u76d1\u542c\u5bf9\u8c61\/\u6570\u7ec4\uff09\uff0c\u8fd8\u65b0\u589e\u4e86\u51e0\u4e2a\u597d\u7528\u7684\uff1a<\/p>\n<ul>\n<li><strong>flush<\/strong>: \u63a7\u5236\u56de\u8c03\u7684\u6267\u884c\u65f6\u673a\uff0c\u9ed8\u8ba4\u662f<code>'post'<\/code>\uff0c\u4e5f\u5c31\u662f\u5728DOM\u66f4\u65b0\u4e4b\u540e\u6267\u884c\uff1b\u5982\u679c\u6539\u6210<code>'pre'<\/code>\uff0c\u5c31\u662f\u5728DOM\u66f4\u65b0\u4e4b\u524d\u6267\u884c\uff0c\u9002\u5408\u90a3\u4e9b\u9700\u8981\u5728DOM\u91cd\u7ed8\u524d\u505a\u7684\u64cd\u4f5c\uff08\u6bd4\u5982\u4fee\u6539\u67d0\u4e2a\u8ba1\u7b97\u5c5e\u6027\u7684\u4f9d\u8d56\uff0c\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3\uff09\uff1b\u8fd8\u6709\u4e00\u4e2a<code>'sync'<\/code>\uff0c\u662f\u540c\u6b65\u6267\u884c\uff0c\u4e00\u65e6\u6570\u636e\u53d8\u4e86\u9a6c\u4e0a\u89e6\u53d1\uff0c\u614e\u7528\uff0c\u56e0\u4e3a\u53ef\u80fd\u4f1a\u5f71\u54cd\u6027\u80fd\u3002<\/li>\n<li><strong>onTrack \/ onTrigger<\/strong>: \u8c03\u8bd5\u7528\u7684\u914d\u7f6e\u9879\u3002<code>onTrack<\/code>\u4f1a\u5728\u54cd\u5e94\u5f0f\u6570\u636e\u88abtrack\uff08\u4e5f\u5c31\u662f\u88abwatch\/ computed\/\u6a21\u677f\u4f7f\u7528\uff09\u7684\u65f6\u5019\u89e6\u53d1\uff0c<code>onTrigger<\/code>\u4f1a\u5728\u6570\u636e\u53d8\u5316\u89e6\u53d1watch\u56de\u8c03\u7684\u65f6\u5019\u89e6\u53d1\uff0c\u91cc\u9762\u53ef\u4ee5\u6253\u5370\u51fa\u4f9d\u8d56\u7684\u4fe1\u606f\uff0c\u5e2e\u52a9\u4f60\u6392\u67e5\u4e3a\u4ec0\u4e48watch\u6ca1\u89e6\u53d1\u6216\u8005\u89e6\u53d1\u4e86\u592a\u591a\u6b21\u3002<\/li>\n<\/ul>\n<p>\u4e3e\u4e2a\u5e26\u914d\u7f6e\u9879\u7684\u4f8b\u5b50,\u65b9\u4fbf\u5927\u5bb6\u7406\u89e3\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst searchKeyword = ref(&#39;&#39;)\nconst searchResults = ref([])\n\/\/ \u76d1\u542c\u641c\u7d22\u5173\u952e\u8bcd\uff0c\u7acb\u5373\u6267\u884c\u4e00\u6b21\uff08\u9875\u9762\u52a0\u8f7d\u5c31\u641c\u9ed8\u8ba4\u5173\u952e\u8bcd\uff09\uff0c\u5e76\u4e14debounce\u4e00\u4e0b\uff08\u867d\u7136watch\u672c\u8eab\u6ca1\u6709debounce\u914d\u7f6e\uff0c\u4f46\u53ef\u4ee5\u7528\u7b2c\u4e09\u65b9\u5e93\u6216\u8005\u81ea\u5df1\u5199setTimeout\u5b9e\u73b0\uff0c\u8fd9\u91cc\u5148\u4e0d\u5c55\u5f00\uff09\nwatch(searchKeyword, async (newKeyword) =&gt; {\n  \/\/ \u8fd9\u91cc\u5047\u88c5\u662f\u8c03\u7528\u540e\u7aef\u7684\u641c\u7d22\u63a5\u53e3\n  const res = await fetch(`\/api\/search?keyword=${newKeyword}`)\n  searchResults.value = await res.json()\n}, {\n  immediate: true, \/\/ \u9875\u9762\u52a0\u8f7d\u5c31\u6267\u884c\n  flush: &#39;post&#39;, \/\/ \u7b49DOM\u66f4\u65b0\u5b8c\u518d\u6267\u884c\uff08\u867d\u7136\u8fd9\u91cc\u597d\u50cf\u4e0d\u5f71\u54cd\uff0c\u4f46\u4e60\u60ef\u4e0a\u5199API\u8c03\u7528\u7528post\uff09\n  onTrack(e) {\n    console.log(&#39;\u641c\u7d22\u5173\u952e\u8bcd\u88ab\u76d1\u542c\u4e86&#39;, e) \/\/ \u8c03\u8bd5\u7528\n  },\n  onTrigger(e) {\n    console.log(&#39;\u641c\u7d22\u5173\u952e\u8bcd\u53d8\u4e86\uff0c\u89e6\u53d1\u56de\u8c03&#39;, e) \/\/ \u8c03\u8bd5\u7528\n  }\n})<\/pre>\n<h2>setup\u91cc\u7684watch\u548cwatchEffect\u5230\u5e95\u8be5\u9009\u54ea\u4e2a\uff1f\u5f88\u591a\u4eba\u90fd\u641e\u6df7\uff01<\/h2>\n<p>\u8fd9\u662fVue3\u7ec4\u5408\u5f0f\u91cc\u6700\u5bb9\u6613\u8e29\u7684\u9009\u62e9\u56f0\u96be\u75c7\u5751\u4e86\uff1awatch\u548cwatchEffect\u90fd\u662f\u76d1\u542c\u54cd\u5e94\u5f0f\u6570\u636e\u7684\uff0c\u5230\u5e95\u4ec0\u4e48\u65f6\u5019\u7528\u54ea\u4e2a\uff1f\u522b\u7740\u6025\uff0c\u5148\u641e\u6e05\u695a\u5b83\u4eec\u7684<strong>\u6838\u5fc3\u533a\u522b<\/strong>\uff0c\u4e0b\u6b21\u5c31\u4e0d\u4f1a\u9009\u9519\u4e86\u3002<\/p>\n<h3>\u6838\u5fc3\u533a\u522b\u4e00\uff1awatch\u662f\u201c\u663e\u5f0f\u76d1\u542c\u201d\uff0cwatchEffect\u662f\u201c\u9690\u5f0f\u76d1\u542c\u201d<\/h3>\n<p>watch\u9700\u8981\u4f60<strong>\u660e\u786e\u6307\u5b9a\u8981\u76d1\u542c\u54ea\u4e9b\u6570\u636e<\/strong>\uff0c\u53ea\u6709\u8fd9\u4e9b\u6570\u636e\u53d8\u4e86\u624d\u4f1a\u89e6\u53d1\u56de\u8c03\uff1b\u800cwatchEffect\u4e0d\u9700\u8981\u4f60\u6307\u5b9a\uff0c\u5b83\u4f1a<strong>\u81ea\u52a8\u6536\u96c6\u56de\u8c03\u51fd\u6570\u5185\u90e8\u7528\u5230\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u6570\u636e\u4f5c\u4e3a\u4f9d\u8d56<\/strong>\uff0c\u53ea\u8981\u5176\u4e2d\u4efb\u4f55\u4e00\u4e2a\u4f9d\u8d56\u53d8\u4e86\uff0c\u5c31\u4f1a\u89e6\u53d1\u56de\u8c03\u3002<\/p>\n<p>\u4e3e\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\u5bf9\u6bd4\u4e00\u4e0b\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, watchEffect } from &#39;vue&#39;\nconst count = ref(0)\nconst doubleCount = ref(0)\n\/\/ \u663e\u5f0f\u76d1\u542ccount\uff0cdoubleCount\u53d8\u4e86\u4e0d\u4f1a\u89e6\u53d1\nwatch(count, (newCount) =&gt; {\n  doubleCount.value = newCount * 2\n  console.log(&#39;watch\u89e6\u53d1\uff0cdoubleCount\u66f4\u65b0&#39;)\n})\n\/\/ \u9690\u5f0f\u76d1\u542c\u56de\u8c03\u91cc\u7528\u5230\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u6570\u636e\u2014\u2014\u8fd9\u91cc\u7528\u5230\u4e86count\uff0c\u6240\u4ee5count\u53d8\u4e86\u4f1a\u89e6\u53d1\uff1b\u5982\u679c\u540e\u9762doubleCount\u4e5f\u88ab\u7528\u5230\u4e86\uff0cdoubleCount\u53d8\u4e86\u4e5f\u4f1a\u89e6\u53d1\nwatchEffect(() =&gt; {\n  doubleCount.value = count.value * 2\n  console.log(&#39;watchEffect\u89e6\u53d1\uff0cdoubleCount\u66f4\u65b0&#39;)\n})<\/pre>\n<p>\u770b\u8d77\u6765\u597d\u50cfwatchEffect\u66f4\u65b9\u4fbf\uff1f\u4e0d\u7528\u5199\u76d1\u542c\u6570\u636e\uff1f\u4f46\u522b\u6025\uff0c\u5148\u770b\u7b2c\u4e8c\u4e2a\u533a\u522b\u3002<\/p>\n<h3>\u6838\u5fc3\u533a\u522b\u4e8c\uff1awatch\u80fd\u62ff\u5230\u65e7\u503c\uff0cwatchEffect\u62ff\u4e0d\u5230\uff08\u9664\u975e\u4f60\u81ea\u5df1\u5b58\uff09<\/h3>\n<p>watch\u7684\u56de\u8c03\u51fd\u6570\u91cc\u9ed8\u8ba4\u6709\u4e24\u4e2a\u53c2\u6570\uff1a\u65b0\u503c\u548c\u65e7\u503c\uff0c\u8fd9\u4e2a\u5728\u5f88\u591a\u573a\u666f\u4e0b\u662f\u5fc5\u987b\u7684\u2014\u2014\u6bd4\u5982\u4f60\u8981\u505a\u4e00\u4e2a\u201c\u70b9\u8d5e\u53d6\u6d88\u5c31\u51cf\u79ef\u5206\uff0c\u70b9\u8d5e\u6210\u529f\u5c31\u52a0\u79ef\u5206\u201d\u7684\u529f\u80fd\uff0c\u4f60\u9700\u8981\u77e5\u9053\u70b9\u8d5e\u72b6\u6001\u4e4b\u524d\u662ftrue\u8fd8\u662ffalse\uff0c\u624d\u80fd\u51b3\u5b9a\u52a0\u8fd8\u662f\u51cf\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst isLiked = ref(false)\nconst points = ref(0)\n\/\/ \u5fc5\u987b\u62ff\u5230\u65e7\u503c\u624d\u80fd\u5224\u65ad\nwatch(isLiked, (newIsLiked, oldIsLiked) =&gt; {\n  if (newIsLiked &amp;&amp; !oldIsLiked) {\n    points.value += 10\n  } else if (!newIsLiked &amp;&amp; oldIsLiked) {\n    points.value -= 10\n  }\n})<\/pre>\n<p>\u5982\u679c\u7528watchEffect\u7684\u8bdd,\u4f60\u5f97\u81ea\u5df1\u5728\u7ec4\u4ef6\u91cc\u5b58\u4e00\u4e2a\u65e7\u503c\u7684\u53d8\u91cf\uff0c\u6bcf\u6b21\u56de\u8c03\u6267\u884c\u5b8c\u66f4\u65b0\u65e7\u503c\uff0c\u9ebb\u70e6\u4e0d\u8bf4\uff0c\u8fd8\u5bb9\u6613\u51fa\u9519\u2014\u2014\u6bd4\u5982immediate\u6267\u884c\u7684\u65f6\u5019\u65e7\u503c\u7684\u521d\u59cb\u503c\u5bf9\u4e0d\u5bf9\uff1f<\/p>\n<h3>\u6838\u5fc3\u533a\u522b\u4e09\uff1awatchEffect\u9ed8\u8ba4\u7acb\u5373\u6267\u884c\u4e00\u6b21\uff0cwatch\u9700\u8981\u624b\u52a8\u914d\u7f6eimmediate<\/h3>\n<p>\u521a\u624d\u7684\u4f8b\u5b50\u91cc\u5df2\u7ecf\u63d0\u5230\u4e86,watchEffect\u4e0d\u7ba1\u4f60\u6709\u6ca1\u6709\u914d\u7f6e\uff0c<strong>\u7b2c\u4e00\u6b21\u7ec4\u4ef6\u6e32\u67d3\u5230setup\u51fd\u6570\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u7acb\u5373\u6267\u884c\u4e00\u6b21\u56de\u8c03\u51fd\u6570<\/strong>\uff0c\u7528\u6765\u6536\u96c6\u4f9d\u8d56\uff1b\u800cwatch\u9ed8\u8ba4\u53ea\u6709\u6570\u636e\u53d8\u4e86\u624d\u4f1a\u89e6\u53d1\uff0c\u5982\u679c\u4f60\u60f3\u8ba9\u5b83\u7acb\u5373\u6267\u884c\uff0c\u5f97\u5728\u7b2c\u4e09\u4e2a\u914d\u7f6e\u5bf9\u8c61\u91cc\u52a0<code>immediate: true<\/code>\u3002<\/p>\n<h3>\u6838\u5fc3\u533a\u522b\u56db\uff1awatch\u53ef\u4ee5\u63a7\u5236\u76d1\u542c\u7684\u7c92\u5ea6\uff0cwatchEffect\u662f\u201c\u5168\u91cf\u201d\u4f9d\u8d56<\/h3>\n<p>\u524d\u9762\u8bf4\u8fc7,\u76d1\u542creactive\u5bf9\u8c61\u7684\u65f6\u5019\uff0cwatch\u53ef\u4ee5\u7528getter\u51fd\u6570\u53ea\u76d1\u542c\u67d0\u4e2a\u5c5e\u6027\uff0c\u6bd4\u5982<code>() =&gt; user.age<\/code>\uff0c\u53ea\u6709age\u53d8\u4e86\u624d\u4f1a\u89e6\u53d1\uff1b\u800c\u5982\u679c\u7528watchEffect\u76f4\u63a5\u8bbf\u95eeuser\u5bf9\u8c61\u7684\u591a\u4e2a\u5c5e\u6027\uff0c\u6bd4\u5982<code>console.log(user.name, user.age)<\/code>\uff0c\u90a3\u4e48\u4e0d\u7ba1\u662fname\u53d8\u4e86\u8fd8\u662fage\u53d8\u4e86\uff0c\u90fd\u4f1a\u89e6\u53d1\u56de\u8c03\u2014\u2014\u8fd9\u5728\u67d0\u4e9b\u573a\u666f\u4e0b\u4f1a\u9020\u6210\u4e0d\u5fc5\u8981\u7684\u6027\u80fd\u6d6a\u8d39\uff0c\u6bd4\u5982\u4f60\u53ea\u9700\u8981\u76d1\u542cage\u6765\u505a\u5e74\u9f84\u9a8c\u8bc1\uff0c\u7ed3\u679cname\u53d8\u4e86\u4e5f\u4f1a\u89e6\u53d1\u9a8c\u8bc1\u51fd\u6570\uff0c\u5b8c\u5168\u6ca1\u5fc5\u8981\u3002<\/p>\n<h3>\u4ec0\u4e48\u65f6\u5019\u9009watch\uff0c\u4ec0\u4e48\u65f6\u5019\u9009watchEffect\uff1f<\/h3>\n<p>\u73b0\u5728\u7ed9\u5927\u5bb6\u4e00\u4e2a\u7b80\u5355\u7684\u5224\u65ad\u6807\u51c6,\u8bb0\u4f4f\u8fd9\u51e0\u70b9\u5c31\u884c\uff1a<\/p>\n<ol>\n<li><strong>\u9700\u8981\u62ff\u5230\u65e7\u503c<\/strong>\uff1a<strong>\u9009watch<\/strong>\uff0c\u4e0d\u7528\u72b9\u8c6b\u3002<\/li>\n<li><strong>\u53ea\u9700\u8981\u76d1\u542c\u7279\u5b9a\u7684\u4e00\u4e2a\u6216\u51e0\u4e2a\u6570\u636e<\/strong>\uff1a<strong>\u9009watch<\/strong>\uff0c\u6027\u80fd\u66f4\u597d\u3002<\/li>\n<li><strong>\u4e0d\u9700\u8981\u6307\u5b9a\u4f9d\u8d56\uff0c\u4f9d\u8d56\u662f\u52a8\u6001\u53d8\u5316\u7684<\/strong>\uff1a<strong>\u9009watchEffect<\/strong>\u2014\u2014\u6bd4\u5982\u4f60\u505a\u4e00\u4e2a\u6570\u636e\u9884\u89c8\u7ec4\u4ef6\uff0c\u9884\u89c8\u7684\u5185\u5bb9\u662f\u6839\u636e\u7528\u6237\u9009\u62e9\u7684\u4e0d\u540c\u6570\u636e\u9879\u751f\u6210\u7684\uff0c\u7528\u6237\u9009A\u5c31\u7528A\u7684\u6570\u636e\uff0c\u9009B\u5c31\u7528B\u7684\u6570\u636e\uff0c\u8fd9\u65f6\u5019\u7528watchEffect\u81ea\u52a8\u6536\u96c6\u9009\u4e2d\u6570\u636e\u9879\u7684\u4f9d\u8d56\u6700\u5408\u9002\uff0c\u4e0d\u7528\u6bcf\u6b21\u7528\u6237\u6362\u9009\u9879\u90fd\u624b\u52a8\u6539watch\u7684\u76d1\u542c\u6570\u636e\u3002<\/li>\n<li><strong>\u53ea\u662f\u7b80\u5355\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u8054\u52a8\uff0c\u4e0d\u9700\u8981\u65e7\u503c\uff0c\u4e5f\u4e0d\u5173\u5fc3\u6027\u80fd\uff08\u6216\u8005\u6027\u80fd\u5f71\u54cd\u5f88\u5c0f\uff09<\/strong>\uff1a<strong>\u9009watchEffect<\/strong>\uff0c\u5199\u6cd5\u66f4\u7b80\u6d01\u3002<\/li>\n<\/ol>\n<h2>setup\u91cc\u7528watch\u7684\u5e38\u89c1\u8e29\u5751\u6307\u5357\uff0c90%\u7684\u4eba\u90fd\u4e2d\u8fc7\uff01<\/h2>\n<h3>\u5751\u4e00\uff1a\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61\uff0c\u5bfc\u81f4\u6df1\u5ea6\u76d1\u542c\u5931\u6548\u6216\u8005\u65e7\u503c\u62ff\u4e0d\u5230<\/h3>\n<p>\u8fd9\u4e2a\u662f\u6700\u5e38\u89c1\u7684\u5751\u4e86\uff01\u5f88\u591a\u521a\u8f6c\u8fc7\u6765\u7684\u670b\u53cb\u4f1a\u60f3\uff1a\u201cVue2\u91cc\u76f4\u63a5\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\uff0c\u52a0\u4e2adeep: true\u5c31\u80fd\u6df1\u5ea6\u76d1\u542c\uff0cVue3\u5e94\u8be5\u4e5f\u4e00\u6837\u5427\uff1f\u201d\u7136\u540e\u5c31\u5199\u6210\u8fd9\u6837\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { reactive, watch } from &#39;vue&#39;\nconst user = reactive({ name: &#39;\u5f20\u4e09&#39;, info: { age: 18 } })\n\/\/ \u9519\u8bef\u5199\u6cd5\uff1a\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61\nwatch(user, (newUser, oldUser) =&gt; {\n  console.log(&#39;user\u53d8\u4e86&#39;, newUser, oldUser)\n}, { deep: true })<\/pre>\n<p>\u8fd9\u4e2a\u5199\u6cd5\u6709\u4e24\u4e2a\u95ee\u9898\uff1a<\/p>\n<ol>\n<li><strong>\u65e7\u503c\u62ff\u4e0d\u5230<\/strong>\uff1a\u4e0d\u7ba1\u4f60\u6539user\u7684\u54ea\u4e2a\u5c5e\u6027\uff0cnewUser\u548coldUser\u90fd\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff0c\u56e0\u4e3areactive\u5bf9\u8c61\u662f\u54cd\u5e94\u5f0f\u7684\u5f15\u7528\u7c7b\u578b\uff0cVue3\u4e0d\u4f1a\u4e3a\u4e86\u76d1\u542c\u5b83\u800c\u505a\u6df1\u62f7\u8d1d\uff08\u592a\u6d88\u8017\u6027\u80fd\u4e86\uff09\uff0c\u6240\u4ee5\u6253\u5370\u51fa\u6765\u7684oldUser\u5176\u5b9e\u4e5f\u662f\u4fee\u6539\u540e\u7684\u5bf9\u8c61\u3002<\/li>\n<li><strong>\u52a0\u4e0d\u52a0deep: true\u90fd\u4f1a\u6df1\u5ea6\u76d1\u542c<\/strong>\uff1a\u54e6\uff1f\u8fd8\u6709\u8fd9\u79cd\u64cd\u4f5c\uff1f\u5bf9\uff0cVue3\u91cc\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61\u7684\u8bdd\uff0c\u9ed8\u8ba4\u5c31\u662f\u6df1\u5ea6\u76d1\u542c\u7684\uff0c\u4e0d\u7ba1\u4f60\u6709\u6ca1\u6709\u52a0deep\u914d\u7f6e\u2014\u2014\u8fd9\u5176\u5b9e\u662f\u5b98\u65b9\u7684\u4e00\u4e2a\u8bbe\u8ba1\uff0c\u56e0\u4e3areactive\u5bf9\u8c61\u672c\u8eab\u5c31\u662f\u6df1\u5c42\u54cd\u5e94\u5f0f\u7684\uff0c\u4f46\u7ed3\u5408\u7b2c\u4e00\u4e2a\u95ee\u9898\uff0c\u8fd9\u4e2a\u8bbe\u8ba1\u53cd\u800c\u5bb9\u6613\u8ba9\u4eba\u8e29\u5751\u3002<\/li>\n<\/ol>\n<p><strong>\u6b63\u786e\u7684\u5199\u6cd5<\/strong>\uff1a<\/p>\n<ul>\n<li>\u5982\u679c\u4f60\u53ea\u9700\u8981\u76d1\u542creactive\u5bf9\u8c61\u7684<strong>\u67d0\u4e2a\u5c5e\u6027<\/strong>\uff1a\u7528getter\u51fd\u6570\uff0c\u6bd4\u5982<code>() =&gt; user.name<\/code>\u6216\u8005<code>() =&gt; ({ ...user })<\/code>\uff08\u5982\u679c\u9700\u8981\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\u7684\u6d45\u53d8\u5316\uff0c\u6bd4\u5982\u66ff\u6362\u6574\u4e2ainfo\u5bf9\u8c61\uff09\u3002<\/li>\n<li>\u5982\u679c\u4f60\u9700\u8981\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\u7684<strong>\u6df1\u53d8\u5316\uff0c\u5e76\u4e14\u9700\u8981\u62ff\u5230\u65e7\u503c<\/strong>\uff1a\u90a3\u4f60\u5f97\u81ea\u5df1\u5728\u7ec4\u4ef6\u91cc\u5b58\u4e00\u4e2a\u65e7\u503c\u7684\u6df1\u62f7\u8d1d\uff0c\u6bcf\u6b21watch\u89e6\u53d1\u7684\u65f6\u5019\u5148\u628a\u65e7\u503c\u5b58\u4e0b\u6765\uff0c\u518d\u66f4\u65b0\u2014\u2014\u4e0d\u8fc7\u8fd9\u79cd\u573a\u666f\u5f88\u5c11\u89c1\uff0c\u4e00\u822c\u5efa\u8bae\u5c3d\u91cf\u62c6\u5206\u76d1\u542c\u7684\u5c5e\u6027\uff0c\u6216\u8005\u7528computed\u8ba1\u7b97\u51fa\u9700\u8981\u7684\u5c5e\u6027\u518d\u76d1\u542c\u3002<\/li>\n<\/ul>\n<p>\u4e3e\u4e2a\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\u6d45\u53d8\u5316\u7684\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { reactive, watch } from &#39;vue&#39;\nconst user = reactive({ name: &#39;\u5f20\u4e09&#39;, info: { age: 18 } })\n\/\/ \u6b63\u786e\u5199\u6cd5\uff1a\u7528getter\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u6d45\u62f7\u8d1d\u7684\u5bf9\u8c61\uff0c\u8fd9\u6837\u53ea\u6709user\u7684\u9876\u5c42\u5c5e\u6027\u53d8\u5316\u7684\u65f6\u5019\u624d\u4f1a\u89e6\u53d1\uff0c\u5e76\u4e14\u80fd\u62ff\u5230\u65e7\u503c\nwatch(() =&gt; ({ ...user }), (newUser, oldUser) =&gt; {\n  console.log(&#39;user\u7684\u9876\u5c42\u5c5e\u6027\u53d8\u4e86&#39;, newUser, oldUser)\n})\n\/\/ \u6d4b\u8bd5\u4e00\u4e0b\nuser.name = &#39;\u674e\u56db&#39; \/\/ \u4f1a\u89e6\u53d1\uff0c\u9876\u5c42\u5c5e\u6027\u53d8\u4e86\nuser.info.age = 20 \/\/ \u4e0d\u4f1a\u89e6\u53d1\uff0c\u56e0\u4e3a\u662finfo\u7684\u5c5e\u6027\uff0c\u6d45\u62f7\u8d1d\u7684user\u91ccinfo\u8fd8\u662f\u539f\u6765\u7684\u5f15\u7528<\/pre>\n<h3>\u5751\u4e8c\uff1a\u76d1\u542cref\u5305\u88f9\u7684\u5bf9\u8c61\uff0cdeep\u914d\u7f6e\u6ca1\u751f\u6548<\/h3>\n<p>\u521a\u624d\u8bf4\u7684\u662f\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61,\u90a3\u5982\u679c\u662fref\u5305\u88f9\u7684\u666e\u901a\u5bf9\u8c61\u5462\uff1f<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst user = ref({ name: &#39;\u5f20\u4e09&#39;, info: { age: 18 } })\n\/\/ \u9519\u8bef\u5199\u6cd5\uff1a\u6ca1\u52a0deep: true\uff0c\u53ea\u76d1\u542cref\u7684value\u5f15\u7528\u53d8\u5316\nwatch(user, (newUser, oldUser) =&gt; {\n  console.log(&#39;user\u53d8\u4e86&#39;, newUser, oldUser)\n})\n\/\/ \u6d4b\u8bd5\u4e00\u4e0b\nuser.value.name = &#39;\u674e\u56db&#39; \/\/ \u4e0d\u4f1a\u89e6\u53d1\uff0c\u56e0\u4e3avalue\u7684\u5f15\u7528\u6ca1\u53d8\uff0c\u53ea\u662f\u91cc\u9762\u7684\u5c5e\u6027\u53d8\u4e86\nuser.value = { name: &#39;\u738b\u4e94&#39;, info: { age: 20 } } \/\/ \u4f1a\u89e6\u53d1\uff0c\u56e0\u4e3avalue\u7684\u5f15\u7528\u53d8\u4e86<\/pre>\n<p>\u54e6,\u8fd9\u4e2a\u548creactive\u5bf9\u8c61\u6b63\u597d\u76f8\u53cd\uff01ref\u5305\u88f9\u7684\u666e\u901a\u5bf9\u8c61\uff08\u4e0d\u662freactive\u5bf9\u8c61\uff09\uff0c\u9ed8\u8ba4<strong>\u53ea\u76d1\u542cvalue\u7684\u5f15\u7528\u53d8\u5316<\/strong>\uff0c\u5982\u679c\u4f60\u8981\u6df1\u5ea6\u76d1\u542c\u91cc\u9762\u7684\u5c5e\u6027\uff0c\u5fc5\u987b\u624b\u52a8\u52a0<code>deep: true<\/code>\u2014\u2014\u800c\u4e14\u52a0\u4e86\u4e4b\u540e\uff0c\u4e5f\u80fd\u62ff\u5230\u65e7\u503c\u5417\uff1f\n\u7b49\u4e00\u4e0b\uff0c\u6211\u4eec\u6d4b\u8bd5\u4e00\u4e0b\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst user = ref({ name: &#39;\u5f20\u4e09&#39;, info: { age: 18 } })\nwatch(user, (newUser, oldUser) =&gt; {\n  console.log(&#39;user\u7684value\u5f15\u7528\u53d8\u4e86\uff1f&#39;, newUser === oldUser)\n  console.log(&#39;newUser.name:&#39;, newUser.name)\n  console.log(&#39;oldUser.name:&#39;, oldUser.name)\n}, { deep: true })\n\/\/ \u6d4b\u8bd5\u4fee\u6539\u5c5e\u6027\nuser.value.name = &#39;\u674e\u56db&#39; \/\/ \u4f1a\u89e6\u53d1\n\/\/ \u6253\u5370\u7ed3\u679c\uff1a\n\/\/ user\u7684value\u5f15\u7528\u53d8\u4e86\uff1f false\uff08\u56e0\u4e3avalue\u8fd8\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff09\n\/\/ newUser.name: \u674e\u56db\n\/\/ oldUser.name: \u674e\u56db\uff08\u56e0\u4e3aoldUser\u4e5f\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff09<\/pre>\n<p>\u54e6,\u539f\u6765\u5982\u6b64\uff01\u4e0d\u7ba1\u662freactive\u5bf9\u8c61\u8fd8\u662fref\u5305\u88f9\u7684\u666e\u901a\u5bf9\u8c61\uff0c\u53ea\u8981\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u52a0\u4e86deep\u914d\u7f6e\u4e4b\u540e\uff0c\u4fee\u6539\u91cc\u9762\u7684\u5c5e\u6027\uff0cnewVal\u548coldVal\u90fd\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff0c\u62ff\u4e0d\u5230\u771f\u6b63\u7684\u65e7\u503c\u2014\u2014\u53ea\u6709\u5f53\u5f15\u7528\u672c\u8eab\u53d8\u5316\u7684\u65f6\u5019\uff08\u6bd4\u5982ref.value\u91cd\u65b0\u8d4b\u503c\uff0creactive\u5bf9\u8c61\u88ab\u6574\u4f53\u66ff\u6362\uff0c\u4f46reactive\u5bf9\u8c61\u4e0d\u80fd\u6574\u4f53\u66ff\u6362\uff0c\u56e0\u4e3a\u5b83\u662fconst\u7684\uff09\uff0c\u624d\u80fd\u62ff\u5230\u65e7\u503c\u3002<\/p>\n<p><strong>\u6b63\u786e\u7684\u5199\u6cd5<\/strong>\uff1a<\/p>\n<ul>\n<li>\u5982\u679c\u662fref\u5305\u88f9\u7684\u666e\u901a\u5bf9\u8c61,\u53ea\u9700\u8981\u76d1\u542c\u5f15\u7528\u53d8\u5316\uff1a\u76f4\u63a5\u4f20ref\uff0c\u4e0d\u7528\u52a0deep\u3002<\/li>\n<li>\u5982\u679c\u9700\u8981\u6df1\u5ea6\u76d1\u542c,\u4f46\u4e0d\u9700\u8981\u65e7\u503c\uff1a\u4f20ref\uff0c\u52a0deep: true\u3002<\/li>\n<li>\u5982\u679c\u9700\u8981\u6df1\u5ea6\u76d1\u542c,\u5e76\u4e14\u9700\u8981\u65e7\u503c\uff1a\u548creactive\u5bf9\u8c61\u4e00\u6837\uff0c\u81ea\u5df1\u5b58\u65e7\u503c\u7684\u6df1\u62f7\u8d1d\uff0c\u6216\u8005\u7528getter\u51fd\u6570\u8fd4\u56de\u6d45\u62f7\u8d1d\/\u6df1\u62f7\u8d1d\u7684\u5bf9\u8c61\u3002<\/li>\n<\/ul>\n<h3>\u5751\u4e09\uff1a\u76d1\u542ccomputed\u5c5e\u6027\u7684\u65f6\u5019\uff0ccomputed\u672c\u8eab\u662f\u60f0\u6027\u7684\uff0c\u4f1a\u4e0d\u4f1a\u6709\u95ee\u9898\uff1f<\/h3>\n<p>\u5f88\u591a\u670b\u53cb\u4f1a\u62c5\u5fc3\uff1a\u201ccomputed\u662f\u60f0\u6027\u7684\uff0c\u53ea\u6709\u88ab\u8bbf\u95ee\u7684\u65f6\u5019\u624d\u4f1a\u8ba1\u7b97\uff0c\u90a3\u6211\u7528watch\u76d1\u542c\u5b83\uff0c\u4f1a\u4e0d\u4f1a\u56e0\u4e3a\u6ca1\u8bbf\u95ee\u8fc7\u800c\u4e0d\u89e6\u53d1\uff1f\u201d\u522b\u62c5\u5fc3\uff0c<strong>watch\u76d1\u542ccomputed\u5c5e\u6027\u7684\u65f6\u5019\uff0c\u4f1a\u81ea\u52a8\u89e6\u53d1computed\u7684\u8ba1\u7b97\uff0c\u5e76\u4e14\u6536\u96c6computed\u7684\u4f9d\u8d56\u4f5c\u4e3a\u81ea\u5df1\u7684\u95f4\u63a5\u4f9d\u8d56<\/strong>\u2014\u2014\u4e5f\u5c31\u662f\u8bf4\uff0c\u53ea\u8981computed\u7684\u4f9d\u8d56\u53d8\u4e86\uff0ccomputed\u7684\u8fd4\u56de\u503c\u53d8\u4e86\uff0cwatch\u5c31\u4f1a\u89e6\u53d1\uff0c\u4e0d\u7ba1\u4f60\u4e4b\u524d\u6709\u6ca1\u6709\u8bbf\u95ee\u8fc7computed\u3002<\/p>\n<p>\u4e3e\u4e2a\u4f8b\u5b50\u9a8c\u8bc1\u4e00\u4e0b\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, computed, watch } from &#39;vue&#39;\nconst count = ref(0)\nconst doubleCount = computed(() =&gt; {\n  console.log(&#39;doubleCount\u88ab\u8ba1\u7b97\u4e86&#39;)\n  return count.value * 2\n})\n\/\/ \u6ce8\u610f\uff1a\u8fd9\u91cc\u6ca1\u6709\u5728\u6a21\u677f\u6216\u8005\u5176\u4ed6\u5730\u65b9\u8bbf\u95eedoubleCount\nwatch(doubleCount, (newVal, oldVal) =&gt; {\n  console.log(&#39;doubleCount\u53d8\u4e86&#39;, newVal, oldVal)\n})\n\/\/ \u6d4b\u8bd5\u4fee\u6539count\ncount.value = 1 \/\/ \u4f1a\u5148\u6253\u5370\u201cdoubleCount\u88ab\u8ba1\u7b97\u4e86\u201d\uff0c\u7136\u540e\u6253\u5370\u201cdoubleCount\u53d8\u4e86 2 0\u201d<\/pre>\n<p>\u4f60\u770b,\u6ca1\u95ee\u9898\u5427\uff1fwatch\u81ea\u52a8\u89e6\u53d1\u4e86doubleCount\u7684\u8ba1\u7b97\uff0c\u5e76\u4e14count\u53d8\u4e86\u4e4b\u540e\uff0cdoubleCount\u4e5f\u53d8\u4e86\uff0cwatch\u5c31\u89e6\u53d1\u4e86\u3002<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u6709\u4e2a\u5c0f\u7ec6\u8282\uff1a\u5982\u679ccomputed\u7684\u4f9d\u8d56\u53d8\u4e86\uff0c\u4f46computed\u7684\u8fd4\u56de\u503c\u6ca1\u53d8\uff08\u6bd4\u5982count.value\u662f1\uff0ccomputed\u8fd4\u56de\u7684\u662fcount.value &gt; 0 ? true : true\uff09\uff0c\u90a3watch\u4f1a\u4e0d\u4f1a\u89e6\u53d1\uff1f\u7b54\u6848\u662f<strong>\u4e0d\u4f1a<\/strong>\u2014\u2014\u56e0\u4e3acomputed\u4f1a\u505a\u7f13\u5b58\uff0c\u53ea\u6709\u5f53\u4f9d\u8d56\u53d8\u4e86\u5e76\u4e14\u8fd4\u56de\u503c\u548c\u4e0a\u6b21\u4e0d\u4e00\u6837\u7684\u65f6\u5019\uff0c\u624d\u4f1a\u66f4\u65b0\u7f13\u5b58\uff0cwatch\u624d\u4f1a\u89e6\u53d1\uff0c\u8fd9\u4e2a\u7279\u6027\u5f88\u597d\uff0c\u907f\u514d\u4e86\u4e0d\u5fc5\u8981\u7684\u56de\u8c03\u6267\u884c\u3002<\/p>\n<h3>\u5751\u56db\uff1awatch\u56de\u8c03\u91cc\u7684this\u6307\u5411\u4e0d\u5bf9<\/h3>\n<p>\u54e6,\u4e0d\u5bf9\uff0c\u7ec4\u5408\u5f0f\u7684setup\u51fd\u6570\u91cc<strong>\u6ca1\u6709this<\/strong>\uff01\u5f88\u591a\u521a\u8f6c\u8fc7\u6765\u7684\u670b\u53cb\u4f1a\u4e60\u60ef\u6027\u5730\u5728watch\u56de\u8c03\u91cc\u5199<code>this.$emit<\/code>\u6216\u8005<code>this.$refs<\/code>\uff0c\u7ed3\u679c\u62a5\u9519\u201cthis is undefined\u201d\u3002<\/p>\n<p><strong>\u6b63\u786e\u7684\u5199\u6cd5<\/strong>\uff1a<\/p>\n<ul>\n<li>\u5982\u679c\u8981\u5728setup\u91cc\u7528<code>$emit<\/code>\uff1a\u4ece<code>vue<\/code>\u91cc\u5bfc\u5165<code>defineEmits<\/code>\uff0c\u5148\u5b9a\u4e49emits\uff0c\u7136\u540e\u8c03\u7528\u5b9a\u4e49\u597d\u7684emits\u51fd\u6570\u3002<\/li>\n<li>\u5982\u679c\u8981\u5728setup\u91cc\u7528<code>$refs<\/code>\uff1a\u7528<code>ref(null)<\/code>\u7ed9DOM\u5143\u7d20\u6216\u8005\u5b50\u7ec4\u4ef6\u7ed1\u5b9aref\uff0c\u7136\u540e\u76f4\u63a5\u8bbf\u95eeref\u7684value\uff08\u6ce8\u610f\u8981\u5728<code>onMounted<\/code>\u4e4b\u540e\u8bbf\u95ee\uff0c\u56e0\u4e3aDOM\u5143\u7d20\u6216\u8005\u5b50\u7ec4\u4ef6\u53ea\u6709\u6302\u8f7d\u4e4b\u540e\u624d\u4f1a\u6709\u503c\uff09\u3002<\/li>\n<\/ul>\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, defineEmits, onMounted } from &#39;vue&#39;\nconst count = ref(0)\nconst emits = defineEmits([&#39;count-changed&#39;]) \/\/ \u5b9a\u4e49emits\nconst countInputRef = ref(null) \/\/ \u7ed1\u5b9aDOM\u5143\u7d20\u7684ref\nonMounted(() =&gt; {\n  console.log(&#39;countInputRef\u7684value:&#39;, countInputRef.value) \/\/ \u8fd9\u91cc\u624d\u80fd\u8bbf\u95ee\u5230DOM\u5143\u7d20\n})\nwatch(count, (newCount) =&gt; {\n  emits(&#39;count-changed&#39;, newCount) \/\/ \u6b63\u786e\u7684emit\u5199\u6cd5\n  countInputRef.value.focus() \/\/ \u5047\u8bbecount\u53d8\u4e86\u4e4b\u540e\u8981\u8ba9\u8f93\u5165\u6846\u83b7\u53d6\u7126\u70b9\n})<\/pre>\n<h2>setup\u91cc\u7684watch\u4f60\u638c\u63e1\u4e86\u5417\uff1f<\/h2>\n<p>\u4eca\u5929\u6211\u4eec\u4ece\u4e3a\u4ec0\u4e48\u7528setup\u91cc\u7684watch,\u5230\u57fa\u7840\u7528\u6cd5\u3001\u914d\u7f6e\u9879\uff0c\u518d\u5230\u548cwatchEffect\u7684\u5bf9\u6bd4\uff0c\u6700\u540e\u8bb2\u4e86\u56db\u4e2a\u5e38\u89c1\u7684\u8e29\u5751\u6307\u5357\uff0c\u76f8\u4fe1\u5927\u5bb6\u5bf9Vue3\u7ec4\u5408\u5f0f\u7684watch\u5df2\u7ecf\u6709\u4e86\u6bd4\u8f83\u5168\u9762\u7684\u4e86\u89e3\u3002<\/p>\n<p>\u6700\u540e\u518d\u7ed9\u5927\u5bb6\u603b\u7ed3\u51e0\u4e2a\u5173\u952e\u70b9,\u65b9\u4fbf\u5927\u5bb6\u8bb0\u5fc6\uff1a<\/p>\n<ol>\n<li>\u7ec4\u5408\u5f0f\u7684watch\u66f4\u9002\u5408\u903b\u8f91\u590d\u7528\u3001\u7c7b\u578b\u63a8\u5bfc\uff0c\u9009\u9879\u5f0f\u7684watch\u4f9d\u7136\u517c\u5bb9\uff0c\u6309\u9700\u9009\u62e9\u3002<\/li>\n<li>\u76d1\u542c\u5355\u4e2areactive\u5c5e\u6027\u8981\u7528getter\u51fd\u6570,\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61\u9ed8\u8ba4\u6df1\u5ea6\u76d1\u542c\u4f46\u62ff\u4e0d\u5230\u65e7\u503c\u3002<\/li>\n<li>\u76d1\u542cref\u5305\u88f9\u7684\u666e\u901a\u5bf9\u8c61,\u9ed8\u8ba4\u53ea\u76d1\u542c\u5f15\u7528\u53d8\u5316\uff0c\u6df1\u5ea6\u76d1\u542c\u8981\u52a0deep: true\u3002<\/li>\n<li>watch\u80fd\u62ff\u5230\u65e7\u503c\u3001\u663e\u5f0f\u76d1\u542c\u3001\u6027\u80fd\u66f4\u597d\uff0c\u9002\u5408\u5927\u591a\u6570\u573a\u666f\uff1bwatchEffect\u9690\u5f0f\u76d1\u542c\u3001\u9ed8\u8ba4\u7acb\u5373\u6267\u884c\uff0c\u9002\u5408\u52a8\u6001\u4f9d\u8d56\u7684\u573a\u666f\u3002<\/li>\n<li>setup\u91cc\u6ca1\u6709this,\u8981\u7528defineEmits\u3001ref\u6765\u4ee3\u66ff\u9009\u9879\u5f0f\u7684this.$emit\u3001this.$refs\u3002<\/li>\n<\/ol>\n<p>\u5982\u679c\u5927\u5bb6\u8fd8\u6709\u5176\u4ed6\u5173\u4e8eVue3 watch setup\u7684\u95ee\u9898\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u8ba8\u8bba\uff0c\u6211\u4eec\u4e00\u8d77\u5b66\u4e60\u8fdb\u6b65\uff01<\/p>","pubDate":"Sat, 18 Apr 2026 20:02:42 +0800"},{"title":"Vue3\u9879\u76ee\u4e2dwatch store state\u4e3a\u4ec0\u4e48\u6ca1\u7528\uff1f\u6b63\u786e\u59ff\u52bf\u6709\u54ea\u4e9b\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421759.html","description":"<p>\u521a\u4e0a\u624bVue3\u505a\u72b6\u6001\u7ba1\u7406\u7684\u670b\u53cb\uff0c\u80af\u5b9a\u8e29\u8fc7\u8fd9\u4e2a\u5751\uff1a\u660e\u660e\u7528\u4e86Vuex\u6216\u8005Pinia\u5b58\u4e86\u6570\u636e\uff0c\u9875\u9762\u7ec4\u4ef6\u4e5f\u5199\u4e86watch\u76d1\u542c\uff0c\u4f46\u6570\u636e\u53d8\u4e86\uff0c\u56de\u8c03\u5c31\u662f\u7eb9\u4e1d\u4e0d\u52a8\uff1f\u8981\u4e48\u5c31\u662f\u5076\u5c14\u52a8\u5076\u5c14\u4e0d\u52a8\uff1f\u522b\u614c\uff0c\u8fd9\u79cd\u60c5\u51b590%\u4ee5\u4e0a\u90fd\u4e0d\u662f\u6846\u67b6bug\uff0c\u800c\u662f\u6211\u4eec\u6ca1\u6478\u900fVue3\u54cd\u5e94\u5f0f\u7cfb\u7edf\u548c\u72b6\u6001\u5e93\u7ed3\u5408\u7684\u7ec6\u8282\uff0c\u4eca\u5929\u5c31\u4ece\u95ee\u9898\u6839\u6e90\u51fa\u53d1\uff0c\u628a\u6ca1\u7528\u7684\u5e38\u89c1\u539f\u56e0\u6252\u5f97\u660e\u660e\u767d\u767d\uff0c\u518d\u4eceVuex\u5230Pinia\u3001\u4ece\u57fa\u7840\u76d1\u542c to \u6df1\u5ea6\u573a\u666f,\u7ed9\u4f60\u4e00\u5957\u5168\u662f\u5b9e\u6218\u5e72\u8d27\u7684\u6b63\u786e\u64cd\u4f5c\u3002<\/p>\n<h2>Vue3 watch\u76d1\u542cstore state\u6ca1\u7528\u76844\u4e2a\u6838\u5fc3\u539f\u56e0<\/h2>\n<p>\u9996\u5148\u5f97\u641e\u61c2\u201c\u6ca1\u7528\u201d\u7684\u672c\u8d28\uff1a\u8981\u4e48\u662fVue3\u7684\u54cd\u5e94\u5f0f\u8ffd\u8e2a\u6ca1\u8fde\u4e0a\u4f60\u8981\u76d1\u542c\u7684\u4e1c\u897f\uff0c\u8981\u4e48\u662f\u4f60\u7684watch\u914d\u7f6e\u6709\u95ee\u9898\uff0c\u6216\u8005\u662fstore\u7684\u72b6\u6001\u66f4\u65b0\u65b9\u5f0f\u89e6\u53d1\u4e0d\u4e86\u8ffd\u8e2a\uff0c\u5148\u628a\u8fd9\u51e0\u4e2a\u9ad8\u9891\u96f7\u70b9\u5217\u51fa\u6765,\u770b\u770b\u4f60\u4e2d\u4e86\u54ea\u4e00\u4e2a\u3002<\/p>\n<h3>\u96f7\u70b91\uff1a\u76f4\u63a5\u76d1\u542c\u4e86store\u7684\u201c\u58f3\u5b50\u201d\uff0c\u6ca1\u89e3\u5305\u5230\u5185\u90e8\u7684\u5177\u4f53\u503c<\/h3>\n<p>\u4e0d\u7ba1\u662fVuex4\u8fd8\u662fPinia\uff0c\u66b4\u9732\u7ed9\u7ec4\u4ef6\u7684\u90fd\u662f\u4e00\u4e2a\u7ecf\u8fc7\u5904\u7406\u7684\u54cd\u5e94\u5f0f\u5bf9\u8c61\u2014\u2014Vuex4\u662f<code>reactive()<\/code>\u5305\u88f9\u7684\u5b9e\u4f8b\uff0cPinia\u9ed8\u8ba4\u4e5f\u662f<code>reactive()<\/code>\u5305\u88f9\u7684store\u5bf9\u8c61\uff08\u9664\u4e86\u7ec4\u5408\u5f0fAPI\u98ce\u683c\u4e0b\u76f4\u63a5<code>return<\/code>\u7684\u90a3\u4e9b\uff0c\u4f46\u4e00\u822c\u6211\u4eec\u4f1a\u52a0<code>ref\/reactive<\/code>\u5305\u88c5\uff09\u3002<\/p>\n<p>\u5f88\u591a\u65b0\u624b\u4f1a\u76f4\u63a5\u5199\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ Vuex4\u793a\u4f8b\nimport { useStore } from &#39;vuex&#39;\nimport { watch } from &#39;vue&#39;\nconst store = useStore()\n\/\/ \u274c\u76f4\u63a5\u76d1\u542cstore\uff0c\u6ca1\u7528\uff01\nwatch(store, (newVal) =&gt; {\n  console.log(&#39;store\u53d8\u4e86\uff1f\u5e76\u6ca1\u6709&#39;)\n})<\/pre>\n<p>\u6216\u8005Pinia\u91cc\u76f4\u63a5\u5199\u76d1\u542c\u6574\u4e2auseXxxStore\u7684\u8fd4\u56de\u503c\uff0c\u4e5f\u662f\u4e00\u6837\u7684\u95ee\u9898\uff0c\u4e3a\u4ec0\u4e48\uff1f\u56e0\u4e3a<code>watch<\/code>\u76d1\u542c\u54cd\u5e94\u5f0f\u5bf9\u8c61\u672c\u8eab\u65f6\uff0c\u9ed8\u8ba4\u53ea\u8ffd\u8e2a\u201c\u5bf9\u8c61\u5f15\u7528\u7684\u53d8\u5316\u201d\u2014\u2014\u4e5f\u5c31\u662f\u4f60\u5f97\u628a\u6574\u4e2astore\u5bf9\u8c61\u66ff\u6362\u6210\u53e6\u4e00\u4e2a\u65b0\u5bf9\u8c61\uff0c\u624d\u4f1a\u89e6\u53d1\u56de\u8c03\uff0c\u4f46\u72b6\u6001\u7ba1\u7406\u91cc\u6211\u4eec\u4ece\u6765\u4e0d\u4f1a\u8fd9\u4e48\u5e72,\u90fd\u662f\u6539\u5185\u90e8\u7684\u5c5e\u6027\u3002<\/p>\n<p>\u90a3\u4e3a\u4ec0\u4e48\u6709\u65f6\u5019\u89e3\u5305\u4e86\u8fd8\u6ca1\u7528\uff1f\u6bd4\u5982Vuex4\u91cc\u53d6<code>store.state.count<\/code>\uff0c\u5982\u679c\u76f4\u63a5\u5199\u6210\u5b57\u7b26\u4e32\u5f62\u5f0f\u7684\u8def\u5f84\uff0c\u6216\u8005\u6ca1\u6ce8\u610f\u5230Pinia\u91cc\u67d0\u4e9b\u975e\u54cd\u5e94\u5f0f\u7684\u60c5\u51b5\uff1f\u522b\u6025,\u540e\u9762\u7ed3\u5408\u6b63\u786e\u59ff\u52bf\u4f1a\u8bb2\u3002<\/p>\n<h3>\u96f7\u70b92\uff1aVue3\u54cd\u5e94\u5f0f\u7cfb\u7edf\u7684\u201c\u6df1\u5ea6\u76f2\u533a\u201d\u2014\u2014\u6df1\u5c42\u5bf9\u8c61\u5c5e\u6027\u3001\u6570\u7ec4\u7d22\u5f15\u7684\u76f4\u63a5\u8d4b\u503c\uff1f<\/h3>\n<p>\u5176\u5b9e\u8fd9\u4e2a\u96f7\u70b9\u4e25\u683c\u6765\u8bf4\u4e0d\u662fwatch\u7684\u95ee\u9898\uff0c\u662f<strong>\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u66f4\u65b0\u65b9\u5f0f\u4e0d\u5bf9<\/strong>\uff0c\u5bfc\u81f4Vue3\u6839\u672c\u6ca1\u5bdf\u89c9\u5230\u6570\u636e\u53d8\u4e86,watch\u81ea\u7136\u6ca1\u53cd\u5e94\u3002<\/p>\n<p>\u5f88\u591a\u670b\u53cb\u4eceVue2\u8f6c\u8fc7\u6765,\u8fd8\u5728\u7528\u8001\u4e60\u60ef\u64cd\u4f5c\u6570\u636e\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ Vuex4\/Pinia\u793a\u4f8b\uff0c\u5047\u8bbestate\u91cc\u6709\u4e2auserInfo\u5bf9\u8c61\uff0clist\u6570\u7ec4\nconst store = useStore()\n\/\/ \u274cVue3 reactive\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u5982\u679c\u662f\u6df1\u5c42\u5d4c\u5957\u7684\uff0c**\u76f4\u63a5\u66ff\u6362\u6574\u4e2a\u5c5e\u6027\u6ca1\u95ee\u9898\uff0c\u4f46\u76f4\u63a5\u7528\u4e0b\u6807\u8d4b\u503c\u6570\u7ec4\u3001\u76f4\u63a5\u7ed9\u5bf9\u8c61\u65b0\u589e\u4e0d\u5b58\u5728\u7684\u5c5e\u6027**\uff08\u9664\u975e\u4f60\u624b\u52a8\u89e6\u53d1\u54cd\u5e94\u5f0f\uff09\uff0cVue2\u9700\u8981Vue.set\uff0cVue3\u867d\u7136\u7b80\u5316\u4e86\uff0c\u4f46\u4e5f\u6709\u60c5\u51b5\uff01\n\/\/ \u6bd4\u5982\u8fd9\u4e2a\u76f4\u63a5\u7ed9list\u6570\u7ec4\u7684\u7b2c0\u4e2a\u8d4b\u503c\uff0c\u6709\u65f6\u5019\u4f1a\u6f0f\uff1f\nstore.state.list[0] = &#39;\u65b0\u503c&#39;\n\/\/ \u6bd4\u5982\u7ed9userInfo\u65b0\u589e\u4e2aavatar\u5c5e\u6027\uff0c\u8001\u4e60\u60ef\u76f4\u63a5\u52a0\uff0c\u6ca1\u7528\uff01\nstore.state.userInfo.avatar = &#39;xxx.jpg&#39;<\/pre>\n<p>\u8fd9\u91cc\u5f97\u6ce8\u610f\uff1aVue3\u7684<code>reactive()<\/code>\u662f\u57fa\u4e8eProxy\u5b9e\u73b0\u7684\uff0c\u5bf9\u4e8e<strong>\u6570\u7ec4\u7684\u975elength\u5c5e\u6027\u7684\u76f4\u63a5\u7d22\u5f15\u8d4b\u503c\uff08\u6bd4\u5982list[0]\uff09<\/strong>\uff0c\u4ee5\u53ca<strong>\u7ed9\u5bf9\u8c61\u65b0\u589e\u539f\u59cb\u4e0d\u5b58\u5728\u7684\u5c5e\u6027<\/strong>\uff0cProxy\u5176\u5b9e\u662f\u80fd\u6355\u83b7\u5230\u7684\uff1f\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u7b49\u4e0b\uff0c\u6211\u5f97\u4ed4\u7ec6\u56de\u5fc6\u4e0b\u5b9e\u6218\u91cc\u7684\u60c5\u51b5\u2014\u2014\u54e6\uff01\u4e0d\u5bf9\uff0cPinia\u7ec4\u5408\u5f0fAPI\u5199\u6cd5\u91cc\uff0c\u5982\u679cstore\u91cc\u7684list\u662f\u7528<code>reactive()<\/code>\u5305\u88f9\u7684\u6574\u4e2a\u5bf9\u8c61\u6570\u7ec4\uff0c\u6ca1\u95ee\u9898\uff1b\u4f46\u5982\u679c\u662fVuex4\u91cc\uff0c\u4f60\u5728mutation\u91cc\u5199\u8fd9\u79cd\u76f4\u63a5\u7d22\u5f15\u8d4b\u503c\u7684\u65b9\u5f0f\uff0c\u4f1a\u4e0d\u4f1a\u6709\u65f6\u5019\u7ec4\u4ef6\u91cc\u7684watch\u6355\u83b7\u4e0d\u5230\u5ef6\u8fdf\uff1f\u6216\u8005\u66f4\u51c6\u786e\u8bf4\uff0cVue2\u7684\u9057\u7559\u95ee\u9898\uff0c\u6709\u4e9b\u4eba\u8fd8\u662f\u4f1a\u4e0b\u610f\u8bc6\u4ee5\u4e3a\u6ca1\u7528\uff0c\u90a3\u6211\u4eec\u5c31\u76f4\u63a5\u517b\u6210\u597d\u4e60\u60ef\uff0c\u5728mutation\/Pinia actions\u91cc\uff0c\u7edf\u4e00\u7528<code>Array.prototype.splice()<\/code>\u66ff\u6362\u6570\u7ec4\u7684\u67d0\u4e2a\u5143\u7d20\uff0c\u7528<code>Object.assign()<\/code>\u6216\u8005\u76f4\u63a5\u5c55\u5f00\u8bed\u6cd5\u7ed9\u5bf9\u8c61\u65b0\u589e\u5c5e\u6027\uff0c\u6216\u8005\u5982\u679c\u662fVue3\u7684setup\u91cc\u81ea\u5df1\u64cd\u4f5c\u7684\u54cd\u5e94\u5f0fstore\u72b6\u6001\uff0c\u4e5f\u53ef\u4ee5\u8fd9\u4e48\u5e72\uff0c\u8fd9\u6837100%\u89e6\u53d1\u54cd\u5e94\u5f0f\u3002<\/p>\n<h3>\u96f7\u70b93\uff1awatch\u7684\u914d\u7f6e\u9879\u6ca1\u5f00\u5bf9\u2014\u2014immediate\u3001deep\u3001flush<\/h3>\n<p>\u8fd9\u4e2a\u4e5f\u662f\u8d85\u7ea7\u9ad8\u9891\u7684\u95ee\u9898\uff0c<\/p>\n<ul>\n<li><strong>immediate\u6ca1\u5f00<\/strong>\uff1a\u4f60\u60f3\u5728\u7ec4\u4ef6\u521d\u59cb\u5316\u7684\u65f6\u5019\uff0c\u5c31\u6267\u884c\u4e00\u6b21watch\u7684\u56de\u8c03\uff08\u6bd4\u5982\u4ecestore\u91cc\u62ff\u5230count\uff0c\u7acb\u523b\u521d\u59cb\u5316\u67d0\u4e2a\u672c\u5730\u53d8\u91cf\uff09\uff0c\u4f46\u6ca1\u5199<code>immediate: true<\/code>\uff0c\u90a3\u7b2c\u4e00\u6b21\u6e32\u67d3\u80af\u5b9a\u6ca1\u53cd\u5e94,\u5f88\u591a\u65b0\u624b\u4f1a\u8bef\u4ee5\u4e3a\u662f\u76d1\u542c\u5931\u8d25\u3002<\/li>\n<li><strong>deep\u6ca1\u5f00<\/strong>\uff1a\u4f60\u8981\u76d1\u542c\u7684\u662fstore\u91cc\u7684<strong>\u6df1\u5c42\u5d4c\u5957\u5bf9\u8c61\u6216\u6570\u7ec4\u7684\u5185\u90e8\u53d8\u5316<\/strong>\uff08\u6bd4\u5982\u76d1\u542cuserInfo\u91cc\u7684nickname\uff0c\u800c\u4e0d\u662f\u6574\u4e2auserInfo\uff09\uff0c\u4f46\u89e3\u5305\u5230\u5185\u90e8\u503c\u7684\u65f6\u5019\uff0c\u5199\u6210\u4e86<code>() =&gt; store.state.userInfo<\/code>\uff0c\u4f46\u6ca1\u52a0<code>deep: true<\/code>\u2014\u2014\u8fd9\u65f6\u5019\u53ea\u6709userInfo\u7684\u5f15\u7528\u53d8\u4e86\u624d\u4f1a\u89e6\u53d1,\u5185\u90e8\u5c5e\u6027\u53d8\u4e86\u6ca1\u7528\u3002<\/li>\n<li><strong>flush\u6ca1\u9009\u5bf9\u65f6\u673a<\/strong>\uff1a\u9ed8\u8ba4flush\u662f<code>'pre'<\/code>\uff0c\u4e5f\u5c31\u662f\u5728DOM\u66f4\u65b0\u524d\u6267\u884c\u56de\u8c03\uff1b\u5982\u679c\u4f60\u7684\u56de\u8c03\u91cc\u9700\u8981\u64cd\u4f5c\u66f4\u65b0\u540e\u7684DOM\uff0c\u5f97\u9009<code>'post'<\/code>\uff1b\u5982\u679c\u662f\u540c\u6b65\u89e6\u53d1store\u66f4\u65b0\uff0c\u5e0c\u671b\u56de\u8c03\u7acb\u523b\u6267\u884c\uff0c\u9009<code>'sync'<\/code>\u2014\u2014\u4e0d\u8fc7<code>'sync'<\/code>\u4e00\u822c\u4e0d\u63a8\u8350\uff0c\u4f1a\u5f71\u54cd\u6027\u80fd\uff0c\u9664\u975e\u7279\u6b8a\u573a\u666f\uff0c\u6bd4\u5982\u6709\u65f6\u5019\u4f60\u5728mutation\u91cc\u66f4\u65b0\u4e86\u6570\u636e\uff0c\u56de\u8c03\u91cc\u60f3\u67e5DOM\u7684offsetWidth\uff0c\u53d1\u73b0\u8fd8\u662f\u65e7\u7684,\u8fd9\u65f6\u5019\u5927\u6982\u7387\u662fflush\u7684\u95ee\u9898\u3002<\/li>\n<\/ul>\n<h3>\u96f7\u70b94\uff1aPinia\u7ec4\u5408\u5f0fAPI\u5199\u6cd5\u4e0b\uff0c\u6ca1\u6b63\u786e\u8fd4\u56de\u54cd\u5e94\u5f0f\u6570\u636e<\/h3>\n<p>\u5f88\u591a\u670b\u53cb\u521a\u7528Pinia\u7684\u7ec4\u5408\u5f0fAPI\uff08\u4e5f\u5c31\u662f<code>defineStore<\/code>\u91cc\u7528<code>setup()<\/code>\u51fd\u6570\u7684\u5199\u6cd5\uff09,\u4f1a\u72af\u8fd9\u4e2a\u9519\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u274c\u9519\u8bef\u7684Pinia\u7ec4\u5408\u5f0fAPI\u5199\u6cd5\nimport { defineStore } from &#39;pinia&#39;\nexport const useUserStore = defineStore(&#39;user&#39;, () =&gt; {\n  \/\/ \u76f4\u63a5\u5b9a\u4e49\u4e86\u666e\u901a\u53d8\u91cf\uff01\u6ca1\u6709ref\/reactive\u5305\u88c5\uff01\n  let count = 0\n  const addCount = () =&gt; count++\n  \/\/ \u76f4\u63a5\u8fd4\u56de\uff0c\u7ec4\u4ef6\u91cc\u7528watch\u76d1\u542ccount\uff0c\u6ca1\u7528\uff01\n  return { count, addCount }\n})<\/pre>\n<p>\u8fd9\u4e2a\u592a\u57fa\u7840\u4e86\uff0c\u4f46\u771f\u7684\u5f88\u591a\u4eba\u7b2c\u4e00\u6b21\u4f1a\u6f0f\uff01Pinia\u7684setup\u5199\u6cd5\u91cc\uff0c<strong>\u5fc5\u987b\u7528ref()\u3001reactive()\u3001computed()\u8fd9\u4e9bVue3\u7684\u54cd\u5e94\u5f0fAPI\u5305\u88c5\u6570\u636e\uff0c\u8fd4\u56de\u51fa\u53bb\u7684\u624d\u662f\u54cd\u5e94\u5f0f\u7684<\/strong>\uff0c\u5426\u5219\u5c31\u662f\u666e\u901a\u53d8\u91cf,Vue3\u7684watch\u6839\u672c\u8ffd\u8e2a\u4e0d\u5230\u3002<\/p>\n<hr \/>\n<h2>\u89e3\u51b3\u5b8c\u96f7\u70b9\uff0c\u6765\u770b\u4e0d\u540c\u72b6\u6001\u5e93\u7684\u6b63\u786e\u59ff\u52bf<\/h2>\n<p>\u73b0\u5728\u96f7\u90fd\u6392\u5b8c\u4e86\uff0c\u63a5\u4e0b\u6765\u5206<strong>Vuex4<\/strong>\u548c<strong>Pinia<\/strong>\uff08\u6bd5\u7adf\u73b0\u5728\u7528Pinia\u7684\u4eba\u8d8a\u6765\u8d8a\u591a\uff0cVue\u5b98\u65b9\u4e5f\u63a8\u8350\u4e86\uff09\u4e24\u79cd\u60c5\u51b5\uff0c\u4ece\u57fa\u7840\u76d1\u542c\u5355\u4e2a\u503c\u3001\u5230\u6df1\u5c42\u76d1\u542c\u5bf9\u8c61\/\u6570\u7ec4\u3001\u5230\u76d1\u542c\u591a\u4e2a\u503c\u3001\u5230\u76d1\u542ccomputed\u503c,\u5168\u573a\u666f\u8986\u76d6\u3002<\/p>\n<h3>Vuex4\u4e0bwatch store state\u7684\u5168\u573a\u666f\u64cd\u4f5c<\/h3>\n<p>\u9996\u5148\u56de\u987e\u4e0bVuex4\u7684\u7528\u6cd5\uff1a\u5728setup\u91cc\u7528<code>useStore()<\/code>\u83b7\u53d6store\u5b9e\u4f8b\uff0c\u72b6\u6001\u662f<code>store.state.xxx<\/code>\uff0cgetters\u662f<code>store.getters.xxx<\/code>\uff0cmutations\u662f<code>store.commit()<\/code>\uff0cactions\u662f<code>store.dispatch()<\/code>\u3002<\/p>\n<h4>\u573a\u666f1\uff1a\u57fa\u7840\u76d1\u542c\u5355\u4e2a\u975e\u5d4c\u5957\u72b6\u6001\uff08\u6bd4\u5982count\uff09<\/h4>\n<p>\u8fd9\u79cd\u6700\u7b80\u5355\uff0c\u76f4\u63a5\u7528<strong>\u51fd\u6570\u8fd4\u56de\u503c\u7684\u5f62\u5f0f<\/strong>\u89e3\u5305\u5230\u5177\u4f53\u7684state\u503c\uff0c\u4e0d\u9700\u8981\u5f00deep\uff0c\u9664\u975e\u5f15\u7528\u6362\u4e86\uff08\u4f46\u5355\u4e2a\u503c\u90fd\u662f\u539f\u59cb\u7c7b\u578b\uff0c\u5f15\u7528\u672c\u6765\u5c31\u4f1a\u6362\uff09\u3002<\/p>\n<pre class=\"brush:js;toolbar:false\">import { useStore } from &#39;vuex&#39;\nimport { watch } from &#39;vue&#39;\nconst store = useStore()\n\/\/ \u2705\u6b63\u786e\u5199\u6cd51\uff1a\u51fd\u6570\u8fd4\u56de\u5177\u4f53\u503c\uff0c\u6700\u7075\u6d3b\nwatch(\n  () =&gt; store.state.count,\n  (newCount, oldCount) =&gt; {\n    console.log(&#39;count\u53d8\u4e86\uff1a&#39;, oldCount, &#39;\u2192&#39;, newCount)\n  },\n  { immediate: true } \/\/ \u53ef\u9009\uff0c\u9700\u8981\u521d\u59cb\u5316\u5c31\u6267\u884c\u5c31\u5f00\n)<\/pre>\n<p>\u8fd9\u91cc\u4e3a\u4ec0\u4e48\u8981\u7528\u51fd\u6570\u8fd4\u56de\u503c\uff1f\u76f4\u63a5\u7528<code>store.state.count<\/code>\u4e0d\u884c\u5417\uff1f<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u274c\u8fd9\u4e2a\u5199\u6cd5\u5728Vue3\u65e9\u671f\u7248\u672c\u6709\u95ee\u9898\uff1f\u6216\u8005\u8bf4\u4e0d\u591f\u4e25\u8c28\uff1f\nwatch(store.state.count, (newCount) =&gt; {})<\/pre>\n<p>\u5bf9\uff0c\u6700\u597d\u4e0d\u8981\u8fd9\u4e48\u5199\uff01\u56e0\u4e3a\u5982\u679c<code>store.state.count<\/code>\u662f\u4e2a<strong>\u539f\u59cb\u7c7b\u578b<\/strong>\uff08\u6bd4\u5982number\u3001string\u3001boolean\uff09\uff0c<code>watch<\/code>\u63a5\u6536\u5230\u7684\u662f\u8fd9\u4e2a\u503c\u7684<strong>\u62f7\u8d1d<\/strong>\uff0c\u4e0d\u662f\u54cd\u5e94\u5f0f\u5f15\u7528\uff0c\u867d\u7136\u6709\u65f6\u5019\u5728Vuex\u7684mutation\u66f4\u65b0\u540e\uff0c\u56e0\u4e3a\u6574\u4e2astore\u7684state\u662freactive\u7684\uff0c\u5e95\u5c42\u53ef\u80fd\u4f1a\u6709\u7279\u6b8a\u5904\u7406\u89e6\u53d1\uff0c\u4f46\u6839\u636eVue\u5b98\u65b9\u7684\u6587\u6863\u548c\u6700\u4f73\u5b9e\u8df5\uff0c<strong>\u76d1\u542c\u54cd\u5e94\u5f0f\u5bf9\u8c61\u7684\u5c5e\u6027\u65f6\uff0c\u5fc5\u987b\u7528\u51fd\u6570\u8fd4\u56de\u503c\u7684\u5f62\u5f0f\uff0c\u624d\u80fd\u6b63\u786e\u5efa\u7acb\u4f9d\u8d56\u8ffd\u8e2a<\/strong>\u2014\u2014\u5207\u8bb0\uff01<\/p>\n<h4>\u573a\u666f2\uff1a\u76d1\u542c\u6574\u4e2a\u5d4c\u5957\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5185\u90e8\u53d8\u5316\uff08\u6bd4\u5982userInfo\u3001list\uff09<\/h4>\n<p>\u8fd9\u65f6\u5019\u51fd\u6570\u8fd4\u56de\u503c\u8981\u8fd4\u56de\u6574\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\uff0c\u7136\u540e\u5fc5\u987b\u5f00<code>deep: true<\/code>,\u56e0\u4e3a\u9ed8\u8ba4\u53ea\u8ffd\u8e2a\u5f15\u7528\u53d8\u5316\u3002<\/p>\n<pre class=\"brush:js;toolbar:false\">import { useStore } from &#39;vuex&#39;\nimport { watch } from &#39;vue&#39;\nconst store = useStore()\n\/\/ \u2705\u76d1\u542c\u6574\u4e2auserInfo\u7684\u5185\u90e8\u5c5e\u6027\u53d8\u5316\nwatch(\n  () =&gt; store.state.userInfo,\n  (newUser, oldUser) =&gt; {\n    \/\/ \u6ce8\u610f\uff1a\u5f00\u4e86deep\u4e4b\u540e\uff0cnewUser\u548coldUser\u7684\u5f15\u7528\u662f\u4e00\u6837\u7684\uff01\u56e0\u4e3a\u53ea\u6539\u4e86\u5185\u90e8\u5c5e\u6027\n    \/\/ \u6240\u4ee5\u5982\u679c\u4f60\u8981\u5bf9\u6bd4\u65b0\u65e7\u503c\u7684\u5177\u4f53\u5dee\u5f02\uff0c\u5f97\u81ea\u5df1\u6df1\u62f7\u8d1doldUser\u4fdd\u5b58\n    console.log(&#39;userInfo\u5185\u90e8\u53d8\u4e86&#39;, newUser.nickname)\n  },\n  { deep: true, immediate: true }\n)<\/pre>\n<p>\u8fd9\u91cc\u6709\u4e2a\u5c0f\u5751\uff1a\u5f00\u4e86deep\u4e4b\u540e\uff0coldUser\u548cnewUser\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\u7684\u5f15\u7528\uff0c\u5bf9\u6bd4\u662f\u6ca1\u7528\u7684\uff0c\u5982\u679c\u5fc5\u987b\u5bf9\u6bd4\uff0c\u6bd4\u5982\u8981\u8bb0\u5f55\u7528\u6237\u4fee\u6539\u4e86\u54ea\u4e9b\u5b57\u6bb5\uff0c\u90a3\u53ef\u4ee5\u5728immediate\u7684\u65f6\u5019\uff0c\u6df1\u62f7\u8d1d\u4e00\u4efduserInfo\u5b58\u8d77\u6765\u4f5c\u4e3a\u521d\u59cb\u503c\uff0c\u7136\u540e\u6bcf\u6b21\u56de\u8c03\u91cc\uff0c\u7528\u65b0\u7684newUser\u548c\u5b58\u7684\u90a3\u4e2a\u65e7\u503c\u5bf9\u6bd4,\u5bf9\u6bd4\u5b8c\u518d\u66f4\u65b0\u65e7\u503c\u3002<\/p>\n<h4>\u573a\u666f3\uff1a\u53ea\u76d1\u542c\u5d4c\u5957\u5bf9\u8c61\/\u6570\u7ec4\u7684\u67d0\u4e2a\u5177\u4f53\u5c5e\u6027\/\u5143\u7d20\uff08\u6bd4\u5982userInfo.nickname\u3001list[0]\uff09<\/h4>\n<p>\u8fd9\u65f6\u5019\u6709\u4e24\u79cd\u5199\u6cd5\uff0c\u63a8\u8350\u7b2c\u4e00\u79cd\uff0c\u66f4\u7075\u6d3b\uff0c\u4e0d\u7528\u5f00deep\u3002\n\u5199\u6cd51\uff1a\u76f4\u63a5\u5728\u51fd\u6570\u8fd4\u56de\u503c\u91cc\u89e3\u5305\u5230\u5177\u4f53\u5c5e\u6027\/\u5143\u7d20\uff08\u63a8\u8350\uff09<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u2705\u53ea\u76d1\u542cnickname\uff0c\u4e0d\u7528\u5f00deep\nwatch(\n  () =&gt; store.state.userInfo.nickname,\n  (newNick, oldNick) =&gt; {\n    console.log(&#39;\u6635\u79f0\u53d8\u4e86&#39;, oldNick, &#39;\u2192&#39;, newNick)\n  }\n)\n\/\/ \u2705\u53ea\u76d1\u542clist\u7684\u7b2c0\u4e2a\u5143\u7d20\uff08\u6ce8\u610flist[0]\u6700\u597d\u662f\u539f\u59cb\u7c7b\u578b\uff0c\u6216\u8005\u5f15\u7528\u6362\u4e86\u624d\u4f1a\u89e6\u53d1\uff09\n\/\/ \u5982\u679c\u8981\u76d1\u542clist[0]\u7684\u5185\u90e8\u5c5e\u6027\uff0c\u8fd8\u662f\u5f97\u5f00deep\uff0c\u6216\u8005\u7ee7\u7eed\u89e3\u5305\nwatch(\n  () =&gt; store.state.list[0],\n  (newVal, oldVal) =&gt; {}\n)<\/pre>\n<p>\u5199\u6cd52\uff1a\u7528\u5b57\u7b26\u4e32\u8def\u5f84\uff08\u4ec5Vue3+Vuex4\u652f\u6301\uff1f\u6216\u8005\u8bf4Vue3\u7684watch\u672c\u8eab\u652f\u6301\uff1f\u4e0d\u8fc7\u63a8\u8350\u5199\u6cd51\uff09<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u8fd9\u79cd\u5199\u6cd5\u4e0d\u7528\u51fd\u6570\uff0c\u4f46\u8981\u6ce8\u610f\u8def\u5f84\u5fc5\u987b\u6b63\u786e\uff0c\u800c\u4e14\u5b57\u7b26\u4e32\u8def\u5f84\u7684\u5f62\u5f0f\u6709\u65f6\u5019\u4f9d\u8d56\u8ffd\u8e2a\u4e0d\u591f\u76f4\u89c2\nwatch(\n  () =&gt; store.state, \/\/ \u8fd9\u91cc\u8981\u8fd4\u56de\u6574\u4e2astate\u6216\u8005\u7236\u7ea7\u5bf9\u8c61\n  &#39;userInfo.nickname&#39;, \/\/ \u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u5b57\u7b26\u4e32\u8def\u5f84\n  (newNick, oldNick) =&gt; {}\n)\n\/\/ \u6216\u8005\u66f4\u7b80\u5355\u7684\uff0c\u4f46\u597d\u50cf\u66f4\u5c11\u89c1\n\/\/ watch(&#39;store.state.userInfo.nickname&#39;, ...) \u2014\u2014 \u8fd9\u4e2a\u5fc5\u987bstore\u5728\u7ec4\u4ef6\u7684\u9876\u5c42\u4f5c\u7528\u57df\u91cc\u5b9a\u4e49\uff0c\u800c\u4e14\u4f9d\u8d56\u8ffd\u8e2a\u53ef\u80fd\u6709\u95ee\u9898\uff0c\u4e0d\u63a8\u8350<\/pre>\n<h4>\u573a\u666f4\uff1a\u76d1\u542c\u591a\u4e2astore state\/getters<\/h4>\n<p>\u8fd9\u65f6\u5019\u53ef\u4ee5\u7528<strong>\u6570\u7ec4\u5f62\u5f0f\u7684\u76d1\u542c\u6e90<\/strong>\uff0c\u6bcf\u4e2a\u76d1\u542c\u6e90\u53ef\u4ee5\u662f\u51fd\u6570\u8fd4\u56de\u503c\u3001ref\u3001reactive\u5bf9\u8c61\uff08\u4f46\u8fd8\u662f\u63a8\u8350\u51fd\u6570\u8fd4\u56destate\/getters\uff09\u3002<\/p>\n<pre class=\"brush:js;toolbar:false\">import { useStore } from &#39;vuex&#39;\nimport { watch, computed } from &#39;vue&#39;\nconst store = useStore()\nconst totalPrice = computed(() =&gt; store.getters.totalPrice) \/\/ \u4e5f\u53ef\u4ee5\u76f4\u63a5\u76d1\u542c\u51fd\u6570\u8fd4\u56de\u7684getter\n\/\/ \u2705\u76d1\u542ccount\u3001userInfo.nickname\u3001totalPrice\u4e09\u4e2a\u503c\nwatch(\n  [\n    () =&gt; store.state.count,\n    () =&gt; store.state.userInfo.nickname,\n    totalPrice \/\/ \u6216\u8005\u5199\u6210() =&gt; store.getters.totalPrice\n  ],\n  \/\/ \u56de\u8c03\u7684\u53c2\u6570\u4e5f\u662f\u6570\u7ec4\uff0c\u987a\u5e8f\u548c\u76d1\u542c\u6e90\u4e00\u81f4\n  ([newCount, newNick, newPrice], [oldCount, oldNick, oldPrice]) =&gt; {\n    console.log(&#39;\u6709\u503c\u53d8\u4e86&#39;)\n  },\n  { immediate: true }\n)<\/pre>\n<p>\u8fd9\u91cc\u5982\u679c\u76d1\u542c\u6e90\u91cc\u6709\u5d4c\u5957\u5bf9\u8c61\uff0c\u6bd4\u5982\u67d0\u4e2a\u76d1\u542c\u6e90\u662f<code>() =&gt; store.state.userInfo<\/code>\uff0c\u90a3\u5bf9\u5e94\u7684\u6570\u7ec4\u53c2\u6570\u91cc\u7684newUser\u548coldUser\u8fd8\u662f\u5f15\u7528\u76f8\u540c\uff0c\u9664\u975e\u52a0deep\u2014\u2014\u4f46\u5982\u679c\u53ea\u662f\u76d1\u542c\u591a\u4e2a\u5355\u4e2a\u503c\u6216\u5d4c\u5957\u5c5e\u6027,\u5c31\u4e0d\u7528\u52a0\u3002<\/p>\n<hr \/>\n<h3>Pinia\u4e0bwatch store state\u7684\u5168\u573a\u666f\u64cd\u4f5c<\/h3>\n<p>\u73b0\u5728\u91cd\u70b9\u6765\u4e86\uff0cPinia\u662fVue3\u5b98\u65b9\u63a8\u8350\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u6bd4Vuex4\u66f4\u8f7b\u91cf\uff0c\u66f4\u7b26\u5408Vue3\u7684\u7ec4\u5408\u5f0fAPI\u98ce\u683c\uff0c\u800c\u4e14\u6ca1\u6709mutations\u548cactions\u7684\u533a\u5206\uff08\u9664\u975e\u662f\u9700\u8981\u6301\u4e45\u5316\u6216\u8005\u4e2d\u95f4\u4ef6\u7684\u573a\u666f\uff0c\u4f46\u4e00\u822c\u4e0d\u9700\u8981\uff0c\u76f4\u63a5\u5728actions\u91cc\u5199\u540c\u6b65\u5f02\u6b65\u90fd\u884c\uff09\u3002<\/p>\n<p>\u9996\u5148\u56de\u987e\u4e0bPinia\u7684\u4e24\u79cd\u5199\u6cd5\uff1a<strong>\u9009\u9879\u5f0fAPI\uff08Options API\uff09\u5199\u6cd5<\/strong>\u548c<strong>\u7ec4\u5408\u5f0fAPI\uff08Setup API\uff09\u5199\u6cd5<\/strong>\u2014\u2014\u9009\u9879\u5f0f\u5199\u6cd5\u66f4\u50cfVuex\uff0c\u7ec4\u5408\u5f0f\u5199\u6cd5\u66f4\u7075\u6d3b\uff0c\u73b0\u5728\u5f88\u591a\u65b0\u9879\u76ee\u90fd\u7528\u7ec4\u5408\u5f0f\u4e86\uff0c\u4f46\u4e24\u79cd\u5199\u6cd5\u7684\u76d1\u542c\u65b9\u5f0f\u5176\u5b9e\u5dee\u4e0d\u591a,\u4e3b\u8981\u662f\u83b7\u53d6store\u72b6\u6001\u7684\u65b9\u5f0f\u7565\u6709\u4e0d\u540c\u3002<\/p>\n<p>Pinia\u8fd8\u6709\u4e2a\u8d85\u7ea7\u597d\u7528\u7684API\u53eb<code>store.$subscribe()<\/code>\uff0c\u4e13\u95e8\u7528\u6765\u76d1\u542c\u6574\u4e2astore\u7684\u72b6\u6001\u53d8\u5316\uff0c\u6bd4watch\u66f4\u65b9\u4fbf\uff0c\u800c\u4e14\u80fd\u83b7\u53d6\u5230\u4fee\u6539\u7684\u5177\u4f53\u8def\u5f84\u548c\u503c,\u540e\u9762\u4e5f\u4f1a\u8bb2\u3002<\/p>\n<h4>\u573a\u666f0\uff1a\u5148\u786e\u4fddPinia\u7684\u7ec4\u5408\u5f0fAPI\u5199\u6cd5\u8fd4\u56de\u7684\u662f\u54cd\u5e94\u5f0f\u6570\u636e\uff08\u8d85\u7ea7\u91cd\u8981\uff01\uff09<\/h4>\n<p>\u8fd9\u4e2a\u521a\u624d\u5728\u96f7\u70b9\u91cc\u63d0\u8fc7\uff0c\u4f46\u8fd8\u662f\u8981\u518d\u5f3a\u8c03\u4e00\u904d\uff0c\u7ec4\u5408\u5f0f\u5199\u6cd5\u7684Pinia\u5fc5\u987b\u7528ref\/reactive\/computed\u5305\u88c5\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u2705\u6b63\u786e\u7684Pinia\u7ec4\u5408\u5f0fAPI\u5199\u6cd5\nimport { defineStore } from &#39;pinia&#39;\nimport { ref, reactive, computed } from &#39;vue&#39;\nexport const useUserStore = defineStore(&#39;user&#39;, () =&gt; {\n  \/\/ \u539f\u59cb\u7c7b\u578b\u7528ref\n  const count = ref(0)\n  \/\/ \u590d\u6742\u7c7b\u578b\u7528reactive\n  const userInfo = reactive({\n    id: 1,\n    nickname: &#39;\u5f20\u4e09&#39;\n  })\n  const list = ref([]) \/\/ \u6570\u7ec4\u7528ref\u6216\u8005reactive\u5305\u88f9\u7684\u5bf9\u8c61\u90fd\u884c\uff0cref\u66f4\u65b9\u4fbf\u76f4\u63a5\u66ff\u6362\u6574\u4e2a\u6570\u7ec4\n  \/\/ \u8ba1\u7b97\u5c5e\u6027\u7528computed\n  const doubleCount = computed(() =&gt; count.value * 2)\n  \/\/ \u540c\u6b65\u5f02\u6b65\u65b9\u6cd5\u90fd\u53ebactions\uff0c\u76f4\u63a5\u5199\n  const addCount = () =&gt; count.value++\n  const fetchUserInfo = async () =&gt; {\n    const res = await fetch(&#39;\/api\/user&#39;)\n    const data = await res.json()\n    \/\/ \u76f4\u63a5\u7ed9reactive\u5bf9\u8c61\u8d4b\u503c\uff0c\u6216\u8005\u66ff\u6362ref\u7684.value\n    Object.assign(userInfo, data)\n    \/\/ list.value = [1,2,3] \u2014\u2014 \u76f4\u63a5\u66ff\u6362\u6570\u7ec4\u7684ref.value\uff0c\u6ca1\u95ee\u9898\n  }\n  return { count, userInfo, list, doubleCount, addCount, fetchUserInfo }\n})<\/pre>\n<p>\u9009\u9879\u5f0f\u5199\u6cd5\u7684\u8bdd\uff0c\u4e0d\u7528\u64cd\u5fc3,state\u91cc\u5b9a\u4e49\u7684\u90fd\u662f\u81ea\u52a8\u54cd\u5e94\u5f0f\u7684\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u2705\u6b63\u786e\u7684Pinia\u9009\u9879\u5f0fAPI\u5199\u6cd5\nimport { defineStore } from &#39;pinia&#39;\nexport const useUserStore = defineStore(&#39;user&#39;, {\n  state: () =&gt; ({\n    count: 0,\n    userInfo: { id: 1, nickname: &#39;\u5f20\u4e09&#39; },\n    list: []\n  }),\n  getters: {\n    doubleCount: (state) =&gt; state.count * 2\n  },\n  actions: {\n    addCount() { this.count++ },\n    async fetchUserInfo() {\n      const res = await fetch(&#39;\/api\/user&#39;)\n      const data = await res.json()\n      this.userInfo = data \/\/ \u9009\u9879\u5f0f\u5199\u6cd5\u91cc\u76f4\u63a5\u66ff\u6362\u6574\u4e2astate\u7684\u5c5e\u6027\uff0c\u6ca1\u95ee\u9898\n    }\n  }\n})<\/pre>\n<h4>\u573a\u666f1\uff1aPinia\u57fa\u7840\u76d1\u542c\u5355\u4e2a\u975e\u5d4c\u5957\u72b6\u6001<\/h4>\n<p>\u4e0d\u7ba1\u662f\u9009\u9879\u5f0f\u8fd8\u662f\u7ec4\u5408\u5f0f\u5199\u6cd5\uff0c\u83b7\u53d6store\u72b6\u6001\u7684\u65b9\u5f0f\u90fd\u662f\u4e00\u6837\u7684\uff1a\u5728\u7ec4\u4ef6\u91cc\u7528<code>useXxxStore()<\/code>\u83b7\u53d6store\u5b9e\u4f8b\uff0c\u7ec4\u5408\u5f0f\u5199\u6cd5\u91cc\u7684ref\u72b6\u6001\uff0cPinia\u4f1a\u81ea\u52a8\u89e3\u5305\u6210<code>.value<\/code>\uff0c\u6240\u4ee5\u7ec4\u4ef6\u91cc\u76f4\u63a5\u7528<code>store.count<\/code>\u5c31\u884c\uff0c\u4e0d\u7528\u52a0<code>.value<\/code>\uff01\u8fd9\u70b9\u592a\u723d\u4e86\uff0c\u5f88\u591a\u65b0\u624b\u4e0d\u77e5\u9053\uff0c\u8fd8\u4f1a\u52a0<code>.value<\/code>\uff0c\u5176\u5b9e\u6ca1\u5fc5\u8981,Pinia\u505a\u4e86\u81ea\u52a8\u89e3\u5305\u3002<\/p>\n<p>\u90a3watch\u76d1\u542c\u7684\u65f6\u5019\u5462\uff1f\u63a8\u8350\u8fd8\u662f\u7528<strong>\u51fd\u6570\u8fd4\u56de\u503c\u7684\u5f62\u5f0f<\/strong>\uff0c\u6216\u8005\u5982\u679c\u4f60\u559c\u6b22\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u628a<code>store.count<\/code>\u4f5c\u4e3a\u76d1\u542c\u6e90\u2014\u2014\u56e0\u4e3aPinia\u81ea\u52a8\u89e3\u5305\u540e\uff0c<code>store.count<\/code>\u5176\u5b9e\u662f\u4e2a\u54cd\u5e94\u5f0f\u7684\u5f15\u7528\uff1f\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u7b49\u4e0b\uff0c\u7ec4\u5408\u5f0f\u5199\u6cd5\u91ccstore\u8fd4\u56de\u7684count\u662fref\uff0cPinia\u7684store\u662freactive\u5305\u88f9\u7684\uff0c\u6240\u4ee5<code>store.count<\/code>\u662f<code>reactive({ count: ref(0) }).count<\/code>\uff0cVue3\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u4f1a\u81ea\u52a8\u89e3\u5305\u8fd9\u4e2aref\uff0c\u6240\u4ee5<code>store.count<\/code>\u5176\u5b9e\u662f\u4e2a\u201cref\u89e3\u5305\u540e\u7684\u54cd\u5e94\u5f0f\u503c\u201d,\u53ef\u4ee5\u76f4\u63a5\u4f5c\u4e3awatch\u7684\u76d1\u542c\u6e90\u5417\uff1f<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u9009\u9879\u5f0f\u548c\u7ec4\u5408\u5f0f\u5199\u6cd5\u7684\u7ec4\u4ef6\u91cc\u90fd\u4e00\u6837\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u2705\u5199\u6cd51\uff1a\u51fd\u6570\u8fd4\u56de\u503c\uff0c\u6700\u7a33\u59a5\uff0c\u5b98\u65b9\u63a8\u8350\nwatch(\n  () =&gt; userStore.count,\n  (newCount, oldCount) =&gt; {}\n)\n\/\/ \u2705\u5199\u6cd52\uff1a\u76f4\u63a5\u7528userStore.count\uff0cPinia\u81ea\u52a8\u89e3\u5305\u540e\u4e5f\u53ef\u4ee5\uff0c\u4f46\u51fd\u6570\u8fd4\u56de\u503c\u66f4\u76f4\u89c2\u4f9d\u8d56\u8ffd\u8e2a\nwatch(userStore.count, (newCount, oldCount) =&gt; {})<\/pre>\n<p>\u5bf9\uff0c\u4e24\u79cd\u90fd\u53ef\u4ee5\uff0c\u4f46\u8fd8\u662f\u63a8\u8350\u5199\u6cd51\uff0c\u56e0\u4e3a\u5982\u679c\u4f60\u8981\u76d1\u542c\u7684\u662f\u7ec4\u5408\u5f0f\u5199\u6cd5\u91ccreactive\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\uff0c\u6216\u8005\u5d4c\u5957\u5c5e\u6027\uff0c\u8fd8\u662f\u5f97\u7528\u51fd\u6570\u8fd4\u56de\u503c,\u7edf\u4e00\u5199\u6cd5\u66f4\u4e0d\u5bb9\u6613\u9519\u3002<\/p>\n<h4>\u573a\u666f2\uff1aPinia\u76d1\u542c\u6574\u4e2a\u5d4c\u5957\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5185\u90e8\u53d8\u5316<\/h4>\n<p>\u548cVuex4\u4e00\u6837\uff0c\u51fd\u6570\u8fd4\u56de\u6574\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\uff0c\u52a0<code>deep: true<\/code>\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u2705\u76d1\u542c\u6574\u4e2auserInfo\u7684\u5185\u90e8\u5c5e\u6027\u53d8\u5316\nwatch(\n  () =&gt; userStore.userInfo,\n  (newUser) =&gt; {\n    console.log(&#39;userInfo\u5185\u90e8\u53d8\u4e86&#39;, newUser.nickname)\n  },\n  { deep: true }\n)<\/pre>\n<h4>\u573a\u666f3\uff1aPinia\u53ea\u76d1\u542c\u5d4c\u5957\u5bf9\u8c61\/\u6570\u7ec4\u7684\u67d0\u4e2a\u5177\u4f53\u5c5e\u6027<\/h4>\n<p>\u76f4\u63a5\u5728\u51fd\u6570\u8fd4\u56de\u503c\u91cc\u89e3\u5305,\u4e0d\u7528\u5f00deep\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u2705\u53ea\u76d1\u542cnickname\nwatch(\n  () =&gt; userStore.userInfo.nickname,\n  (newNick) =&gt; {}\n)<\/pre>\n<h4>\u573a\u666f4\uff1aPinia\u7684\u4e13\u5c5e\u76d1\u542cAPI\u2014\u2014store.$subscribe()<\/h4>\n<p>\u8fd9\u4e2aAPI\u662fPinia\u4e13\u95e8\u4e3a\u76d1\u542c\u6574\u4e2astore\u72b6\u6001\u53d8\u5316\u8bbe\u8ba1\u7684\uff0c\u6bd4watch\u66f4\u65b9\u4fbf,\u56e0\u4e3a\uff1a<\/p>\n<ol>\n<li>\u4e0d\u9700\u8981\u624b\u52a8\u52a0<code>deep: true<\/code>,\u9ed8\u8ba4\u5c31\u80fd\u76d1\u542c\u6240\u6709\u5185\u90e8\u5c5e\u6027\u7684\u53d8\u5316\uff1b<\/li>\n<li>\u56de\u8c03\u91cc\u80fd\u83b7\u53d6\u5230<strong>\u4fee\u6539\u7684mutation\u4fe1\u606f<\/strong>\uff08\u6bd4\u5982\u662f\u54ea\u4e2aaction\/commit\u4fee\u6539\u7684\uff0c\u867d\u7136Pinia\u7ec4\u5408\u5f0f\u5199\u6cd5\u91cc\u6ca1\u6709commit\uff0c\u4f46\u4e5f\u4f1a\u6709\u7c7b\u4f3c\u7684\u8bb0\u5f55\uff09\u548c<strong>\u4fee\u6539\u7684\u524d\u540estate<\/strong>\uff1b<\/li>\n<li>\u53ef\u4ee5\u8bbe\u7f6e<code>detached: true<\/code>\uff0c\u8fd9\u6837\u5f53\u7ec4\u4ef6\u9500\u6bc1\u65f6\uff0c\u76d1\u542c\u4e0d\u4f1a\u81ea\u52a8\u53d6\u6d88\uff08\u5982\u679c\u662f\u5168\u5c40\u7684\u76d1\u542c\uff0c\u6bd4\u5982\u8bb0\u5f55\u65e5\u5fd7\uff0c\u5c31\u53ef\u4ee5\u7528\u8fd9\u4e2a\uff09\u3002<\/li>\n<\/ol>\n<p>\u5148\u770b\u9009\u9879\u5f0f\u5199\u6cd5\u91cc\u7684<code>$subscribe()<\/code>\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">import { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watchEffect } from &#39;vue&#39; \/\/ \u5bf9\u6bd4\u4e0bwatchEffect\nconst userStore = useUserStore()\n\/\/ \u2705Pinia $subscribe()\u7684\u57fa\u7840\u7528\u6cd5\nconst unsubscribe = userStore.$subscribe((mutation, state) =&gt; {\n  \/\/ mutation\u7684\u4fe1\u606f\uff1atype\uff08direct\/patch action\uff1f\uff09\u3001payload\uff08\u5982\u679c\u6709\u7684\u8bdd\uff09\u3001storeId\n  console.log(&#39;mutation\u4fe1\u606f\uff1a&#39;, mutation)\n  \/\/ state\u662f\u4fee\u6539\u540e\u7684\u6574\u4e2astore\u7684state\uff0c\u662f\u53ea\u8bfb\u7684\uff01\n  console.log(&#39;\u4fee\u6539\u540e\u7684state\uff1a&#39;, state)\n  \/\/ \u5982\u679c\u8981\u83b7\u53d6\u4fee\u6539\u524d\u7684state\uff0c\u5f97\u81ea\u5df1\u5728\u521d\u59cb\u5316\u7684\u65f6\u5019\u6df1\u62f7\u8d1d\u4e00\u4efd\uff0c\u6216\u8005\u7528mutation\u7684\u4fe1\u606f\n})\n\/\/ \u5982\u679c\u4e0d\u9700\u8981\u76d1\u542c\u4e86\uff0c\u53ef\u4ee5\u624b\u52a8\u53d6\u6d88\n\/\/ unsubscribe()<\/pre>\n<p>\u7ec4\u5408\u5f0f\u5199\u6cd5\u91cc\u7684<code>$subscribe()<\/code>\u4e5f\u662f\u4e00\u6837\u7684\u7528\u6cd5,\u6ca1\u6709\u533a\u522b\u3002<\/p>\n<p>\u518d\u5bf9\u6bd4\u4e0b<code>watch(() =&gt; userStore.$state, ...)<\/code>\u548c<code>$subscribe()<\/code>\u7684\u533a\u522b\uff1a<\/p>\n<ul>\n<li><code>watch(() =&gt; userStore.$state, ...)<\/code>\u9700\u8981\u52a0<code>deep: true<\/code>\uff0c\u800c\u4e14\u56de\u8c03\u91cc\u53ea\u6709\u65b0\u65e7state\uff08\u65b0state\u662f<code>$state<\/code>\u7684\u5f15\u7528\uff0c\u65e7state\u5982\u679c\u6ca1\u5b58\u7684\u8bdd\u6ca1\u7528\uff09\uff1b<\/li>\n<li><code>$subscribe()<\/code>\u9ed8\u8ba4deep\uff0c\u6709mutation\u4fe1\u606f\uff0c\u800c\u4e14state\u662f\u53ea\u8bfb\u7684,\u66f4\u5b89\u5168\u3002<\/li>\n<\/ul>\n<p>\u4ec0\u4e48\u65f6\u5019\u7528<code>$subscribe()<\/code>\uff1f\u6bd4\u5982\u4f60\u9700\u8981\u505a<strong>\u72b6\u6001\u6301\u4e45\u5316<\/strong>\uff08\u5f88\u591aPinia\u7684\u6301\u4e45\u5316\u63d2\u4ef6\u5e95\u5c42\u5c31\u662f\u7528\u8fd9\u4e2aAPI\uff09\u3001<strong>\u5168\u5c40\u65e5\u5fd7\u8bb0\u5f55<\/strong>\u3001<strong>\u72b6\u6001\u53d8\u66f4\u89e6\u53d1\u67d0\u4e9b\u5168\u5c40\u64cd\u4f5c<\/strong>\uff08\u6bd4\u5982\u4fee\u6539\u4e86count\u5c31\u66f4\u65b0\u6d4f\u89c8\u5668\u7684title\uff09\u3002<\/p>\n<p>\u6bd4\u5982\u7528<code>$subscribe()<\/code>\u505a\u4e2a\u7b80\u5355\u7684\u72b6\u6001\u6301\u4e45\u5316\uff08localStorage\uff09\uff1a<\/p>\n<pre class=\"brush:js;toolbar:false\">\/\/ \u5728store\u7684\u7ec4\u5408\u5f0f\/\u9009\u9879\u5f0f\u5199\u6cd5\u5916\u9762\uff0c\u6216\u8005\u5728main.js\u91cc\u521d\u59cb\u5316store\u540e\uff1f\n\/\/ \u6700\u597d\u5728main.js\u91cc\uff0c\u6216\u8005\u5728App.vue\u7684onMounted\u91cc\uff1f\nimport { createPinia } from &#39;pinia&#39;\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nconst pinia = createPinia()\nconst app = createApp(App)\napp.use(pinia)\n\/\/ \u7b49pinia\u6302\u8f7d\u540e\uff0c\u83b7\u53d6store\u5b9e\u4f8b\nconst userStore = useUserStore()\n\/\/ \u5148\u4ecelocalStorage\u91cc\u8bfb\u53d6\u6570\u636e\uff0c\u521d\u59cb\u5316store\nconst savedState = localStorage.getItem(&#39;userStore&#39;)\nif (savedState) {\n  \/\/ \u9009\u9879\u5f0f\u5199\u6cd5\u53ef\u4ee5\u76f4\u63a5\u7528userStore.$state = JSON.parse(savedState)\n  \/\/ \u7ec4\u5408\u5f0f\u5199\u6cd5\u4e5f\u53ef\u4ee5\uff01\u56e0\u4e3aPinia\u7684store\u6709$state\u5c5e\u6027\uff0c\u4e0d\u7ba1\u662f\u54ea\u79cd\u5199\u6cd5\n  userStore.$state = JSON.parse(savedState)\n}\n\/\/ \u7136\u540e\u7528$subscribe()\u76d1\u542c\u72b6\u6001\u53d8\u5316\uff0c\u4fdd\u5b58\u5230localStorage\nuserStore.$subscribe((mutation, state) =&gt; {\n  localStorage.setItem(&#39;userStore&#39;, JSON.stringify(state))\n}, { detached: true }) \/\/ detached: true\uff0c\u8fd9\u6837\u5373\u4f7fApp.vue\u9500\u6bc1\u4e86\uff08\u4e0d\u8fc7\u4e00\u822c\u4e0d\u4f1a\uff09\uff0c\u76d1\u542c\u4e5f\u4e0d\u4f1a\u53d6\u6d88<\/pre>\n<p>\u8fd9\u4e2a\u7b80\u5355\u7684\u6301\u4e45\u5316\u5c31\u505a\u597d\u4e86,\u662f\u4e0d\u662f\u6bd4\u7528watch\u65b9\u4fbf\u591a\u4e86\uff1f<\/p>\n<hr \/>\n<h2>\u8fdb\u9636\u6280\u5de7\uff1a\u4ec0\u4e48\u65f6\u5019\u7528watch\uff0c\u4ec0\u4e48\u65f6\u5019\u7528computed\uff0c\u4ec0\u4e48\u65f6\u5019\u7528store\u7684getters\uff1f<\/h2>\n<p>\u5f88\u591a\u670b\u53cb\u4f1a\u6df7\u6dc6\u8fd9\u4e09\u4e2a\u4e1c\u897f\uff1awatch\u3001computed\u3001store\u7684getters\uff0c\u90fd\u662f\u548c\u54cd\u5e94\u5f0f\u6570\u636e\u76f8\u5173\u7684,\u4f46\u7528\u9014\u5b8c\u5168\u4e0d\u540c\u3002<\/p>\n<h3>watch\u7684\u7528\u9014<\/h3>\n<p>watch\u662f\u7528\u6765<strong>\u76d1\u542c\u6570\u636e\u53d8\u5316\uff0c\u6267\u884c\u526f\u4f5c\u7528\u64cd\u4f5c<\/strong>\u7684\u2014\u2014\u4ec0\u4e48\u662f\u526f\u4f5c\u7528\uff1f\u5c31\u662f\u9664\u4e86\u8fd4\u56de\u503c\u4e4b\u5916,\u8fd8\u4f1a\u6539\u53d8\u5916\u90e8\u72b6\u6001\u7684\u64cd\u4f5c\uff0c<\/p>\n<ul>\n<li>\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\uff08\u6bd4\u5982\u4fee\u6539\u4e86\u641c\u7d22\u5173\u952e\u8bcd\uff0c\u5c31\u8c03\u7528\u641c\u7d22\u63a5\u53e3\uff09\uff1b<\/li>\n<li>\u64cd\u4f5cDOM\uff08\u6bd4\u5982\u4fee\u6539\u4e86count\uff0c\u5c31\u6eda\u52a8\u5230\u9875\u9762\u9876\u90e8\uff09\uff1b<\/li>\n<li>\u4fee\u6539\u672c\u5730\u7684\u975e\u54cd\u5e94\u5f0f\u53d8\u91cf\uff08\u6bd4\u5982\u4fee\u6539\u4e86count\uff0c\u5c31\u66f4\u65b0\u67d0\u4e2a\u5b9a\u65f6\u5668\u7684\u65f6\u95f4\uff09\uff1b<\/li>\n<li>\u8c03\u7528\u6d4f\u89c8\u5668API\uff08\u6bd4\u5982\u4fee\u6539\u4e86userInfo.nickname\uff0c\u5c31\u66f4\u65b0\u6d4f\u89c8\u5668\u7684title\uff09\u3002<\/li>\n<\/ul>\n<h3>computed\u7684\u7528\u9014<\/h3>\n<p>computed\u662f\u7528\u6765<strong>\u8ba1\u7b97\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u884d\u751f\u503c<\/strong>\u7684\u2014\u2014\u5c31\u662f\u4ece\u4e00\u4e2a\u6216\u591a\u4e2a\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u8ba1\u7b97\u51fa\u4e00\u4e2a\u65b0\u7684\u54cd\u5e94\u5f0f\u503c\uff0c\u800c\u4e14<strong>\u6709\u7f13\u5b58<\/strong>\uff1a\u53ea\u6709\u5f53\u4f9d\u8d56\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u53d8\u5316\u65f6\uff0c\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97,\u5426\u5219\u76f4\u63a5\u8fd4\u56de\u7f13\u5b58\u7684\u503c\u3002<\/p>\n<ul>\n<li>\u4ecelist\u6570\u7ec4\u8ba1\u7b97\u51fa\u8fc7\u6ee4\u540e\u7684\u6570\u7ec4\uff08\u6bd4\u5982\u8fc7\u6ee4\u51fa\u5df2\u5b8c\u6210\u7684todo\uff09\uff1b<\/li>\n<li>\u4ececount\u8ba1\u7b97\u51fadoubleCount\uff1b<\/li>\n<li>\u4eceuserInfo\u7684firstName\u548clastName\u8ba1\u7b97\u51fafullName\u3002<\/li>\n<\/ul>\n<p>computed\u91cc\u4e0d\u8981\u5199\u526f\u4f5c\u7528\u64cd\u4f5c\uff01\u6bd4\u5982\u4e0d\u8981\u5728computed\u91cc\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\uff0c\u4e0d\u8981\u4fee\u6539DOM\uff0c\u56e0\u4e3acomputed\u662f\u4e3a\u4e86\u8ba1\u7b97\u503c\u800c\u8bbe\u8ba1\u7684,\u800c\u4e14\u7f13\u5b58\u673a\u5236\u4f1a\u5bfc\u81f4\u526f\u4f5c\u7528\u64cd\u4f5c\u4e0d\u53ef\u63a7\u3002<\/p>\n<h3>store getters\u7684\u7528\u9014<\/h3>\n<p>store\u7684getters\u5176\u5b9e\u5c31\u662f<strong>\u653e\u5728store\u91cc\u7684computed<\/strong>\u2014\u2014\u5982\u679c\u8fd9\u4e2a\u884d\u751f\u503c\u662f\u591a\u4e2a\u7ec4\u4ef6\u90fd\u9700\u8981\u7528\u5230\u7684\uff0c\u5c31\u5e94\u8be5\u653e\u5728store\u7684getters\u91cc\uff0c\u8fd9\u6837\u6240\u6709\u7ec4\u4ef6\u90fd\u80fd\u76f4\u63a5\u8bbf\u95ee,\u4e0d\u7528\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u5199\u4e00\u904dcomputed\u3002<\/p>\n<ul>\n<li>\u6574\u4e2a\u5e94\u7528\u90fd\u9700\u8981\u7528\u5230\u7684\u5df2\u5b8c\u6210todo\u7684\u6570\u91cf\uff1b<\/li>\n<li>\u6574\u4e2a\u5e94\u7528\u90fd\u9700\u8981\u7528\u5230\u7684\u7528\u6237\u6743\u9650\uff08\u4eceuserInfo\u7684role\u8ba1\u7b97\u51fa\u6765\uff09\u3002<\/li>\n<\/ul>\n<p>\u5982\u679c\u884d\u751f\u503c\u53ea\u662f\u67d0\u4e2a\u7ec4\u4ef6\u5355\u72ec\u9700\u8981\u7684\uff0c\u5c31\u76f4\u63a5\u5728\u7ec4\u4ef6\u91cc\u5199computed\u5c31\u884c\uff0c\u4e0d\u7528\u653e\u5728store\u91cc,\u907f\u514dstore\u592a\u81c3\u80bf\u3002<\/p>\n<hr \/>\n<h2>Vue3 watch store state\u7684\u6838\u5fc3\u8981\u70b9<\/h2>\n<p>\u6700\u540e\u518d\u628a\u4eca\u5929\u7684\u5185\u5bb9\u603b\u7ed3\u4e00\u4e0b,\u65b9\u4fbf\u5927\u5bb6\u8bb0\u5fc6\uff1a<\/p>\n<ol>\n<li><strong>\u6392\u96f7\u4f18\u5148<\/strong>\uff1a\u5148\u68c0\u67e5\u662f\u4e0d\u662f\u76f4\u63a5\u76d1\u542c\u4e86store\u7684\u58f3\u5b50\u3001\u72b6\u6001\u66f4\u65b0\u65b9\u5f0f\u4e0d\u5bf9\u3001watch\u914d\u7f6e\u6ca1\u5f00\u3001Pinia\u7ec4\u5408\u5f0f\u5199\u6cd5\u6ca1\u8fd4\u56de\u54cd\u5e94\u5f0f\u6570\u636e\uff1b<\/li>\n<li><strong>\u7edf\u4e00\u5199\u6cd5<\/strong>\uff1a\u4e0d\u7ba1\u662fVuex4\u8fd8\u662fPinia\uff0c\u76d1\u542cstore\u72b6\u6001\u90fd\u63a8\u8350\u7528<strong>\u51fd\u6570\u8fd4\u56de\u503c\u7684\u5f62\u5f0f<\/strong>,\u89e3\u5305\u5230\u5177\u4f53\u7684\u503c\u6216\u5d4c\u5957\u5c5e\u6027\uff1b<\/li>\n<li><strong>\u914d\u7f6e\u9879\u8981\u6ce8\u610f<\/strong>\uff1a\u9700\u8981\u521d\u59cb\u5316\u6267\u884c\u5c31\u5f00<code>immediate: true<\/code>\uff0c\u76d1\u542c\u6df1\u5c42\u53d8\u5316\u5c31\u5f00<code>deep: true<\/code>\uff0c\u9700\u8981\u64cd\u4f5c\u66f4\u65b0\u540e\u7684DOM\u5c31\u9009<code>flush: 'post'<\/code>\uff1b<\/li>\n<li><strong>Pinia\u6709\u4e13\u5c5eAPI<\/strong>\uff1a\u5168\u5c40\u76d1\u542c\u6574\u4e2astore\u72b6\u6001\u53d8\u5316\uff0c\u6216\u8005\u505a\u72b6\u6001\u6301\u4e45\u5316\u3001\u65e5\u5fd7\u8bb0\u5f55\uff0c\u4f18\u5148\u7528<code>store.$subscribe()<\/code>\uff1b<\/li>\n<li><strong>\u4e0d\u8981\u6df7\u6dc6watch\u3001computed\u3001getters<\/strong>\uff1awatch\u505a\u526f\u4f5c\u7528\uff0ccomputed\u505a\u5355\u4e2a\u7ec4\u4ef6\u7684\u884d\u751f\u503c,getters\u505a\u591a\u4e2a\u7ec4\u4ef6\u5171\u7528\u7684\u884d\u751f\u503c\u3002<\/li>\n<\/ol>\n<p>\u597d\u4e86\uff0c\u4eca\u5929\u7684\u5185\u5bb9\u5c31\u5230\u8fd9\u91cc\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u5176\u4ed6\u5173\u4e8eVue3 watch store state\u7684\u95ee\u9898,\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u8ba8\u8bba\uff01<\/p>","pubDate":"Sat, 18 Apr 2026 14:02:05 +0800"},{"title":"Vue3\u91ccwatch\u5c45\u7136\u4e0d\u80fd\u76f4\u63a5\u76d1\u542cSet\uff1f\u5e38\u89c1\u8e29\u5751\u3001\u6838\u5fc3\u539f\u7406\u4e0e3\u79cd\u5b9e\u7528\u66ff\u4ee3\u65b9\u6848\u5168\u89e3\u6790","link":"https:\/\/www.codeqd.com\/post\/20260421758.html","description":"<p>\u6700\u8fd1\u5728\u505a\u6807\u7b7e\u6279\u91cf\u7b5b\u9009\u3001\u8d2d\u7269\u8f66\u5546\u54c1\u6536\u85cf\u8fd9\u7c7b\u9879\u76ee\u65f6\uff0c\u4e0d\u5c11\u521a\u8f6cVue3\u7684\u670b\u53cb\u90fd\u8e29\u8fc7\u4e00\u4e2a\u5751\uff1a\u660e\u660e\u7ed9Set\u52a0\u4e86\u54cd\u5e94\u5f0f\uff0c\u7528watch\u76d1\u542c\u5b83\u7684\u65f6\u5019\uff0c\u4e0d\u7ba1\u662fadd\u3001delete\u8fd8\u662fclear\uff0c\u63a7\u5236\u53f0\u6253\u5370\u90fd\u597d\u597d\u7684\uff0c\u53efwatch\u56de\u8c03\u5c31\u662f\u6b7b\u6d3b\u4e0d\u89e6\u53d1\uff0c\u751a\u81f3\u6709\u65f6\u5019\u8fd8\u4f1a\u62a5\u201c\u65e0\u6548\u7684\u4fa6\u542c\u6e90\u201d\u8fd9\u79cd\u6478\u4e0d\u7740\u5934\u8111\u7684\u9519\uff0c\u4eca\u5929\u54b1\u4eec\u5c31\u628a\u8fd9\u4e2a\u95ee\u9898\u804a\u900f\uff0c\u4ece\u8e29\u5751\u590d\u76d8\u3001Vue3\u54cd\u5e94\u5f0f\u7684\u5e95\u5c42\u5dee\u5f02\uff0c\u5230\u80fd\u8986\u76d680%\u5f00\u53d1\u573a\u666f\u7684\u66ff\u4ee3\u65b9\u6848\uff0c\u8fde\u6027\u80fd\u4f18\u5316\u7684\u5c0f\u7ec6\u8282\u90fd\u7ed9\u4f60\u6252\u5f97\u660e\u660e\u767d\u767d\u3002<\/p>\n<h2>\u4e3a\u4ec0\u4e48\u6211\u660e\u660e\u7528\u4e86ref\/reactive\u5305Set\uff0cwatch\u8fd8\u662f\u76d1\u542c\u4e0d\u5230\uff1f<\/h2>\n<p>\u8981\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898,\u5f97\u5148\u4eceVue3\u5bf9Set\u7684\u54cd\u5e94\u5f0f\u5904\u7406\u903b\u8f91\u8bf4\u8d77\uff0c\u4e0d\u80fd\u4e0a\u6765\u5c31\u7529\u65b9\u6848\u2014\u2014\u77e5\u5176\u7136\u66f4\u8981\u77e5\u5176\u6240\u4ee5\u7136\uff0c\u4ee5\u540e\u78b0\u5230\u7c7b\u4f3c\u7684\u95ee\u9898\uff08\u6bd4\u5982Map\uff09\u4f60\u4e5f\u80fd\u81ea\u5df1\u641e\u5b9a\u3002<\/p>\n<h3>\u5148\u8e29\u4e2a\u7ecf\u5178\u7684\u5751\uff1a\u7528watch\u76f4\u63a5\u4fa6\u542c\u6574\u4e2aref(reactive\u7684Set\u5c5e\u6027)<\/h3>\n<p>\u5f88\u591a\u670b\u53cb\u521a\u8f6cVue3\u65f6,\u4e60\u60ef\u4e86\u7528watch\u76d1\u542c\u6570\u7ec4\u7684push\/pop\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u5fc3\u60f3Set\u4e5f\u662f\u96c6\u5408\uff0c\u80af\u5b9a\u5dee\u4e0d\u591a\uff0c\u4e8e\u662f\u5c31\u5199\u51fa\u4e86\u8fd9\u6837\u7684\u4ee3\u7801\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, onMounted } from &#39;vue&#39;\nconst favoriteTags = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u8bd5\u56fe\u76f4\u63a5\u76d1\u542c\u6574\u4e2aSet\nwatch(favoriteTags, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u6536\u85cf\u6807\u7b7e\u53d8\u4e86\uff01\u65b0\u6807\u7b7e\uff1a&#39;, [...newVal])\n  console.log(&#39;\u65e7\u6807\u7b7e\uff1a&#39;, [...oldVal])\n})\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df1\u79d2\u540e\u6dfb\u52a0\u65b0\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTags.value.add(&#39;React&#39;)\n    console.log(&#39;\u6253\u5370\u4e0b\u5f53\u524dSet\u503c\u770b\u770b\uff1a&#39;, [...favoriteTags.value])\n  }, 1000)\n})<\/pre>\n<p>\u5982\u679c\u4f60\u628a\u8fd9\u6bb5\u4ee3\u7801\u590d\u5236\u5230Vue3\u7684\u9879\u76ee\u91cc\u8dd1,\u63a7\u5236\u53f0\u53ea\u4f1a\u8f93\u51fa\u201c\u6253\u5370\u4e0b\u5f53\u524dSet\u503c\u770b\u770b\uff1a['\u524d\u7aef', 'Vue', 'JavaScript', 'React']\u201d\uff0cwatch\u7684\u56de\u8c03\u8fde\u5f71\u513f\u90fd\u6ca1\u6709\u3002<\/p>\n<h3>\u8e29\u5751\u540e\u7684\u9519\u8bef\u5c1d\u8bd5\uff1a\u52a0deep: true<\/h3>\n<p>\u8fd9\u65f6\u5019\u4e0d\u5c11\u4eba\u4f1a\u60f3\u5230\uff1a\u54e6\uff0c\u662f\u4e0d\u662fSet\u662f\u4e2a\u5f15\u7528\u7c7b\u578b\uff0c\u5f97\u7528deep\u4fa6\u542c\u6df1\u5c42\u53d8\u5316\uff1f\u90a3\u597d\uff0c\u7ed9watch\u52a0\u4e2adeep: true\u8bd5\u8bd5\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">watch(favoriteTags, (newVal, oldVal) =&gt; {\n  \/\/ \u56de\u8c03\u903b\u8f91\u4e0d\u53d8\n}, { deep: true })<\/pre>\n<p>\u7ed3\u679c\u5462\uff1f\u8fd8\u662f\u6ca1\u89e6\u53d1\uff01\u8fd9\u662f\u4e3a\u5565\uff1f\u54b1\u4eec\u5e73\u65f6\u7528ref\/reactive\u5305\u6570\u7ec4\uff0cpush\/pop\u4e4b\u540e\u52a0\u4e0d\u52a0deep\u90fd\u80fd\u89e6\u53d1\uff08\u5982\u679c\u662f\u76f4\u63a5\u66ff\u6362\u6574\u4e2a\u6570\u7ec4\u4e0d\u52a0\u4e5f\u80fd\uff0c\u53ea\u6539\u5185\u90e8\u7d22\u5f15\u7684\u8bddVue3 3.2+\u7528reactive\u53ef\u4ee5\u76f4\u63a5\u76d1\u542c\u5230\uff0cref\u5f97\u52a0.value\u4f46\u4e5f\u4e0d\u9700\u8981deep\uff0c\u9664\u975e\u6570\u7ec4\u91cc\u5957\u4e86\u5bf9\u8c61\/\u6570\u7ec4\u8fd9\u79cd\u591a\u5c42\u7ed3\u6784\uff09\uff0c\u600e\u4e48\u5230Set\u8fd9\u513f\u8fdedeep\u90fd\u6ca1\u7528\u4e86\uff1f<\/p>\n<h3>\u6838\u5fc3\u539f\u56e0\uff1aVue3\u5bf9Set\/Map\u7684\u54cd\u5e94\u5f0f\u5904\u7406\u662f\u201c\u4ee3\u7406\u65b9\u6cd5\u201d\uff0c\u800c\u975e\u201c\u9012\u5f52\u8ffd\u8e2a\u5185\u90e8\u503c\u201d<\/h3>\n<p>\u8fd9\u5c31\u5f97\u5bf9\u6bd4Vue3\u5bf9\u201c\u666e\u901a\u5f15\u7528\u7c7b\u578b\uff08Object\/Array\uff09\u201d\u548c\u201cES6\u5185\u7f6e\u96c6\u5408\u7c7b\u578b\uff08Set\/Map\/WeakSet\/WeakMap\uff09\u201d\u7684\u54cd\u5e94\u5f0f\u5b9e\u73b0\u5dee\u5f02\u4e86\u2014\u2014\u8fd9\u90e8\u5206\u5185\u5bb9\u867d\u7136\u6709\u70b9\u5e95\u5c42\uff0c\u4f46\u53ea\u8981\u641e\u61c2\uff0c\u4ee5\u540e\u518d\u4e5f\u4e0d\u4f1a\u8e29\u7c7b\u4f3c\u7684\u5751\u3002<\/p>\n<p>\u5148\u56de\u5fc6\u4e0bVue3\u7684\u54cd\u5e94\u5f0f\u6838\u5fc3\u539f\u7406\uff1a\u7528Proxy\u4ee3\u7406\u76ee\u6807\u5bf9\u8c61\uff0c\u7136\u540e\u901a\u8fc7get\/set\/deleteProperty\u8fd9\u4e9b\u62e6\u622a\u5668\uff0c\u5728\u8bfb\u53d6\/\u4fee\u6539\/\u5220\u9664\u5c5e\u6027\u65f6\uff0c\u6536\u96c6\u4f9d\u8d56\uff08track\uff09\u548c\u89e6\u53d1\u66f4\u65b0\uff08trigger\uff09\u3002<\/p>\n<h4>\u5bf9\u666e\u901aObject\/Array\u7684\u5904\u7406<\/h4>\n<p>\u6bd4\u5982\u4f60\u6709\u4e00\u4e2a<code>const state = reactive({ tags: ['\u524d\u7aef', 'Vue'] })<\/code>\uff0c\u5f53\u4f60\u8bbf\u95ee<code>state.tags<\/code>\u65f6\uff0cProxy\u4f1a\u89e6\u53d1get\u62e6\u622a\u5668\uff0c\u628astate.tags\u4f5c\u4e3a\u4f9d\u8d56\u6536\u96c6\u5230\u5b83\u7684\u7236\u7ea7state\u7684\u4f9d\u8d56\u5217\u8868\u91cc\uff1b\u5f53\u4f60\u6267\u884c<code>state.tags.push('React')<\/code>\u65f6\uff0c\u6570\u7ec4\u7684push\u65b9\u6cd5\u5b9e\u9645\u4e0a\u4f1a\u5148\u8bfb\u53d6\u6570\u7ec4\u7684length\u5c5e\u6027\uff08get\u62e6\u622a\u5668\u89e6\u53d1\uff09\uff0c\u7136\u540e\u4fee\u6539\u7d22\u5f152\u7684\u4f4d\u7f6e\uff08set\u62e6\u622a\u5668\u89e6\u53d1\uff09\uff0c\u6700\u540e\u4fee\u6539length\u5c5e\u6027\uff08set\u62e6\u622a\u5668\u518d\u6b21\u89e6\u53d1\uff09\u2014\u2014\u4e0d\u7ba1\u662f\u54ea\u4e00\u6b65\uff0c\u53ea\u8981\u89e6\u53d1\u4e86\u7236\u7ea7\u4f9d\u8d56\u5bf9\u5e94\u7684\u66f4\u65b0\u903b\u8f91\uff0c\u5c31\u80fd\u8ba9watch\u6216\u8005\u6a21\u677f\u91cc\u7684\u89c6\u56fe\u66f4\u65b0\u3002<\/p>\n<p>\u5982\u679c\u662f<code>const tags = ref(['\u524d\u7aef', 'Vue'])<\/code>\uff0c\u672c\u8d28\u4e0a\u662fref\u5185\u90e8\u628a\u8fd9\u4e2a\u6570\u7ec4\u4f20\u7ed9\u4e86reactive\uff0c\u751f\u6210\u4e00\u4e2aproxy\u5bf9\u8c61\u4f5c\u4e3aref.value\u7684\u503c\uff0c\u540e\u7eed\u7684\u903b\u8f91\u548creactive\u4e00\u6837\uff0c\u53ea\u662f\u591a\u4e86\u4e00\u5c42\u5bf9ref.value\u7684get\/set\u62e6\u622a\u3002<\/p>\n<p>\u90a3\u4e3a\u4ec0\u4e48\u76f4\u63a5\u4fa6\u542c\u6574\u4e2a\u666e\u901a\u5f15\u7528\u7c7b\u578b\u7684ref\/reactive\uff0c\u52a0deep: true\u6709\u7528\uff1f\u56e0\u4e3adeep\u4fa6\u542c\u7684\u6838\u5fc3\u903b\u8f91\u662f\uff1a\u5728track\u9636\u6bb5\uff0c\u9012\u5f52\u904d\u5386\u6574\u4e2a\u76ee\u6807\u5bf9\u8c61\/\u6570\u7ec4\uff0c\u628a\u6240\u6709\u5185\u90e8\u7684\u5c5e\u6027\u3001\u5b50\u6570\u7ec4\u7684\u5143\u7d20\u90fd\u4f5c\u4e3a\u4f9d\u8d56\u6536\u96c6\u8d77\u6765\uff1b\u5728trigger\u9636\u6bb5\uff0c\u53ea\u8981\u6709\u4efb\u4f55\u4e00\u4e2a\u4f9d\u8d56\u7684\u5c5e\u6027\u53d8\u5316\uff0c\u5c31\u4f1a\u89e6\u53d1\u56de\u8c03\u3002<\/p>\n<h4>\u5bf9ES6\u5185\u7f6e\u96c6\u5408\u7c7b\u578b\u7684\u5904\u7406<\/h4>\n<p>\u4f46Set\/Map\u8fd9\u4e9b\u96c6\u5408\u7c7b\u578b\u4e0d\u4e00\u6837\uff0c\u5b83\u4eec\u4e0d\u662f\u901a\u8fc7\u201c\u7d22\u5f15\/\u952e\u540d\u8bbf\u95ee\u5185\u90e8\u503c\u201d\u6765\u5b9e\u73b0\u64cd\u4f5c\u7684\uff0c\u800c\u662f\u901a\u8fc7\u81ea\u8eab\u7684\u65b9\u6cd5\uff08add\/delete\/clear\/get\/set\/has\/size\u7b49\uff09\uff0c\u5982\u679cVue3\u7528\u5904\u7406\u666e\u901aObject\/Array\u7684\u65b9\u5f0f\u76f4\u63a5\u4ee3\u7406Set\/Map\uff0c\u4f1a\u6709\u4e24\u4e2a\u95ee\u9898\uff1a<\/p>\n<ol>\n<li>\u76f4\u63a5\u8bbf\u95ee\u5185\u90e8\u503c\u662f\u4e0d\u53ef\u80fd\u7684\u2014\u2014Set\u5185\u90e8\u7684\u5143\u7d20\u6ca1\u6709\u952e\u540d\uff0c\u6570\u7ec4\u7684push\u867d\u7136\u4e5f\u7528\u5230\u4e86length\uff0c\u4f46\u672c\u8d28\u4e0a\u8fd8\u662f\u7d22\u5f15\u64cd\u4f5c\uff0cSet\u7684add\u5b8c\u5168\u4e0d\u4f9d\u8d56\u7d22\u5f15\uff1b<\/li>\n<li>\u6027\u80fd\u95ee\u9898\u592a\u4e25\u91cd\u2014\u2014\u5982\u679c\u6709\u4e00\u4e2a\u5305\u542b10000\u4e2a\u5143\u7d20\u7684Set\uff0c\u7528deep\u4fa6\u542c\u8981\u9012\u5f52\u904d\u538610000\u6b21\uff0c\u592a\u6d6a\u8d39\u8d44\u6e90\u4e86\u3002<\/li>\n<\/ol>\n<p>\u90a3Vue3\u662f\u600e\u4e48\u5904\u7406\u7684\u5462\uff1f\u5b83\u91c7\u7528\u4e86\u4e00\u79cd\u201c\u4ee3\u7406\u7279\u5b9a\u65b9\u6cd5\u201d\u7684\u601d\u8def\uff1a<\/p>\n<ol>\n<li>\u5148\u7ed9Set\/Map\u751f\u6210\u4e00\u4e2aProxy\u5bf9\u8c61\uff1b<\/li>\n<li>\u5728get\u62e6\u622a\u5668\u91cc\u5224\u65ad\uff1a\u5982\u679c\u8bbf\u95ee\u7684\u662fSet\/Map\u7684\u65b9\u6cd5\uff08add\/delete\/clear\/size\u7b49\uff09\u6216\u8005hasOwnProperty\u3001toString\u8fd9\u4e9b\u7279\u6b8a\u65b9\u6cd5\uff0c\u5c31\u8fd4\u56de\u4e00\u4e2a<strong>\u7ed1\u5b9a\u4e86\u5f53\u524dProxy\u7684\u51fd\u6570<\/strong>\uff1b<\/li>\n<li>\u5f53\u8c03\u7528\u8fd9\u4e9b\u7ed1\u5b9a\u540e\u7684\u65b9\u6cd5\u65f6,\u6bd4\u5982\u6267\u884cfavoriteTags.value.add('React')\uff0c\u7ed1\u5b9a\u51fd\u6570\u4f1a\u5148\u8c03\u7528\u539f\u59cbSet\u7684add\u65b9\u6cd5\uff0c\u7136\u540e\u518d\u624b\u52a8\u89e6\u53d1\u66f4\u65b0\uff08trigger\uff09\uff0c\u540c\u65f6\u4e5f\u4f1a\u5728\u8bfb\u53d6size\u3001has\u8fd9\u4e9b\u5c5e\u6027\u65f6\u624b\u52a8\u6536\u96c6\u4f9d\u8d56\uff08track\uff09\u3002<\/li>\n<\/ol>\n<p>\u91cd\u70b9\u6765\u4e86\uff01\u8fd9\u4e2a\u624b\u52a8\u6536\u96c6\u4f9d\u8d56\u548c\u89e6\u53d1\u66f4\u65b0\uff0c<strong>\u53ea\u548c\u201c\u5f53\u524dSet\/Map\u7684\u5b9e\u4f8b\u672c\u8eab\u201d\u6709\u5173\uff0c\u548c\u5185\u90e8\u7684\u5143\u7d20\u6ca1\u6709\u4efb\u4f55\u5173\u7cfb<\/strong>\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0cVue3\u4e0d\u4f1a\u9012\u5f52\u904d\u5386Set\u5185\u90e8\u7684\u5143\u7d20\u53bb\u6536\u96c6\u4f9d\u8d56\uff0c\u54ea\u6015\u4f60\u52a0\u4e86deep: true\u4e5f\u6ca1\u7528\u2014\u2014\u56e0\u4e3aSet\u5185\u90e8\u6ca1\u6709\u53ef\u679a\u4e3e\u7684\u201c\u952e\u540d\u201d\u7ed9\u4f60\u9012\u5f52\u904d\u5386\u554a\uff01<\/p>\n<p>\u90a3\u4e3a\u4ec0\u4e48\u6211\u4eec\u6253\u5370ref(reactive(Set))\u7684\u5185\u5bb9\uff0c\u6a21\u677f\u91cc\u7528v-for\u4e5f\u80fd\u6b63\u5e38\u663e\u793a\u5462\uff1f\u54e6\uff0c\u6a21\u677f\u91cc\u7528v-for\u904d\u5386Set\u7684\u65f6\u5019\uff0c\u672c\u8d28\u4e0a\u662f\u5148\u8c03\u7528\u4e86Set\u7684values()\u65b9\u6cd5\u6216\u8005Symbol.iterator\u8fed\u4ee3\u5668\uff08\u548c\u8c03\u7528size\u3001has\u4e00\u6837\u4f1a\u89e6\u53d1get\u62e6\u622a\u5668\u6536\u96c6\u4f9d\u8d56\uff09\uff0c\u5f53\u8c03\u7528add\/delete\/clear\u65f6\u624b\u52a8\u89e6\u53d1\u7684\u66f4\u65b0\uff0c\u521a\u597d\u80fd\u89e6\u53d1\u8fd9\u4e2a\u6a21\u677f\u4f9d\u8d56\u7684\u91cd\u65b0\u6267\u884c\uff0c\u6240\u4ee5\u89c6\u56fe\u4f1a\u53d8\uff1b\u4f46watch\u4fa6\u542c\u7684\u662f\u6574\u4e2aSet\u7684ref\/reactive\uff0c\u5b83\u7684track\u9636\u6bb5\u4e0d\u662f\u901a\u8fc7\u8c03\u7528values()\/size\/has\u6765\u6536\u96c6\u7684\uff0c\u800c\u662f\u8bd5\u56fe\u9012\u5f52\u904d\u5386\u5185\u90e8\u5143\u7d20\u6216\u8005\u68c0\u67e5\u5f15\u7528\u5730\u5740\u2014\u2014\u5f15\u7528\u5730\u5740\u6ca1\u53d8\uff08\u56e0\u4e3aadd\/delete\u662f\u539f\u5730\u4fee\u6539\uff09\uff0c\u5185\u90e8\u5143\u7d20\u53c8\u6ca1\u6709\u53ef\u8ffd\u8e2a\u7684\u4f9d\u8d56\uff0c\u6240\u4ee5watch\u81ea\u7136\u4e0d\u4f1a\u89e6\u53d1\u3002<\/p>\n<h3>\u90a3\u62a5\u201c\u65e0\u6548\u7684\u4fa6\u542c\u6e90\u201d\u53c8\u662f\u600e\u4e48\u56de\u4e8b\uff1f<\/h3>\n<p>\u8fd8\u6709\u4e00\u79cd\u60c5\u51b5,\u6709\u4e9b\u670b\u53cb\u53ef\u80fd\u5199\u9519\u4e86\u4fa6\u542c\u6e90\uff0c<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u76f4\u63a5\u4fa6\u542c\u539f\u59cbSet\nconst favoriteTags = new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;])\nwatch(favoriteTags, () =&gt; {})<\/pre>\n<p>\u8fd9\u65f6\u5019Vue3\u4f1a\u76f4\u63a5\u62a5\u9519\u201cInvalid watch source: Set(2) A watch source can only be a ref, reactive object, getter\/effect function, or an array of these types.\u201d\uff0c\u610f\u601d\u5c31\u662f\u8bf4\uff0cwatch\u7684\u4fa6\u542c\u6e90\u53ea\u80fd\u662fref\u3001reactive\u5bf9\u8c61\u3001getter\/effect\u51fd\u6570\uff0c\u6216\u8005\u8fd9\u4e9b\u7c7b\u578b\u7684\u6570\u7ec4\u2014\u2014\u539f\u59cbSet\u4e0d\u5728\u8303\u56f4\u5185\uff0c\u80af\u5b9a\u4e0d\u884c\u3002<\/p>\n<h2>3\u79cd\u80fd\u8986\u76d680%\u5f00\u53d1\u573a\u666f\u7684Vue3\u76d1\u542cSet\u53d8\u5316\u7684\u5b9e\u7528\u65b9\u6848<\/h2>\n<p>\u641e\u61c2\u4e86\u539f\u7406,\u63a5\u4e0b\u6765\u5c31\u662f\u89e3\u51b3\u65b9\u6848\u4e86\uff0c\u54b1\u4eec\u4ece\u201c\u6700\u7b80\u5355\u65e0\u8111\u201d\u5230\u201c\u6027\u80fd\u6700\u4f18\u3001\u529f\u80fd\u6700\u5168\u201d\uff0c\u7ed9\u5927\u5bb6\u4ecb\u7ecd3\u79cd\u65b9\u6848\uff0c\u6bcf\u4e00\u79cd\u90fd\u6709\u5bf9\u5e94\u7684\u9002\u7528\u573a\u666f\uff0c\u4f60\u4eec\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u9879\u76ee\u60c5\u51b5\u6765\u9009\u3002<\/p>\n<h3>\u628aSet\u8f6c\u6210\u6570\u7ec4\uff0c\u7528computed\u5305\u88c5\u540e\u518d\u76d1\u542c<\/h3>\n<p>\u8fd9\u5e94\u8be5\u662f\u6700\u7b80\u5355\u7684\u4e00\u79cd\u65b9\u6848\u4e86\u2014\u2014\u65e2\u7136Vue3\u5bf9\u6570\u7ec4\u7684\u76d1\u542c\u8fd9\u4e48\u6210\u719f\uff0c\u90a3\u6211\u4eec\u5e72\u8106\u628aSet\u5b9e\u65f6\u8f6c\u6210\u6570\u7ec4\uff0c\u7136\u540e\u7528computed\u628a\u8fd9\u4e2a\u6570\u7ec4\u5305\u8d77\u6765\uff0c\u6700\u540e\u76f4\u63a5\u76d1\u542ccomputed\u8fd4\u56de\u7684\u503c\u5c31\u884c\u4e86\u3002<\/p>\n<h4>\u5177\u4f53\u5b9e\u73b0\u4ee3\u7801<\/h4>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, computed, watch, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u7528computed\u628aSet\u5b9e\u65f6\u8f6c\u6210\u6570\u7ec4\nconst favoriteTagsArr = computed(() =&gt; [...favoriteTagsSet.value])\n\/\/ \u76f4\u63a5\u76d1\u542ccomputed\u8fd4\u56de\u7684\u6570\u7ec4\nwatch(favoriteTagsArr, (newVal, oldVal) =&gt; {\n  console.log(&#39;\u6536\u85cf\u6807\u7b7e\u53d8\u4e86\uff01\u65b0\u6807\u7b7e\uff1a&#39;, newVal)\n  console.log(&#39;\u65e7\u6807\u7b7e\uff1a&#39;, oldVal)\n})\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df1\u79d2\u540e\u6dfb\u52a0\u65b0\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.add(&#39;React&#39;)\n  }, 1000)\n  \/\/ \u6a21\u62df2\u79d2\u540e\u5220\u9664\u65e7\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.delete(&#39;JavaScript&#39;)\n  }, 2000)\n  \/\/ \u6a21\u62df3\u79d2\u540e\u6e05\u7a7a\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.clear()\n  }, 3000)\n})<\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u8dd1\u8d77\u6765\u4e4b\u540e,\u63a7\u5236\u53f0\u4f1a\u4f9d\u6b21\u8f93\u51fa\u6dfb\u52a0\u3001\u5220\u9664\u3001\u6e05\u7a7a\u540e\u7684\u6807\u7b7e\u53d8\u5316\uff0c\u5b8c\u7f8e\u89e3\u51b3\u4e86watch\u4e0d\u89e6\u53d1\u7684\u95ee\u9898\u3002<\/p>\n<h4>\u65b9\u6848\u4e00\u7684\u9002\u7528\u573a\u666f<\/h4>\n<p>\u8fd9\u79cd\u65b9\u6848\u9002\u5408Set\u5185\u90e8\u5143\u7d20<strong>\u6570\u91cf\u4e0d\u591a\uff08\u4e00\u822c100\u4e2a\u4ee5\u5185\uff09<\/strong>\uff0c\u800c\u4e14<strong>\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\u7684\u5177\u4f53\u5dee\u5f02\uff08\u6bd4\u5982\u54ea\u4e9b\u5143\u7d20\u52a0\u4e86\u3001\u54ea\u4e9b\u5143\u7d20\u5220\u4e86\uff09<\/strong>\u7684\u573a\u666f\u2014\u2014\u56e0\u4e3acomputed\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u5168\u65b0\u7684\u6570\u7ec4\uff0cwatch\u7684newVal\u548coldVal\u53ef\u4ee5\u76f4\u63a5\u7528\u6765\u505a\u5bf9\u6bd4\uff08\u6bd4\u5982\u7528lodash\u7684difference\u65b9\u6cd5\uff0c\u6216\u8005\u81ea\u5df1\u5199\u4e2a\u5faa\u73af\uff09\u3002<\/p>\n<h4>\u65b9\u6848\u4e00\u7684\u6ce8\u610f\u4e8b\u9879<\/h4>\n<ol>\n<li>\u6027\u80fd\u95ee\u9898\uff1a\u5982\u679cSet\u5185\u90e8\u7684\u5143\u7d20\u7279\u522b\u591a\uff08\u6bd4\u59821000\u4e2a\u4ee5\u4e0a\uff09\uff0c\u6bcf\u6b21Set\u53d8\u5316\u90fd\u4f1a\u89e6\u53d1computed\u91cd\u65b0\u6267\u884c\uff0c\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684\u6570\u7ec4\uff0c\u8fd9\u4f1a\u5360\u7528\u989d\u5916\u7684\u5185\u5b58\u548cCPU\u8d44\u6e90\uff1b<\/li>\n<li>\u65b0\u65e7\u503c\u7684\u5f15\u7528\u5730\u5740\uff1a\u56e0\u4e3acomputed\u6bcf\u6b21\u90fd\u8fd4\u56de\u65b0\u6570\u7ec4\uff0c\u6240\u4ee5newVal\u548coldVal\u7684\u5f15\u7528\u5730\u5740\u6c38\u8fdc\u4e0d\u4e00\u6837\uff0c\u54ea\u6015\u4f60\u53ea\u662f\u4e0d\u5c0f\u5fc3\u89e6\u53d1\u4e86\u4e00\u6b21Set\u7684\u64cd\u4f5c\uff08\u6bd4\u5982add\u4e86\u4e00\u4e2a\u5df2\u7ecf\u5b58\u5728\u7684\u5143\u7d20\uff09\uff0cwatch\u4e5f\u4f1a\u89e6\u53d1\u2014\u2014\u4e0d\u8fc7\u8fd9\u4e2a\u95ee\u9898\u53ef\u4ee5\u901a\u8fc7\u5728watch\u91cc\u52a0\u4e2a\u903b\u8f91\u5224\u65ad\uff0c\u5bf9\u6bd4newVal\u548coldVal\u7684JSON.stringify\u6216\u8005\u957f\u5ea6+\u5143\u7d20\u7684has\u5173\u7cfb\u6765\u89e3\u51b3\uff1b<\/li>\n<li>\u5982\u679cSet\u5185\u90e8\u7684\u5143\u7d20\u662f\u5f15\u7528\u7c7b\u578b\uff08\u6bd4\u5982\u5bf9\u8c61\uff09\uff0c\u76f4\u63a5\u8f6c\u6210\u6570\u7ec4\u7684computed\u8fd8\u662f\u4e0d\u4f1a\u81ea\u52a8\u8ffd\u8e2a\u5bf9\u8c61\u5185\u90e8\u7684\u5c5e\u6027\u53d8\u5316\u2014\u2014\u9664\u975e\u4f60\u7ed9watch\u52a0deep: true\uff0c\u4f46\u8fd9\u65f6\u5019\u53c8\u56de\u5230\u4e86\u4e4b\u524d\u7684\u6027\u80fd\u95ee\u9898\uff0c\u800c\u4e14computed\u672c\u8eab\u4e5f\u4e0d\u4f1a\u81ea\u52a8\u89e6\u53d1\u66f4\u65b0\uff08\u56e0\u4e3acomputed\u53ea\u8ffd\u8e2a\u6570\u7ec4\u7684\u5f15\u7528\u5730\u5740\u6216\u8005\u5185\u90e8\u7684\u7d22\u5f15\/\u952e\u540d\uff0c\u4e0d\u4f1a\u8ffd\u8e2a\u6570\u7ec4\u91cc\u5bf9\u8c61\u7684\u5185\u90e8\u5c5e\u6027\uff0c\u9664\u975e\u4f60\u5728computed\u91cc\u8bfb\u53d6\u4e86\u8fd9\u4e9b\u5c5e\u6027\uff09\u3002<\/li>\n<\/ol>\n<h3>\u7528watchEffect\u76d1\u542cSet\u7684size\u5c5e\u6027\u6216\u8005\u904d\u5386\u8fc7\u7a0b<\/h3>\n<p>\u539f\u7406\u91cc\u54b1\u4eec\u8bf4\u8fc7,Vue3\u5728\u8bfb\u53d6Set\u7684size\u3001has\u3001values()\u3001entries()\u3001Symbol.iterator\u8fd9\u4e9b\u65b9\u6cd5\u6216\u8005\u5c5e\u6027\u65f6\uff0c\u4f1a\u624b\u52a8\u6536\u96c6\u4f9d\u8d56\uff1b\u5728\u8c03\u7528add\/delete\/clear\u8fd9\u4e9b\u65b9\u6cd5\u65f6\uff0c\u4f1a\u624b\u52a8\u89e6\u53d1\u66f4\u65b0\uff0c\u90a3\u6211\u4eec\u80fd\u4e0d\u80fd\u5229\u7528\u8fd9\u4e00\u70b9\uff0c\u76f4\u63a5\u7528watchEffect\u6765\u76d1\u542c\u8fd9\u4e9b\u8bfb\u53d6\u64cd\u4f5c\uff1f<\/p>\n<h4>\u5177\u4f53\u5b9e\u73b0\u4ee3\u78011\uff1a\u76d1\u542csize\u5c5e\u6027<\/h4>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watchEffect, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u7528watchEffect\u76d1\u542csize\u5c5e\u6027\u7684\u8bfb\u53d6\nwatchEffect(() =&gt; {\n  console.log(&#39;\u5f53\u524d\u6536\u85cf\u6807\u7b7e\u7684\u6570\u91cf\uff1a&#39;, favoriteTagsSet.value.size)\n  \/\/ \u5728\u8fd9\u91cc\u5199\u4f60\u7684\u66f4\u65b0\u903b\u8f91\uff0c\u6bd4\u5982\u8c03\u7528\u540e\u7aef\u63a5\u53e3\u540c\u6b65\u6807\u7b7e\n})\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df1\u79d2\u540e\u6dfb\u52a0\u65b0\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.add(&#39;React&#39;)\n  }, 1000)\n  \/\/ \u6a21\u62df2\u79d2\u540e\u5220\u9664\u65e7\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.delete(&#39;JavaScript&#39;)\n  }, 2000)\n  \/\/ \u6a21\u62df3\u79d2\u540e\u6dfb\u52a0\u5df2\u7ecf\u5b58\u5728\u7684\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.add(&#39;Vue&#39;) \/\/ \u6ce8\u610f\uff1a\u8fd9\u6b21size\u4e0d\u4f1a\u53d8\uff0c\u6240\u4ee5watchEffect\u4e0d\u4f1a\u89e6\u53d1\n  }, 3000)\n  \/\/ \u6a21\u62df4\u79d2\u540e\u6e05\u7a7a\u6807\u7b7e\n  setTimeout(() =&gt; {\n    favoriteTagsSet.value.clear()\n  }, 4000)\n})<\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u8dd1\u8d77\u6765\u4e4b\u540e,\u63a7\u5236\u53f0\u4f1a\u8f93\u51fa\u6dfb\u52a0\u540e\u7684\u6570\u91cf\uff084\uff09\u3001\u5220\u9664\u540e\u7684\u6570\u91cf\uff083\uff09\u3001\u6e05\u7a7a\u540e\u7684\u6570\u91cf\uff080\uff09\uff0c\u4f46\u6dfb\u52a0\u5df2\u7ecf\u5b58\u5728\u7684Vue\u6807\u7b7e\u65f6\uff0csize\u8fd8\u662f3\uff0c\u6240\u4ee5watchEffect\u4e0d\u4f1a\u89e6\u53d1\u2014\u2014\u8fd9\u5176\u5b9e\u662f\u4e2a\u4f18\u70b9\uff0c\u56e0\u4e3a\u6dfb\u52a0\u5df2\u5b58\u5728\u7684\u5143\u7d20\u672c\u6765\u5c31\u4e0d\u7b97\u53d8\u5316\u561b\u3002<\/p>\n<h4>\u5177\u4f53\u5b9e\u73b0\u4ee3\u78012\uff1a\u76d1\u542c\u904d\u5386\u8fc7\u7a0b<\/h4>\n<p>\u5982\u679c\u4f60\u7684\u66f4\u65b0\u903b\u8f91\u9700\u8981\u7528\u5230Set\u5185\u90e8\u7684\u6240\u6709\u5143\u7d20,\u800c\u4e0d\u4ec5\u4ec5\u662f\u6570\u91cf\uff0c\u90a3\u53ef\u4ee5\u5728watchEffect\u91cc\u904d\u5386\u4e00\u4e0bSet\uff0c<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watchEffect, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u6a21\u62df\u4e00\u4e2a\u5b58\u50a8\u6807\u7b7e\u5b57\u7b26\u4e32\u7684\u53d8\u91cf\nlet currentTagsStr = &#39;&#39;\n\/\/ \u7528watchEffect\u76d1\u542c\u904d\u5386\u8fc7\u7a0b\nwatchEffect(() =&gt; {\n  currentTagsStr = &#39;&#39;\n  \/\/ \u904d\u5386Set\uff0c\u6536\u96c6\u4f9d\u8d56\n  for (const tag of favoriteTagsSet.value) {\n    currentTagsStr += tag + &#39;\u3001&#39;\n  }\n  \/\/ \u53bb\u6389\u6700\u540e\u4e00\u4e2a\u987f\u53f7\n  currentTagsStr = currentTagsStr.slice(0, -1)\n  console.log(&#39;\u5f53\u524d\u6536\u85cf\u6807\u7b7e\uff1a&#39;, currentTagsStr)\n  \/\/ \u5728\u8fd9\u91cc\u5199\u4f60\u7684\u66f4\u65b0\u903b\u8f91\uff0c\u6bd4\u5982\u6e32\u67d3\u5230\u67d0\u4e2a\u975e\u54cd\u5e94\u5f0f\u7684DOM\u5143\u7d20\u4e0a\n})\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df\u64cd\u4f5c\u548c\u4e4b\u524d\u4e00\u6837\n})<\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u6548\u679c\u548c\u65b9\u6848\u4e00\u5dee\u4e0d\u591a,\u4f46\u4e0d\u9700\u8981\u7528computed\u5305\u88c5\uff0c\u4ee3\u7801\u66f4\u7b80\u6d01\u4e00\u70b9\u3002<\/p>\n<h4>\u65b9\u6848\u4e8c\u7684\u9002\u7528\u573a\u666f<\/h4>\n<p>\u8fd9\u79cd\u65b9\u6848\u9002\u5408Set\u5185\u90e8\u5143\u7d20<strong>\u6570\u91cf\u4e0d\u9650\uff08\u53ea\u8981\u904d\u5386\u8fc7\u7a0b\u4e0d\u8017\u65f6\u592a\u957f\uff09<\/strong>\uff0c\u800c\u4e14<strong>\u4e0d\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\u7684\u5177\u4f53\u5dee\u5f02\uff08\u6216\u8005\u53ef\u4ee5\u81ea\u5df1\u5728\u903b\u8f91\u91cc\u4fdd\u5b58\u65e7\u503c\u6765\u5bf9\u6bd4\uff09<\/strong>\u7684\u573a\u666f\u2014\u2014\u5c24\u5176\u662f\u5f53\u4f60\u53ea\u9700\u8981\u77e5\u9053Set\u6709\u6ca1\u6709\u53d8\u5316\uff0c\u6216\u8005\u53ea\u9700\u8981\u7528\u5230Set\u7684\u6700\u65b0\u503c\u65f6\uff0c\u8fd9\u79cd\u65b9\u6848\u6bd4\u65b9\u6848\u4e00\u6027\u80fd\u66f4\u597d\uff0c\u56e0\u4e3a\u5b83\u4e0d\u9700\u8981\u6bcf\u6b21\u90fd\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684\u6570\u7ec4\u3002<\/p>\n<h4>\u65b9\u6848\u4e8c\u7684\u6ce8\u610f\u4e8b\u9879<\/h4>\n<ol>\n<li>\u65e0\u6cd5\u76f4\u63a5\u83b7\u53d6\u65b0\u65e7\u503c\uff1awatchEffect\u4e0d\u50cfwatch\u90a3\u6837\u6709newVal\u548coldVal\u53c2\u6570\uff0c\u5982\u679c\u4f60\u9700\u8981\u5bf9\u6bd4\u65b0\u65e7\u503c\uff0c\u5f97\u81ea\u5df1\u5728\u5916\u9762\u4fdd\u5b58\u4e00\u4e2a\u65e7\u503c\u53d8\u91cf\uff0c\u6bcf\u6b21watchEffect\u6267\u884c\u65f6\u5148\u628a\u65e7\u503c\u5b58\u4e0b\u6765\uff0c\u518d\u66f4\u65b0\u65e7\u503c\uff1b<\/li>\n<li>watchEffect\u7684\u6267\u884c\u65f6\u673a\uff1awatchEffect\u4f1a\u5728\u7ec4\u4ef6\u521d\u59cb\u5316\u65f6\u81ea\u52a8\u6267\u884c\u4e00\u6b21\uff0c\u5982\u679c\u4f60\u4e0d\u9700\u8981\u521d\u59cb\u5316\u65f6\u7684\u90a3\u6b21\u6267\u884c\uff0c\u53ef\u4ee5\u7528watchEffect\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u914d\u7f6e{ flush: 'post' }\u6216\u8005{ flush: 'sync' }\uff0c\u4e0d\u8fc7sync\u4f1a\u5f71\u54cd\u6027\u80fd\uff0c\u4e00\u822c\u4e0d\u63a8\u8350\uff1b\u5982\u679c\u4f60\u5b8c\u5168\u4e0d\u60f3\u8ba9\u5b83\u521d\u59cb\u5316\u65f6\u6267\u884c\uff0c\u53ef\u4ee5\u7528watch\u7684getter\u51fd\u6570\u5f62\u5f0f\uff0c\u76d1\u542csize\u5c5e\u6027\u6216\u8005\u904d\u5386\u8fc7\u7a0b\uff0c\u8fd9\u5c31\u662f\u54b1\u4eec\u63a5\u4e0b\u6765\u8981\u8bb2\u7684\u65b9\u6848\u4e09\u3002<\/li>\n<\/ol>\n<h3>\u7528watch\u7684getter\u51fd\u6570\u5f62\u5f0f\uff0c\u76d1\u542csize\u5c5e\u6027\u6216\u8005\u904d\u5386\u8fc7\u7a0b<\/h3>\n<p>\u65b9\u6848\u4e09\u5176\u5b9e\u662f\u65b9\u6848\u4e8c\u7684\u201c\u5347\u7ea7\u53ef\u63a7\u7248\u201d\u2014\u2014\u5b83\u65e2\u4fdd\u7559\u4e86\u65b9\u6848\u4e8c\u4e0d\u9700\u8981computed\u3001\u4e0d\u9700\u8981\u751f\u6210\u65b0\u6570\u7ec4\u7684\u4f18\u70b9\uff0c\u53c8\u80fd\u50cf\u65b9\u6848\u4e00\u90a3\u6837\u83b7\u53d6\u65b0\u65e7\u503c\uff0c\u8fd8\u80fd\u901a\u8fc7\u914d\u7f6e\u63a7\u5236\u521d\u59cb\u5316\u65f6\u662f\u5426\u6267\u884c\u3002<\/p>\n<h4>\u5177\u4f53\u5b9e\u73b0\u4ee3\u78011\uff1a\u76d1\u542csize\u5c5e\u6027\uff0c\u83b7\u53d6\u65b0\u65e7\u503c\uff0c\u4e0d\u521d\u59cb\u5316\u6267\u884c<\/h4>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u7528watch\u7684getter\u51fd\u6570\u5f62\u5f0f\uff0c\u76d1\u542csize\u5c5e\u6027\nwatch(\n  () =&gt; favoriteTagsSet.value.size,\n  (newSize, oldSize) =&gt; {\n    console.log(&#39;\u6536\u85cf\u6807\u7b7e\u6570\u91cf\u53d8\u4e86\uff01\u65b0\u6570\u91cf\uff1a&#39;, newSize)\n    console.log(&#39;\u65e7\u6570\u91cf\uff1a&#39;, oldSize)\n    \/\/ \u5728\u8fd9\u91cc\u5199\u4f60\u7684\u66f4\u65b0\u903b\u8f91\n  },\n  {\n    immediate: false \/\/ \u4e0d\u521d\u59cb\u5316\u65f6\u6267\u884c\uff0c\u9ed8\u8ba4\u662ffalse\uff0c\u8fd9\u91cc\u5199\u51fa\u6765\u662f\u4e3a\u4e86\u5f3a\u8c03\n  }\n)\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df\u64cd\u4f5c\u548c\u4e4b\u524d\u4e00\u6837\n})<\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u8dd1\u8d77\u6765\u4e4b\u540e,\u63a7\u5236\u53f0\u53ea\u4f1a\u8f93\u51fa\u6dfb\u52a0\u3001\u5220\u9664\u3001\u6e05\u7a7a\u540e\u7684\u6570\u91cf\u53d8\u5316\uff0c\u521d\u59cb\u5316\u65f6\u4e0d\u4f1a\u6709\u4efb\u4f55\u8f93\u51fa\u2014\u2014\u5b8c\u7f8e\u89e3\u51b3\u4e86watchEffect\u521d\u59cb\u5316\u6267\u884c\u7684\u95ee\u9898\u3002<\/p>\n<h4>\u5177\u4f53\u5b9e\u73b0\u4ee3\u78012\uff1a\u76d1\u542c\u904d\u5386\u8fc7\u7a0b\uff0c\u83b7\u53d6\u65b0\u65e7\u503c\u7684Set\u5b9e\u4f8b\uff0c\u4e0d\u521d\u59cb\u5316\u6267\u884c<\/h4>\n<p>\u5982\u679c\u4f60\u7684\u66f4\u65b0\u903b\u8f91\u9700\u8981\u7528\u5230\u65b0\u65e7\u503c\u7684\u6574\u4e2aSet\u5b9e\u4f8b,\u800c\u4e0d\u4ec5\u4ec5\u662f\u6570\u91cf\uff0c\u90a3\u53ef\u4ee5\u5728getter\u51fd\u6570\u91cc\u76f4\u63a5\u8fd4\u56deSet\u7684ref.value\uff0c\u4f46\u8fd9\u65f6\u5019\u8981\u6ce8\u610f\u2014\u2014\u56e0\u4e3aSet\u662f\u539f\u5730\u4fee\u6539\u7684\uff0cref.value\u7684\u5f15\u7528\u5730\u5740\u6c38\u8fdc\u6ca1\u53d8\uff0c\u6240\u4ee5watch\u7684newVal\u548coldVal\u4f1a\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\uff01\u8fd9\u65f6\u5019\u600e\u4e48\u529e\u5462\uff1f\u6211\u4eec\u53ef\u4ee5\u5728getter\u51fd\u6570\u91cc\u8fd4\u56de\u4e00\u4e2aSet\u7684\u6d45\u62f7\u8d1d\uff0c\u6216\u8005\u81ea\u5df1\u5728\u5916\u9762\u4fdd\u5b58\u65e7\u503c\u3002<\/p>\n<h5>\u5199\u6cd51\uff1a\u8fd4\u56de\u6d45\u62f7\u8d1d\uff08\u9700\u8981\u81ea\u5df1\u5904\u7406\u6027\u80fd\u95ee\u9898\uff09<\/h5>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\nwatch(\n  \/\/ \u5728getter\u51fd\u6570\u91cc\u8c03\u7528size\u6216\u8005\u904d\u5386\uff0c\u6536\u96c6\u4f9d\u8d56\uff0c\u7136\u540e\u8fd4\u56de\u6d45\u62f7\u8d1d\n  () =&gt; {\n    favoriteTagsSet.value.size \/\/ \u6216\u8005 for...of \u904d\u5386\u4e00\u4e0b\uff0c\u4e8c\u9009\u4e00\u5c31\u884c\n    return new Set(favoriteTagsSet.value) \/\/ \u6d45\u62f7\u8d1d\u4e00\u4e2a\u65b0\u7684Set\u5b9e\u4f8b\n  },\n  (newSet, oldSet) =&gt; {\n    console.log(&#39;\u6536\u85cf\u6807\u7b7e\u53d8\u4e86\uff01\u65b0\u6807\u7b7e\uff1a&#39;, [...newSet])\n    console.log(&#39;\u65e7\u6807\u7b7e\uff1a&#39;, [...oldSet])\n    \/\/ \u5728\u8fd9\u91cc\u5199\u4f60\u7684\u66f4\u65b0\u903b\u8f91\n  },\n  {\n    immediate: false\n  }\n)\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df\u64cd\u4f5c\u548c\u4e4b\u524d\u4e00\u6837\n})<\/pre>\n<p>\u8fd9\u79cd\u5199\u6cd5\u7684newVal\u548coldVal\u662f\u4e24\u4e2a\u4e0d\u540c\u7684Set\u5b9e\u4f8b,\u53ef\u4ee5\u76f4\u63a5\u7528\u6765\u5bf9\u6bd4\uff0c\u4f46\u6bcf\u6b21Set\u53d8\u5316\u90fd\u4f1a\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u6d45\u62f7\u8d1dSet\u5b9e\u4f8b\uff0c\u6027\u80fd\u6bd4\u65b9\u6848\u4e8c\u7684watchEffect\u5dee\u4e00\u70b9\uff0c\u548c\u65b9\u6848\u4e00\u5dee\u4e0d\u591a\u3002<\/p>\n<h5>\u5199\u6cd52\uff1a\u81ea\u5df1\u4fdd\u5b58\u65e7\u503c\uff08\u6027\u80fd\u6700\u4f18\uff09<\/h5>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch, onMounted } from &#39;vue&#39;\nconst favoriteTagsSet = ref(new Set([&#39;\u524d\u7aef&#39;, &#39;Vue&#39;, &#39;JavaScript&#39;]))\n\/\/ \u81ea\u5df1\u4fdd\u5b58\u4e00\u4e2a\u65e7\u503c\u53d8\u91cf\nlet oldFavoriteTags = new Set(favoriteTagsSet.value)\nwatch(\n  \/\/ \u5728getter\u51fd\u6570\u91cc\u8c03\u7528size\u6216\u8005\u904d\u5386\uff0c\u6536\u96c6\u4f9d\u8d56\uff0c\u4f46\u4e0d\u8fd4\u56de\u65b0\u5b9e\u4f8b\n  () =&gt; favoriteTagsSet.value.size,\n  (newSize) =&gt; {\n    const newFavoriteTags = favoriteTagsSet.value\n    console.log(&#39;\u6536\u85cf\u6807\u7b7e\u53d8\u4e86\uff01\u65b0\u6807\u7b7e\uff1a&#39;, [...newFavoriteTags])\n    console.log(&#39;\u65e7\u6807\u7b7e\uff1a&#39;, [...oldFavoriteTags])\n    \/\/ \u5728\u8fd9\u91cc\u5199\u4f60\u7684\u66f4\u65b0\u903b\u8f91\n    \/\/ \u6700\u540e\u66f4\u65b0\u65e7\u503c\u53d8\u91cf\n    oldFavoriteTags = new Set(newFavoriteTags)\n  },\n  {\n    immediate: false\n  }\n)\nonMounted(() =&gt; {\n  \/\/ \u6a21\u62df\u64cd\u4f5c\u548c\u4e4b\u524d\u4e00\u6837\n  \/\/ \u6ce8\u610f\uff1a\u5982\u679c\u9700\u8981\u76d1\u542c\u6dfb\u52a0\u5df2\u5b58\u5728\u5143\u7d20\u7684\u60c5\u51b5\uff08\u867d\u7136Set\u672c\u8eab\u4e0d\u8ba4\u4e3a\u8fd9\u662f\u53d8\u5316\uff09\uff0c\u53ef\u4ee5\u628agetter\u51fd\u6570\u6539\u6210\u8fd4\u56de[...favoriteTagsSet.value].join(&#39;,&#39;)\n})<\/pre>\n<p>\u8fd9\u79cd\u5199\u6cd5\u7684\u6027\u80fd\u662f\u6700\u4f18\u7684\u2014\u2014\u56e0\u4e3a\u5b83\u53ea\u5728\u9700\u8981\u7684\u65f6\u5019\uff08\u66f4\u65b0\u65e7\u503c\u53d8\u91cf\uff09\u624d\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u6d45\u62f7\u8d1dSet\u5b9e\u4f8b\uff0c\u5e73\u65f6\u53ea\u8c03\u7528size\u5c5e\u6027\u6536\u96c6\u4f9d\u8d56\uff0c\u4e0d\u4f1a\u5360\u7528\u989d\u5916\u7684\u5185\u5b58\u548cCPU\u8d44\u6e90\uff1b\u800c\u4e14\u53ef\u4ee5\u81ea\u5df1\u63a7\u5236\u662f\u5426\u76d1\u542c\u6dfb\u52a0\u5df2\u5b58\u5728\u5143\u7d20\u7684\u60c5\u51b5\u2014\u2014\u5982\u679c\u9700\u8981\u7684\u8bdd\uff0c\u628agetter\u51fd\u6570\u6539\u6210\u8fd4\u56de<code>[...favoriteTagsSet.value].join(',')<\/code>\u6216\u8005\u7528\u5176\u4ed6\u65b9\u5f0f\u751f\u6210\u4e00\u4e2a\u552f\u4e00\u7684\u5b57\u7b26\u4e32\u6807\u8bc6Set\u7684\u5185\u5bb9\u5c31\u884c\uff0c\u4f46\u8fd9\u65f6\u5019\u8981\u6ce8\u610f\uff0c\u5982\u679cSet\u5185\u90e8\u7684\u5143\u7d20\u662f\u5f15\u7528\u7c7b\u578b\uff0cjoin(',')\u53ef\u80fd\u65e0\u6cd5\u6b63\u786e\u6807\u8bc6\u5185\u90e8\u5c5e\u6027\u7684\u53d8\u5316\u3002<\/p>\n<h4>\u65b9\u6848\u4e09\u7684\u9002\u7528\u573a\u666f<\/h4>\n<p>\u8fd9\u79cd\u65b9\u6848\u9002\u5408<strong>\u6240\u6709\u573a\u666f<\/strong>\u2014\u2014\u4e0d\u7ba1\u4f60\u662f\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\u3001\u4e0d\u9700\u8981\u521d\u59cb\u5316\u6267\u884c\u3001\u8fd8\u662f\u5bf9\u6027\u80fd\u6709\u5f88\u9ad8\u7684\u8981\u6c42\uff0c\u90fd\u53ef\u4ee5\u7528\u8fd9\u79cd\u65b9\u6848\uff0c\u53ea\u662f\u9700\u8981\u6839\u636e\u5177\u4f53\u60c5\u51b5\u8c03\u6574getter\u51fd\u6570\u548c\u903b\u8f91\u3002<\/p>\n<h4>\u65b9\u6848\u4e09\u7684\u6ce8\u610f\u4e8b\u9879<\/h4>\n<ol>\n<li>\u5982\u679cSet\u5185\u90e8\u7684\u5143\u7d20\u662f\u5f15\u7528\u7c7b\u578b,\u4ee5\u4e0a\u6240\u6709\u65b9\u6848\u90fd\u65e0\u6cd5\u81ea\u52a8\u8ffd\u8e2a\u5bf9\u8c61\u5185\u90e8\u7684\u5c5e\u6027\u53d8\u5316\u2014\u2014\u9664\u975e\u4f60\u7ed9\u6bcf\u4e2a\u5143\u7d20\u90fd\u52a0\u4e86ref\/reactive\uff0c\u5e76\u4e14\u5728getter\u51fd\u6570\u91cc\u8bfb\u53d6\u4e86\u8fd9\u4e9b\u5143\u7d20\u7684\u5185\u90e8\u5c5e\u6027\uff1b<\/li>\n<li>\u5982\u679c\u9700\u8981\u76d1\u542cWeakSet\/WeakMap\u7684\u53d8\u5316\uff0c\u4ee5\u4e0a\u6240\u6709\u65b9\u6848\u90fd\u4e0d\u9002\u7528\u2014\u2014\u56e0\u4e3aWeakSet\/WeakMap\u6ca1\u6709size\u5c5e\u6027\uff0c\u4e5f\u65e0\u6cd5\u904d\u5386\uff0c\u800c\u4e14\u5b83\u4eec\u7684\u5185\u90e8\u5143\u7d20\u662f\u5f31\u5f15\u7528\u7684\uff0c\u968f\u65f6\u53ef\u80fd\u88ab\u5783\u573e\u56de\u6536\u5668\u56de\u6536\uff0c\u6240\u4ee5Vue3\u4e5f\u6ca1\u6709\u7ed9\u5b83\u4eec\u505a\u54cd\u5e94\u5f0f\u5904\u7406\u3002<\/li>\n<\/ol>\n<h2>\u6027\u80fd\u4f18\u5316\u7684\u5c0f\u7ec6\u8282\uff1a\u5982\u4f55\u8ba9\u76d1\u542cSet\u53d8\u5316\u7684\u4ee3\u7801\u66f4\u9ad8\u6548\uff1f<\/h2>\n<p>\u867d\u7136\u524d\u9762\u4ecb\u7ecd\u76843\u79cd\u65b9\u6848\u5df2\u7ecf\u80fd\u89e3\u51b3\u5927\u90e8\u5206\u95ee\u9898\u4e86,\u4f46\u5982\u679c\u4f60\u7684Set\u5185\u90e8\u5143\u7d20\u7279\u522b\u591a\uff08\u6bd4\u598210000\u4e2a\u4ee5\u4e0a\uff09\uff0c\u6216\u8005Set\u7684\u53d8\u5316\u9891\u7387\u7279\u522b\u9ad8\uff08\u6bd4\u5982\u7528\u6237\u62d6\u52a8\u6807\u7b7e\u65f6\u6bcf10ms\u5c31\u53d8\u5316\u4e00\u6b21\uff09\uff0c\u90a3\u8fd8\u662f\u5f97\u6ce8\u610f\u4e00\u4e0b\u6027\u80fd\u4f18\u5316\u7684\u5c0f\u7ec6\u8282\u3002<\/p>\n<h3>\u5c3d\u91cf\u907f\u514d\u7528computed\u5305\u88c5\u6210\u6570\u7ec4\uff0c\u4e5f\u907f\u514d\u5728getter\u51fd\u6570\u91cc\u6bcf\u6b21\u90fd\u751f\u6210\u6d45\u62f7\u8d1d<\/h3>\n<p>\u5982\u679c\u4e0d\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\u7684\u5177\u4f53\u5dee\u5f02,\u6216\u8005\u53ef\u4ee5\u81ea\u5df1\u4fdd\u5b58\u65e7\u503c\uff0c\u90a3\u5c3d\u91cf\u7528\u65b9\u6848\u4e8c\u7684watchEffect\u6216\u8005\u65b9\u6848\u4e09\u7684\u53ea\u76d1\u542csize\u5c5e\u6027\u7684\u5199\u6cd5\u2014\u2014\u56e0\u4e3a\u8fd9\u4e24\u79cd\u5199\u6cd5\u4e0d\u9700\u8981\u6bcf\u6b21\u90fd\u751f\u6210\u65b0\u7684\u6570\u7ec4\u6216Set\u5b9e\u4f8b\uff0c\u80fd\u8282\u7701\u5927\u91cf\u7684\u5185\u5b58\u548cCPU\u8d44\u6e90\u3002<\/p>\n<h3>\u5982\u679c\u5fc5\u987b\u7528computed\u6216\u8005\u751f\u6210\u6d45\u62f7\u8d1d\uff0c\u5c3d\u91cf\u7528\u60f0\u6027\u6c42\u503c\u7684\u65b9\u5f0f<\/h3>\n<p>\u60f0\u6027\u6c42\u503c\u5c31\u662f\u201c\u53ea\u6709\u5f53\u771f\u6b63\u9700\u8981\u7684\u65f6\u5019\u624d\u8ba1\u7b97\u201d\u2014\u2014\u6bd4\u5982\u5728\u65b9\u6848\u4e09\u91cc\uff0c\u53ea\u6709\u5f53Set\u7684size\u53d8\u5316\u65f6\uff0c\u624d\u751f\u6210\u65e7\u503c\u7684\u6d45\u62f7\u8d1d\uff0c\u800c\u4e0d\u662f\u6bcf\u6b21getter\u51fd\u6570\u6267\u884c\u65f6\u90fd\u751f\u6210\u3002<\/p>\n<h3>\u5982\u679cSet\u5185\u90e8\u7684\u5143\u7d20\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u5c3d\u91cf\u53ea\u76d1\u542c\u4f60\u9700\u8981\u7684\u5c5e\u6027\u53d8\u5316<\/h3>\n<p>\u6bd4\u5982\u4f60\u6709\u4e00\u4e2a<code>const userTags = ref(new Set([{ id: 1, name: '\u524d\u7aef', isActive: true }, { id: 2, name: 'Vue', isActive: false }]))<\/code>\uff0c\u5982\u679c\u4f60\u53ea\u9700\u8981\u76d1\u542cisActive\u5c5e\u6027\u7684\u53d8\u5316\uff0c\u90a3\u53ef\u4ee5\u7ed9\u6bcf\u4e2a\u5143\u7d20\u90fd\u52a0ref\/reactive\uff0c\u7136\u540e\u5728getter\u51fd\u6570\u91cc\u904d\u5386Set\u5e76\u8bfb\u53d6\u6bcf\u4e2a\u5143\u7d20\u7684isActive\u5c5e\u6027\u2014\u2014\u8fd9\u6837\u53ea\u6709\u5f53isActive\u5c5e\u6027\u53d8\u5316\u65f6\uff0cwatch\u624d\u4f1a\u89e6\u53d1\uff0c\u800c\u4e0d\u4f1a\u56e0\u4e3aname\u5c5e\u6027\u7684\u53d8\u5316\u6216\u8005id\u5c5e\u6027\u7684\u53d8\u5316\uff08\u867d\u7136id\u4e00\u822c\u4e0d\u4f1a\u53d8\uff09\u89e6\u53d1\u3002<\/p>\n<h3>\u5982\u679cSet\u7684\u53d8\u5316\u9891\u7387\u7279\u522b\u9ad8\uff0c\u5c3d\u91cf\u7528\u9632\u6296\uff08debounce\uff09\u6216\u8005\u8282\u6d41\uff08throttle\uff09<\/h3>\n<p>\u6bd4\u5982\u7528\u6237\u5728\u8f93\u5165\u6846\u91cc\u8f93\u5165\u6807\u7b7e\u65f6,\u6bcf\u8f93\u5165\u4e00\u4e2a\u5b57\u7b26\u5c31\u4f1a\u8c03\u7528add\u65b9\u6cd5\u628a\u5019\u9009\u6807\u7b7e\u52a0\u5165\u5230Set\u91cc\uff0c\u8fd9\u65f6\u5019\u53ef\u4ee5\u7528\u9632\u6296\uff0c\u7b49\u7528\u6237\u505c\u6b62\u8f93\u5165500ms\u4e4b\u540e\u518d\u89e6\u53d1watch\u7684\u56de\u8c03\u2014\u2014\u8fd9\u6837\u80fd\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u8ba1\u7b97\u548c\u540e\u7aef\u63a5\u53e3\u8c03\u7528\u3002<\/p>\n<h2>Vue3\u76d1\u542cSet\u53d8\u5316\u7684\u6700\u4f73\u5b9e\u8df5\u662f\u4ec0\u4e48\uff1f<\/h2>\n<p>\u6700\u540e\u54b1\u4eec\u6765\u603b\u7ed3\u4e00\u4e0b,\u6839\u636e\u4e0d\u540c\u7684\u573a\u666f\uff0c\u5e94\u8be5\u9009\u62e9\u4ec0\u4e48\u6837\u7684\u65b9\u6848\uff1a<\/p>\n<ol>\n<li><strong>Set\u5185\u90e8\u5143\u7d20\u4e0d\u591a\uff0c\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\u7684\u5177\u4f53\u5dee\u5f02\uff0c\u800c\u4e14\u4ee3\u7801\u8981\u7b80\u5355<\/strong>\u2014\u2014\u9009\u65b9\u6848\u4e00\uff08\u628aSet\u8f6c\u6210\u6570\u7ec4\uff0c\u7528computed\u5305\u88c5\u540e\u518d\u76d1\u542c\uff09\uff1b<\/li>\n<li><strong>Set\u5185\u90e8\u5143\u7d20\u4e0d\u9650\uff0c\u4e0d\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\uff0c\u6216\u8005\u53ef\u4ee5\u81ea\u5df1\u4fdd\u5b58\u65e7\u503c\uff0c\u800c\u4e14\u4e0d\u9700\u8981\u521d\u59cb\u5316\u65f6\u6267\u884c<\/strong>\u2014\u2014\u9009\u65b9\u6848\u4e09\u7684\u53ea\u76d1\u542csize\u5c5e\u6027\u3001\u81ea\u5df1\u4fdd\u5b58\u65e7\u503c\u7684\u5199\u6cd5\uff08\u6027\u80fd\u6700\u4f18\uff09\uff1b<\/li>\n<li><strong>Set\u5185\u90e8\u5143\u7d20\u4e0d\u9650\uff0c\u4e0d\u9700\u8981\u83b7\u53d6\u65b0\u65e7\u503c\uff0c\u6216\u8005\u53ef\u4ee5\u81ea\u5df1\u4fdd\u5b58\u65e7\u503c\uff0c\u800c\u4e14\u521d\u59cb\u5316\u65f6\u6267\u884c\u4e5f\u6ca1\u5173\u7cfb<\/strong>\u2014\u2014\u9009\u65b9\u6848\u4e8c\u7684watchEffect\u5199\u6cd5\uff08\u4ee3\u7801\u6700\u7b80\u6d01\uff09\uff1b<\/li>\n<li><strong>Set\u5185\u90e8\u5143\u7d20\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u9700\u8981\u76d1\u542c\u5bf9\u8c61\u5185\u90e8\u7684\u5c5e\u6027\u53d8\u5316<\/strong>\u2014\u2014\u7ed9\u6bcf\u4e2a\u5143\u7d20\u52a0ref\/reactive\uff0c\u7136\u540e\u5728getter\u51fd\u6570\u91cc\u904d\u5386Set\u5e76\u8bfb\u53d6\u9700\u8981\u76d1\u542c\u7684\u5c5e\u6027\u3002<\/li>\n<\/ol>\n<p>\u597d\u5566,\u4eca\u5929\u5173\u4e8eVue3 watch Set\u7684\u95ee\u9898\u5c31\u804a\u5230\u8fd9\u91cc\u4e86\uff0c\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u5e2e\u4f60\u89e3\u51b3\u5f00\u53d1\u4e2d\u7684\u5b9e\u9645\u95ee\u9898\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u5176\u4ed6\u5173\u4e8eVue3\u7684\u95ee\u9898\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u54e6\uff01<\/p>","pubDate":"Sat, 18 Apr 2026 08:02:00 +0800"},{"title":"Vue3\u91cc\u600e\u4e48\u6b63\u786ewatch\u76d1\u542csessionStorage\u53d8\u5316\uff1f\u6709\u54ea\u4e9b\u5b9e\u7528\u5751\u70b9\u8981\u907f\u5f00\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421757.html","description":"<p>\u505a\u524d\u7aef\u5f00\u53d1\u7684\u670b\u53cb,\u80af\u5b9a\u9047\u5230\u8fc7\u8de8\u7ec4\u4ef6\u3001\u8de8\u8def\u7531\u4f20\u9012\u4e34\u65f6\u8f7b\u91cf\u6570\u636e\u7684\u573a\u666f\u2014\u2014\u6bd4\u5982\u7528\u6237\u641c\u7d22\u9875\u8f93\u5165\u7684\u7b5b\u9009\u6761\u4ef6\uff0c\u8df3\u8f6c\u5230\u7ed3\u679c\u9875\u8fd8\u80fd\u590d\u7528\uff1b\u6216\u8005\u591a\u6b65\u9aa4\u8868\u5355\u7684\u7b2c\u4e00\u6b65\u6570\u636e\uff0c\u5b58\u8d77\u6765\u7b49\u5168\u90e8\u586b\u5b8c\u518d\u63d0\u4ea4\uff0c\u8fd9\u65f6\u5019\uff0c\u5927\u5bb6\u7b2c\u4e00\u53cd\u5e94\u53ef\u80fd\u5c31\u662f\u7528sessionStorage\uff1a\u5b83\u53ea\u5728\u5f53\u524d\u6807\u7b7e\u9875\/\u7a97\u53e3\u751f\u6548\uff0c\u5173\u95ed\u5c31\u6e05\u7a7a\uff0c\u4e0d\u5360\u672c\u5730\u78c1\u76d8\u5927\u7a7a\u95f4\uff0c\u5b8c\u7f8e\u5951\u5408\u8fd9\u79cd\u201c\u4e34\u65f6\u77ed\u751f\u547d\u5468\u671f\u540c\u6807\u7b7e\u4f20\u9012\u201d\u7684\u9700\u6c42\uff0c\u4e0d\u8fc7\u7528\u8fc7Vue2\u7684\u540c\u5b66\u77e5\u9053\uff0cVue2\u4e0d\u80fd\u76f4\u63a5watch sessionStorage\uff0c\u53ea\u80fd\u7528StorageEvent\u6216\u8005\u5c01\u88c5\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684localStorage\/sessionStorage\u5de5\u5177\u7c7b\uff1b\u90a3\u5230\u4e86Vue3\uff0c\u6709Composition API\u52a0\u6301\uff0c\u662f\u4e0d\u662f\u5c31\u7b80\u5355\u591a\u4e86\uff1f\u4f46\u771f\u7528\u8d77\u6765\uff0c\u597d\u50cf\u53c8\u4f1a\u9047\u5230\u4e0d\u5c11\u201c\u660e\u660e\u76d1\u542c\u4e86\u5374\u6ca1\u53cd\u5e94\u201d\u201c\u6570\u636e\u53d8\u4e86\u597d\u51e0\u6b21\u53ea\u66f4\u65b0\u4e00\u6b21\u201d\u7684\u5c0f\u95ee\u9898\uff1f\u4eca\u5929\u54b1\u4eec\u5c31\u4e00\u6b65\u6b65\u62c6\u89e3\uff0c\u628a\u8fd9\u4e2a\u95ee\u9898\u5f7b\u5e95\u641e\u660e\u767d\u3002<\/p>\n<h2>\u9996\u5148\u5f97\u641e\u6e05\u695a\uff1a\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u76f4\u63a5watch\u539f\u59cb\u7684sessionStorage.getItem\/setItem\uff1f<\/h2>\n<p>\u4e0d\u7ba1Vue2\u8fd8\u662fVue3,\u6838\u5fc3\u539f\u7406\u90fd\u662f\u201c<strong>\u54cd\u5e94\u5f0f\u7cfb\u7edf<\/strong>\u201d\u2014\u2014\u53ea\u6709\u88ab\u54cd\u5e94\u5f0f\u7cfb\u7edf\u201c\u8ffd\u8e2a\u201d\u7684\u6570\u636e\uff0c\u5728\u53d8\u5316\u65f6\u624d\u4f1a\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\u6216\u8005watch\u56de\u8c03\uff0c\u90a3sessionStorage.getItem\/setItem\u5c5e\u4e8e\u4ec0\u4e48\u5462\uff1f\u662f\u6d4f\u89c8\u5668\u539f\u751f\u63d0\u4f9b\u7684<strong>Web Storage API<\/strong>\uff0c\u5b8c\u5168\u72ec\u7acb\u4e8eVue\u7684\u54cd\u5e94\u5f0f\u673a\u5236\u4e4b\u5916\uff1a\u4f60\u8c03\u7528setItem\u5b58\u6570\u636e\uff0cVue\u6839\u672c\u4e0d\u77e5\u9053\u8fd9\u56de\u4e8b\uff1b\u8c03\u7528getItem\u62ff\u6570\u636e\uff0c\u62ff\u5230\u7684\u4e5f\u53ea\u662f\u666e\u901a\u7684\u5b57\u7b26\u4e32\u3001\u6570\u5b57\uff08JSON.parse\u8f6c\u7684\uff09\u3001\u5e03\u5c14\u503c\uff0c\u4e0d\u662fVue\u7684ref\u6216\u8005reactive\u5bf9\u8c61\uff0c\u81ea\u7136\u4e0d\u4f1a\u89e6\u53d1\u4efb\u4f55\u54cd\u5e94\u5f0f\u64cd\u4f5c\u3002<\/p>\n<p>\u6253\u4e2a\u6bd4\u65b9,Vue\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u5c31\u50cf\u4f60\u5bb6\u95e8\u53e3\u7684\u5feb\u9012\u67dc\uff0c\u53ea\u6709\u653e\u5728\u67dc\u91cc\u7684\u4e1c\u897f\uff08ref\/reactive\u6570\u636e\uff09\uff0c\u53d6\u4ef6\u3001\u5b58\u4ef6\uff08\u6570\u636e\u53d8\u5316\uff09\u624d\u4f1a\u7ed9\u4f60\u53d1\u63d0\u9192\uff08watch\u56de\u8c03\/\u89c6\u56fe\u66f4\u65b0\uff09\uff1b\u800csessionStorage\u5c31\u50cf\u4f60\u697c\u4e0b\u8d85\u5e02\u7684\u5bc4\u5b58\u67dc\uff0c\u4e1c\u897f\u5b58\u90a3\u513f\u3001\u53d6\u90a3\u513f\uff0c\u5feb\u9012\u67dc\u5b8c\u5168\u4e0d\u642d\u8fb9\uff0c\u81ea\u7136\u4e0d\u4f1a\u6709\u4efb\u4f55\u52a8\u9759\u3002<\/p>\n<h2>Vue3\u91cc\u76d1\u542csessionStorage\u7684\u51e0\u79cd\u6b63\u786e\u59ff\u52bf\uff0c\u54ea\u79cd\u6700\u9002\u5408\u4f60\uff1f<\/h2>\n<p>\u65e2\u7136\u77e5\u9053\u4e86\u95ee\u9898\u7684\u6839\u6e90\u2014\u2014Web Storage\u4e0d\u5728Vue\u7684\u54cd\u5e94\u5f0f\u4f53\u7cfb\u91cc\uff0c\u90a3\u89e3\u51b3\u601d\u8def\u5c31\u5f88\u6e05\u6670\u4e86\uff1a<strong>\u8981\u4e48\u628aWeb Storage\u7684\u6570\u636e\u201c\u642c\u201d\u5230Vue\u7684\u54cd\u5e94\u5f0f\u4f53\u7cfb\u91cc\uff0c\u8981\u4e48\u7ed9Web Storage\u7684\u201c\u5b58\u53d6\u64cd\u4f5c\u201d\u52a0\u4e00\u5c42\u201c\u89e6\u53d1Vue\u54cd\u5e94\u5f0f\u201d\u7684\u94a9\u5b50<\/strong>\uff0c\u63a5\u4e0b\u6765\u5c31\u7ed9\u5927\u5bb6\u4ecb\u7ecd3\u79cd\u5e38\u7528\u7684\u65b9\u6cd5\uff0c\u5206\u522b\u5206\u6790\u4f18\u7f3a\u70b9\u548c\u9002\u7528\u573a\u666f\u3002<\/p>\n<h3>\u5c01\u88c5\u4e00\u4e2a\u5e26\u54cd\u5e94\u5f0f\u7684useSessionStorage Hook<\/h3>\n<p>\u8fd9\u662f\u76ee\u524dVue3\u751f\u6001\u91cc\u6700\u63a8\u8350\u3001\u6700\u901a\u7528\u7684\u505a\u6cd5\uff0c\u5f88\u591a\u5f00\u6e90UI\u7ec4\u4ef6\u5e93\u6216\u8005\u5de5\u5177\u5e93\uff08\u6bd4\u5982VueUse\uff09\u90fd\u6709\u73b0\u6210\u7684\u5b9e\u73b0\uff0c\u4f46\u54b1\u4eec\u4eca\u5929\u81ea\u5df1\u624b\u5199\u4e00\u4e2a\u7b80\u5355\u7248\u7684\uff0c\u65e2\u80fd\u7406\u89e3\u539f\u7406\uff0c\u53c8\u80fd\u6839\u636e\u81ea\u5df1\u7684\u9879\u76ee\u9700\u6c42\u6539\u3002<\/p>\n<h4>\u624b\u5199\u6b65\u9aa4\u62c6\u89e3<\/h4>\n<ol>\n<li><strong>\u5f15\u5165\u5fc5\u8981\u7684Vue3 API<\/strong>\uff1a\u7528Composition API\u7684\u8bdd\uff0c\u80af\u5b9a\u8981ref\/reactive\u3001watchEffect\/watch\u8fd9\u4e9b\u5bf9\u5427\uff1f\u8fd8\u8981\u8003\u8651JSON\u7684\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\uff0csessionStorage\u53ea\u80fd\u5b58\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u5b58\u5bf9\u8c61\u3001\u6570\u7ec4\u7684\u65f6\u5019\u8981\u8f6c\uff0c\u53d6\u7684\u65f6\u5019\u8981\u8f6c\u56de\u6765\u3002<\/li>\n<li><strong>\u521d\u59cb\u5316\u54cd\u5e94\u5f0f\u6570\u636e<\/strong>\uff1a\u5f53\u7ec4\u4ef6\u6216\u8005Hook\u88ab\u8c03\u7528\u7684\u65f6\u5019\uff0c\u5148\u4ecesessionStorage\u91cc\u8bfb\u4e00\u904d\u521d\u59cb\u6570\u636e\uff0c\u8f6c\u6210\u76ee\u6807\u7c7b\u578b\u540e\u8d4b\u503c\u7ed9ref\/reactive\u5bf9\u8c61\u2014\u2014\u8fd9\u6837\u4e00\u5f00\u59cb\u5c31\u628a\u6570\u636e\u201c\u642c\u201d\u8fdb\u4e86Vue\u7684\u5feb\u9012\u67dc\u3002<\/li>\n<li><strong>\u76d1\u542c\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u53d8\u5316\uff0c\u540c\u6b65\u5230sessionStorage<\/strong>\uff1a\u7528watch\u6216\u8005watchEffect\u76d1\u542c\u521a\u624d\u90a3\u4e2aref\/reactive\u5bf9\u8c61\uff0c\u4e00\u65e6\u5b83\u53d8\u4e86\uff0c\u5c31\u7acb\u523b\u628a\u5b83\u5e8f\u5217\u5316\u6210\u5b57\u7b26\u4e32\u5b58\u5230sessionStorage\u91cc\u2014\u2014\u8fd9\u6837Vue\u7684\u5feb\u9012\u67dc\u6709\u52a8\u9759\uff0c\u697c\u4e0b\u8d85\u5e02\u7684\u5bc4\u5b58\u67dc\u4e5f\u540c\u6b65\u66f4\u65b0\u3002<\/li>\n<li><strong>\u76d1\u542c\u540c\u6807\u7b7e\u9875\u5185\u5176\u4ed6\u5730\u65b9\u5bf9sessionStorage\u7684\u4fee\u6539\uff0c\u540c\u6b65\u56de\u54cd\u5e94\u5f0f\u6570\u636e<\/strong>\uff1a\u54e6\u5bf9\u4e86\uff0c\u6709\u65f6\u5019\u53ef\u80fd\u4e0d\u662f\u901a\u8fc7\u6211\u4eec\u5c01\u88c5\u7684Hook\u4fee\u6539\u7684sessionStorage\uff0c\u6bd4\u5982\u9879\u76ee\u91cc\u8fd8\u6709\u65e7\u4ee3\u7801\u7528\u4e86\u539f\u751f\u7684setItem\uff0c\u6216\u8005\u7b2c\u4e09\u65b9\u5e93\u64cd\u4f5c\u4e86\u540c\u4e00\u4e2akey\uff0c\u8fd9\u65f6\u5019\u600e\u4e48\u529e\uff1f\u53ef\u4ee5\u7528\u6d4f\u89c8\u5668\u539f\u751f\u7684<strong>StorageEvent<\/strong>\uff0c\u76d1\u542cwindow\u7684storage\u4e8b\u4ef6\uff0c\u5f53\u4e8b\u4ef6\u7684key\u662f\u6211\u4eec\u5f53\u524d\u76d1\u542c\u7684sessionStorage\u7684key\u65f6\uff0c\u5c31\u628aevent.newValue\u8f6c\u6210\u76ee\u6807\u7c7b\u578b\uff0c\u66f4\u65b0\u54cd\u5e94\u5f0f\u6570\u636e\u3002<\/li>\n<\/ol>\n<h4>\u7b80\u5355\u7248useSessionStorage\u4ee3\u7801\u793a\u4f8b<\/h4>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watchEffect } from &#39;vue&#39;\nexport function useSessionStorage(key, defaultValue) {\n  \/\/ \u7b2c\u4e00\u6b65\uff1a\u521d\u59cb\u5316\u54cd\u5e94\u5f0f\u6570\u636e\n  const storedValue = ref(null)\n  \/\/ \u5148\u5c1d\u8bd5\u4ecesessionStorage\u8bfb\u53d6\n  try {\n    const rawValue = sessionStorage.getItem(key)\n    storedValue.value = rawValue ? JSON.parse(rawValue) : defaultValue\n  } catch (error) {\n    \/\/ \u5982\u679cJSON.parse\u51fa\u9519\u4e86\uff08\u6bd4\u5982\u5b58\u7684\u4e0d\u662f\u5408\u6cd5JSON\uff09\uff0c\u5c31\u7528\u9ed8\u8ba4\u503c\n    console.warn(`\u89e3\u6790sessionStorage\u4e2dkey\u4e3a${key}\u7684\u6570\u636e\u5931\u8d25\uff1a`, error)\n    storedValue.value = defaultValue\n  }\n  \/\/ \u7b2c\u4e8c\u6b65\uff1a\u76d1\u542c\u54cd\u5e94\u5f0f\u6570\u636e\u53d8\u5316\uff0c\u540c\u6b65\u5230sessionStorage\n  \/\/ \u8fd9\u91cc\u7528watchEffect\uff0c\u56e0\u4e3a\u4e0d\u7ba1\u662fstoredValue\u672c\u8eab\u53d8\uff0c\u8fd8\u662f\u5b83\u91cc\u9762\u7684\u5d4c\u5957\u5c5e\u6027\u53d8\uff08\u5982\u679c\u521d\u59cb\u5316\u4e3a\u5bf9\u8c61\u6570\u7ec4\u7684\u8bdd\uff09\uff0c\u90fd\u4f1a\u89e6\u53d1\n  \/\/ \u4f46\u8981\u6ce8\u610f\uff0c\u5982\u679c\u7528ref\u5b58\u5bf9\u8c61\u6570\u7ec4\u7684\u8bdd\uff0cwatchEffect\u91cc\u8981\u5148\u6df1\u62f7\u8d1d\u5417\uff1f\u4e0d\u7528\uff0cJSON.stringify\u672c\u8eab\u5c31\u4f1a\u904d\u5386\u6240\u6709\u5d4c\u5957\u5c5e\u6027\n  watchEffect(() =&gt; {\n    try {\n      \/\/ \u5982\u679c\u5f53\u524d\u503c\u662fundefined\u6216\u8005null\uff0c\u8981\u4e0d\u8981\u5220key\uff1f\u53ef\u4ee5\u52a0\u4e2a\u53c2\u6570\u63a7\u5236\uff0c\u8fd9\u91cc\u7b80\u5316\u4e3a\u76f4\u63a5\u5b58\n      sessionStorage.setItem(key, JSON.stringify(storedValue.value))\n    } catch (error) {\n      console.warn(`\u5199\u5165sessionStorage\u4e2dkey\u4e3a${key}\u7684\u6570\u636e\u5931\u8d25\uff1a`, error)\n    }\n  })\n  \/\/ \u7b2c\u4e09\u6b65\uff1a\u76d1\u542c\u540c\u6807\u7b7e\u9875\u5176\u4ed6\u5730\u65b9\u7684\u4fee\u6539\uff08\u6ce8\u610f\uff1aStorageEvent\u5728\u540c\u6807\u7b7e\u9875\u5185\u7528\u539f\u751fsetItem\u624d\u4f1a\u89e6\u53d1\u5417\uff1f\u4e0d\u5bf9\uff0c\u539f\u751fsetItem\u5728\u540c\u7a97\u53e3\u4e0d\u540c\u6807\u7b7e\u9875\u624d\u4f1a\u89e6\u53d1\uff1f\u54e6\u7b49\u4e0b\uff0c\u8fd9\u4e2a\u662f\u4e2a\u5927\u5751\uff01\u540e\u9762\u5355\u72ec\u8bb2\uff01\uff09\n  \/\/ \u8fd9\u91cc\u5148\u5199\u4e2a\u901a\u7528\u7684\uff0c\u4e0d\u7ba1\u662f\u4e0d\u662f\u540c\u6807\u7b7e\u9875\uff0c\u90fd\u76d1\u542c\n  const handleStorageChange = (event) =&gt; {\n    if (event.key === key &amp;&amp; event.storageArea === sessionStorage) {\n      try {\n        storedValue.value = event.newValue ? JSON.parse(event.newValue) : defaultValue\n      } catch (error) {\n        console.warn(`\u89e3\u6790sessionStorage\u4e2dkey\u4e3a${key}\u7684\u4fee\u6539\u6570\u636e\u5931\u8d25\uff1a`, error)\n        storedValue.value = defaultValue\n      }\n    }\n  }\n  window.addEventListener(&#39;storage&#39;, handleStorageChange)\n  \/\/ \u7b2c\u56db\u6b65\uff1a\u7ec4\u4ef6\u5378\u8f7d\u65f6\u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\uff0c\u9632\u6b62\u5185\u5b58\u6cc4\u6f0f\n  \/\/ \u8fd9\u91cc\u8981\u6ce8\u610f\uff0cuseSessionStorage\u662fHook\uff0c\u6240\u4ee5\u8981\u7528\u5230onUnmounted API\n  import { onUnmounted } from &#39;vue&#39;\n  onUnmounted(() =&gt; {\n    window.removeEventListener(&#39;storage&#39;, handleStorageChange)\n  })\n  return storedValue\n}<\/pre>\n<h4>\u4f18\u7f3a\u70b9\u548c\u9002\u7528\u573a\u666f<\/h4>\n<p>\u4f18\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u5b8c\u5168\u7b26\u5408Vue3\u7684Composition API\u98ce\u683c<\/strong>\uff0c\u4ee3\u7801\u590d\u7528\u6027\u5f3a\uff0c\u54ea\u91cc\u9700\u8981\u54ea\u91cc\u8c03\u7528\uff1b<\/li>\n<li><strong>\u53cc\u5411\u540c\u6b65<\/strong>\uff1a\u54cd\u5e94\u5f0f\u6570\u636e\u53d8\u4e86\u540c\u6b65\u5230sessionStorage\uff0c\uff08\u4e0d\u540c\u6807\u7b7e\u9875\u7684\uff09sessionStorage\u53d8\u4e86\u540c\u6b65\u56de\u54cd\u5e94\u5f0f\u6570\u636e\uff1b<\/li>\n<li><strong>\u652f\u6301\u591a\u79cd\u6570\u636e\u7c7b\u578b<\/strong>\uff1a\u81ea\u52a8\u5904\u7406JSON\u7684\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\uff1b<\/li>\n<li><strong>\u6709\u57fa\u7840\u7684\u9519\u8bef\u5904\u7406<\/strong>\uff1aJSON\u89e3\u6790\u5931\u8d25\u3001\u5199\u5165\u5931\u8d25\u90fd\u4f1a\u6709\u8b66\u544a\uff1b<\/li>\n<li><strong>\u9632\u6b62\u5185\u5b58\u6cc4\u6f0f<\/strong>\uff1a\u7ec4\u4ef6\u5378\u8f7d\u65f6\u81ea\u52a8\u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\u3002<\/li>\n<\/ol>\n<p>\u7f3a\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u624b\u5199\u7248\u7684\u529f\u80fd\u53ef\u80fd\u4e0d\u591f\u5b8c\u5584<\/strong>\uff1a\u6bd4\u5982\u6ca1\u6709\u5220\u9664key\u7684\u65b9\u6cd5\uff08\u53ef\u4ee5\u52a0\u4e2areturn\u7684remove\u65b9\u6cd5\uff09\uff0c\u6ca1\u6709\u63a7\u5236\u662f\u5426\u540c\u6b65\u521d\u59cb\u5316\u6570\u636e\u7684\u53c2\u6570\uff0c\u6ca1\u6709\u63a7\u5236\u662f\u5426\u76d1\u542cstorage\u4e8b\u4ef6\u7684\u53c2\u6570\uff0c\u6ca1\u6709\u9632\u6296\u8282\u6d41\uff08\u6709\u65f6\u5019\u6570\u636e\u9891\u7e41\u53d8\u5316\uff0c\u6bd4\u5982\u641c\u7d22\u6846\u5b9e\u65f6\u8f93\u5165\uff0c\u4e0d\u9700\u8981\u6bcf\u6b21\u90fd\u5b58sessionStorage\uff09\uff1b<\/li>\n<li><strong>\u521a\u624d\u4ee3\u7801\u91cc\u63d0\u5230\u7684StorageEvent\u540c\u6807\u7b7e\u9875\u7684\u5751<\/strong>\uff0c\u8fd9\u4e2a\u540e\u9762\u907f\u5751\u90e8\u5206\u4f1a\u91cd\u70b9\u8bb2\u3002<\/li>\n<\/ol>\n<p>\u9002\u7528\u573a\u666f\uff1a\n\u51e0\u4e4e\u6240\u6709\u9700\u8981\u5728Vue3\u9879\u76ee\u91cc\u7528sessionStorage\u8de8\u7ec4\u4ef6\u3001\u8de8\u8def\u7531\u4f20\u9012\u4e34\u65f6\u6570\u636e\u7684\u573a\u666f\uff0c\u4e0d\u7ba1\u662f\u4e2a\u4eba\u9879\u76ee\u8fd8\u662f\u4f01\u4e1a\u9879\u76ee\uff0c\u90fd\u53ef\u4ee5\u7528\u8fd9\u79cd\u65b9\u6cd5\u2014\u2014\u5982\u679c\u89c9\u5f97\u624b\u5199\u9ebb\u70e6\uff0c\u76f4\u63a5\u7528VueUse\u91cc\u7684useStorage\u6216\u8005useSessionStorage\u5c31\u884c\uff0c\u529f\u80fd\u66f4\u5b8c\u5584\uff0c\u8fd8\u6709\u7c7b\u578b\u652f\u6301\uff08TypeScript\u7684\u8bdd\uff09\u3002<\/p>\n<h3>\u76f4\u63a5\u7528VueUse\u7684useSessionStorage\uff08\u9002\u5408\u4e0d\u60f3\u624b\u5199\u7684\u670b\u53cb\uff09<\/h3>\n<p>\u521a\u624d\u65b9\u6cd5\u4e00\u91cc\u63d0\u5230\u4e86VueUse,\u8fd9\u662f\u4e00\u4e2a\u4e13\u95e8\u4e3aVue3\u8bbe\u8ba1\u7684Composition API\u5de5\u5177\u5e93\uff0c\u91cc\u9762\u6709300+\u4e2a\u5e38\u7528\u7684Hook\uff0c\u8986\u76d6\u4e86\u72b6\u6001\u7ba1\u7406\u3001DOM\u64cd\u4f5c\u3001\u6d4f\u89c8\u5668API\u3001\u7f51\u7edc\u8bf7\u6c42\u3001\u52a8\u753b\u7b49\u51e0\u4e4e\u6240\u6709\u524d\u7aef\u5f00\u53d1\u573a\u666f\uff0c\u800c\u4e14\u4ee3\u7801\u8d28\u91cf\u5f88\u9ad8\uff0c\u6709\u5b8c\u5584\u7684TypeScript\u7c7b\u578b\u652f\u6301\uff0c\u5f88\u591a\u5f00\u6e90\u9879\u76ee\u90fd\u5728\u7528\u3002<\/p>\n<h4>\u4f7f\u7528\u6b65\u9aa4<\/h4>\n<ol>\n<li><strong>\u5b89\u88c5VueUse<\/strong>\uff1anpm i @vueuse\/core \u6216\u8005 yarn add @vueuse\/core \u6216\u8005 pnpm add @vueuse\/core\uff1b<\/li>\n<li><strong>\u5728\u7ec4\u4ef6\u6216\u8005Hook\u91cc\u5f15\u5165\u5e76\u4f7f\u7528<\/strong>\uff1a<\/li>\n<\/ol>\n<pre class=\"brush:vue;toolbar:false\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;h2&gt;\u641c\u7d22\u7b5b\u9009\u6761\u4ef6&lt;\/h2&gt;\n    &lt;input v-model=&quot;searchKeyword&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u641c\u7d22\u5173\u952e\u8bcd&quot; \/&gt;\n    &lt;select v-model=&quot;searchCategory&quot;&gt;\n      &lt;option value=&quot;&quot;&gt;\u5168\u90e8\u5206\u7c7b&lt;\/option&gt;\n      &lt;option value=&quot;book&quot;&gt;\u56fe\u4e66&lt;\/option&gt;\n      &lt;option value=&quot;clothes&quot;&gt;\u670d\u88c5&lt;\/option&gt;\n      &lt;option value=&quot;electronics&quot;&gt;\u7535\u5b50\u4ea7\u54c1&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;p&gt;\u5f53\u524d\u7b5b\u9009\u6761\u4ef6\uff1a\u5173\u952e\u8bcd={{ searchKeyword }}\uff0c\u5206\u7c7b={{ searchCategory }}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script setup&gt;\nimport { useSessionStorage } from &#39;@vueuse\/core&#39;\n\/\/ \u7b2c\u4e00\u4e2a\u53c2\u6570\u662fsessionStorage\u7684key\n\/\/ \u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u9ed8\u8ba4\u503c\uff08\u53ef\u4ee5\u662f\u4efb\u610fJSON\u53ef\u5e8f\u5217\u5316\u7684\u7c7b\u578b\uff09\n\/\/ \u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u53ef\u9009\u914d\u7f6e\u9879\uff08\u540e\u9762\u4f1a\u8bb2\u51e0\u4e2a\u5e38\u7528\u7684\uff09\nconst searchKeyword = useSessionStorage(&#39;search-keyword&#39;, &#39;&#39;)\nconst searchCategory = useSessionStorage(&#39;search-category&#39;, &#39;&#39;)\n&lt;\/script&gt;<\/pre>\n<h4>\u51e0\u4e2a\u5e38\u7528\u7684\u53ef\u9009\u914d\u7f6e\u9879<\/h4>\n<p>VueUse\u7684useSessionStorage\u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61,\u8fd9\u91cc\u7ed9\u5927\u5bb6\u4ecb\u7ecd\u51e0\u4e2a\u6700\u5e38\u7528\u7684\uff1a<\/p>\n<ol>\n<li><strong>mergeDefaults<\/strong>\uff1a\u5e03\u5c14\u503c\uff0c\u9ed8\u8ba4\u662ffalse\uff0c\u5982\u679c\u9ed8\u8ba4\u503c\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u800csessionStorage\u91cc\u5df2\u7ecf\u6709\u8fd9\u4e2akey\u5bf9\u5e94\u7684\u5bf9\u8c61\u4e86\uff0cmergeDefaults\u8bbe\u4e3atrue\u7684\u8bdd\uff0c\u4f1a\u628a\u9ed8\u8ba4\u503c\u548csessionStorage\u91cc\u7684\u5bf9\u8c61\u5408\u5e76\uff0c\u800c\u4e0d\u662f\u76f4\u63a5\u8986\u76d6\uff1b<\/li>\n<li><strong>deep<\/strong>\uff1a\u5e03\u5c14\u503c\uff0c\u9ed8\u8ba4\u662ftrue\uff0c\u5982\u679c\u9ed8\u8ba4\u503c\u662f\u4e00\u4e2a\u5bf9\u8c61\u6216\u8005\u6570\u7ec4\uff0cdeep\u8bbe\u4e3atrue\u7684\u8bdd\uff0c\u4f1a\u6df1\u5ea6\u76d1\u542c\u5bf9\u8c61\u7684\u5d4c\u5957\u5c5e\u6027\u53d8\u5316\uff0c\u540c\u6b65\u5230sessionStorage\uff1b<\/li>\n<li><strong>listenToStorage<\/strong>\uff1a\u5e03\u5c14\u503c\uff0c\u9ed8\u8ba4\u662ftrue\uff0c\u63a7\u5236\u662f\u5426\u76d1\u542cwindow\u7684storage\u4e8b\u4ef6\uff08\u4e5f\u5c31\u662f\u5176\u4ed6\u6807\u7b7e\u9875\u7684\u4fee\u6539\uff09\uff1b<\/li>\n<li><strong>writeDefaults<\/strong>\uff1a\u5e03\u5c14\u503c\uff0c\u9ed8\u8ba4\u662ffalse\uff0c\u5982\u679csessionStorage\u91cc\u6ca1\u6709\u8fd9\u4e2akey\u5bf9\u5e94\u7684\u521d\u59cb\u6570\u636e\uff0cwriteDefaults\u8bbe\u4e3atrue\u7684\u8bdd\uff0c\u4f1a\u7acb\u523b\u628a\u9ed8\u8ba4\u503c\u5199\u5165sessionStorage\uff1b<\/li>\n<li><strong>serializer<\/strong>\uff1a\u5bf9\u8c61\uff0c\u81ea\u5b9a\u4e49\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u65b9\u6cd5\uff0c\u9ed8\u8ba4\u662fJSON.stringify\u548cJSON.parse\uff0c\u4f46\u6709\u65f6\u5019\u6bd4\u5982\u5b58Date\u5bf9\u8c61\uff0cJSON.stringify\u8f6c\u6210\u5b57\u7b26\u4e32\u540e\uff0cJSON.parse\u8f6c\u56de\u6765\u8fd8\u662f\u5b57\u7b26\u4e32\uff0c\u8fd9\u65f6\u5019\u53ef\u4ee5\u81ea\u5b9a\u4e49serializer\uff1a<\/li>\n<\/ol>\n<pre class=\"brush:javascript;toolbar:false\">const mySerializer = {\n  read: (raw) =&gt; {\n    if (!raw) return null\n    const parsed = JSON.parse(raw)\n    \/\/ \u628a\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u65e5\u671f\u8f6c\u6210Date\u5bf9\u8c61\n    if (parsed.date &amp;&amp; typeof parsed.date === &#39;string&#39;) {\n      parsed.date = new Date(parsed.date)\n    }\n    return parsed\n  },\n  write: (value) =&gt; JSON.stringify(value)\n}\nconst searchParams = useSessionStorage(&#39;search-params&#39;, { keyword: &#39;&#39;, date: new Date() }, { serializer: mySerializer })<\/pre>\n<h4>\u4f18\u7f3a\u70b9\u548c\u9002\u7528\u573a\u666f<\/h4>\n<p>\u4f18\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u529f\u80fd\u8d85\u7ea7\u5b8c\u5584<\/strong>\uff1a\u521a\u624d\u4ecb\u7ecd\u7684\u53ea\u662f\u51b0\u5c71\u4e00\u89d2\uff0c\u8fd8\u6709\u5f88\u591a\u5176\u4ed6\u914d\u7f6e\u9879\uff0c\u6bd4\u5982onError\u3001onWrite\u3001onRead\u8fd9\u4e9b\u94a9\u5b50\uff0c\u751a\u81f3\u8fd8\u6709\u652f\u6301SSR\u7684\u914d\u7f6e\uff1b<\/li>\n<li><strong>TypeScript\u652f\u6301\u5b8c\u7f8e<\/strong>\uff1a\u7c7b\u578b\u5b9a\u4e49\u975e\u5e38\u8be6\u7ec6\uff0c\u5199\u4ee3\u7801\u7684\u65f6\u5019\u6709\u81ea\u52a8\u8865\u5168\uff0c\u8fd8\u80fd\u907f\u514d\u5f88\u591a\u7c7b\u578b\u9519\u8bef\uff1b<\/li>\n<li><strong>\u4ee3\u7801\u8d28\u91cf\u9ad8<\/strong>\uff1a\u7ecf\u8fc7\u4e86\u5927\u91cf\u5f00\u6e90\u9879\u76ee\u7684\u9a8c\u8bc1\uff0cBug\u5f88\u5c11\uff1b<\/li>\n<li><strong>\u4f7f\u7528\u8d85\u7ea7\u7b80\u5355<\/strong>\uff1a\u4e0d\u7528\u624b\u5199\u590d\u6742\u7684\u903b\u8f91\uff0c\u4e00\u884c\u4ee3\u7801\u641e\u5b9a\u3002<\/li>\n<\/ol>\n<p>\u7f3a\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u589e\u52a0\u4e86\u9879\u76ee\u7684\u4f9d\u8d56<\/strong>\uff1a\u5982\u679c\u9879\u76ee\u91cc\u53ea\u9700\u8981\u7528useSessionStorage\u8fd9\u4e00\u4e2aHook\uff0c\u53ef\u80fd\u89c9\u5f97\u6709\u70b9\u201c\u5927\u6750\u5c0f\u7528\u201d\uff0c\u4e0d\u8fc7VueUse\u652f\u6301Tree Shaking\uff0c\u6253\u5305\u7684\u65f6\u5019\u53ea\u4f1a\u6253\u5305\u4f60\u7528\u5230\u7684Hook\uff0c\u4e0d\u7528\u62c5\u5fc3\u4f53\u79ef\u592a\u5927\uff1b<\/li>\n<li><strong>\u53ef\u80fd\u4e0d\u592a\u7406\u89e3\u5e95\u5c42\u539f\u7406<\/strong>\uff1a\u4e0d\u8fc7\u6ca1\u5173\u7cfb\uff0c\u65b0\u624b\u53ef\u4ee5\u5148\u7528\u8d77\u6765\uff0c\u7b49\u6709\u65f6\u95f4\u4e86\u518d\u53bb\u770bVueUse\u7684\u6e90\u7801\uff0c\u5b66\u4e60\u4e00\u4e0b\u522b\u4eba\u7684\u5199\u6cd5\u3002<\/li>\n<\/ol>\n<p>\u9002\u7528\u573a\u666f\uff1a\n\u4e0d\u7ba1\u662f\u65b0\u624b\u8fd8\u662f\u8001\u624b\uff0c\u53ea\u8981\u4e0d\u60f3\u624b\u5199useSessionStorage\uff0c\u90fd\u53ef\u4ee5\u7528VueUse\u7684\uff1b\u5982\u679c\u9879\u76ee\u91cc\u5df2\u7ecf\u5728\u7528VueUse\u4e86\uff0c\u90a3\u66f4\u4e0d\u7528\u8bf4\u4e86\uff0c\u76f4\u63a5\u7528\u5c31\u884c\u3002<\/p>\n<h3>\u5728\u6839\u7ec4\u4ef6\u6216\u8005\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u91cc\u5c01\u88c5\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684\u5bf9\u8c61\uff0c\u76d1\u542c\u540e\u540c\u6b65\u5230sessionStorage<\/h3>\n<p>\u8fd9\u79cd\u65b9\u6cd5\u9002\u5408\u9879\u76ee\u91cc\u6709\u5f88\u591a\u5730\u65b9\u9700\u8981\u7528\u5230sessionStorage\u7684\u5171\u4eab\u6570\u636e,\u6bd4\u5982\u7528\u6237\u7684\u4e34\u65f6\u767b\u5f55\u72b6\u6001\uff08\u4e0d\u8fc7\u767b\u5f55\u72b6\u6001\u4e00\u822c\u7528localStorage\u6216\u8005Vuex\/Pinia\uff09\u3001\u5168\u5c40\u7684\u4e34\u65f6\u5f39\u7a97\u72b6\u6001\u3001\u5168\u5c40\u7684\u4e34\u65f6\u4e3b\u9898\u5207\u6362\uff08\u4e0d\u8fc7\u4e3b\u9898\u5207\u6362\u4e00\u822c\u7528localStorage\u6216\u8005CSS\u53d8\u91cf+\u54cd\u5e94\u5f0f\u6570\u636e\uff09\u3002<\/p>\n<h4>\u5177\u4f53\u601d\u8def<\/h4>\n<ol>\n<li><strong>\u5728main.js\/main.ts\u6216\u8005\u5168\u5c40\u72b6\u6001\u7ba1\u7406\uff08Pinia\/Vuex\uff09\u91cc\u5b9a\u4e49\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684\u5bf9\u8c61<\/strong>\uff0c\u6bd4\u5982\u53ebglobalSessionData\uff1b<\/li>\n<li><strong>\u7528watchEffect\u6216\u8005watch\u6df1\u5ea6\u76d1\u542c\u8fd9\u4e2aglobalSessionData\u5bf9\u8c61<\/strong>\uff0c\u4e00\u65e6\u5b83\u53d8\u4e86\uff0c\u5c31\u7acb\u523b\u628a\u6574\u4e2a\u5bf9\u8c61\u5e8f\u5217\u5316\u6210\u5b57\u7b26\u4e32\u5b58\u5230sessionStorage\u7684\u67d0\u4e2a\u56fa\u5b9akey\u91cc\uff0c\u6bd4\u5982\u53ebglobal-session-data\uff1b<\/li>\n<li><strong>\u521d\u59cb\u5316\u7684\u65f6\u5019<\/strong>\uff0c\u5148\u4ecesessionStorage\u91cc\u8bfbglobal-session-data\uff0c\u8f6c\u6210\u5bf9\u8c61\u540e\u5408\u5e76\u5230globalSessionData\u91cc\uff1b<\/li>\n<li><strong>\u5728\u5176\u4ed6\u7ec4\u4ef6\u91cc<\/strong>\uff0c\u76f4\u63a5\u5f15\u5165\u5e76\u4f7f\u7528globalSessionData\u7684\u5c5e\u6027\uff0c\u6216\u8005\u901a\u8fc7Pinia\/Vuex\u7684getters\/actions\u6765\u8bbf\u95ee\u548c\u4fee\u6539\u3002<\/li>\n<\/ol>\n<h4>\u7528Pinia\u5b9e\u73b0\u7684\u7b80\u5355\u793a\u4f8b<\/h4>\n<ol>\n<li><strong>\u5b89\u88c5Pinia<\/strong>\uff1anpm i pinia \u6216\u8005 yarn add pinia \u6216\u8005 pnpm add pinia\uff1b<\/li>\n<li><strong>\u5728main.js\u91cc\u6ce8\u518cPinia<\/strong>\uff1a<\/li>\n<\/ol>\n<pre class=\"brush:javascript;toolbar:false\">import { createApp } from &#39;vue&#39;\nimport { createPinia } from &#39;pinia&#39;\nimport App from &#39;.\/App.vue&#39;\nconst app = createApp(App)\nconst pinia = createPinia()\napp.use(pinia)\napp.mount(&#39;#app&#39;)<\/pre>\n<ol start=\"3\">\n<li><strong>\u521b\u5efa\u4e00\u4e2aPinia store\uff0c\u53ebuseGlobalSessionStore<\/strong>\uff1a<\/li>\n<\/ol>\n<pre class=\"brush:javascript;toolbar:false\">import { defineStore } from &#39;pinia&#39;\nimport { watchEffect } from &#39;vue&#39;\nexport const useGlobalSessionStore = defineStore(&#39;globalSession&#39;, {\n  state: () =&gt; ({\n    \/\/ \u521d\u59cb\u72b6\u6001\n    searchKeyword: &#39;&#39;,\n    searchCategory: &#39;&#39;,\n    multiStepFormStep1: {}\n  }),\n  actions: {\n    \/\/ \u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e9b\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5\uff0c\u6bd4\u5982\u91cd\u7f6e\u7b5b\u9009\u6761\u4ef6\n    resetSearchParams() {\n      this.searchKeyword = &#39;&#39;\n      this.searchCategory = &#39;&#39;\n    }\n  },\n  \/\/ Pinia\u7684store\u6709\u4e00\u4e2aonMounted\u94a9\u5b50\u5417\uff1f\u6ca1\u6709\uff0c\u4e0d\u8fc7\u53ef\u4ee5\u5728store\u5b9a\u4e49\u5916\u9762\u5199watchEffect\uff0c\u6216\u8005\u5728store\u7684state\u521d\u59cb\u5316\u540e\u5199\n  \/\/ \u8fd9\u91cc\u5728store\u5b9a\u4e49\u5916\u9762\u5199watchEffect\n  setup() {\n    const store = useGlobalSessionStore()\n    \/\/ \u521d\u59cb\u5316\uff1a\u4ecesessionStorage\u8bfb\u53d6\u6570\u636e\n    try {\n      const rawValue = sessionStorage.getItem(&#39;global-session-data&#39;)\n      if (rawValue) {\n        const parsed = JSON.parse(rawValue)\n        \/\/ \u628a\u8bfb\u53d6\u5230\u7684\u6570\u636e\u5408\u5e76\u5230store\u7684state\u91cc\n        Object.assign(store.$state, parsed)\n      }\n    } catch (error) {\n      console.warn(&#39;\u89e3\u6790global-session-data\u5931\u8d25\uff1a&#39;, error)\n    }\n    \/\/ \u76d1\u542cstore\u7684state\u53d8\u5316\uff0c\u540c\u6b65\u5230sessionStorage\n    watchEffect(() =&gt; {\n      try {\n        sessionStorage.setItem(&#39;global-session-data&#39;, JSON.stringify(store.$state))\n      } catch (error) {\n        console.warn(&#39;\u5199\u5165global-session-data\u5931\u8d25\uff1a&#39;, error)\n      }\n    })\n    return {}\n  }\n})<\/pre>\n<ol start=\"4\">\n<li><strong>\u5728\u7ec4\u4ef6\u91cc\u4f7f\u7528<\/strong>\uff1a<\/li>\n<\/ol>\n<pre class=\"brush:vue;toolbar:false\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;h2&gt;\u641c\u7d22\u7b5b\u9009\u6761\u4ef6\uff08\u7528Pinia\uff09&lt;\/h2&gt;\n    &lt;input v-model=&quot;globalSessionStore.searchKeyword&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u641c\u7d22\u5173\u952e\u8bcd&quot; \/&gt;\n    &lt;select v-model=&quot;globalSessionStore.searchCategory&quot;&gt;\n      &lt;option value=&quot;&quot;&gt;\u5168\u90e8\u5206\u7c7b&lt;\/option&gt;\n      &lt;option value=&quot;book&quot;&gt;\u56fe\u4e66&lt;\/option&gt;\n      &lt;option value=&quot;clothes&quot;&gt;\u670d\u88c5&lt;\/option&gt;\n      &lt;option value=&quot;electronics&quot;&gt;\u7535\u5b50\u4ea7\u54c1&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;button @click=&quot;globalSessionStore.resetSearchParams&quot;&gt;\u91cd\u7f6e&lt;\/button&gt;\n    &lt;p&gt;\u5f53\u524d\u7b5b\u9009\u6761\u4ef6\uff1a\u5173\u952e\u8bcd={{ globalSessionStore.searchKeyword }}\uff0c\u5206\u7c7b={{ globalSessionStore.searchCategory }}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script setup&gt;\nimport { useGlobalSessionStore } from &#39;@\/stores\/globalSession&#39;\nconst globalSessionStore = useGlobalSessionStore()\n&lt;\/script&gt;<\/pre>\n<h4>\u4f18\u7f3a\u70b9\u548c\u9002\u7528\u573a\u666f<\/h4>\n<p>\u4f18\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u6240\u6709\u9700\u8981\u5171\u4eab\u7684sessionStorage\u6570\u636e\u90fd\u96c6\u4e2d\u7ba1\u7406<\/strong>\uff0c\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\uff0c\u7ef4\u62a4\u8d77\u6765\u65b9\u4fbf\uff1b<\/li>\n<li><strong>\u53ef\u4ee5\u5229\u7528Pinia\/Vuex\u7684\u5176\u4ed6\u529f\u80fd<\/strong>\uff0c\u6bd4\u5982getters\uff08\u8ba1\u7b97\u6d3e\u751f\u72b6\u6001\uff09\u3001actions\uff08\u5f02\u6b65\u64cd\u4f5c\uff09\u3001\u63d2\u4ef6\uff08\u6bd4\u5982\u6301\u4e45\u5316\u63d2\u4ef6\uff0c\u4e0d\u8fc7\u6211\u4eec\u8fd9\u91cc\u81ea\u5df1\u5199\u4e86\u6301\u4e45\u5316\u903b\u8f91\uff09\uff1b<\/li>\n<li><strong>\u548cVue3\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u5b8c\u7f8e\u7ed3\u5408<\/strong>\uff0c\u4e0d\u7528\u8003\u8651\u592a\u591a\u53cc\u5411\u540c\u6b65\u7684\u95ee\u9898\u3002<\/li>\n<\/ol>\n<p>\u7f3a\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u589e\u52a0\u4e86\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u7684\u4f9d\u8d56<\/strong>\uff0c\u5982\u679c\u9879\u76ee\u91cc\u4e0d\u9700\u8981\u7528Pinia\/Vuex\u505a\u5176\u4ed6\u5168\u5c40\u72b6\u6001\u7ba1\u7406\uff0c\u53ef\u80fd\u89c9\u5f97\u6709\u70b9\u9ebb\u70e6\uff1b<\/li>\n<li><strong>\u6240\u6709\u5171\u4eab\u6570\u636e\u90fd\u5b58\u5728\u4e00\u4e2a\u56fa\u5b9a\u7684sessionStorage key\u91cc<\/strong>\uff0c\u5982\u679c\u6570\u636e\u91cf\u6bd4\u8f83\u5927\uff0c\u53ef\u80fd\u4f1a\u6709\u6027\u80fd\u95ee\u9898\uff08\u4e0d\u8fc7sessionStorage\u7684\u4e0a\u9650\u4e00\u822c\u662f5MB\uff0c\u4e34\u65f6\u6570\u636e\u4e0d\u4f1a\u592a\u5927\uff0c\u6240\u4ee5\u8fd9\u4e2a\u95ee\u9898\u4e00\u822c\u4e0d\u7528\u62c5\u5fc3\uff09\uff1b<\/li>\n<li><strong>\u540c\u6837\u5b58\u5728StorageEvent\u540c\u6807\u7b7e\u9875\u7684\u5751<\/strong>\u3002<\/li>\n<\/ol>\n<p>\u9002\u7528\u573a\u666f\uff1a\n\u9879\u76ee\u91cc\u6709\u5f88\u591a\u5730\u65b9\u9700\u8981\u7528\u5230sessionStorage\u7684\u5171\u4eab\u6570\u636e\uff0c\u6216\u8005\u9879\u76ee\u91cc\u5df2\u7ecf\u5728\u7528Pinia\/Vuex\u505a\u5176\u4ed6\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u7684\u573a\u666f\u3002<\/p>\n<h2>\u907f\u5751\uff01\u907f\u5751\uff01\u907f\u5751\uff01\u76d1\u542csessionStorage\u6700\u5bb9\u6613\u8e29\u76843\u4e2a\u5927\u5751<\/h2>\n<p>\u521a\u624d\u8bb2\u65b9\u6cd5\u7684\u65f6\u5019,\u5df2\u7ecf\u63d0\u5230\u4e86\u51e0\u4e2a\u5751\uff0c\u6bd4\u5982StorageEvent\u540c\u6807\u7b7e\u9875\u7684\u95ee\u9898\uff0c\u73b0\u5728\u54b1\u4eec\u628a\u6700\u5bb9\u6613\u8e29\u76843\u4e2a\u5927\u5751\u5355\u72ec\u5217\u51fa\u6765\uff0c\u8be6\u7ec6\u8bb2\u4e00\u4e0b\u539f\u56e0\u548c\u89e3\u51b3\u65b9\u6cd5\u3002<\/p>\n<h3>\u5751\u4e00\uff1aStorageEvent\u5728\u540c\u6807\u7b7e\u9875\u5185\u7528\u539f\u751fsetItem\u4fee\u6539sessionStorage\uff0c\u4e0d\u4f1a\u89e6\u53d1\uff01<\/h3>\n<p>\u8fd9\u4e2a\u662f\u6700\u5e38\u89c1\u7684\u4e00\u4e2a\u5751,\u5f88\u591a\u540c\u5b66\u624b\u5199useSessionStorage\u7684\u65f6\u5019\uff0c\u90fd\u4ee5\u4e3a\u76d1\u542cwindow\u7684storage\u4e8b\u4ef6\u5c31\u80fd\u76d1\u542c\u5230\u6240\u6709\u5730\u65b9\u7684\u4fee\u6539\uff0c\u4f46\u5b9e\u9645\u4e0a\uff0c<strong>StorageEvent\u7684\u89e6\u53d1\u6761\u4ef6\u662f\uff1a\u5728\u540c\u4e00\u4e2a\u6d4f\u89c8\u5668\u7684\u4e0d\u540c\u6807\u7b7e\u9875\/\u7a97\u53e3\uff0c\u6216\u8005\u540c\u4e00\u4e2a\u6807\u7b7e\u9875\u7684\u4e0d\u540ciframe\u91cc\uff0c\u4fee\u6539\u4e86\u540c\u4e00\u4e2aStorage\u5bf9\u8c61\uff08localStorage\u6216\u8005sessionStorage\uff09<\/strong>\u2014\u2014\u540c\u6807\u7b7e\u9875\u3001\u540ciframe\u91cc\u7528\u539f\u751fsetItem\u4fee\u6539\uff0c\u662f\u4e0d\u4f1a\u89e6\u53d1StorageEvent\u7684\uff01<\/p>\n<p>\u90a3\u4e3a\u4ec0\u4e48\u4f1a\u8fd9\u6837\u5462\uff1f\u5176\u5b9e\u8fd9\u662f\u6d4f\u89c8\u5668\u7684\u8bbe\u8ba1\u7b56\u7565\uff1a\u540c\u6807\u7b7e\u9875\u5185\u7684\u4ee3\u7801\uff0c\u7406\u8bba\u4e0a\u5e94\u8be5\u662f\u5728\u540c\u4e00\u4e2a\u5e94\u7528\u91cc\uff0c\u4fee\u6539\u6570\u636e\u5e94\u8be5\u901a\u8fc7\u5e94\u7528\u5185\u90e8\u7684\u72b6\u6001\u7ba1\u7406\u6216\u8005\u54cd\u5e94\u5f0f\u6570\u636e\u6765\u4f20\u9012\uff0c\u800c\u4e0d\u662f\u901a\u8fc7StorageEvent\u2014\u2014StorageEvent\u4e3b\u8981\u662f\u7528\u6765\u89e3\u51b3\u8de8\u6807\u7b7e\u9875\/\u7a97\u53e3\u6570\u636e\u540c\u6b65\u7684\u95ee\u9898\u7684\u3002<\/p>\n<p>\u90a3\u5982\u679c\u9879\u76ee\u91cc\u771f\u7684\u6709\u65e7\u4ee3\u7801\u7528\u4e86\u539f\u751fsetItem\u4fee\u6539\u540c\u4e00\u4e2asessionStorage\u7684key,\u600e\u4e48\u529e\u5462\uff1f\u6709\u4e24\u79cd\u89e3\u51b3\u65b9\u6cd5\uff1a<\/p>\n<h4>\u89e3\u51b3\u65b9\u6cd5\u4e00\uff1a\u91cd\u5199sessionStorage\u7684setItem\u3001removeItem\u3001clear\u65b9\u6cd5<\/h4>\n<p>\u65e2\u7136\u539f\u751f\u7684setItem\u7b49\u65b9\u6cd5\u4e0d\u4f1a\u89e6\u53d1\u540c\u6807\u7b7e\u9875\u7684StorageEvent,\u90a3\u6211\u4eec\u53ef\u4ee5\u81ea\u5df1\u91cd\u5199\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u5728\u91cd\u5199\u7684\u65b9\u6cd5\u91cc\u624b\u52a8\u89e6\u53d1\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u6216\u8005\u624b\u52a8\u8c03\u7528\u6211\u4eec\u5c01\u88c5\u7684\u66f4\u65b0\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u903b\u8f91\u3002<\/p>\n<p>\u4e3e\u4e2a\u91cd\u5199sessionStorage setItem\u65b9\u6cd5\u7684\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u5148\u4fdd\u5b58\u539f\u751f\u7684setItem\u65b9\u6cd5\nconst originalSetItem = sessionStorage.setItem\n\/\/ \u91cd\u5199setItem\u65b9\u6cd5\nsessionStorage.setItem = function(key, value) {\n  \/\/ \u5148\u8c03\u7528\u539f\u751f\u7684setItem\u65b9\u6cd5\uff0c\u628a\u6570\u636e\u5b58\u8fdb\u53bb\n  originalSetItem.call(this, key, value)\n  \/\/ \u7136\u540e\u624b\u52a8\u89e6\u53d1\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u6bd4\u5982\u53eb&#39;session-storage-change&#39;\n  const event = new CustomEvent(&#39;session-storage-change&#39;, {\n    detail: {\n      key,\n      newValue: value,\n      storageArea: sessionStorage\n    }\n  })\n  window.dispatchEvent(event)\n}\n\/\/ \u540c\u6837\u7684\u65b9\u6cd5\u91cd\u5199removeItem\u548cclear\nconst originalRemoveItem = sessionStorage.removeItem\nsessionStorage.removeItem = function(key) {\n  originalRemoveItem.call(this, key)\n  const event = new CustomEvent(&#39;session-storage-change&#39;, {\n    detail: {\n      key,\n      newValue: null,\n      storageArea: sessionStorage\n    }\n  })\n  window.dispatchEvent(event)\n}\nconst originalClear = sessionStorage.clear\nsessionStorage.clear = function() {\n  originalClear.call(this)\n  const event = new CustomEvent(&#39;session-storage-change&#39;, {\n    detail: {\n      key: null,\n      newValue: null,\n      storageArea: sessionStorage\n    }\n  })\n  window.dispatchEvent(event)\n}<\/pre>\n<p>\u5728\u6211\u4eec\u624b\u5199\u7684useSessionStorage Hook\u91cc\uff0c\u9664\u4e86\u76d1\u542cwindow\u7684storage\u4e8b\u4ef6\uff0c\u8fd8\u8981\u76d1\u542cwindow\u7684'session-storage-change'\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u628a\u521a\u624d\u7684handleStorageChange\u51fd\u6570\u7a0d\u5fae\u6539\u4e00\u4e0b\uff0c\u8ba9\u5b83\u80fd\u63a5\u53d7\u4e24\u79cd\u4e8b\u4ef6\u7684detail\nconst handleStorageChange = (event) =&gt; {\n  \/\/ \u5148\u5224\u65ad\u662f\u539f\u751f\u7684StorageEvent\u8fd8\u662f\u81ea\u5b9a\u4e49\u7684session-storage-change\u4e8b\u4ef6\n  const detail = event.detail || event\n  if (detail.storageArea === sessionStorage) {\n    \/\/ \u5982\u679cdetail.key\u662fnull\uff0c\u8bf4\u660e\u662fclear\u64cd\u4f5c\uff0c\u8fd9\u65f6\u5019\u53ef\u4ee5\u4e0d\u7528\u5904\u7406\u6bcf\u4e2akey\uff0c\u6216\u8005\u6839\u636e\u81ea\u5df1\u7684\u9700\u6c42\u5904\u7406\n    if (detail.key === key || detail.key === null) {\n      try {\n        storedValue.value = detail.newValue ? JSON.parse(detail.newValue) : defaultValue\n      } catch (error) {\n        console.warn(`\u89e3\u6790sessionStorage\u4e2dkey\u4e3a${key}\u7684\u4fee\u6539\u6570\u636e\u5931\u8d25\uff1a`, error)\n        storedValue.value = defaultValue\n      }\n    }\n  }\n}\n\/\/ \u76d1\u542c\u4e24\u79cd\u4e8b\u4ef6\nwindow.addEventListener(&#39;storage&#39;, handleStorageChange)\nwindow.addEventListener(&#39;session-storage-change&#39;, handleStorageChange)\n\/\/ \u5378\u8f7d\u65f6\u4e5f\u8981\u79fb\u9664\u4e24\u79cd\u4e8b\u4ef6\u7684\u76d1\u542c\nonUnmounted(() =&gt; {\n  window.removeEventListener(&#39;storage&#39;, handleStorageChange)\n  window.removeEventListener(&#39;session-storage-change&#39;, handleStorageChange)\n})<\/pre>\n<p>\u4e0d\u8fc7\u8981\u6ce8\u610f,\u91cd\u5199\u539f\u751f\u7684Web Storage API\u662f\u6709\u98ce\u9669\u7684\uff1a<\/p>\n<ol>\n<li><strong>\u53ef\u80fd\u4f1a\u5f71\u54cd\u7b2c\u4e09\u65b9\u5e93\u7684\u6b63\u5e38\u5de5\u4f5c<\/strong>\uff1a\u5982\u679c\u7b2c\u4e09\u65b9\u5e93\u4e5f\u4f9d\u8d56\u539f\u751f\u7684setItem\u7b49\u65b9\u6cd5\u7684\u884c\u4e3a\uff0c\u91cd\u5199\u540e\u53ef\u80fd\u4f1a\u51fa\u95ee\u9898\uff1b<\/li>\n<li><strong>\u53ef\u80fd\u4f1a\u88ab\u6d4f\u89c8\u5668\u7684\u5b89\u5168\u7b56\u7565\u62e6\u622a<\/strong>\uff1a\u4e0d\u8fc7\u4e00\u822c\u60c5\u51b5\u4e0b\u4e0d\u4f1a\uff0c\u9664\u975e\u6d4f\u89c8\u5668\u6709\u7279\u522b\u4e25\u683c\u7684\u5b89\u5168\u8bbe\u7f6e\uff1b<\/li>\n<li><strong>\u4ee3\u7801\u53ef\u7ef4\u62a4\u6027\u53ef\u80fd\u4f1a\u964d\u4f4e<\/strong>\uff1a\u5982\u679c\u56e2\u961f\u91cc\u7684\u5176\u4ed6\u540c\u5b66\u4e0d\u77e5\u9053\u539f\u751f\u7684API\u88ab\u91cd\u5199\u4e86\uff0c\u53ef\u80fd\u4f1a\u5199\u51fa\u6709\u95ee\u9898\u7684\u4ee3\u7801\u3002<\/li>\n<\/ol>\n<p>\u6700\u597d\u7684\u89e3\u51b3\u65b9\u6cd5\u8fd8\u662f\uff1a<strong>\u5c3d\u91cf\u4e0d\u8981\u5728\u9879\u76ee\u91cc\u6df7\u7528\u539f\u751f\u7684Web Storage API\u548c\u6211\u4eec\u5c01\u88c5\u7684\u54cd\u5e94\u5f0fHook\/Store\uff0c\u6240\u6709\u5bf9sessionStorage\u7684\u64cd\u4f5c\u90fd\u901a\u8fc7\u6211\u4eec\u5c01\u88c5\u7684\u5de5\u5177\u6765\u5b8c\u6210<\/strong>\u3002<\/p>\n<h4>\u89e3\u51b3\u65b9\u6cd5\u4e8c\uff1a\u7528VueUse\u7684useSessionStorage<\/h4>\n<p>\u54e6\u5bf9\u4e86,VueUse\u7684useSessionStorage\u5df2\u7ecf\u5e2e\u6211\u4eec\u89e3\u51b3\u4e86\u8fd9\u4e2a\u95ee\u9898\uff01\u5b83\u5185\u90e8\u65e2\u76d1\u542c\u4e86window\u7684storage\u4e8b\u4ef6\uff08\u8de8\u6807\u7b7e\u9875\uff09\uff0c\u53c8\u76d1\u542c\u4e86window\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff08\u540c\u6807\u7b7e\u9875\u7684\u5176\u4ed6\u4fee\u6539\uff09\uff0c\u4e0d\u8fc7\u5177\u4f53\u662f\u600e\u4e48\u5b9e\u73b0\u7684\uff0c\u5927\u5bb6\u53ef\u4ee5\u53bb\u770bVueUse\u7684\u6e90\u7801\u2014\u2014\u8fd9\u91cc\u5c31\u4e0d\u5267\u900f\u4e86\uff0c\u603b\u4e4b\u7528VueUse\u7684\u5c31\u5bf9\u4e86\u3002<\/p>\n<h3>\u5751\u4e8c\uff1aJSON\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u65f6\u7684\u7c7b\u578b\u4e22\u5931\u95ee\u9898<\/h3>\n<p>\u521a\u624d\u8bb2\u65b9\u6cd5\u7684\u65f6\u5019,\u63d0\u5230\u4e86\u81ea\u5b9a\u4e49serializer\u7684\u95ee\u9898\uff0c\u8fd9\u91cc\u518d\u8be6\u7ec6\u8bb2\u4e00\u4e0b\uff1asessionStorage\u53ea\u80fd\u5b58\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u6211\u4eec\u5b58\u5bf9\u8c61\u3001\u6570\u7ec4\u3001Date\u5bf9\u8c61\u3001RegExp\u5bf9\u8c61\u3001Map\u5bf9\u8c61\u3001Set\u5bf9\u8c61\u8fd9\u4e9bJSON\u4e0d\u80fd\u76f4\u63a5\u5e8f\u5217\u5316\u7684\u7c7b\u578b\u65f6\uff0c\u90fd\u4f1a\u6709\u7c7b\u578b\u4e22\u5931\u7684\u95ee\u9898\u2014\u2014<\/p>\n<ul>\n<li>Date\u5bf9\u8c61\uff1aJSON.stringify\u8f6c\u6210\"2024-05-20T12:00:00.000Z\"\uff0cJSON.parse\u8f6c\u56de\u6765\u8fd8\u662f\u5b57\u7b26\u4e32\uff1b<\/li>\n<li>RegExp\u5bf9\u8c61\uff1aJSON.stringify\u8f6c\u6210{}\uff0cJSON.parse\u8f6c\u56de\u6765\u8fd8\u662f\u7a7a\u5bf9\u8c61\uff1b<\/li>\n<li>Map\u5bf9\u8c61\uff1aJSON.stringify\u8f6c\u6210{}\uff0cJSON.parse\u8f6c\u56de\u6765\u8fd8\u662f\u7a7a\u5bf9\u8c61\uff1b<\/li>\n<li>Set\u5bf9\u8c61\uff1aJSON.stringify\u8f6c\u6210{}\uff0cJSON.parse\u8f6c\u56de\u6765\u8fd8\u662f\u7a7a\u5bf9\u8c61\uff1b<\/li>\n<li>undefined\uff1aJSON.stringify\u4f1a\u76f4\u63a5\u5ffd\u7565\u8fd9\u4e2a\u5c5e\u6027\uff0c\u6216\u8005\u5982\u679c\u6574\u4e2a\u503c\u662fundefined\u7684\u8bdd\uff0c\u4f1a\u8fd4\u56deundefined\uff0c\u5b58\u5230sessionStorage\u91cc\u7684\u8bdd\uff0c\u4f1a\u53d8\u6210\"undefined\"\u3002<\/li>\n<\/ul>\n<p>\u90a3\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5462\uff1f\u6709\u51e0\u79cd\u65b9\u6cd5\uff1a<\/p>\n<h4>\u89e3\u51b3\u65b9\u6cd5\u4e00\uff1a\u81ea\u5b9a\u4e49serializer\uff08\u9002\u5408\u5e38\u7528\u7684\u7279\u6b8a\u7c7b\u578b\uff0c\u6bd4\u5982Date\uff09<\/h4>\n<p>\u521a\u624d\u65b9\u6cd5\u4e8c\u91cc\u5df2\u7ecf\u7ed9\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49serializer\u5904\u7406Date\u5bf9\u8c61\u7684\u4f8b\u5b50,\u8fd9\u91cc\u518d\u7ed9\u4e00\u4e2a\u5904\u7406RegExp\u3001Map\u3001Set\u7684\u4f8b\u5b50\uff08\u4e0d\u8fc7\u8fd9\u4e2a\u4f8b\u5b50\u6bd4\u8f83\u590d\u6742\uff0c\u4e00\u822c\u60c5\u51b5\u4e0b\u4e0d\u63a8\u8350\u81ea\u5df1\u624b\u5199\uff0c\u9664\u975e\u9879\u76ee\u91cc\u786e\u5b9e\u9700\u8981\u7528\u5230\u8fd9\u4e9b\u7c7b\u578b\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">const mySerializer = {\n  read: (raw) =&gt; {\n    if (!raw) return null\n    const parsed = JSON.parse(raw)\n    \/\/ \u9012\u5f52\u5904\u7406\u7279\u6b8a\u7c7b\u578b\n    const reviver = (key, value) =&gt; {\n      if (typeof value === &#39;object&#39; &amp;&amp; value !== null) {\n        \/\/ \u5904\u7406Date\u5bf9\u8c61\uff08\u6709__type__\u5c5e\u6027\u4e3a&#39;Date&#39;\uff0cvalue\u5c5e\u6027\u4e3a\u65f6\u95f4\u6233\uff09\n        if (value.__type__ === &#39;Date&#39;) {\n          return new Date(value.value)\n        }\n        \/\/ \u5904\u7406RegExp\u5bf9\u8c61\uff08\u6709__type__\u5c5e\u6027\u4e3a&#39;Regexp&#39;\uff0csource\u5c5e\u6027\u4e3a\u6b63\u5219\u8868\u8fbe\u5f0f\u7684\u6e90\u5b57\u7b26\u4e32\uff0cflags\u5c5e\u6027\u4e3a\u6807\u5fd7\uff09\n        if (value.__type__ === &#39;RegExp&#39;) {\n          return new RegExp(value.source, value.flags)\n        }\n        \/\/ \u5904\u7406Map\u5bf9\u8c61\uff08\u6709__type__\u5c5e\u6027\u4e3a&#39;Map&#39;\uff0centries\u5c5e\u6027\u4e3a\u952e\u503c\u5bf9\u6570\u7ec4\uff09\n        if (value.__type__ === &#39;Map&#39;) {\n          return new Map(value.entries)\n        }\n        \/\/ \u5904\u7406Set\u5bf9\u8c61\uff08\u6709__type__\u5c5e\u6027\u4e3a&#39;Set&#39;\uff0cvalues\u5c5e\u6027\u4e3a\u503c\u6570\u7ec4\uff09\n        if (value.__type__ === &#39;Set&#39;) {\n          return new Set(value.values)\n        }\n      }\n      return value\n    }\n    return JSON.parse(raw, reviver)\n  },\n  write: (value) =&gt; {\n    \/\/ \u9012\u5f52\u5904\u7406\u7279\u6b8a\u7c7b\u578b\n    const replacer = (key, value) =&gt; {\n      if (typeof value === &#39;object&#39; &amp;&amp; value !== null) {\n        \/\/ \u5904\u7406Date\u5bf9\u8c61\n        if (value instanceof Date) {\n          return { __type__: &#39;Date&#39;, value: value.getTime() }\n        }\n        \/\/ \u5904\u7406RegExp\u5bf9\u8c61\n        if (value instanceof RegExp) {\n          return { __type__: &#39;RegExp&#39;, source: value.source, flags: value.flags }\n        }\n        \/\/ \u5904\u7406Map\u5bf9\u8c61\n        if (value instanceof Map) {\n          return { __type__: &#39;Map&#39;, entries: Array.from(value.entries()) }\n        }\n        \/\/ \u5904\u7406Set\u5bf9\u8c61\n        if (value instanceof Set) {\n          return { __type__: &#39;Set&#39;, values: Array.from(value.values()) }\n        }\n      }\n      return value\n    }\n    return JSON.stringify(value, replacer)\n  }\n}<\/pre>\n<h4>\u89e3\u51b3\u65b9\u6cd5\u4e8c\uff1a\u5c3d\u91cf\u4e0d\u8981\u5728sessionStorage\u91cc\u5b58JSON\u4e0d\u80fd\u76f4\u63a5\u5e8f\u5217\u5316\u7684\u7c7b\u578b<\/h4>\n<p>\u8fd9\u4e2a\u662f\u6700\u7b80\u5355\u3001\u6700\u7a33\u59a5\u7684\u89e3\u51b3\u65b9\u6cd5\u2014\u2014sessionStorage\u672c\u6765\u5c31\u662f\u7528\u6765\u5b58\u4e34\u65f6\u8f7b\u91cf\u6570\u636e\u7684\uff0c\u5c3d\u91cf\u53ea\u5b58\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5e03\u5c14\u503c\u3001\u666e\u901a\u5bf9\u8c61\u3001\u666e\u901a\u6570\u7ec4\u8fd9\u4e9bJSON\u80fd\u76f4\u63a5\u5e8f\u5217\u5316\u7684\u7c7b\u578b\uff0c\u4e0d\u8981\u5b58Date\u3001RegExp\u3001Map\u3001Set\u3001Function\u8fd9\u4e9b\u7279\u6b8a\u7c7b\u578b\u3002<\/p>\n<p>\u5982\u679c\u786e\u5b9e\u9700\u8981\u5b58Date\u5bf9\u8c61,\u53ef\u4ee5\u5b58\u65f6\u95f4\u6233\uff08number\u7c7b\u578b\uff09\u6216\u8005ISO\u5b57\u7b26\u4e32\uff08string\u7c7b\u578b\uff09\uff0c\u7136\u540e\u5728\u9700\u8981\u7528\u7684\u65f6\u5019\u518d\u8f6c\u6210Date\u5bf9\u8c61\uff1b\u5982\u679c\u786e\u5b9e\u9700\u8981\u5b58RegExp\u5bf9\u8c61\uff0c\u53ef\u4ee5\u5b58\u6e90\u5b57\u7b26\u4e32\u548c\u6807\u5fd7\uff0c\u7136\u540e\u5728\u9700\u8981\u7528\u7684\u65f6\u5019\u518d\u8f6c\u6210RegExp\u5bf9\u8c61\uff1b\u5982\u679c\u786e\u5b9e\u9700\u8981\u5b58Map\u6216\u8005Set\u5bf9\u8c61\uff0c\u53ef\u4ee5\u5b58\u952e\u503c\u5bf9\u6570\u7ec4\u6216\u8005\u503c\u6570\u7ec4\uff0c\u7136\u540e\u5728\u9700\u8981\u7528\u7684\u65f6\u5019\u518d\u8f6c\u6210Map\u6216\u8005Set\u5bf9\u8c61\u3002<\/p>\n<h3>\u5751\u4e09\uff1awatchEffect\u7684\u65e0\u9650\u5faa\u73af\u95ee\u9898<\/h3>\n<p>\u521a\u624d\u624b\u5199useSessionStorage\u7684\u65f6\u5019,\u7528\u4e86watchEffect\u6765\u76d1\u542c\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u53d8\u5316\uff0c\u540c\u6b65\u5230sessionStorage\u2014\u2014\u90a3\u6709\u6ca1\u6709\u53ef\u80fd\u51fa\u73b0\u65e0\u9650\u5faa\u73af\u7684\u95ee\u9898\u5462\uff1f<\/p>\n<ol>\n<li>\u54cd\u5e94\u5f0f\u6570\u636estoredValue\u53d8\u4e86\uff1b<\/li>\n<li>watchEffect\u89e6\u53d1,\u628astoredValue\u5b58\u5230sessionStorage\u91cc\uff1b<\/li>\n<li>\u5982\u679c\u6211\u4eec\u521a\u624d\u91cd\u5199\u4e86sessionStorage\u7684setItem\u65b9\u6cd5,\u89e6\u53d1\u4e86\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1b<\/li>\n<li>\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u89e6\u53d1handleStorageChange\u51fd\u6570\uff1b<\/li>\n<li>handleStorageChange\u51fd\u6570\u628asessionStorage\u91cc\u7684\u65b0\u503c\u8f6c\u6210\u5bf9\u8c61,\u66f4\u65b0storedValue\uff1b<\/li>\n<li>\u54cd\u5e94\u5f0f\u6570\u636estoredValue\u53c8\u53d8\u4e86,\u56de\u5230\u6b65\u9aa41\uff0c\u65e0\u9650\u5faa\u73af\u3002<\/li>\n<\/ol>\n<p>\u90a3\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5462\uff1f\u5176\u5b9e\u5f88\u7b80\u5355\uff1a<strong>\u5728\u66f4\u65b0storedValue\u4e4b\u524d\uff0c\u5148\u5224\u65ad\u4e00\u4e0b\u65b0\u503c\u548c\u65e7\u503c\u662f\u4e0d\u662f\u4e00\u6837\u7684\uff0c\u5982\u679c\u4e00\u6837\u7684\u8bdd\uff0c\u5c31\u4e0d\u66f4\u65b0<\/strong>\u3002<\/p>\n<p>\u4e3e\u4e2a\u4f8b\u5b50,\u4fee\u6539\u521a\u624d\u624b\u5199useSessionStorage Hook\u91cc\u7684handleStorageChange\u51fd\u6570\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { isRef, isReactive, toRaw } from &#39;vue&#39;\n\/\/ \u5148\u5199\u4e00\u4e2a\u6df1\u6bd4\u8f83\u51fd\u6570\uff0c\u5224\u65ad\u4e24\u4e2a\u503c\u662f\u4e0d\u662f\u4e00\u6837\u7684\n\/\/ \u8fd9\u91cc\u7528VueUse\u7684isEqual\u7684\u8bdd\u4f1a\u66f4\u7b80\u5355\uff0c\u4f46\u5982\u679c\u662f\u624b\u5199\u7684\u8bdd\uff0c\u53ef\u4ee5\u81ea\u5df1\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u6df1\u6bd4\u8f83\nconst isEqual = (a, b) =&gt; {\n  \/\/ \u5148\u5224\u65ad\u7c7b\u578b\n  if (typeof a !== typeof b) return false\n  \/\/ \u5982\u679c\u662f\u57fa\u672c\u7c7b\u578b\uff0c\u76f4\u63a5\u6bd4\u8f83\n  if (typeof a !== &#39;object&#39; || a === null || b === null) return a === b\n  \/\/ \u5982\u679c\u662fDate\u5bf9\u8c61\uff0c\u6bd4\u8f83\u65f6\u95f4\u6233\n  if (a instanceof Date &amp;&amp; b instanceof Date) return a.getTime() === b.getTime()\n  \/\/ \u5982\u679c\u662fRegExp\u5bf9\u8c61\uff0c\u6bd4\u8f83\u6e90\u5b57\u7b26\u4e32\u548c\u6807\u5fd7\n  if (a instanceof RegExp &amp;&amp; b instanceof RegExp) return a.source === b.source &amp;&amp; a.flags === b.flags\n  \/\/ \u5982\u679c\u662f\u6570\u7ec4\uff0c\u6bd4\u8f83\u957f\u5ea6\u548c\u6bcf\u4e2a\u5143\u7d20\n  if (Array.isArray(a) &amp;&amp; Array.isArray(b)) {\n    if (a.length !== b.length) return false\n    for (let i = 0; i &lt; a.length; i++) {\n      if (!isEqual(a[i], b[i])) return false\n    }\n    return true\n  }\n  \/\/ \u5982\u679c\u662f\u666e\u901a\u5bf9\u8c61\uff0c\u6bd4\u8f83\u952e\u7684\u6570\u91cf\u548c\u6bcf\u4e2a\u952e\u5bf9\u5e94\u7684\u503c\n  const keysA = Object.keys(a)\n  const keysB = Object.keys(b)\n  if (keysA.length !== keysB.length) return false\n  for (const key of keysA) {\n    if (!keysB.includes(key) || !isEqual(a[key], b[key])) return false\n  }\n  return true\n}\nconst handleStorageChange = (event) =&gt; {\n  const detail = event.detail || event\n  if (detail.storageArea === sessionStorage) {\n    if (detail.key === key || detail.key === null) {\n      try {\n        const newValue = detail.newValue ? JSON.parse(detail.newValue) : defaultValue\n        \/\/ \u5148\u83b7\u53d6storedValue\u7684\u539f\u59cb\u503c\uff08\u56e0\u4e3aref\/reactive\u5bf9\u8c61\u662fProxy\u5305\u88c5\u8fc7\u7684\uff0ctoRaw\u53ef\u4ee5\u62ff\u5230\u539f\u59cb\u503c\uff09\n        const oldRawValue = isRef(storedValue) ? toRaw(storedValue.value) : (isReactive(storedValue) ? toRaw(storedValue) : storedValue)\n        \/\/ \u6df1\u6bd4\u8f83\u65b0\u503c\u548c\u65e7\u503c\uff0c\u5982\u679c\u4e0d\u4e00\u6837\u7684\u8bdd\uff0c\u624d\u66f4\u65b0\n        if (!isEqual(oldRawValue, newValue)) {\n          storedValue.value = newValue\n        }\n      } catch (error) {\n        console.warn(`\u89e3\u6790sessionStorage\u4e2dkey\u4e3a${key}\u7684\u4fee\u6539\u6570\u636e\u5931\u8d25\uff1a`, error)\n        const oldRawValue = isRef(storedValue) ? toRaw(storedValue.value) : (isReactive(storedValue) ? toRaw(storedValue) : storedValue)\n        if (!isEqual(oldRawValue, defaultValue)) {\n          storedValue.value = defaultValue\n        }\n      }\n    }\n  }\n}<\/pre>\n<p>\u4e0d\u8fc7\u540c\u6837\u7684,\u6df1\u6bd4\u8f83\u51fd\u6570\u4e5f\u53ef\u4ee5\u7528VueUse\u7684isEqual\uff0c\u4e0d\u7528\u81ea\u5df1\u624b\u5199\uff0c\u800c\u4e14VueUse\u7684isEqual\u529f\u80fd\u66f4\u5b8c\u5584\uff0c\u652f\u6301\u66f4\u591a\u7279\u6b8a\u7c7b\u578b\u7684\u6bd4\u8f83\u3002<\/p>\n<p>\u521a\u624d\u8bf4\u7684\u65e0\u9650\u5faa\u73af\u95ee\u9898,\u7528VueUse\u7684useSessionStorage\u7684\u8bdd\uff0c\u4e5f\u5df2\u7ecf\u5e2e\u6211\u4eec\u89e3\u51b3\u4e86\uff0c\u6240\u4ee5\u8fd8\u662f\u63a8\u8350\u7528VueUse\u7684\u3002<\/p>\n<h2>\u603b\u7ed3\u4e00\u4e0b<\/h2>\n<p>\u4eca\u5929\u54b1\u4eec\u8bb2\u4e86Vue3\u91cc\u600e\u4e48\u6b63\u786ewatch\u76d1\u542csessionStorage\u53d8\u5316,\u67093\u79cd\u5e38\u7528\u7684\u65b9\u6cd5\uff1a<\/p>\n<ol>\n<li><strong>\u5c01\u88c5\u4e00\u4e2a\u5e26\u54cd\u5e94\u5f0f\u7684useSessionStorage Hook<\/strong>\uff1a\u9002\u5408\u60f3\u7406\u89e3\u539f\u7406\u3001\u6216\u8005\u9700\u8981\u6839\u636e\u9879\u76ee\u9700\u6c42\u5b9a\u5236\u7684\u670b\u53cb\uff1b<\/li>\n<li><strong>\u76f4\u63a5\u7528VueUse\u7684useSessionStorage<\/strong>\uff1a\u6700\u63a8\u8350\u7684\u65b9\u6cd5\uff0c\u529f\u80fd\u5b8c\u5584\uff0c\u4f7f\u7528\u7b80\u5355\uff0c\u6709TypeScript\u652f\u6301\uff1b<\/li>\n<li><strong>\u5728\u6839\u7ec4\u4ef6\u6216\u8005\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u91cc\u5c01\u88c5\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7684\u5bf9\u8c61<\/strong>\uff1a\u9002\u5408\u9879\u76ee\u91cc\u6709\u5f88\u591a\u5171\u4eabsessionStorage\u6570\u636e\u7684\u573a\u666f\u3002<\/li>\n<\/ol>\n<p>\u8fd8\u8bb2\u4e86\u6700\u5bb9\u6613\u8e29\u76843\u4e2a\u5927\u5751\uff1a<\/p>\n<ol>\n<li><strong>StorageEvent\u540c\u6807\u7b7e\u9875\u4e0d\u89e6\u53d1<\/strong>\uff1a\u5c3d\u91cf\u4e0d\u8981\u6df7\u7528\u539f\u751fAPI\u548c\u5c01\u88c5\u7684\u5de5\u5177\uff0c\u6216\u8005\u91cd\u5199\u539f\u751fAPI\uff0c\u6216\u8005\u7528VueUse\u7684\uff1b<\/li>\n<li><strong>JSON\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u7c7b\u578b\u4e22\u5931<\/strong>\uff1a\u5c3d\u91cf\u4e0d\u8981\u5b58\u7279\u6b8a\u7c7b\u578b\uff0c\u6216\u8005\u81ea\u5b9a\u4e49serializer\uff1b<\/li>\n<li><strong>watchEffect\u7684\u65e0\u9650\u5faa\u73af<\/strong>\uff1a\u66f4\u65b0\u54cd\u5e94\u5f0f\u6570\u636e\u4e4b\u524d\u5148\u6df1\u6bd4\u8f83\u65b0\u503c\u548c\u65e7\u503c\u3002\n\u80fd\u5e2e\u5230\u5927\u5bb6\uff0c\u4ee5\u540e\u5728Vue3\u9879\u76ee\u91cc\u7528sessionStorage\u7684\u65f6\u5019\uff0c\u4e0d\u8981\u518d\u8e29\u8fd9\u4e9b\u5751\u4e86\uff01\u5982\u679c\u8fd8\u6709\u5176\u4ed6\u95ee\u9898\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u8ba8\u8bba\u3002<\/li>\n<\/ol>","pubDate":"Fri, 17 Apr 2026 20:02:04 +0800"},{"title":"Vue3\u79d2\u8868\u600e\u4e48\u5199\u624d\u80fd\u65e2\u597d\u7528\u53c8\u6709\u6269\u5c55\u6027\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421756.html","description":"<p>\u505a\u524d\u7aef\u7ec3\u624b\u9879\u76ee\u6216\u8005\u5f00\u53d1\u65f6\u95f4\u7ba1\u7406\u3001\u8fd0\u52a8\u5065\u8eab\u7c7b\u5c0f\u7a0b\u5e8f\/\u7f51\u9875\u65f6\uff0c\u79d2\u8868\u7edd\u5bf9\u662f\u7ed5\u4e0d\u5f00\u7684\u57fa\u7840\u7ec4\u4ef6\uff0c\u4e4b\u524d\u7528Vue2\u5199\u8fc7\u7684\u670b\u53cb\u53ef\u80fd\u8fd8\u8bb0\u5f97\uff0csetInterval\u7ecf\u5e38\u8e29\u5185\u5b58\u6cc4\u6f0f\u7684\u5751\uff0c\u6570\u636e\u66f4\u65b0\u7684\u903b\u8f91\u4e5f\u5bb9\u6613\u8026\u5408\uff0c\u90a3\u5207\u6362\u5230Vue3\u540e\uff0c\u6709\u6ca1\u6709\u66f4\u4f18\u96c5\u7684\u5199\u6cd5\uff1f\u65b0\u624b\u4ece\u96f6\u5f00\u59cb\u4f1a\u4e0d\u4f1a\u96be\uff1f\u9047\u5230\u6682\u505c\u540e\u518d\u6b21\u5f00\u542f\u8df3\u79d2\u3001\u7cbe\u786e\u5230\u6beb\u79d2\u65f6\u6296\u52a8\u8fd9\u4e9b\u5e38\u89c1\u95ee\u9898\u8be5\u600e\u4e48\u89e3\u51b3\uff1f\u8fd9\u4e9b\u95ee\u9898\u54b1\u4eec\u4eca\u5929\u6328\u4e2a\u804a\u6e05\u695a\u3002<\/p>\n<h2>\u4ece\u96f6\u5199\u4e00\u4e2a\u6700\u57fa\u7840\u7684Vue3\u79d2\u8868<\/h2>\n<p>\u54b1\u4eec\u5148\u522b\u641e\u82b1\u91cc\u80e1\u54e8\u7684,\u5148\u642d\u4e00\u4e2a\u80fd\u5b9e\u73b0\u300c\u5f00\u59cb\/\u6682\u505c\u300d\u300c\u590d\u4f4d\u300d\u300c\u8bb0\u5f55\u5206\u6bb5\u65f6\u95f4\u300d\u4e09\u4e2a\u6838\u5fc3\u529f\u80fd\u7684\u57fa\u7840\u7248\u672c\uff0c\u7528Vue3\u7684\u7ec4\u5408\u5f0fAPI\u5199\uff0c\u8fd9\u624d\u662f\u73b0\u5728\u7684\u4e3b\u6d41\uff0csetup\u8bed\u6cd5\u7cd6\u4e5f\u66f4\u7b80\u6d01\u3002<\/p>\n<h3>\u51c6\u5907\u5de5\u4f5c<\/h3>\n<p>\u9996\u5148\u5f97\u786e\u4fdd\u4f60\u6709\u4e00\u4e2aVue3\u7684\u9879\u76ee\u73af\u5883,\u4e0d\u7ba1\u662f\u7528Vite\u5feb\u901f\u521b\u5efa\u8fd8\u662f\u7528Vue CLI\uff0c\u53ea\u8981\u80fd\u6b63\u5e38\u8dd1Vue3\u5c31\u884c\uff0c\u8fd9\u91cc\u63a8\u8350\u7528Vite\uff0c\u542f\u52a8\u5feb\uff0c\u70ed\u66f4\u65b0\u4f53\u9a8c\u597d\uff0c\u7ec3\u624b\u6548\u7387\u9ad8\u3002<\/p>\n<h3>\u68b3\u7406\u6838\u5fc3\u6570\u636e\u548c\u72b6\u6001<\/h3>\n<p>\u79d2\u8868\u7684\u6838\u5fc3\u65e0\u975e\u662f\u51e0\u4e2a\u53d8\u91cf\uff1a<\/p>\n<ol>\n<li><strong>\u7d2f\u8ba1\u65f6\u95f4<\/strong>\uff1a\u4ece\u7b2c\u4e00\u6b21\u70b9\u51fb\u5f00\u59cb\u5230\u73b0\u5728\u7684\u603b\u6beb\u79d2\u6570\uff0c\u7528\u6beb\u79d2\u662f\u4e3a\u4e86\u540e\u7eed\u8f6c\u6210\u65f6\u5206\u79d2\u66f4\u7075\u6d3b\uff0c\u4e5f\u80fd\u6ee1\u8db3\u6beb\u79d2\u7ea7\u663e\u793a\u7684\u9700\u6c42<\/li>\n<li><strong>\u5f53\u524d\u5206\u6bb5\u65f6\u95f4<\/strong>\uff1a\u4e0a\u4e00\u6b21\u70b9\u51fb\u300c\u5206\u6bb5\u300d\u5230\u73b0\u5728\u7684\u6beb\u79d2\u6570<\/li>\n<li><strong>\u5b9a\u65f6\u5668ID<\/strong>\uff1a\u5b58setInterval\u7684\u8fd4\u56de\u503c\uff0c\u65b9\u4fbf\u6682\u505c\u7684\u65f6\u5019\u6e05\u9664\uff0c\u907f\u514d\u5185\u5b58\u6cc4\u6f0f<\/li>\n<li><strong>\u8fd0\u884c\u72b6\u6001<\/strong>\uff1a\u5224\u65ad\u73b0\u5728\u662f\u5f00\u59cb\u8fd8\u662f\u6682\u505c\uff0c\u63a7\u5236\u6309\u94ae\u7684\u6587\u5b57\u548c\u529f\u80fd<\/li>\n<li><strong>\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4<\/strong>\uff1a\u628a\u6bcf\u6b21\u70b9\u51fb\u7684\u5206\u6bb5\u65f6\u95f4\u5b58\u8d77\u6765\uff0c\u5c55\u793a\u7ed9\u7528\u6237<\/li>\n<\/ol>\n<p>\u8fd9\u51e0\u4e2a\u53d8\u91cf,\u6211\u4eec\u90fd\u8981\u7528ref\u6216\u8005reactive\u6765\u58f0\u660e\u5417\uff1f\u5176\u5b9e\u7d2f\u8ba1\u65f6\u95f4\u3001\u5f53\u524d\u5206\u6bb5\u65f6\u95f4\u3001\u5b9a\u65f6\u5668ID\u3001\u8fd0\u884c\u72b6\u6001\u90fd\u662f\u5355\u4e00\u503c\uff0c\u7528ref\u5c31\u884c\uff1b\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u662f\u6570\u7ec4\u5bf9\u8c61\uff0c\u7528ref\u6216\u8005reactive\u90fd\u53ef\u4ee5\uff0c\u8fd9\u91cc\u6211\u4e60\u60ef\u7528ref\uff0c\u56e0\u4e3a\u904d\u5386\u548c\u66f4\u65b0\u5355\u4e2a\u5143\u7d20\u66f4\u76f4\u63a5\u3002<\/p>\n<h3>\u6838\u5fc3\u529f\u80fd\u5b9e\u73b0<\/h3>\n<h4>\u5f00\u59cb\/\u6682\u505c<\/h4>\n<p>\u5148\u7406\u6e05\u695a\u903b\u8f91\uff1a\u5982\u679c\u73b0\u5728\u662f\u672a\u8fd0\u884c\u72b6\u6001\uff08\u5305\u62ec\u521d\u59cb\u72b6\u6001\u548c\u6682\u505c\u540e\uff09\uff0c\u70b9\u51fb\u5c31\u542f\u52a8\u5b9a\u65f6\u5668\uff0c\u66f4\u65b0\u8fd0\u884c\u72b6\u6001\uff1b\u5982\u679c\u662f\u8fd0\u884c\u72b6\u6001\uff0c\u70b9\u51fb\u5c31\u6e05\u9664\u5b9a\u65f6\u5668\uff0c\u66f4\u65b0\u8fd0\u884c\u72b6\u6001\u3002<\/p>\n<p>\u8fd9\u91cc\u6709\u4e2a\u65b0\u624b\u7279\u522b\u5bb9\u6613\u8e29\u7684\u5751\uff1a\u76f4\u63a5\u7528setInterval(() =&gt; { totalTime.value += 10 }, 10)\u6765\u7d2f\u52a0\u65f6\u95f4\uff0c\u4ee5\u4e3a\u8fd9\u6837\u5c31\u80fd\u7cbe\u786e\u523010\u6beb\u79d2\uff0c\u4f46\u5b9e\u9645\u4e0a\uff0c\u6d4f\u89c8\u5668\u7684setInterval\u548csetTimeout\u5e76\u4e0d\u662f\u4e25\u683c\u7cbe\u786e\u7684\uff0c\u56e0\u4e3aJS\u662f\u5355\u7ebf\u7a0b\u7684\uff0c\u5982\u679c\u4e3b\u7ebf\u7a0b\u6709\u522b\u7684\u4efb\u52a1\u5728\u8dd1\uff0c\u5b9a\u65f6\u5668\u56de\u8c03\u5c31\u4f1a\u88ab\u5ef6\u8fdf\uff0c\u65f6\u95f4\u4e45\u4e86\u5c31\u4f1a\u51fa\u73b0\u8df3\u79d2\u6216\u8005\u7d2f\u8ba1\u4e0d\u51c6\u7684\u95ee\u9898\u3002<\/p>\n<p>\u90a3\u600e\u4e48\u89e3\u51b3\u5462\uff1f\u5176\u5b9e\u4e0d\u7528\u7d2f\u52a0\uff0c\u800c\u662f\u7528\u65f6\u95f4\u6233\u6765\u8ba1\u7b97\uff0c\u7b2c\u4e00\u6b21\u70b9\u51fb\u5f00\u59cb\u7684\u65f6\u5019\uff0c\u8bb0\u5f55\u4e00\u4e2a\u300c\u8d77\u59cb\u65f6\u95f4\u6233\u300d\uff08\u6216\u8005\u6682\u505c\u65f6\u7684\u300c\u7ed3\u675f\u65f6\u95f4\u6233\u300d\u52a0\u4e0a\u4e4b\u524d\u7684\u300c\u7d2f\u8ba1\u6682\u505c\u5dee\u503c\u300d\uff1f\u4e0d\u5bf9\uff0c\u66f4\u7b80\u5355\u7684\u65b9\u6cd5\u662f\uff1a\u6bcf\u6b21\u66f4\u65b0\u663e\u793a\u7684\u65f6\u5019\uff0c\u7528\u5f53\u524d\u7684\u65f6\u95f4\u6233\u51cf\u53bb\u7b2c\u4e00\u6b21\u70b9\u51fb\u5f00\u59cb\u65f6\u7684\u300c\u603b\u8d77\u59cb\u65f6\u95f4\u6233\u300d\uff0c\u518d\u51cf\u53bb\u4e4b\u524d\u6240\u6709\u6682\u505c\u65f6\u95f4\u6bb5\u7684\u300c\u603b\u6682\u505c\u65f6\u957f\u300d\uff09\uff0c\u54e6\u5bf9\uff0c\u8fd8\u8981\u52a0\u4e00\u4e2a\u300c\u6682\u505c\u8d77\u59cb\u65f6\u95f4\u6233\u300d\uff0c\u7528\u6765\u8ba1\u7b97\u6bcf\u6b21\u6682\u505c\u7684\u65f6\u957f\u3002<\/p>\n<p>\u597d,\u90a3\u6211\u4eec\u91cd\u65b0\u8c03\u6574\u4e00\u4e0b\u53d8\u91cf\uff1a<\/p>\n<ul>\n<li>\u628a\u539f\u6765\u7684\u300c\u7d2f\u8ba1\u65f6\u95f4\u300d\u6539\u6210\u8ba1\u7b97\u5c5e\u6027\uff0c\u7528\u65f6\u95f4\u6233\u5b9e\u65f6\u8ba1\u7b97\uff0c\u8fd9\u6837\u5c31\u4e0d\u9700\u8981\u624b\u52a8\u7d2f\u52a0\u4e86\uff0c\u4e5f\u66f4\u7cbe\u786e<\/li>\n<li>\u65b0\u589e\u300c\u603b\u8d77\u59cb\u65f6\u95f4\u6233\u300d\uff1a\u7b2c\u4e00\u6b21\u70b9\u51fb\u5f00\u59cb\u65f6\u7684\u65f6\u95f4\u6233<\/li>\n<li>\u65b0\u589e\u300c\u6682\u505c\u8d77\u59cb\u65f6\u95f4\u6233\u300d\uff1a\u6bcf\u6b21\u70b9\u51fb\u6682\u505c\u65f6\u7684\u65f6\u95f4\u6233<\/li>\n<li>\u65b0\u589e\u300c\u603b\u6682\u505c\u65f6\u957f\u300d\uff1a\u6240\u6709\u6682\u505c\u65f6\u95f4\u6bb5\u7684\u603b\u548c<\/li>\n<\/ul>\n<p>\u90a3\u5f00\u59cb\/\u6682\u505c\u7684\u903b\u8f91\u5c31\u53d8\u6210\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u8fd0\u884c\u72b6\u6001\uff0cfalse\u662f\u672a\u8fd0\u884c\/\u6682\u505c\uff0ctrue\u662f\u6b63\u5728\u8fd0\u884c\nconst isRunning = ref(false);\n\/\/ \u5b9a\u65f6\u5668ID\uff0cref\u5b58\u7684\u8bdd\u53ef\u4ee5\u8d4b\u503c\u4e3anull\uff0c\u65b9\u4fbf\u5224\u65ad\u6709\u6ca1\u6709\u542f\u52a8\nlet timerId = ref&lt;number | null&gt;(null);\n\/\/ \u603b\u8d77\u59cb\u65f6\u95f4\u6233\nconst totalStartTime = ref&lt;number&gt;(0);\n\/\/ \u6682\u505c\u8d77\u59cb\u65f6\u95f4\u6233\nconst pauseStartTime = ref&lt;number&gt;(0);\n\/\/ \u603b\u6682\u505c\u65f6\u957f\nconst totalPauseDuration = ref&lt;number&gt;(0);\n\/\/ \u8ba1\u7b97\u603b\u65f6\u95f4\uff0c\u5355\u4f4d\u6beb\u79d2\nconst totalTime = computed(() =&gt; {\n  if (!isRunning.value) {\n    \/\/ \u672a\u8fd0\u884c\u7684\u8bdd\uff0c\u5c31\u662f\u603b\u6682\u505c\u524d\u7684\u7d2f\u8ba1\u65f6\u95f4\n    return pauseStartTime.value ? pauseStartTime.value - totalStartTime.value - totalPauseDuration.value : 0;\n  } else {\n    \/\/ \u6b63\u5728\u8fd0\u884c\u7684\u8bdd\uff0c\u5c31\u662f\u5f53\u524d\u65f6\u95f4\u6233\u51cf\u53bb\u603b\u8d77\u59cb\u65f6\u95f4\u6233\u518d\u51cf\u53bb\u603b\u6682\u505c\u65f6\u957f\n    return Date.now() - totalStartTime.value - totalPauseDuration.value;\n  }\n});\n\/\/ \u5f00\u59cb\/\u6682\u505c\u51fd\u6570\nconst toggleRunning = () =&gt; {\n  if (isRunning.value) {\n    \/\/ \u6b63\u5728\u8fd0\u884c\uff0c\u70b9\u51fb\u6682\u505c\n    pauseStartTime.value = Date.now();\n    if (timerId.value) {\n      clearInterval(timerId.value);\n      timerId.value = null;\n    }\n  } else {\n    \/\/ \u672a\u8fd0\u884c\uff0c\u70b9\u51fb\u5f00\u59cb\n    if (totalStartTime.value === 0) {\n      \/\/ \u521d\u59cb\u72b6\u6001\uff0c\u7b2c\u4e00\u6b21\u70b9\u51fb\u5f00\u59cb\n      totalStartTime.value = Date.now();\n    } else {\n      \/\/ \u6682\u505c\u540e\u518d\u6b21\u5f00\u59cb\uff0c\u628a\u672c\u6b21\u6682\u505c\u7684\u65f6\u957f\u52a0\u5230\u603b\u6682\u505c\u65f6\u957f\u91cc\n      totalPauseDuration.value += Date.now() - pauseStartTime.value;\n    }\n    \/\/ \u542f\u52a8\u5b9a\u65f6\u5668\uff0c\u8fd9\u91cc\u768410\u6beb\u79d2\u53ea\u662f\u4e3a\u4e86\u5237\u65b0\u663e\u793a\uff0c\u4e0d\u662f\u7528\u6765\u7d2f\u52a0\u65f6\u95f4\u7684\n    timerId.value = window.setInterval(() =&gt; {\n      \/\/ \u5176\u5b9e\u8fd9\u91cc\u4e0d\u7528\u505a\u4efb\u4f55\u4e8b\uff0c\u56e0\u4e3atotalTime\u662f\u8ba1\u7b97\u5c5e\u6027\uff0c\u4f1a\u81ea\u52a8\u54cd\u5e94\u5f0f\u66f4\u65b0\n      \/\/ \u4e0d\u8fc7\u6709\u7684\u65f6\u5019\u6d4f\u89c8\u5668\u6e32\u67d3\u53ef\u80fd\u6709\u5ef6\u8fdf\uff0c\u52a0\u4e2a\u7a7a\u51fd\u6570\u89e6\u53d1\u4e00\u4e0b\u4e5f\u6ca1\u5173\u7cfb\n    }, 10);\n  }\n  \/\/ \u5207\u6362\u8fd0\u884c\u72b6\u6001\n  isRunning.value = !isRunning.value;\n};<\/pre>\n<p>\u4f60\u770b,\u8fd9\u6837\u5199\u7684\u8bdd\uff0c\u4e0d\u7ba1\u4e3b\u7ebf\u7a0b\u5361\u4e0d\u5361\uff0c\u7d2f\u8ba1\u65f6\u95f4\u90fd\u662f\u901a\u8fc7\u65f6\u95f4\u6233\u5b9e\u65f6\u7b97\u7684\uff0c\u7edd\u5bf9\u4e0d\u4f1a\u51fa\u73b0\u8df3\u79d2\u7684\u95ee\u9898\uff0c\u7cbe\u786e\u6027\u6709\u4fdd\u969c\u3002<\/p>\n<h4>\u590d\u4f4d<\/h4>\n<p>\u590d\u4f4d\u7684\u903b\u8f91\u5c31\u7b80\u5355\u591a\u4e86\uff1a\u4e0d\u7ba1\u73b0\u5728\u662f\u8fd0\u884c\u8fd8\u662f\u6682\u505c\uff0c\u90fd\u5148\u6e05\u9664\u5b9a\u65f6\u5668\uff0c\u7136\u540e\u628a\u6240\u6709\u7684\u53d8\u91cf\u90fd\u91cd\u7f6e\u6210\u521d\u59cb\u72b6\u6001\uff0c\u5305\u62ec\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u3002<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\nconst splitTimes = ref&lt;{ id: number; time: number; splitTime: number }[]&gt;([]);\n\/\/ \u4e0a\u4e00\u6b21\u5206\u6bb5\u7684\u603b\u65f6\u95f4\uff0c\u7528\u6765\u8ba1\u7b97\u672c\u6b21\u5206\u6bb5\u7684\u65f6\u95f4\nconst lastSplitTotalTime = ref&lt;number&gt;(0);\n\/\/ \u590d\u4f4d\u51fd\u6570\nconst resetStopwatch = () =&gt; {\n  if (timerId.value) {\n    clearInterval(timerId.value);\n    timerId.value = null;\n  }\n  isRunning.value = false;\n  totalStartTime.value = 0;\n  pauseStartTime.value = 0;\n  totalPauseDuration.value = 0;\n  splitTimes.value = [];\n  lastSplitTotalTime.value = 0;\n};<\/pre>\n<h4>\u8bb0\u5f55\u5206\u6bb5\u65f6\u95f4<\/h4>\n<p>\u5206\u6bb5\u65f6\u95f4\u7684\u903b\u8f91\u662f\uff1a\u6bcf\u6b21\u70b9\u51fb\u300c\u5206\u6bb5\u300d\u7684\u65f6\u5019\uff0c\u628a\u5f53\u524d\u7684\u603b\u65f6\u95f4\u5b58\u4e0b\u6765\uff0c\u518d\u51cf\u53bb\u4e0a\u4e00\u6b21\u5206\u6bb5\u7684\u603b\u65f6\u95f4\uff0c\u5f97\u5230\u672c\u6b21\u7684\u5206\u6bb5\u65f6\u95f4\uff0c\u7136\u540e\u4e00\u8d77push\u5230\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u91cc\uff0c\u6570\u7ec4\u7684id\u53ef\u4ee5\u7528\u6570\u7ec4\u7684length+1\uff0c\u7b80\u5355\u65b9\u4fbf\uff0c\u4e0d\u9700\u8981\u989d\u5916\u751f\u6210\u552f\u4e00ID\u3002<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u8bb0\u5f55\u5206\u6bb5\u65f6\u95f4\u51fd\u6570\nconst recordSplitTime = () =&gt; {\n  const currentTotal = totalTime.value;\n  const currentSplit = currentTotal - lastSplitTotalTime.value;\n  splitTimes.value.push({\n    id: splitTimes.value.length + 1,\n    time: currentTotal,\n    splitTime: currentSplit\n  });\n  \/\/ \u66f4\u65b0\u4e0a\u4e00\u6b21\u5206\u6bb5\u7684\u603b\u65f6\u95f4\n  lastSplitTotalTime.value = currentTotal;\n};<\/pre>\n<h4>\u65f6\u95f4\u683c\u5f0f\u5316<\/h4>\n<p>\u628a\u6beb\u79d2\u6570\u8f6c\u6210\u300cHH:mm:ss:SS\u300d\u6216\u8005\u300cmm:ss:SS\u300d\u8fd9\u6837\u7684\u683c\u5f0f\uff0c\u80af\u5b9a\u662f\u8981\u5199\u4e00\u4e2a\u5de5\u5177\u51fd\u6570\u7684\uff0c\u8fd9\u91cc\u8981\u6ce8\u610f\u8865\u96f6\uff0c\u6bd4\u5982\u5c0f\u65f6\u53ea\u67091\u7684\u8bdd\uff0c\u8981\u663e\u793a\u6210\u300c01\u300d\uff0c\u6beb\u79d2\u53ea\u67095\u7684\u8bdd\uff0c\u8981\u663e\u793a\u6210\u300c005\u300d\uff1f\u4e0d\u5bf9\uff0c\u4e00\u822c\u79d2\u8868\u7684\u6beb\u79d2\u662f\u663e\u793a\u4e24\u4f4d\u7684\uff0c\u4ee3\u886810\u6beb\u79d2\u7684\u7cbe\u5ea6\uff0c\u4e09\u4f4d\u7684\u8bdd\u4e5f\u53ef\u4ee5\uff0c\u4f46\u4e24\u4f4d\u7684\u8bdd\u7528\u6237\u770b\u8d77\u6765\u66f4\u8212\u670d\uff0c\u4e5f\u4e0d\u4f1a\u592a\u4e71\u3002<\/p>\n<p>\u90a3\u4e24\u4f4d\u6beb\u79d2\u7684\u683c\u5f0f\u5316\u51fd\u6570\u600e\u4e48\u5199\uff1f<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u65f6\u95f4\u683c\u5f0f\u5316\u5de5\u5177\u51fd\u6570\uff0c\u8f93\u5165\u6beb\u79d2\uff0c\u8f93\u51faHH:mm:ss:SS\u6216\u8005mm:ss:SS\nconst formatTime = (ms: number) =&gt; {\n  \/\/ \u5148\u53d6\u6574\uff0c\u907f\u514d\u5c0f\u6570\n  const totalMs = Math.floor(ms);\n  \/\/ \u8ba1\u7b97\u5c0f\u65f6\u3001\u5206\u949f\u3001\u79d2\u3001\u6beb\u79d2\uff08\u4e24\u4f4d\uff09\n  const hours = Math.floor(totalMs \/ 3600000);\n  const minutes = Math.floor((totalMs % 3600000) \/ 60000);\n  const seconds = Math.floor((totalMs % 60000) \/ 1000);\n  const milliseconds = Math.floor((totalMs % 1000) \/ 10);\n  \/\/ \u8865\u96f6\u51fd\u6570\uff0c\u5355\u72ec\u63d0\u51fa\u6765\uff0c\u590d\u7528\u6027\u66f4\u9ad8\n  const padZero = (num: number) =&gt; num.toString().padStart(2, &#39;0&#39;);\n  \/\/ \u5982\u679c\u5c0f\u65f6\u5927\u4e8e0\uff0c\u5c31\u663e\u793a\u5c0f\u65f6\uff0c\u5426\u5219\u4e0d\u663e\u793a\n  return hours &gt; 0 \n    ? `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}:${padZero(milliseconds)}`\n    : `${padZero(minutes)}:${padZero(seconds)}:${padZero(milliseconds)}`;\n};<\/pre>\n<p>\u8fd9\u4e2a\u5de5\u5177\u51fd\u6570\u4e0d\u7ba1\u662f\u603b\u65f6\u95f4\u8fd8\u662f\u5206\u6bb5\u65f6\u95f4\u90fd\u80fd\u7528,\u975e\u5e38\u65b9\u4fbf\u3002<\/p>\n<h4>\u7ec4\u4ef6\u6a21\u677f<\/h4>\n<p>\u6700\u540e\u5c31\u662f\u628a\u8fd9\u4e9b\u903b\u8f91\u548c\u6570\u636e\u7528\u5230\u6a21\u677f\u91cc\u4e86,\u6a21\u677f\u91cc\u8981\u6ce8\u610f\u54cd\u5e94\u5f0f\u7ed1\u5b9a\uff0c\u6309\u94ae\u7684\u6587\u5b57\u8981\u6839\u636e\u8fd0\u884c\u72b6\u6001\u5207\u6362\uff0c\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u8981\u5012\u5e8f\u663e\u793a\uff08\u56e0\u4e3a\u6700\u65b0\u7684\u5206\u6bb5\u65f6\u95f4\u4e00\u822c\u90fd\u662f\u7528\u6237\u6700\u5173\u5fc3\u7684\uff0c\u653e\u5728\u6700\u4e0a\u9762\uff09\uff0c\u8fd8\u8981\u52a0\u4e00\u70b9\u7b80\u5355\u7684\u6837\u5f0f\uff0c\u4e0d\u7136\u592a\u4e11\u4e86\u3002<\/p>\n<p>\u7b80\u5355\u7684\u6a21\u677f\u548c\u6837\u5f0f\u5927\u6982\u957f\u8fd9\u6837\uff1a<\/p>\n<pre class=\"brush:html;toolbar:false\">&lt;template&gt;\n  &lt;div class=&quot;stopwatch-container&quot;&gt;\n    &lt;!-- \u663e\u793a\u603b\u65f6\u95f4 --&gt;\n    &lt;div class=&quot;total-time&quot;&gt;{{ formatTime(totalTime) }}&lt;\/div&gt;\n    &lt;!-- \u63a7\u5236\u6309\u94ae\u7ec4 --&gt;\n    &lt;div class=&quot;control-buttons&quot;&gt;\n      &lt;button @click=&quot;resetStopwatch&quot; class=&quot;reset-button&quot;&gt;\u590d\u4f4d&lt;\/button&gt;\n      &lt;button @click=&quot;toggleRunning&quot; class=&quot;toggle-button&quot;&gt;\n        {{ isRunning ? &#39;\u6682\u505c&#39; : &#39;\u5f00\u59cb&#39; }}\n      &lt;\/button&gt;\n      &lt;button @click=&quot;recordSplitTime&quot; class=&quot;split-button&quot; :disabled=&quot;!isRunning &amp;&amp; totalTime === 0&quot;&gt;\n        \u5206\u6bb5\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;!-- \u663e\u793a\u5206\u6bb5\u65f6\u95f4 --&gt;\n    &lt;div class=&quot;split-times&quot; v-if=&quot;splitTimes.length &gt; 0&quot;&gt;\n      &lt;div class=&quot;split-header&quot;&gt;\n        &lt;span&gt;\u5206\u6bb5&lt;\/span&gt;\n        &lt;span&gt;\u5206\u6bb5\u65f6\u95f4&lt;\/span&gt;\n        &lt;span&gt;\u7d2f\u8ba1\u65f6\u95f4&lt;\/span&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;split-list&quot;&gt;\n        &lt;div v-for=&quot;item in splitTimes.slice().reverse()&quot; :key=&quot;item.id&quot; class=&quot;split-item&quot;&gt;\n          &lt;span&gt;{{ item.id }}&lt;\/span&gt;\n          &lt;span&gt;{{ formatTime(item.splitTime) }}&lt;\/span&gt;\n          &lt;span&gt;{{ formatTime(item.time) }}&lt;\/span&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;style scoped&gt;\n.stopwatch-container {\n  max-width: 400px;\n  margin: 50px auto;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n  text-align: center;\n}\n.total-time {\n  font-size: 60px;\n  font-family: &#39;Courier New&#39;, Courier, monospace;\n  margin-bottom: 30px;\n  color: #333;\n}\n.control-buttons {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 30px;\n}\n.control-buttons button {\n  padding: 12px 24px;\n  border: none;\n  border-radius: 5px;\n  font-size: 16px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n.reset-button {\n  background-color: #f0f0f0;\n  color: #333;\n}\n.reset-button:hover {\n  background-color: #e0e0e0;\n}\n.toggle-button {\n  background-color: #4CAF50;\n  color: white;\n}\n.toggle-button:hover {\n  background-color: #45a049;\n}\n.toggle-button.paused {\n  background-color: #ff9800;\n}\n.toggle-button.paused:hover {\n  background-color: #e68900;\n}\n.split-button {\n  background-color: #2196F3;\n  color: white;\n}\n.split-button:hover:not(:disabled) {\n  background-color: #0b7dda;\n}\n.split-button:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n}\n.split-header,\n.split-item {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  border-bottom: 1px solid #f0f0f0;\n  font-family: &#39;Courier New&#39;, Courier, monospace;\n}\n.split-header {\n  font-weight: bold;\n  color: #666;\n  border-top: 1px solid #f0f0f0;\n}\n.split-item:last-child {\n  border-bottom: none;\n}\n&lt;\/style&gt;<\/pre>\n<p>\u54e6\u5bf9,\u521a\u624d\u7684toggle-button\u8fd8\u53ef\u4ee5\u52a0\u4e00\u4e2a\u52a8\u6001\u7c7b\u540d\uff0c\u6682\u505c\u7684\u65f6\u5019\u663e\u793a\u6a59\u8272\uff0c\u66f4\u76f4\u89c2\uff1a<\/p>\n<pre class=\"brush:html;toolbar:false\">&lt;button @click=&quot;toggleRunning&quot; class=&quot;toggle-button&quot; :class=&quot;{ paused: !isRunning &amp;&amp; totalTime &gt; 0 }&quot;&gt;<\/pre>\n<p>\u8fd9\u6837\u5c31\u66f4\u5b8c\u5584\u4e86\u3002<\/p>\n<h2>\u8fdb\u9636\u4f18\u5316\uff1a\u7ed9\u79d2\u8868\u52a0\u4e00\u70b9\u6269\u5c55\u6027<\/h2>\n<p>\u521a\u624d\u7684\u57fa\u7840\u7248\u672c\u5df2\u7ecf\u80fd\u6ee1\u8db3\u5927\u90e8\u5206\u9700\u6c42\u4e86,\u4f46\u5982\u679c\u8981\u7528\u5230\u5b9e\u9645\u9879\u76ee\u91cc\uff0c\u53ef\u80fd\u8fd8\u9700\u8981\u52a0\u4e00\u70b9\u6269\u5c55\u6027\uff0c<\/p>\n<ol>\n<li>\u652f\u6301\u5207\u6362\u6beb\u79d2\u663e\u793a\u7684\u4f4d\u6570\uff08\u4e24\u4f4d\/\u4e09\u4f4d\uff09<\/li>\n<li>\u652f\u6301\u4fdd\u5b58\u5206\u6bb5\u65f6\u95f4\u5230\u672c\u5730\u5b58\u50a8,\u5237\u65b0\u9875\u9762\u540e\u4e0d\u4f1a\u4e22\u5931<\/li>\n<li>\u652f\u6301\u5207\u6362\u4e3b\u9898\uff08\u6d45\u8272\/\u6df1\u8272\uff09<\/li>\n<li>\u5c01\u88c5\u6210\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u7ec4\u4ef6,\u652f\u6301\u901a\u8fc7props\u4f20\u53c2\u63a7\u5236\u529f\u80fd<\/li>\n<\/ol>\n<p>\u6211\u4eec\u6311\u4e24\u4e2a\u6bd4\u8f83\u5b9e\u7528\u7684\u6765\u804a\u804a\uff1a\u652f\u6301\u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\uff0c\u548c\u5c01\u88c5\u6210\u53ef\u590d\u7528\u7ec4\u4ef6\u3002<\/p>\n<h3>\u652f\u6301\u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8<\/h3>\n<p>\u672c\u5730\u5b58\u50a8\uff08localStorage\uff09\u662f\u524d\u7aef\u6700\u5e38\u7528\u7684\u6301\u4e45\u5316\u5b58\u50a8\u65b9\u5f0f\u4e4b\u4e00\uff0c\u5bb9\u91cf\u5927\u6982\u67095MB\uff0c\u8db3\u591f\u5b58\u79d2\u8868\u7684\u5206\u6bb5\u65f6\u95f4\u548c\u8fd0\u884c\u72b6\u6001\u4e86\u3002<\/p>\n<p>\u6211\u4eec\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\u91cc\u505a\u8fd9\u4ef6\u4e8b\uff1a<\/p>\n<ul>\n<li><strong>onMounted<\/strong>\uff1a\u7ec4\u4ef6\u6302\u8f7d\u7684\u65f6\u5019\uff0c\u4ecelocalStorage\u91cc\u8bfb\u53d6\u4e4b\u524d\u4fdd\u5b58\u7684\u6570\u636e\uff0c\u5982\u679c\u6709\u7684\u8bdd\uff0c\u5c31\u8d4b\u503c\u7ed9\u5bf9\u5e94\u7684\u53d8\u91cf<\/li>\n<li><strong>watch<\/strong>\uff1a\u76d1\u542c\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u3001\u8fd0\u884c\u72b6\u6001\u3001\u603b\u8d77\u59cb\u65f6\u95f4\u6233\u3001\u6682\u505c\u8d77\u59cb\u65f6\u95f4\u6233\u3001\u603b\u6682\u505c\u65f6\u957f\u3001\u4e0a\u4e00\u6b21\u5206\u6bb5\u7684\u603b\u65f6\u95f4\u8fd9\u4e9b\u53d8\u91cf\u7684\u53d8\u5316\uff0c\u4e00\u65e6\u53d8\u5316\uff0c\u5c31\u4fdd\u5b58\u5230localStorage\u91cc<\/li>\n<\/ul>\n<p>\u4e0d\u8fc7\u8fd9\u91cc\u8981\u6ce8\u610f,localStorage\u53ea\u80fd\u5b58\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u5b58\u7684\u65f6\u5019\u8981\u5148\u7528JSON.stringify\u8f6c\u6210\u5b57\u7b26\u4e32\uff0c\u53d6\u7684\u65f6\u5019\u8981\u7528JSON.parse\u8f6c\u56de\u6765\uff0c\u8fd8\u8981\u6ce8\u610fJSON.parse\u53ef\u80fd\u4f1a\u62a5\u9519\uff0c\u6240\u4ee5\u6700\u597d\u52a0\u4e00\u4e2atry-catch\u5757\u3002<\/p>\n<p>\u90a3\u5177\u4f53\u600e\u4e48\u5199\u5462\uff1f\n\u6211\u4eec\u8981\u7ed9localStorage\u7684\u952e\u540d\u8d77\u4e00\u4e2a\u89c4\u8303\u7684\u540d\u5b57\uff0c\u6bd4\u5982<code>vue3-stopwatch-data<\/code>\uff0c\u907f\u514d\u548c\u5176\u4ed6\u7f51\u7ad9\u7684\u952e\u540d\u51b2\u7a81\u3002\n\u6211\u4eec\u53ef\u4ee5\u628a\u8bfb\u53d6\u548c\u4fdd\u5b58\u7684\u903b\u8f91\u5c01\u88c5\u6210\u4e24\u4e2a\u5c0f\u51fd\u6570\uff0c\u590d\u7528\u6027\u66f4\u9ad8\u3002\n\u76d1\u542c\u53d8\u91cf\u7684\u65f6\u5019\uff0c\u8981\u7528<code>deep: true<\/code>\uff0c\u56e0\u4e3a\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u53ea\u6709\u76d1\u542c\u6df1\u5c42\u53d8\u5316\u624d\u80fd\u89e6\u53d1\u4fdd\u5b58\u3002<\/p>\n<p>\u5177\u4f53\u7684\u4ee3\u7801\u5927\u6982\u957f\u8fd9\u6837\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, computed, onMounted, watch } from &#39;vue&#39;;\n\/\/ localStorage\u7684\u952e\u540d\nconst STORAGE_KEY = &#39;vue3-stopwatch-data&#39;;\n\/\/ \u4ecelocalStorage\u8bfb\u53d6\u6570\u636e\u7684\u51fd\u6570\nconst loadFromStorage = () =&gt; {\n  try {\n    const data = localStorage.getItem(STORAGE_KEY);\n    return data ? JSON.parse(data) : null;\n  } catch (error) {\n    console.error(&#39;\u8bfb\u53d6\u672c\u5730\u5b58\u50a8\u5931\u8d25:&#39;, error);\n    return null;\n  }\n};\n\/\/ \u4fdd\u5b58\u6570\u636e\u5230localStorage\u7684\u51fd\u6570\nconst saveToStorage = (data: any) =&gt; {\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n  } catch (error) {\n    console.error(&#39;\u4fdd\u5b58\u672c\u5730\u5b58\u50a8\u5931\u8d25:&#39;, error);\n  }\n};\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u65f6\u8bfb\u53d6\u6570\u636e\nonMounted(() =&gt; {\n  const savedData = loadFromStorage();\n  if (savedData) {\n    isRunning.value = savedData.isRunning || false;\n    totalStartTime.value = savedData.totalStartTime || 0;\n    pauseStartTime.value = savedData.pauseStartTime || 0;\n    totalPauseDuration.value = savedData.totalPauseDuration || 0;\n    splitTimes.value = savedData.splitTimes || [];\n    lastSplitTotalTime.value = savedData.lastSplitTotalTime || 0;\n    \/\/ \u5982\u679c\u4e4b\u524d\u662f\u8fd0\u884c\u72b6\u6001\uff0c\u73b0\u5728\u7ec4\u4ef6\u6302\u8f7d\u4e86\uff0c\u8981\u91cd\u65b0\u542f\u52a8\u5b9a\u65f6\u5668\n    if (isRunning.value) {\n      timerId.value = window.setInterval(() =&gt; {}, 10);\n    }\n  }\n});\n\/\/ \u76d1\u542c\u53d8\u91cf\u53d8\u5316\uff0c\u4fdd\u5b58\u5230localStorage\nwatch(\n  [isRunning, totalStartTime, pauseStartTime, totalPauseDuration, splitTimes, lastSplitTotalTime],\n  () =&gt; {\n    saveToStorage({\n      isRunning: isRunning.value,\n      totalStartTime: totalStartTime.value,\n      pauseStartTime: pauseStartTime.value,\n      totalPauseDuration: totalPauseDuration.value,\n      splitTimes: splitTimes.value,\n      lastSplitTotalTime: lastSplitTotalTime.value\n    });\n  },\n  { deep: true }\n);<\/pre>\n<p>\u8fd9\u6837\u7684\u8bdd,\u4e0d\u7ba1\u4f60\u662f\u5237\u65b0\u9875\u9762\u8fd8\u662f\u5173\u95ed\u6d4f\u89c8\u5668\u518d\u6253\u5f00\uff0c\u4e4b\u524d\u7684\u5206\u6bb5\u65f6\u95f4\u548c\u8fd0\u884c\u72b6\u6001\u90fd\u4f1a\u4fdd\u7559\u4e0b\u6765\uff0c\u975e\u5e38\u5b9e\u7528\u3002<\/p>\n<h3>\u5c01\u88c5\u6210\u53ef\u590d\u7528\u7684\u7ec4\u4ef6<\/h3>\n<p>\u5982\u679c\u8981\u5728\u591a\u4e2a\u9875\u9762\u6216\u8005\u591a\u4e2a\u9879\u76ee\u91cc\u7528\u5230\u8fd9\u4e2a\u79d2\u8868,\u6700\u597d\u628a\u5b83\u5c01\u88c5\u6210\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\uff0c\u652f\u6301\u901a\u8fc7props\u4f20\u53c2\u63a7\u5236\u529f\u80fd\uff0c<\/p>\n<ul>\n<li><code>showMilliseconds<\/code>\uff1a\u662f\u5426\u663e\u793a\u6beb\u79d2\uff0c\u9ed8\u8ba4true<\/li>\n<li><code>millisecondsDigits<\/code>\uff1a\u6beb\u79d2\u663e\u793a\u7684\u4f4d\u6570\uff0c\u9ed8\u8ba42<\/li>\n<li><code>enableSplit<\/code>\uff1a\u662f\u5426\u542f\u7528\u5206\u6bb5\u529f\u80fd\uff0c\u9ed8\u8ba4true<\/li>\n<li><code>enableReset<\/code>\uff1a\u662f\u5426\u542f\u7528\u590d\u4f4d\u529f\u80fd\uff0c\u9ed8\u8ba4true<\/li>\n<li><code>autoSave<\/code>\uff1a\u662f\u5426\u81ea\u52a8\u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\uff0c\u9ed8\u8ba4true<\/li>\n<li><code>storageKey<\/code>\uff1a\u672c\u5730\u5b58\u50a8\u7684\u952e\u540d\uff0c\u9ed8\u8ba4<code>vue3-stopwatch-data<\/code><\/li>\n<\/ul>\n<p>\u8fd8\u8981\u652f\u6301\u901a\u8fc7emit\u4e8b\u4ef6\u628a\u603b\u65f6\u95f4\u3001\u5206\u6bb5\u65f6\u95f4\u6570\u7ec4\u3001\u8fd0\u884c\u72b6\u6001\u8fd9\u4e9b\u6570\u636e\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u65b9\u4fbf\u7236\u7ec4\u4ef6\u505a\u8fdb\u4e00\u6b65\u7684\u5904\u7406\uff0c\u6bd4\u5982\u4fdd\u5b58\u5230\u540e\u7aef\u6570\u636e\u5e93\uff0c\u6216\u8005\u5206\u4eab\u7ed9\u5176\u4ed6\u7528\u6237\u3002<\/p>\n<p>\u5c01\u88c5\u7684\u6b65\u9aa4\u5927\u6982\u662f\uff1a<\/p>\n<ol>\n<li>\u628a\u521a\u624d\u7684\u903b\u8f91\u548c\u6a21\u677f\u90fd\u653e\u5230\u4e00\u4e2a\u5355\u72ec\u7684.vue\u6587\u4ef6\u91cc\uff0c\u6bd4\u5982<code>Stopwatch.vue<\/code><\/li>\n<li>\u5b9a\u4e49props,\u8bbe\u7f6e\u9ed8\u8ba4\u503c<\/li>\n<li>\u5b9a\u4e49emit\u4e8b\u4ef6<\/li>\n<li>\u6839\u636eprops\u63a7\u5236\u7ec4\u4ef6\u7684\u663e\u793a\u548c\u529f\u80fd,\u6bd4\u5982\u5982\u679c<code>enableSplit<\/code>\u662ffalse\uff0c\u5c31\u9690\u85cf\u5206\u6bb5\u6309\u94ae<\/li>\n<li>\u5728\u9002\u5f53\u7684\u65f6\u673a\u89e6\u53d1emit\u4e8b\u4ef6,\u6bd4\u5982\u70b9\u51fb\u5f00\u59cb\/\u6682\u505c\u3001\u70b9\u51fb\u590d\u4f4d\u3001\u70b9\u51fb\u5206\u6bb5\u7684\u65f6\u5019<\/li>\n<\/ol>\n<p>\u5c01\u88c5\u597d\u4e4b\u540e,\u5728\u7236\u7ec4\u4ef6\u91cc\u5c31\u53ef\u4ee5\u8fd9\u6837\u7528\u4e86\uff1a<\/p>\n<pre class=\"brush:html;toolbar:false\">&lt;template&gt;\n  &lt;div class=&quot;parent-container&quot;&gt;\n    &lt;h1&gt;\u6211\u7684\u8fd0\u52a8\u79d2\u8868&lt;\/h1&gt;\n    &lt;Stopwatch\n      :milliseconds-digits=&quot;3&quot;\n      :auto-save=&quot;true&quot;\n      @update:total-time=&quot;handleTotalTimeUpdate&quot;\n      @update:split-times=&quot;handleSplitTimesUpdate&quot;\n    \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script setup&gt;\nimport Stopwatch from &#39;.\/components\/Stopwatch.vue&#39;;\nconst handleTotalTimeUpdate = (time) =&gt; {\n  console.log(&#39;\u603b\u65f6\u95f4\u66f4\u65b0\u4e86:&#39;, time);\n  \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u8fdb\u4e00\u6b65\u7684\u5904\u7406\uff0c\u6bd4\u5982\u4fdd\u5b58\u5230\u540e\u7aef\n};\nconst handleSplitTimesUpdate = (times) =&gt; {\n  console.log(&#39;\u5206\u6bb5\u65f6\u95f4\u66f4\u65b0\u4e86:&#39;, times);\n  \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u8fdb\u4e00\u6b65\u7684\u5904\u7406\uff0c\u6bd4\u5982\u5c55\u793a\u56fe\u8868\n};\n&lt;\/script&gt;<\/pre>\n<p>\u8fd9\u6837\u5c01\u88c5\u4e4b\u540e,\u7ec4\u4ef6\u7684\u590d\u7528\u6027\u5c31\u5927\u5927\u63d0\u9ad8\u4e86\uff0c\u4e0d\u7ba1\u5728\u54ea\u4e2a\u9879\u76ee\u91cc\uff0c\u53ea\u8981\u5f15\u5165\u8fd9\u4e2a\u7ec4\u4ef6\uff0c\u4f20\u51e0\u4e2aprops\u5c31\u80fd\u7528\u3002<\/p>\n<h2>\u5e38\u89c1\u95ee\u9898\u89e3\u7b54<\/h2>\n<h3>\u4e3a\u4ec0\u4e48\u6211\u7684\u79d2\u8868\u6682\u505c\u540e\u518d\u6b21\u5f00\u542f\u4f1a\u8df3\u79d2\uff1f<\/h3>\n<p>\u521a\u624d\u5728\u57fa\u7840\u7248\u672c\u91cc\u5df2\u7ecf\u63d0\u5230\u8fc7\u8fd9\u4e2a\u95ee\u9898,\u4e3b\u8981\u539f\u56e0\u662f\u4f60\u7528\u4e86setInterval\u76f4\u63a5\u7d2f\u52a0\u65f6\u95f4\uff0c\u800c\u4e0d\u662f\u7528\u65f6\u95f4\u6233\u5b9e\u65f6\u8ba1\u7b97\uff0c\u89e3\u51b3\u65b9\u6cd5\u5c31\u662f\u628a\u7d2f\u8ba1\u65f6\u95f4\u6539\u6210\u8ba1\u7b97\u5c5e\u6027\uff0c\u7528\u65f6\u95f4\u6233\u6765\u8ba1\u7b97\uff0c\u540c\u65f6\u8bb0\u5f55\u603b\u6682\u505c\u65f6\u957f\uff0c\u8fd9\u6837\u5c31\u80fd\u907f\u514d\u8df3\u79d2\u7684\u95ee\u9898\u4e86\u3002<\/p>\n<h3>\u4e3a\u4ec0\u4e48\u6211\u7684\u79d2\u8868\u7cbe\u786e\u5230\u6beb\u79d2\u65f6\u4f1a\u6296\u52a8\uff1f<\/h3>\n<p>\u6296\u52a8\u7684\u539f\u56e0\u4e3b\u8981\u6709\u4e24\u4e2a\uff1a<\/p>\n<ul>\n<li>\u4e00\u662f\u4f60\u7528\u4e86setInterval\u76f4\u63a5\u7d2f\u52a0\u65f6\u95f4,\u5bfc\u81f4\u65f6\u95f4\u66f4\u65b0\u4e0d\u5747\u5300<\/li>\n<li>\u4e8c\u662f\u4f60\u7528\u4e86\u5b57\u4f53\u4e0d\u662f\u7b49\u5bbd\u5b57\u4f53,\u6bd4\u5982\u5b8b\u4f53\u3001\u9ed1\u4f53\uff0c\u6570\u5b57\u7684\u5bbd\u5ea6\u4e0d\u4e00\u6837\uff0c\u5bfc\u81f4\u66f4\u65b0\u7684\u65f6\u5019\u6587\u5b57\u5de6\u53f3\u6643\u52a8<\/li>\n<\/ul>\n<p>\u89e3\u51b3\u65b9\u6cd5\u4e5f\u5f88\u7b80\u5355\uff1a<\/p>\n<ul>\n<li>\u7528\u65f6\u95f4\u6233\u5b9e\u65f6\u8ba1\u7b97\u65f6\u95f4,\u907f\u514d\u76f4\u63a5\u7d2f\u52a0<\/li>\n<li>\u7528\u7b49\u5bbd\u5b57\u4f53,Courier New', Courier, monospace\uff0c\u8fd9\u6837\u6570\u5b57\u7684\u5bbd\u5ea6\u90fd\u662f\u4e00\u6837\u7684\uff0c\u5c31\u4e0d\u4f1a\u6296\u52a8\u4e86<\/li>\n<\/ul>\n<h3>\u4e3a\u4ec0\u4e48\u6211\u7684\u79d2\u8868\u4f1a\u51fa\u73b0\u5185\u5b58\u6cc4\u6f0f\uff1f<\/h3>\n<p>\u5185\u5b58\u6cc4\u6f0f\u7684\u539f\u56e0\u4e3b\u8981\u662f\u4f60\u5728\u7ec4\u4ef6\u5378\u8f7d\u7684\u65f6\u5019\u6ca1\u6709\u6e05\u9664\u5b9a\u65f6\u5668,\u5bfc\u81f4\u5b9a\u65f6\u5668\u4e00\u76f4\u5728\u540e\u53f0\u8fd0\u884c\uff0c\u5360\u7528\u5185\u5b58\uff0c\u89e3\u51b3\u65b9\u6cd5\u5c31\u662f\u5728\u7ec4\u4ef6\u7684onUnmounted\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\u91cc\u6e05\u9664\u5b9a\u65f6\u5668\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { onUnmounted } from &#39;vue&#39;;\nonUnmounted(() =&gt; {\n  if (timerId.value) {\n    clearInterval(timerId.value);\n    timerId.value = null;\n  }\n});<\/pre>\n<h3>\u4e3a\u4ec0\u4e48\u6211\u7684\u79d2\u8868\u5237\u65b0\u9875\u9762\u540e\u6570\u636e\u4f1a\u4e22\u5931\uff1f<\/h3>\n<p>\u5237\u65b0\u9875\u9762\u540e\u6570\u636e\u4e22\u5931\u662f\u56e0\u4e3a\u4f60\u6ca1\u6709\u628a\u6570\u636e\u4fdd\u5b58\u5230\u6301\u4e45\u5316\u5b58\u50a8\u91cc,\u6bd4\u5982localStorage\u3001sessionStorage\u6216\u8005\u540e\u7aef\u6570\u636e\u5e93\uff0c\u521a\u624d\u5728\u8fdb\u9636\u4f18\u5316\u91cc\u5df2\u7ecf\u8bb2\u8fc7\u600e\u4e48\u4fdd\u5b58\u5230localStorage\u4e86\uff0c\u5982\u679c\u4f60\u9700\u8981\u66f4\u957f\u671f\u7684\u4fdd\u5b58\u6216\u8005\u591a\u8bbe\u5907\u540c\u6b65\uff0c\u53ef\u4ee5\u4fdd\u5b58\u5230\u540e\u7aef\u6570\u636e\u5e93\u3002<\/p>\n<p>\u4eca\u5929\u54b1\u4eec\u4ece\u96f6\u5f00\u59cb\u5199\u4e86\u4e00\u4e2a\u65e2\u597d\u7528\u53c8\u6709\u6269\u5c55\u6027\u7684Vue3\u79d2\u8868,\u89e3\u51b3\u4e86\u65b0\u624b\u5e38\u9047\u5230\u7684\u8df3\u79d2\u3001\u6296\u52a8\u3001\u5185\u5b58\u6cc4\u6f0f\u3001\u6570\u636e\u4e22\u5931\u7b49\u95ee\u9898\uff0c\u8fd8\u8bb2\u4e86\u600e\u4e48\u5c01\u88c5\u6210\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\u3002<\/p>\n<p>\u5176\u5b9eVue3\u7684\u7ec4\u5408\u5f0fAPI\u771f\u7684\u975e\u5e38\u7075\u6d3b,\u7528setup\u8bed\u6cd5\u7cd6\u5199\u51fa\u6765\u7684\u4ee3\u7801\u4e5f\u975e\u5e38\u7b80\u6d01\uff0c\u903b\u8f91\u6e05\u6670\uff0c\u5bb9\u6613\u7ef4\u62a4\uff0c\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u5bf9\u4f60\u6709\u6240\u5e2e\u52a9\uff0c\u5982\u679c\u4f60\u6709\u4ec0\u4e48\u95ee\u9898\u6216\u8005\u66f4\u597d\u7684\u60f3\u6cd5\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u4ea4\u6d41\u3002<\/p>","pubDate":"Fri, 17 Apr 2026 14:01:17 +0800"},{"title":"Vue3\u5f00\u53d1\u8e29\u5751\u65e5\u8bb0\uff0c\u600e\u4e48\u7cbe\u51c6\u76d1\u542cPinia\/Vuex Store\u7684\u6570\u636e\u53d8\u5316\uff1f\u6709\u6ca1\u6709\u4ec0\u4e48\u66f4\u7701\u5fc3\u7684\u66ff\u4ee3\u65b9\u6848\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421755.html","description":"<p>\u6700\u8fd1\u7ed9\u65b0\u516c\u53f8\u505a\u79fb\u52a8\u7aef\u5de5\u5177\u7c7bApp\uff0c\u56e0\u4e3a\u8981\u7528Pinia\u505a\u72b6\u6001\u7ba1\u7406\uff0c\u7ed3\u679c\u9047\u5230\u4e86\u4e00\u5806watch store change\u7684\u7ec6\u788e\u95ee\u9898\u2014\u2014\u6bd4\u5982\u6df1\u5c42\u5d4c\u5957\u7684\u914d\u7f6e\u5bf9\u8c61\u4fee\u6539\u4e86\uff0c\u666e\u901awatch\u6ca1\u53cd\u5e94\uff1b\u6216\u8005\u53ea\u60f3\u76d1\u542c\u67d0\u4e2a\u6a21\u5757\u4e0b\u7684\u5355\u4e2a\u5c5e\u6027\u53d8\u5316\uff0c\u4e0d\u60f3\u76d1\u542c\u6574\u4e2a\u6a21\u5757\u91cd\u6e32\u67d3\uff1b\u8fd8\u6709\u65f6\u5019\u76d1\u542c\u51fd\u6570\u91cd\u590d\u89e6\u53d1\u597d\u51e0\u6b21\uff0c\u6392\u67e5\u534a\u5929\u4e0d\u77e5\u9053\u4e3a\u5565\uff0c\u540e\u6765\u7ffb\u4e86\u5f88\u591a\u793e\u533a\u7b14\u8bb0\u3001\u5b98\u65b9\u6587\u6863\uff0c\u8fd8\u6709\u548c\u540c\u7ec4\u505a\u4e865\u5e74\u524d\u7aef\u7684\u6280\u672f\u5b85\u5520\u4e86\u4e00\u4e0b\u5348\uff0c\u624d\u628a\u8fd9\u4e9b\u5751\u4e00\u4e2a\u4e2a\u586b\u4e0a\uff0c\u4eca\u5929\u5c31\u628a\u6240\u6709\u9047\u5230\u7684\u95ee\u9898\u548c\u89e3\u51b3\u65b9\u6cd5\u6574\u7406\u6210\u5927\u5bb6\u80fd\u770b\u61c2\u7684\u95ee\u7b54\u5f62\u5f0f\uff0c\u4e0d\u7ba1\u4f60\u662f\u521a\u63a5\u89e6Vue3\u72b6\u6001\u7ba1\u7406\u7684\u65b0\u624b\uff0c\u8fd8\u662f\u7528\u8fc7Pinia\/Vuex\u4f46\u6ca1\u641e\u61c2\u7ec6\u8282\u7684\u8001\u624b,\u90fd\u80fd\u4ece\u91cc\u9762\u627e\u5230\u6709\u7528\u7684\u4e1c\u897f\u3002<\/p>\n<hr \/>\n<h2>watch store change\u7684\u7b2c\u4e00\u4e2a\u57fa\u7840\u95ee\u9898\uff1aVue3\u7684\u666e\u901awatch\u80fd\u76f4\u63a5\u76d1\u542cstore\u91cc\u7684\u6570\u636e\u5417\uff1f\u6709\u5565\u8981\u6ce8\u610f\u7684\uff1f<\/h2>\n<p>\u80fd\uff0c\u4f46\u5fc5\u987b\u8bb0\u4f4f\u4e24\u4e2a\u6838\u5fc3\u524d\u63d0\uff0c\u4e0d\u7136\u5927\u6982\u7387\u4f1a\u8e29\u201c\u6570\u636e\u6539\u4e86\u9875\u9762\u4e0d\u66f4\u65b0\u4f46\u76d1\u542c\u51fd\u6570\u6ca1\u89e6\u53d1\u201d\u6216\u8005\u201c\u6574\u4e2a\u6a21\u5757\u751a\u81f3app\u91cd\u6e32\u67d3\u5bfc\u81f4\u5361\u987f\u201d\u7684\u5751\u3002\n\u7b2c\u4e00\u4e2a\u6838\u5fc3\u524d\u63d0\uff0c\u662f\u5f97\u7528<strong>\u54cd\u5e94\u5f0f\u7684\u65b9\u5f0f\u83b7\u53d6store\u7684\u6570\u636e<\/strong>\uff0c\u4e0d\u80fd\u76f4\u63a5\u53d6store\u5b9e\u4f8b\u4e0b\u7684\u666e\u901a\u5c5e\u6027\uff0c\u4e5f\u4e0d\u80fd\u7528\u975e\u54cd\u5e94\u5f0f\u7684\u5f15\u7528\u8d4b\u503c\uff0c\u6bd4\u5982\u4f60\u7528Pinia\u5b9a\u4e49\u4e86\u4e00\u4e2a\u53eb<code>useUserStore<\/code>\u7684\u6a21\u5757\uff0c\u91cc\u9762\u6709\u4e2a<code>name<\/code>\u5c5e\u6027\u548c\u5d4c\u5957\u7684<code>info<\/code>\u5bf9\u8c61\uff08info\u91cc\u6709<code>age<\/code>\u548c<code>hobbies<\/code>\u6570\u7ec4\uff09,\u5982\u679c\u4f60\u5728\u7ec4\u4ef6\u91cc\u8fd9\u6837\u5199\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u9519\u8bef\u793a\u83031\uff1a\u76f4\u63a5\u8d4b\u503c\u666e\u901a\u5c5e\u6027\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nconst userStore = useUserStore()\nconst name = userStore.name\nconst hobbies = userStore.info.hobbies\n\/\/ \u9519\u8bef\u793a\u83032\uff1a\u5728setup\u5916\u6216\u8005\u975esetup\u8bed\u6cd5\u7cd6\u91cc\u7528data\uff08\u867d\u7136\u73b0\u5728\u5f88\u5c11\u7528setup\u5916\u7684\u5199\u6cd5\uff0c\u4f46\u63d0\u4e00\u53e5\u4ee5\u9632\u4e07\u4e00\uff09\nexport default {\n  data() {\n    const userStore = useUserStore()\n    return {\n      userInfo: userStore.info\n    }\n  }\n}<\/pre>\n<p>\u4e0d\u7ba1\u4f60\u4e4b\u540e\u600e\u4e48\u6539<code>userStore.name<\/code>\u3001<code>userStore.info.hobbies<\/code>\uff0c<code>name<\/code>\u548c<code>hobbies<\/code>\u53d8\u91cf\uff0c\u8fd8\u6709\u9519\u8bef\u793a\u83032\u91cc\u7684<code>userInfo<\/code>\uff0c\u90fd\u4e0d\u4f1a\u6709\u53cd\u5e94\uff0c\u666e\u901awatch\u81ea\u7136\u4e5f\u76d1\u542c\u4e0d\u5230\u3002\n\u90a3\u6b63\u786e\u7684\u54cd\u5e94\u5f0f\u83b7\u53d6\u65b9\u5f0f\u6709\u54ea\u4e9b\uff1f\u5206\u4e24\u79cd\u60c5\u51b5\uff0c\u4e00\u79cd\u662f<strong>\u76d1\u542c\u5355\u4e2a\u6216\u591a\u4e2a\u57fa\u672c\u5c5e\u6027\/\u6d45\u5c42\u5d4c\u5957\u5c5e\u6027<\/strong>\uff0c\u53e6\u4e00\u79cd\u662f<strong>\u76d1\u542c\u6df1\u5c42\u5d4c\u5957\u5c5e\u6027\/\u4e0d\u60f3\u5199\u592a\u591a\u53d8\u91cf<\/strong>\u3002\n\u7b2c\u4e00\u79cd\u60c5\u51b5\uff0c\u63a8\u8350\u7528Pinia\/Vuex\u5b98\u65b9\u81ea\u5e26\u7684<code>toRefs<\/code>\uff0c\u6216\u8005\u76f4\u63a5\u7528Vue3\u7684<code>toRef\/toRefs<\/code>\u914d\u5408store\u5b9e\u4f8b\uff0c\u4e0d\u8fc7\u8fd9\u91cc\u6709\u4e2a\u5c0f\u7ec6\u8282\uff1aPinia\u7684<code>toRefs<\/code>\u662f<strong>\u6a21\u5757\u4e13\u5c5e\u7684<\/strong>\uff0c\u5b83\u53ea\u4f1a\u628astore\u91cc\u7684state\u3001getter\u3001action\u90fd\u8f6c\u6210ref\uff0c\u4e0d\u4f1a\u5f71\u54cd\u5176\u4ed6\u5c5e\u6027\uff1b\u800cVue3\u539f\u751f\u7684<code>toRefs<\/code>\uff0c\u5982\u679c\u76f4\u63a5\u8f6c\u6574\u4e2astore\u5b9e\u4f8b\uff0c\u53ef\u80fd\u4f1a\u628a\u4e00\u4e9b\u5185\u90e8\u7684\u975e\u54cd\u5e94\u5f0f\u5c5e\u6027\u4e5f\u8f6c\u8fdb\u6765\uff0c\u867d\u7136\u4e0d\u4f1a\u51fa\u9519\uff0c\u4f46\u4ee3\u7801\u770b\u8d77\u6765\u6709\u70b9\u5197\u4f59\uff0c\u800c\u4e14\u5bf9\u6027\u80fd\u5f71\u54cd\u5fae\u4e4e\u5176\u5fae\uff08\u540c\u7ec4\u6280\u672f\u5b85\u8bf4\u4ed6\u6d4b\u8fc71000\u4e2a\u5c5e\u6027\u7684store\uff0c\u4e24\u79cd\u65b9\u5f0f\u6e32\u67d3\u901f\u5ea6\u5dee0.01ms\u4ee5\u5185\uff0c\u5b8c\u5168\u53ef\u4ee5\u5ffd\u7565\uff09\uff0c\u6240\u4ee5\u770b\u4f60\u4e60\u60ef\uff0c\u6211\u81ea\u5df1\u662f\u4e60\u60ef\u7528Pinia\/Vuex\u81ea\u5e26\u7684<code>toRefs<\/code>\u7684\u3002\n\u6bd4\u5982\u6b63\u786e\u7684\u57fa\u672c\u5c5e\u6027\/\u6d45\u5c42\u5d4c\u5957\u5c5e\u6027\u83b7\u53d6\u5199\u6cd5\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u6b63\u786e\u793a\u83031\uff1aPinia\u81ea\u5e26toRefs\uff08setup\u8bed\u6cd5\u7cd6\uff09\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nconst { name, info } = useUserStore()\n\/\/ \u8fd9\u91cc\u7684info\u5176\u5b9e\u662fref\u5417\uff1f\u4e0d\u5bf9\uff0cPinia\u7684state\u5c5e\u6027\u5982\u679c\u662f\u5bf9\u8c61\/\u6570\u7ec4\uff0c\u7528\u81ea\u5e26\u7684toRefs\u8f6c\u51fa\u6765\u7684\u662f** reactive\u5bf9\u8c61\u7684ref **\uff1f\u4e0d\uff0c\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u521a\u624d\u8bb0\u9519\u4e86\uff0c\u5f97\u4ed4\u7ec6\u7406\u6e05\u695aVue3\u548cPinia\u7684\u54cd\u5e94\u5f0f\u673a\u5236\u5e95\u5c42\u3002\n\u54e6\u5bf9\u54e6\uff0c\u521a\u624d\u5dee\u70b9\u628a\u81ea\u5df1\u7ed5\u8fdb\u53bb\u4e86\uff0c\u5f97\u5148\u63d2\u4e00\u53e5\u5e95\u5c42\u903b\u8f91\uff0c\u4f46\u4e0d\u7528\u592a\u590d\u6742\uff0c\u61c2\u539f\u7406\u80fd\u907f\u514d90%\u7684\u5751\uff0cVue3\u7684\u54cd\u5e94\u5f0f\u6838\u5fc3\u6709\u4e24\u4e2a\uff1a`ref`\uff08\u5904\u7406\u57fa\u672c\u7c7b\u578b\u6570\u636e\uff0c\u6216\u8005\u60f3\u628a\u6574\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\u4f5c\u4e3a\u5355\u4e2a\u54cd\u5e94\u5f0f\u5355\u5143\u5904\u7406\uff09\u548c`reactive`\uff08\u5904\u7406\u5f15\u7528\u7c7b\u578b\u6570\u636e\uff0c\u76f4\u63a5\u4fee\u6539\u5bf9\u8c61\/\u6570\u7ec4\u7684\u5c5e\u6027\u6216\u5143\u7d20\u5c31\u80fd\u89e6\u53d1\u54cd\u5e94\u5f0f\uff09\uff0c\u90a3Pinia\u7684state\u662f\u600e\u4e48\u5b9e\u73b0\u7684\uff1f\u5176\u5b9ePinia\u7684state\u9ed8\u8ba4\u662f\u7528`reactive`\u5305\u88f9\u7684\u6574\u4e2a\u5927\u5bf9\u8c61\uff0c\u6bd4\u5982\u4f60\u5728user store\u91cc\u5199\u7684state\uff1a\n```javascript\n\/\/ user.js store\uff08Pinia\uff09\nexport const useUserStore = defineStore(&#39;user&#39;, {\n  state: () =&gt; ({\n    name: &#39;\u5f20\u4e09&#39;,\n    info: {\n      age: 25,\n      hobbies: [&#39;\u6253\u7bee\u7403&#39;, &#39;\u770b\u7535\u5f71&#39;]\n    },\n    token: &#39;&#39;\n  })\n})<\/pre>\n<p>\u5e95\u5c42\u4f1a\u88ab\u8f6c\u6210\u7c7b\u4f3c<code>reactive({ name: '\u5f20\u4e09', info: {...}, token: '' })<\/code>\u7684\u4e1c\u897f\uff0c\u90a3\u4f60\u76f4\u63a5\u5728\u7ec4\u4ef6\u91cc\u7528<code>const userStore = useUserStore()<\/code>\u62ff\u5230\u7684\uff0c\u5176\u5b9e\u662f\u8fd9\u4e2a\u5927reactive\u5bf9\u8c61\u7684\u4ee3\u7406\u5b9e\u4f8b\uff0c\u5bf9\u4e0d\u5bf9\uff1f\u5bf9\u7684\uff0c\u540c\u7ec4\u6280\u672f\u5b85\u7ed9\u6211\u770b\u8fc7Pinia\u7684\u7b80\u5316\u7248\u6e90\u7801\uff08\u5c31\u662f\u53bb\u6389\u4e86devtools\u3001\u6301\u4e45\u5316\u8fd9\u4e9b\u63d2\u4ef6\u903b\u8f91\u7684\u6838\u5fc3\u903b\u8f91\uff09\uff0c\u786e\u5b9e\u662f\u8fd9\u6837\u7684\u3002\n\u90a3\u521a\u624d\u8bf4\u7684\u9519\u8bef\u793a\u83031\u91cc\u7684<code>const name = userStore.name<\/code>\u4e3a\u4ec0\u4e48\u9519\uff1f\u56e0\u4e3a<code>userStore<\/code>\u662freactive\u5bf9\u8c61\uff0c<code>name<\/code>\u662freactive\u5bf9\u8c61\u7684\u57fa\u672c\u7c7b\u578b\u5c5e\u6027\uff0c\u5f53\u4f60\u7528\u8d4b\u503c\u8bed\u53e5\u628a\u5b83\u8d4b\u7ed9\u666e\u901a\u53d8\u91cf<code>name<\/code>\u7684\u65f6\u5019\uff0c\u76f8\u5f53\u4e8e\u628areactive\u5bf9\u8c61\u91cc\u7684\u57fa\u672c\u7c7b\u578b\u503c<strong>\u590d\u5236\u4e86\u4e00\u4efd<\/strong>\u51fa\u6765\uff0c\u548c\u539f\u6765\u7684reactive\u5bf9\u8c61\u65ad\u5f00\u4e86\u8054\u7cfb\u2014\u2014\u8fd9\u5c31\u50cf\u4f60\u628a\u5899\u4e0a\u6302\u7684\u65e5\u5386\u6495\u4e0b\u6765\u4e00\u9875\u653e\u5728\u684c\u4e0a\uff0c\u5899\u4e0a\u7684\u65e5\u5386\u7ffb\u9875\u4e86\uff0c\u684c\u4e0a\u7684\u90a3\u9875\u8fd8\u662f\u65e7\u7684\uff0c\u5bf9\u5427\uff1f\u8fd9\u4e2a\u6bd4\u55bb\u5f88\u76f4\u89c2\uff0c\u6211\u4e4b\u524d\u5c31\u662f\u9760\u8fd9\u4e2a\u624d\u5f7b\u5e95\u641e\u61c2\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u76f4\u63a5\u8d4b\u503c\u57fa\u672c\u7c7b\u578b\u5c5e\u6027\u7684\u3002\n\u90a3\u9519\u8bef\u793a\u83031\u91cc\u7684<code>const hobbies = userStore.info.hobbies<\/code>\u4e3a\u4ec0\u4e48\u4e5f\u9519\uff1f\u867d\u7136<code>userStore.info.hobbies<\/code>\u662freactive\u5bf9\u8c61\u7684\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\uff0c\u4f46\u4f60\u8d4b\u503c\u7ed9\u666e\u901a\u53d8\u91cf<code>hobbies<\/code>\u7684\u65f6\u5019\uff0c\u76f8\u5f53\u4e8e\u628a<strong>reactive\u5bf9\u8c61\u91cc\u7684\u5f15\u7528\u5730\u5740\u590d\u5236\u4e86\u4e00\u4efd<\/strong>\u51fa\u6765\uff0c\u5bf9\u4e0d\u5bf9\uff1f\u90a3\u6309\u9053\u7406\u8bf4\uff0c\u4fee\u6539<code>hobbies.push('\u542c\u97f3\u4e50')<\/code>\u5e94\u8be5\u80fd\u89e6\u53d1\u54cd\u5e94\u5f0f\u554a\uff1f\u54e6\u5bf9\u54e6\uff0c\u521a\u624d\u8fd9\u4e2a\u9519\u8bef\u793a\u83031\u7684\u540e\u534a\u90e8\u5206\u6211\u4e3e\u5f97\u4e0d\u592a\u51c6\u786e,\u5f97\u4fee\u6b63\u4e00\u4e0b\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u4e0d\u592a\u51c6\u786e\u7684\u9519\u8bef\u793a\u8303\u540e\u534a\u90e8\u5206\uff1a\u76f4\u63a5\u8d4b\u503creactive\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\u7684\u5b50\u5c5e\u6027\u5f15\u7528\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nconst userStore = useUserStore()\nconst hobbies = userStore.info.hobbies\nhobbies.push(&#39;\u542c\u97f3\u4e50&#39;) \/\/ \u8fd9\u91cc\u5176\u5b9e\u9875\u9762\u4e0a\u5982\u679c\u7528\u4e86userStore.info.hobbies\uff0c\u662f\u4f1a\u66f4\u65b0\u7684\uff01\n\/\/ \u90a3\u4ec0\u4e48\u65f6\u5019\u8fd9\u4e2a\u5199\u6cd5\u4f1a\u6709\u95ee\u9898\uff1f\u5f53\u4f60\u76f4\u63a5\u66ff\u6362\u6574\u4e2ahobbies\u6570\u7ec4\u7684\u65f6\u5019\uff01\u6bd4\u5982hobbies = [&#39;\u6e38\u6cf3&#39;]\uff0c\u8fd9\u65f6\u5019\u590d\u5236\u51fa\u6765\u7684\u5f15\u7528\u5730\u5740\u53d8\u4e86\uff0c\u548c\u539f\u6765\u7684reactive\u5bf9\u8c61\u5c31\u65ad\u5f00\u4e86\uff01<\/pre>\n<p>\u54e6\u5bf9\uff0c\u521a\u624d\u7684\u4f8b\u5b50\u4e3e\u9519\u4e86\uff0c\u5dee\u70b9\u8bef\u5bfc\u5927\u5bb6,\u90a3\u603b\u7ed3\u4e00\u4e0b\u76f4\u63a5\u8d4b\u503cstore\u5b9e\u4f8b\u5c5e\u6027\u7684\u95ee\u9898\uff1a<\/p>\n<ol>\n<li>\u76f4\u63a5\u8d4b\u503c<strong>reactive\u5bf9\u8c61\u7684\u57fa\u672c\u7c7b\u578b\u5c5e\u6027<\/strong>\uff1a\u590d\u5236\u503c\uff0c\u65ad\u5f00\u54cd\u5e94\u5f0f\uff0c\u4fee\u6539\u539f\u5c5e\u6027\u4e0d\u4f1a\u5f71\u54cd\u666e\u901a\u53d8\u91cf,\u76d1\u542c\u666e\u901a\u53d8\u91cf\u7684watch\u4e0d\u4f1a\u89e6\u53d1\u3002<\/li>\n<li>\u76f4\u63a5\u8d4b\u503c<strong>reactive\u5bf9\u8c61\u7684\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\/\u5b50\u5f15\u7528\u5c5e\u6027<\/strong>\uff1a\u590d\u5236\u5f15\u7528\u5730\u5740\uff0c<strong>\u4fee\u6539\u5c5e\u6027\/\u5143\u7d20<\/strong>\u4e0d\u4f1a\u65ad\u5f00\u54cd\u5e94\u5f0f\uff0c\u4f46<strong>\u76f4\u63a5\u66ff\u6362\u6574\u4e2a\u5f15\u7528<\/strong>\u4f1a\u65ad\u5f00\u54cd\u5e94\u5f0f,\u66ff\u6362\u540e\u76d1\u542c\u666e\u901a\u53d8\u91cf\u7684watch\u4e0d\u4f1a\u89e6\u53d1\u3002<\/li>\n<\/ol>\n<p>\u90a3\u56de\u5230\u6b63\u786e\u7684\u54cd\u5e94\u5f0f\u83b7\u53d6\u65b9\u5f0f\uff1a\u4e0d\u7ba1\u4f60\u662f\u8981\u76d1\u542c\u57fa\u672c\u7c7b\u578b\u8fd8\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u4e0d\u7ba1\u4f60\u4f1a\u4e0d\u4f1a\u66ff\u6362\u6574\u4e2a\u5f15\u7528\uff0c\u90fd\u63a8\u8350\u7528<strong><code>toRef<\/code>\u8f6c\u5355\u4e2a\u5c5e\u6027<\/strong>\u6216\u8005<strong><code>store\u81ea\u5e26\u7684toRefs<\/code>\u8f6c\u6240\u6709state\/getter\/action<\/strong>\uff0c\u56e0\u4e3a\u8fd9\u6837\u8f6c\u51fa\u6765\u7684\u90fd\u662f<strong>ref\u5bf9\u8c61<\/strong>\uff0c\u4e0d\u7ba1\u4f60\u600e\u4e48\u4fee\u6539\u539f\u5c5e\u6027\uff08\u5305\u62ec\u66ff\u6362\u6574\u4e2a\u5f15\u7528\uff09\uff0cref\u5bf9\u8c61\u90fd\u4f1a\u4fdd\u6301\u54cd\u5e94\u5f0f\u8fde\u63a5\u2014\u2014\u8fd9\u5c31\u50cf\u4f60\u5728\u684c\u4e0a\u653e\u4e86\u4e00\u4e2a\u6295\u5f71\u4eea\uff0c\u76f4\u63a5\u6295\u5c04\u5899\u4e0a\u7684\u65e5\u5386\uff0c\u5899\u4e0a\u7684\u65e5\u5386\u4e0d\u7ba1\u662f\u7ffb\u9875\u8fd8\u662f\u6362\u4e86\u4e00\u672c\u65b0\u7684\uff0c\u684c\u4e0a\u7684\u6295\u5f71\u90fd\u4f1a\u8ddf\u7740\u53d8\uff0c\u5bf9\u5427\uff1f\u8fd9\u4e2a\u6295\u5f71\u4eea\u6bd4\u55bb\u6bd4\u6495\u65e5\u5386\u66f4\u8d34\u5207ref\u7684\u4f5c\u7528\u3002\n\u90a3\u5177\u4f53\u7684\u6b63\u786e\u5199\u6cd5\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u6b63\u786e\u793a\u83031\uff1a\u8f6c\u5355\u4e2a\u5c5e\u6027\uff08\u4e0d\u7ba1\u662f\u57fa\u672c\u8fd8\u662f\u5f15\u7528\uff09\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { toRef } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u8f6c\u57fa\u672c\u7c7b\u578b\u5c5e\u6027name\nconst name = toRef(userStore, &#39;name&#39;)\n\/\/ \u8f6c\u5f15\u7528\u7c7b\u578b\u5c5e\u6027info\uff0c\u6216\u8005\u8f6cinfo\u7684\u5b50\u5c5e\u6027hobbies\nconst info = toRef(userStore, &#39;info&#39;)\nconst hobbies = toRef(userStore.info, &#39;hobbies&#39;)\n\/\/ \u4e4b\u540e\u4e0d\u7ba1\u4f60\u600e\u4e48\u6539\uff1a\n\/\/ userStore.name = &#39;\u674e\u56db&#39; \u2192 name.value\u53d8\n\/\/ info.value.age = 26 \u2192 \u9875\u9762\u548cinfo.value\u90fd\u53d8\n\/\/ userStore.info = { age: 27, hobbies: [&#39;\u6e38\u6cf3&#39;] } \u2192 info.value\u76f4\u63a5\u53d8\u6210\u65b0\u5bf9\u8c61\uff0chobbies.value\u5982\u679c\u662f\u4e4b\u524d\u7528toRef\u8f6c\u7684\u65e7hobbies\u7684\u8bdd\uff0c\u8fd9\u65f6\u5019\u4f1a\u65ad\u5f00\uff1f\u54e6\u5bf9\u54e6\uff0c\u8fd9\u91cc\u53c8\u6709\u4e2a\u5c0f\u7ec6\u8282\uff01\n\/\/ \u5982\u679c\u4f60\u8f6c\u7684\u662fuserStore.info.hobbies\uff08\u4e5f\u5c31\u662freactive\u5bf9\u8c61\u7684\u5b50\u5f15\u7528\u5c5e\u6027\uff09\uff0c\u90a3\u5f53\u4f60\u66ff\u6362\u6574\u4e2auserStore.info\u7684\u65f6\u5019\uff0c\u539f\u6765\u7684hobbies.value\u7684\u5f15\u7528\u5730\u5740\u8fd8\u662f\u65e7\u7684\uff0c\u5c31\u4f1a\u65ad\u5f00\uff01\u6240\u4ee5\u5982\u679c\u4f60\u53ef\u80fd\u66ff\u6362\u6574\u4e2a\u7236\u5f15\u7528\uff0c\u90a3\u6700\u597d\u76f4\u63a5\u8f6c\u7236\u5f15\u7528\uff0c\u6216\u8005\u8f6c\u6574\u4e2astore\u7684state\u91cc\u7684\u7236\u8def\u5f84\uff1f\n\/\/ \u6216\u8005\u66f4\u7b80\u5355\uff0c\u4e0d\u7ba1\u8def\u5f84\u6709\u591a\u6df1\uff0c\u90fd\u7528store\u81ea\u5e26\u7684toRefs\u8f6c\u6574\u4e2auserStore\uff0c\u7136\u540e\u901a\u8fc7\u5c5e\u6027\u94fe\u8bbf\u95ee\uff0c\nimport { storeToRefs } from &#39;pinia&#39; \/\/ Pinia\u81ea\u5e26\u7684\u53ebstoreToRefs\uff0c\u522b\u548cVue3\u539f\u751f\u7684toRefs\u641e\u6df7\uff01\u54e6\u5bf9\u54e6\uff01\u521a\u624d\u8fd9\u91cc\u662f\u6700\u5927\u7684\u5751\uff01\u5f88\u591a\u65b0\u624b\uff08\u5305\u62ec\u6211\u4e00\u5f00\u59cb\uff09\u90fd\u7528\u9519\u4e86\uff01\nconst userStore = useUserStore()\nconst { name, info } = storeToRefs(userStore) \/\/ \u6ce8\u610f\u662fstoreToRefs\uff01\u4e0d\u662fVue3\u7684toRefs\uff01\n\/\/ \u90a3\u8fd9\u65f6\u5019info\u662fref\u5bf9\u8c61\uff0cinfo.value\u662freactive\u5bf9\u8c61\u5417\uff1f\u662f\u7684\uff01\u56e0\u4e3aPinia\u7684state\u91cc\u7684info\u662freactive\u7684\uff0cstoreToRefs\u8f6c\u51fa\u6765\u7684ref.value\u4fdd\u6301\u4e86\u539f\u6765\u7684\u54cd\u5e94\u5f0f\u7c7b\u578b\uff01\n\/\/ \u90a3\u8fd9\u65f6\u5019\u4e0d\u7ba1\u4f60\u600e\u4e48\u6539\uff1a\nuserStore.name = &#39;\u674e\u56db&#39; \u2192 name.value\u53d8\ninfo.value.age = 26 \u2192 \u53d8\nuserStore.info = { age: 27, hobbies: [&#39;\u6e38\u6cf3&#39;] } \u2192 info.value\u76f4\u63a5\u53d8\u6210\u65b0\u7684reactive\u5bf9\u8c61\uff08\u56e0\u4e3astoreToRefs\u662f\u57fa\u4e8e\u6574\u4e2astore\u7684state\u4ee3\u7406\u7684\uff0c\u66ff\u6362\u7236\u5c5e\u6027\u4f1a\u81ea\u52a8\u66f4\u65b0ref.value\uff09\nconst hobbies = toRef(info.value, &#39;hobbies&#39;) \u2192 \u8fd9\u65f6\u5019\u66ff\u6362info.value\u7684\u8bdd\uff0chobbies.value\u4e5f\u4f1a\u8ddf\u7740\u53d8\u5417\uff1f\u4e0d\u5bf9\uff0ctoRef\u662f\u57fa\u4e8e\u5f53\u524d\u7684info.value\u8f6c\u7684\uff0c\u66ff\u6362info.value\u76f8\u5f53\u4e8e\u6362\u4e86\u4e2a\u65b0\u5bf9\u8c61\uff0ctoRef\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u7684\u7236\u5bf9\u8c61\u53d8\u4e86\uff0c\u5c31\u4f1a\u65ad\u5f00\uff01\u6240\u4ee5\u8fd9\u65f6\u5019\u5982\u679c\u8981\u76d1\u542chobbies\uff0c\u8981\u4e48\u76f4\u63a5\u7528info.value.hobbies\uff08\u5982\u679c\u662freactive\u7684\u8bdd\uff0c\u76f4\u63a5\u76d1\u542c\u6570\u7ec4\u672c\u8eab\u4e0d\u9700\u8981ref\uff09\uff0c\u8981\u4e48\u7528getter\uff0c\u8981\u4e48\u7528watch\u7684getter\u51fd\u6570\u5199\u6cd5\uff01<\/pre>\n<p>\u54e6\u5bf9\u54e6\uff0c\u521a\u624d\u5dee\u70b9\u5fd8\u4e86Pinia\u81ea\u5e26\u7684\u53eb<code>storeToRefs<\/code>\uff0cVuex\u7684\u8bdd\uff0c\u5728Vue3\u9002\u914d\u7684Vuex4\u91cc\uff0c\u4e5f\u6709\u7c7b\u4f3c\u7684<code>mapState<\/code>\u8f6cref\u7684\u5199\u6cd5\uff0c\u4f46\u5728setup\u8bed\u6cd5\u7cd6\u91cc\uff0cVuex\u66f4\u63a8\u8350\u7528<code>toRefs<\/code>\u914d\u5408<code>useStore<\/code>\u8f6c\u51fa\u6765\u7684store\u5b9e\u4f8b\uff0c\u4e0d\u8fc7Vuex4\u7684<code>toRefs<\/code>\u6709\u6ca1\u6709\u6a21\u5757\u4e13\u5c5e\u7684\uff1f\u597d\u50cf\u6ca1\u6709\uff0c\u53cd\u6b63\u76f4\u63a5\u7528Vue3\u539f\u751f\u7684<code>toRefs<\/code>\u8f6cVuex4\u7684store\u5b9e\u4f8b\u7684state\u5c5e\u6027\u5c31\u884c\uff0c<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ Vuex4 setup\u8bed\u6cd5\u7cd6\u6b63\u786e\u8f6cstate\u7684\u5199\u6cd5\nimport { useStore } from &#39;vuex&#39;\nimport { toRefs, toRef } from &#39;vue&#39;\nconst store = useStore()\n\/\/ \u8f6c\u5355\u4e2a\u57fa\u672c\u7c7b\u578b\u5c5e\u6027\nconst name = toRef(store.state, &#39;name&#39;)\n\/\/ \u8f6c\u5355\u4e2a\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\nconst info = toRef(store.state, &#39;info&#39;)\n\/\/ \u8f6c\u6240\u6709state\u5c5e\u6027\uff08\u6ce8\u610f\u8981\u5148\u53d6store.state\u518d\u8f6ctoRefs\uff0c\u522b\u76f4\u63a5\u8f6c\u6574\u4e2astore\uff01\uff09\nconst { name: stateName, info: stateInfo } = toRefs(store.state)<\/pre>\n<p>\u521a\u624d\u8bf4\u4e86\u7b2c\u4e00\u4e2a\u6838\u5fc3\u524d\u63d0\uff0c\u7b2c\u4e8c\u4e2a\u6838\u5fc3\u524d\u63d0\u662f\u4ec0\u4e48\uff1f\u662f<strong>\u5982\u679c\u4f60\u8981\u76d1\u542cstore\u91cc\u7684\u6df1\u5c42\u5d4c\u5957\u5c5e\u6027\uff08\u6bd4\u5982info.hobbies[0]\uff09\uff0c\u6216\u8005\u8981\u76d1\u542c\u6574\u4e2a\u5f15\u7528\u7c7b\u578b\u7684\u53d8\u5316\uff08\u4e0d\u7ba1\u662f\u4fee\u6539\u5c5e\u6027\u8fd8\u662f\u66ff\u6362\u6574\u4e2a\u5f15\u7528\uff09\uff0c\u90a3\u666e\u901awatch\u9700\u8981\u52a0<code>deep: true<\/code>\u9009\u9879\u5417\uff1f\u8fd8\u662f\u6709\u66f4\u9ad8\u6548\u7684\u65b9\u6cd5\uff1f<\/strong>\n\u54e6\u5bf9\uff0c\u8fd9\u4e2a\u95ee\u9898\u4e5f\u662f\u65b0\u624b\u6700\u5e38\u95ee\u7684\uff0c\u5148\u56de\u7b54\u7b2c\u4e00\u4e2a\u5c0f\u95ee\u9898\uff1a\u666e\u901awatch\u5982\u679c\u76f4\u63a5\u76d1\u542cref\u5bf9\u8c61\uff08\u4e0d\u7ba1\u662f\u57fa\u672c\u8fd8\u662f\u5f15\u7528\u7c7b\u578b\u8f6c\u7684\uff09\uff0c\u5f53ref\u5bf9\u8c61\u7684value\u662f\u57fa\u672c\u7c7b\u578b\u65f6\uff0c\u4fee\u6539value\u4f1a\u81ea\u52a8\u89e6\u53d1\uff1b\u5f53ref\u5bf9\u8c61\u7684value\u662f\u5f15\u7528\u7c7b\u578b\u65f6\uff0c\u53ea\u6709<strong>\u66ff\u6362\u6574\u4e2aref.value<\/strong>\u624d\u4f1a\u81ea\u52a8\u89e6\u53d1\uff0c\u4fee\u6539ref.value\u7684\u5c5e\u6027\/\u5143\u7d20\u4e0d\u4f1a\u89e6\u53d1\u2014\u2014\u8fd9\u4e2a\u65f6\u5019\u5c31\u9700\u8981\u52a0<code>deep: true<\/code>\u4e86\u3002\n\u4f46\u52a0<code>deep: true<\/code>\u4f1a\u6709\u6027\u80fd\u95ee\u9898\uff0c\u5bf9\u5427\uff1f\u540c\u7ec4\u6280\u672f\u5b85\u7ed9\u6211\u505a\u8fc7\u4e00\u4e2a\u5c0f\u6d4b\u8bd5\uff1a\u76d1\u542c\u4e00\u4e2a\u670910\u5c42\u5d4c\u5957\u3001\u6bcf\u5c42\u670910\u4e2a\u5c5e\u6027\/\u5143\u7d20\u7684store\u5bf9\u8c61\uff0c\u52a0<code>deep: true<\/code>\u7684\u65f6\u5019\uff0c\u4fee\u6539\u4efb\u610f\u4e00\u4e2a\u6df1\u5c42\u5c5e\u6027\uff0cVue3\u4f1a\u904d\u5386\u6574\u4e2a10\u5c42\u7684\u5bf9\u8c61\u6811\u6765\u68c0\u67e5\u53d8\u5316\uff0c\u6bcf\u6b21\u904d\u5386\u5927\u6982\u9700\u89810.1ms\uff08\u624b\u673a\u7aef\u53ef\u80fd\u66f4\u4e45\uff0c\u6bd4\u59820.5ms\u5de6\u53f3\uff09\uff0c\u5982\u679c\u4fee\u6539\u9891\u7e41\u7684\u8bdd\uff08\u6bd4\u5982\u8f93\u5165\u6846\u53cc\u5411\u7ed1\u5b9a\u5230\u6df1\u5c42\u5c5e\u6027\uff09\uff0c\u5c31\u4f1a\u9020\u6210\u5361\u987f\uff1b\u800c\u5982\u679c\u4e0d\u52a0<code>deep: true<\/code>\uff0c\u53ea\u76d1\u542c\u5355\u4e2a\u6df1\u5c42\u5c5e\u6027\u7684\u8bdd\uff0c\u6bcf\u6b21\u4fee\u6539\u53ea\u9700\u8981\u68c0\u67e5\u90a3\u4e00\u4e2a\u5c5e\u6027\uff0c\u5927\u69820.001ms\uff0c\u5dee\u8ddd\u8fd8\u662f\u5f88\u5927\u7684\u3002\n\u90a3\u6709\u4ec0\u4e48\u66f4\u9ad8\u6548\u7684\u65b9\u6cd5\u66ff\u4ee3\u52a0<code>deep: true<\/code>\u5462\uff1f\u6709\u4e09\u4e2a\u5e38\u7528\u7684,\u6309\u63a8\u8350\u7a0b\u5ea6\u6392\u5e8f\uff1a<\/p>\n<ol>\n<li><strong>\u4f7f\u7528Pinia\/Vuex\u7684getter<\/strong>\uff1a\u628a\u4f60\u8981\u76d1\u542c\u7684\u6df1\u5c42\u5c5e\u6027\u6216\u8005\u8ba1\u7b97\u540e\u7684\u5c5e\u6027\u653e\u5728getter\u91cc\uff0c\u7136\u540e\u5728\u7ec4\u4ef6\u91cc\u8f6c\u6210ref\u76d1\u542cgetter\uff0c\u8fd9\u6837\u4e0d\u4ec5\u6027\u80fd\u597d\uff0c\u800c\u4e14\u903b\u8f91\u66f4\u6e05\u6670\uff0cgetter\u8fd8\u80fd\u7f13\u5b58\u7ed3\u679c\uff08\u53ea\u6709\u4f9d\u8d56\u7684state\u53d8\u5316\u65f6\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff09\u3002<\/li>\n<li><strong>\u4f7f\u7528watch\u7684getter\u51fd\u6570\u5199\u6cd5<\/strong>\uff1a\u76f4\u63a5\u5728watch\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u91cc\u5199\u4e00\u4e2a\u7bad\u5934\u51fd\u6570\uff0c\u8fd4\u56de\u4f60\u8981\u76d1\u542c\u7684\u5177\u4f53\u5c5e\u6027\uff08\u4e0d\u7ba1\u8def\u5f84\u6709\u591a\u6df1\uff09\uff0c\u8fd9\u6837\u4e0d\u9700\u8981\u52a0<code>deep: true<\/code>\uff0c\u4e5f\u4e0d\u9700\u8981\u8f6cref\uff0c\u6027\u80fd\u548cgetter\u5dee\u4e0d\u591a\uff0c\u4f46\u5982\u679c\u8fd9\u4e2a\u903b\u8f91\u5728\u591a\u4e2a\u7ec4\u4ef6\u91cc\u7528\u5230\u7684\u8bdd,\u4e0d\u5982getter\u590d\u7528\u6027\u9ad8\u3002<\/li>\n<li><strong>\u4f7f\u7528Vue3\u7684<code>watchEffect<\/code><\/strong>\uff1a<code>watchEffect<\/code>\u4f1a\u81ea\u52a8\u6536\u96c6\u4f9d\u8d56\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u4e0d\u7ba1\u8def\u5f84\u6709\u591a\u6df1\uff0c\u53ea\u8981\u4f9d\u8d56\u7684\u6570\u636e\u53d8\u4e86\u5c31\u4f1a\u89e6\u53d1\uff0c\u4e0d\u9700\u8981\u52a0<code>deep: true<\/code>\uff0c\u4e5f\u4e0d\u9700\u8981\u6307\u5b9a\u76d1\u542c\u7684\u5c5e\u6027\uff0c\u4f46<code>watchEffect<\/code>\u4f1a\u5728\u7ec4\u4ef6\u521d\u59cb\u5316\u7684\u65f6\u5019\u7acb\u5373\u6267\u884c\u4e00\u6b21\uff08\u666e\u901awatch\u53ef\u4ee5\u901a\u8fc7<code>immediate: true<\/code>\u63a7\u5236\u662f\u5426\u7acb\u5373\u6267\u884c\uff0c\u9ed8\u8ba4\u4e0d\u7acb\u5373\uff09\uff0c\u800c\u4e14\u5982\u679c\u4f9d\u8d56\u7684\u6570\u636e\u592a\u591a\u7684\u8bdd\uff0c\u53ef\u80fd\u4f1a\u89e6\u53d1\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\uff0c\u6240\u4ee5\u9002\u5408\u4f9d\u8d56\u6bd4\u8f83\u5c11\u3001\u903b\u8f91\u6bd4\u8f83\u7b80\u5355\u7684\u573a\u666f\u3002<\/li>\n<\/ol>\n<p>\u4e3e\u4e2a\u4f8b\u5b50\u5bf9\u6bd4\u4e00\u4e0b\u8fd9\u56db\u4e2a\u65b9\u6cd5\uff08\u5305\u62ec\u52a0<code>deep: true<\/code>\u7684\u666e\u901awatch\uff09\uff1a\n\u5047\u8bbe\u4f60\u8981\u76d1\u542cuser store\u91cc\u7684<code>info.hobbies[0]<\/code>\u7684\u53d8\u5316\uff0c\u7136\u540e\u5728\u53d8\u5316\u7684\u65f6\u5019\u6253\u5370\u51fa\u201c\u7b2c\u4e00\u4e2a\u7231\u597d\u53d8\u4e86\uff1axxx\u201d\u3002\n\u5148\u770bPinia\u7684store\u5b9a\u4e49\uff08\u4e4b\u524d\u7684\u4e0d\u53d8\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ user.js store\uff08Pinia\uff09\nexport const useUserStore = defineStore(&#39;user&#39;, {\n  state: () =&gt; ({\n    name: &#39;\u5f20\u4e09&#39;,\n    info: {\n      age: 25,\n      hobbies: [&#39;\u6253\u7bee\u7403&#39;, &#39;\u770b\u7535\u5f71&#39;]\n    },\n    token: &#39;&#39;\n  }),\n  getters: {\n    \/\/ \u65b9\u6cd51\u7528\u7684getter\n    firstHobby: (state) =&gt; state.info.hobbies[0]\n  }\n})<\/pre>\n<p>\u7136\u540e\u662f\u7ec4\u4ef6\u91cc\u7684\u56db\u4e2a\u5199\u6cd5\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u7ec4\u4ef6setup\u8bed\u6cd5\u7cd6\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { storeToRefs, watch, watchEffect } from &#39;pinia&#39;\nconst userStore = useUserStore()\nconst { firstHobby } = storeToRefs(userStore)\n\/\/ \u5199\u6cd51\uff1a\u52a0deep: true\u7684\u666e\u901awatch\uff08\u6027\u80fd\u5dee\uff0c\u4e0d\u63a8\u8350\uff09\nconst { info } = storeToRefs(userStore)\nwatch(info, (newInfo) =&gt; {\n  console.log(&#39;\u7b2c\u4e00\u4e2a\u7231\u597d\u53d8\u4e86\uff1a&#39;, newInfo.hobbies[0])\n}, { deep: true })\n\/\/ \u8fd9\u4e2a\u5199\u6cd5\u7684\u95ee\u9898\uff1a\u4e0d\u7ba1\u4fee\u6539info\u7684\u4efb\u4f55\u5c5e\u6027\uff08\u6bd4\u5982age\u3001hobbies[1]\u3001\u66ff\u6362\u6574\u4e2ainfo\uff09\uff0c\u90fd\u4f1a\u89e6\u53d1\uff0c\u4f46\u6211\u4eec\u53ea\u9700\u8981\u76d1\u542chobbies[0]\uff0c\u6d6a\u8d39\u6027\u80fd\u3002\n\/\/ \u5199\u6cd52\uff1a\u4f7f\u7528getter\u8f6cref\u76d1\u542c\uff08\u6027\u80fd\u597d\uff0c\u590d\u7528\u6027\u9ad8\uff0c\u6700\u63a8\u8350\uff09\nwatch(firstHobby, (newHobby) =&gt; {\n  console.log(&#39;\u7b2c\u4e00\u4e2a\u7231\u597d\u53d8\u4e86\uff1a&#39;, newHobby)\n})\n\/\/ \u8fd9\u4e2a\u5199\u6cd5\u7684\u4f18\u70b9\uff1a\u53ea\u6709firstHobby\u4f9d\u8d56\u7684hobbies[0]\u53d8\u5316\u65f6\u624d\u4f1a\u89e6\u53d1\uff0cgetter\u8fd8\u4f1a\u7f13\u5b58\uff0c\u6027\u80fd\u6700\u597d\uff1b\u800c\u4e14\u5982\u679c\u5176\u4ed6\u7ec4\u4ef6\u4e5f\u8981\u7528firstHobby\uff0c\u76f4\u63a5\u5f15\u5165\u5c31\u884c\uff0c\u4e0d\u7528\u91cd\u590d\u5199\u8def\u5f84\u3002\n\/\/ \u5199\u6cd53\uff1a\u4f7f\u7528watch\u7684getter\u51fd\u6570\u5199\u6cd5\uff08\u6027\u80fd\u597d\uff0c\u590d\u7528\u6027\u4f4e\uff0c\u9002\u5408\u5355\u6b21\u4f7f\u7528\uff09\nwatch(() =&gt; userStore.info.hobbies[0], (newHobby) =&gt; {\n  console.log(&#39;\u7b2c\u4e00\u4e2a\u7231\u597d\u53d8\u4e86\uff1a&#39;, newHobby)\n})\n\/\/ \u8fd9\u4e2a\u5199\u6cd5\u7684\u4f18\u70b9\uff1a\u4e0d\u9700\u8981\u52a0deep: true\uff0c\u4e0d\u9700\u8981\u8f6cref\uff0c\u6027\u80fd\u548c\u5199\u6cd52\u5dee\u4e0d\u591a\uff1b\u7f3a\u70b9\u662f\u5982\u679c\u5176\u4ed6\u7ec4\u4ef6\u4e5f\u8981\u7528\u8fd9\u4e2a\u903b\u8f91\uff0c\u5f97\u91cd\u590d\u5199\u8def\u5f84\uff0c\u7ef4\u62a4\u8d77\u6765\u9ebb\u70e6\u3002\n\/\/ \u5199\u6cd54\uff1a\u4f7f\u7528watchEffect\uff08\u81ea\u52a8\u6536\u96c6\u4f9d\u8d56\uff0c\u7acb\u5373\u6267\u884c\uff0c\u9002\u5408\u7b80\u5355\u573a\u666f\uff09\nwatchEffect(() =&gt; {\n  console.log(&#39;\u7b2c\u4e00\u4e2a\u7231\u597d\u53d8\u4e86\uff1a&#39;, userStore.info.hobbies[0])\n})\n\/\/ \u8fd9\u4e2a\u5199\u6cd5\u7684\u4f18\u70b9\uff1a\u4e0d\u9700\u8981\u6307\u5b9a\u76d1\u542c\u7684\u5c5e\u6027\uff0c\u81ea\u52a8\u6536\u96c6\uff1b\u7f3a\u70b9\u662f\u7ec4\u4ef6\u521d\u59cb\u5316\u7684\u65f6\u5019\u4f1a\u7acb\u5373\u6267\u884c\u4e00\u6b21\uff08\u4e0d\u7ba1hobbies[0]\u6709\u6ca1\u6709\u53d8\uff09\uff0c\u5982\u679c\u4f9d\u8d56\u7684\u5c5e\u6027\u53d8\u591a\u4e86\uff08\u6bd4\u5982\u540e\u6765\u52a0\u4e86\u6253\u5370age\uff09\uff0c\u4fee\u6539age\u4e5f\u4f1a\u89e6\u53d1\uff0c\u53ef\u80fd\u9020\u6210\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\u3002<\/pre>\n<hr \/>\n<h2>watch store change\u7684\u7b2c\u4e8c\u4e2a\u8fdb\u9636\u95ee\u9898\uff1a\u4e3a\u4ec0\u4e48\u6709\u65f6\u5019\u76d1\u542c\u51fd\u6570\u4f1a\u91cd\u590d\u89e6\u53d1\u597d\u51e0\u6b21\uff1f\u600e\u4e48\u6392\u67e5\u548c\u89e3\u51b3\uff1f<\/h2>\n<p>\u8fd9\u4e2a\u95ee\u9898\u6211\u5728\u505a\u8f93\u5165\u6846\u53cc\u5411\u7ed1\u5b9a\u5230store\u6df1\u5c42\u5c5e\u6027\u7684\u65f6\u5019\u9047\u5230\u8fc7\uff0c\u5f53\u65f6\u8f93\u5165\u4e00\u4e2a\u5b57\uff0c\u76d1\u542c\u51fd\u6570\u4f1a\u89e6\u53d12-3\u6b21\uff0c\u5dee\u70b9\u628a\u540e\u7aef\u63a5\u53e3\u641e\u5d29\uff08\u56e0\u4e3a\u76d1\u542c\u51fd\u6570\u91cc\u5199\u4e86\u8c03\u7528\u540e\u7aef\u4fdd\u5b58\u914d\u7f6e\u7684\u903b\u8f91\uff09\uff0c\u540e\u6765\u6392\u67e5\u4e86\u534a\u5929\uff0c\u624d\u53d1\u73b0\u6709\u4e09\u4e2a\u5e38\u89c1\u7684\u539f\u56e0\uff0c\u6bcf\u4e2a\u539f\u56e0\u90fd\u6709\u5bf9\u5e94\u7684\u89e3\u51b3\u65b9\u6cd5\uff1a\n\u7b2c\u4e00\u4e2a\u5e38\u89c1\u539f\u56e0\uff0c\u662f<strong>\u52a0\u4e86<code>deep: true<\/code>\u7684\u666e\u901awatch\uff0c\u540c\u65f6\u4fee\u6539\u4e86\u540c\u4e00\u4e2a\u5f15\u7528\u7c7b\u578b\u91cc\u7684\u591a\u4e2a\u5c5e\u6027<\/strong>\u2014\u2014\u6bd4\u5982\u4f60\u5728\u4e00\u4e2a\u51fd\u6570\u91cc\u540c\u65f6\u4fee\u6539\u4e86<code>info.age<\/code>\u548c<code>info.hobbies[0]<\/code>\uff0c\u52a0\u4e86<code>deep: true<\/code>\u7684watch\u4f1a\u904d\u5386\u4e24\u6b21\u5bf9\u8c61\u6811\uff1f\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u4e0d\u662f\u904d\u5386\u4e24\u6b21\uff0c\u662fVue3\u7684\u54cd\u5e94\u5f0f\u66f4\u65b0\u662f<strong>\u6279\u91cf\u5f02\u6b65<\/strong>\u7684\uff0c\u5bf9\u5427\uff1f\u90a3\u4e3a\u4ec0\u4e48\u4f1a\u91cd\u590d\u89e6\u53d1\uff1f\u54e6\u5bf9\u54e6\uff0c\u6211\u5f53\u65f6\u72af\u4e86\u4e00\u4e2a\u4f4e\u7ea7\u9519\u8bef\uff1a\u5728\u975e\u54cd\u5e94\u5f0f\u7684\u4ee3\u7801\u5757\u91cc\u4fee\u6539\u4e86\u4e24\u6b21\u5c5e\u6027\uff0c\u800c\u4e14\u6ca1\u6709\u7528<code>nextTick<\/code>\u6216\u8005\u628a\u4e24\u6b21\u4fee\u6539\u653e\u5728\u540c\u4e00\u4e2a\u54cd\u5e94\u5f0f\u4ee3\u7801\u5757\u91cc\uff1f\u4e0d\uff0c\u4e0d\u5bf9\u4e0d\u5bf9\uff0c\u518d\u4ed4\u7ec6\u60f3\u4e00\u4e0b\uff0cVue3\u7684\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\u673a\u5236\u662f\uff1a\u4e0d\u7ba1\u4f60\u540c\u6b65\u4fee\u6539\u591a\u5c11\u4e2a\u54cd\u5e94\u5f0f\u5c5e\u6027\uff0c\u90fd\u4f1a\u628a\u5b83\u4eec\u5408\u5e76\u6210\u4e00\u6b21\u66f4\u65b0\uff0c\u7136\u540e\u5728nextTick\u91cc\u6267\u884cDOM\u66f4\u65b0\u548cwatch\u56de\u8c03\u2014\u2014\u90a3\u4e3a\u4ec0\u4e48\u6211\u5f53\u65f6\u4f1a\u91cd\u590d\u89e6\u53d1\uff1f\u54e6\uff01\u54e6\u5bf9\u54e6\uff01\u6211\u5f53\u65f6\u5728store\u7684action\u91cc\u7528\u4e86<code>async\/await<\/code>\uff0c\u4fee\u6539\u5c5e\u6027\u662f\u5728await\u4e4b\u540e\uff01\n\u54e6\uff01\u8fd9\u4e2a\u624d\u662f\u7b2c\u4e00\u4e2a\u5e38\u89c1\u539f\u56e0\u7684\u51c6\u786e\u8bf4\u6cd5\uff1a<strong>\u5982\u679c\u4fee\u6539store\u5c5e\u6027\u7684\u64cd\u4f5c\u662f\u5728\u5f02\u6b65\u64cd\u4f5c\uff08\u6bd4\u5982await\u8bf7\u6c42\u3001setTimeout\u3001setInterval\uff09\u4e4b\u540e\uff0c\u800c\u4e14\u662f\u5206\u591a\u6b21\u540c\u6b65\u4fee\u6539\u7684\uff0c\u90a3\u4e48\u6bcf\u6b21\u4fee\u6539\u90fd\u4f1a\u89e6\u53d1\u4e00\u6b21\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\uff0c\u4ece\u800c\u5bfc\u81f4watch\u56de\u8c03\u91cd\u590d\u89e6\u53d1<\/strong>\u2014\u2014\u56e0\u4e3aawait\u4e4b\u540e\u7684\u4ee3\u7801\u662f\u5728\u5fae\u4efb\u52a1\u961f\u5217\u91cc\u6267\u884c\u7684\uff0c\u6bcf\u6267\u884c\u4e00\u6b21\u540c\u6b65\u4fee\u6539\uff0cVue3\u90fd\u4f1a\u68c0\u67e5\u5f53\u524d\u7684\u5fae\u4efb\u52a1\u961f\u5217\u6709\u6ca1\u6709\u5176\u4ed6\u4fee\u6539\uff0c\u5982\u679c\u6ca1\u6709\u7684\u8bdd\uff0c\u5c31\u4f1a\u7acb\u5373\u5f00\u542f\u4e00\u6b21\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\uff08\u6216\u8005\u8bf4\uff0c\u5728\u540c\u4e00\u4e2a\u5fae\u4efb\u52a1\u91cc\u7684\u591a\u6b21\u540c\u6b65\u4fee\u6539\u4f1a\u5408\u5e76\uff0c\u4e0d\u540c\u5fae\u4efb\u52a1\u91cc\u7684\u591a\u6b21\u540c\u6b65\u4fee\u6539\u4f1a\u5206\u5f00\uff09\u3002\n\u4e3e\u4e2a\u4f8b\u5b50,\u6211\u5f53\u65f6\u72af\u7684\u9519\u8bef\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ user.js store\u7684action\uff08\u9519\u8bef\u793a\u8303\uff0c\u5bfc\u81f4watch\u91cd\u590d\u89e6\u53d1\uff09\nexport const useUserStore = defineStore(&#39;user&#39;, {\n  state: () =&gt; ({\n    name: &#39;\u5f20\u4e09&#39;,\n    info: {\n      age: 25,\n      hobbies: [&#39;\u6253\u7bee\u7403&#39;, &#39;\u770b\u7535\u5f71&#39;]\n    },\n    token: &#39;&#39;\n  }),\n  actions: {\n    async updateUserInfo() {\n      \/\/ \u6a21\u62df\u5f02\u6b65\u8bf7\u6c42\n      const res = await fetch(&#39;\/api\/user\/info&#39;)\n      const data = await res.json()\n      \/\/ \u5206\u4e24\u6b21\u540c\u6b65\u4fee\u6539\u5c5e\u6027\uff0c\u5728await\u4e4b\u540e\u7684\u540c\u4e00\u4e2a\u5fae\u4efb\u52a1\u91cc\u5417\uff1f\u662f\u7684\uff0c\u4f46\u4e3a\u4ec0\u4e48\u6211\u5f53\u65f6\u91cd\u590d\u89e6\u53d1\u4e86\uff1f\u54e6\u5bf9\u54e6\uff0c\u6211\u5f53\u65f6\u5728\u7ec4\u4ef6\u91cc\u4e5f\u52a0\u4e86\u4e00\u4e2a\u4fee\u6539\uff01\n      \/\/ \u54e6\uff0c\u90a3\u4e3e\u4e2a\u66f4\u51c6\u786e\u7684\u4e0d\u540c\u5fae\u4efb\u52a1\u7684\u4f8b\u5b50\uff1a\n      setTimeout(() =&gt; {\n        this.info.age = data.age\n      }, 100)\n      setTimeout(() =&gt; {\n        this.info.hobbies = data.hobbies\n      }, 200)\n    }\n  }\n})<\/pre>\n<p>\u8fd9\u4e2a\u4f8b\u5b50\u91cc\uff0c\u4e24\u4e2asetTimeout\u662f\u5728\u4e0d\u540c\u7684\u5b8f\u4efb\u52a1\u91cc\u6267\u884c\u7684\uff0c\u6bcf\u4e2a\u5b8f\u4efb\u52a1\u91cc\u7684\u540c\u6b65\u4fee\u6539\u90fd\u4f1a\u89e6\u53d1\u4e00\u6b21\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\uff0c\u6240\u4ee5watch\u56de\u8c03\u4f1a\u89e6\u53d1\u4e24\u6b21\u3002\n\u90a3\u8fd9\u4e2a\u539f\u56e0\u7684\u89e3\u51b3\u65b9\u6cd5\u662f\u4ec0\u4e48\uff1f\u6709\u4e24\u4e2a\uff1a<\/p>\n<ol>\n<li><strong>\u628a\u6240\u6709\u4fee\u6539store\u5c5e\u6027\u7684\u64cd\u4f5c\u653e\u5728\u540c\u4e00\u4e2a\u540c\u6b65\u4ee3\u7801\u5757\u91cc\uff0c\u6216\u8005\u540c\u4e00\u4e2a\u5fae\u4efb\u52a1\u91cc<\/strong>\u2014\u2014\u6bd4\u5982\u628a\u4e24\u4e2asetTimeout\u5408\u5e76\u6210\u4e00\u4e2a\uff0c\u6216\u8005\u5728await\u4e4b\u540e\u4e00\u6b21\u6027\u4fee\u6539\u6240\u6709\u5c5e\u6027,\u4e0d\u8981\u5206\u591a\u6b21\u3002<\/li>\n<li><strong>\u5982\u679c\u5fc5\u987b\u5206\u591a\u6b21\u4fee\u6539\uff0c\u800c\u4e14\u662f\u5728\u4e0d\u540c\u7684\u5fae\u4efb\u52a1\/\u5b8f\u4efb\u52a1\u91cc\uff0c\u53ef\u4ee5\u5728store\u91cc\u52a0\u4e00\u4e2a<code>loading<\/code>\u6216\u8005<code>isUpdating<\/code>\u7684state\u5c5e\u6027\uff0c\u5728\u5f00\u59cb\u4fee\u6539\u7684\u65f6\u5019\u8bbe\u4e3atrue\uff0c\u7ed3\u675f\u7684\u65f6\u5019\u8bbe\u4e3afalse\uff0c\u7136\u540e\u5728\u7ec4\u4ef6\u7684watch\u56de\u8c03\u91cc\u52a0\u4e00\u4e2a\u5224\u65ad\uff0c\u53ea\u6709<code>isUpdating<\/code>\u4e3afalse\u7684\u65f6\u5019\u624d\u6267\u884c\u903b\u8f91<\/strong>\u2014\u2014\u6216\u8005\u66f4\u7b80\u5355\uff0c\u7528Vue3\u7684<code>watch<\/code>\u7684<code>flush<\/code>\u9009\u9879\uff0c\u628a<code>flush<\/code>\u8bbe\u4e3a<code>'post'<\/code>\uff08\u9ed8\u8ba4\u662f<code>'pre'<\/code>\uff0c\u5728DOM\u66f4\u65b0\u524d\u6267\u884c\uff1b<code>'post'<\/code>\u5728DOM\u66f4\u65b0\u540e\u6267\u884c\uff1b\u8fd8\u6709<code>'sync'<\/code>\uff0c\u540c\u6b65\u6267\u884c\uff0c\u4e0d\u63a8\u8350\uff0c\u6027\u80fd\u5dee\uff09\uff0c\u4e0d\u8fc7\u8fd9\u4e2a\u597d\u50cf\u4e0d\u80fd\u89e3\u51b3\u4e0d\u540c\u5b8f\u4efb\u52a1\u7684\u95ee\u9898\uff0c\u53ea\u80fd\u89e3\u51b3\u540c\u4e00\u4e2a\u5fae\u4efb\u52a1\u91cc\u7684\u67d0\u4e9b\u7279\u6b8a\u60c5\u51b5\uff1f\u4e0d\u5bf9\uff0c\u540c\u7ec4\u6280\u672f\u5b85\u8bf4<code>flush<\/code>\u9009\u9879\u4e3b\u8981\u662f\u63a7\u5236\u56de\u8c03\u6267\u884c\u7684\u65f6\u673a\uff0c\u548c\u6279\u91cf\u66f4\u65b0\u65e0\u5173,\u8fd8\u662f\u63a8\u8350\u7b2c\u4e00\u4e2a\u65b9\u6cd5\u3002<\/li>\n<\/ol>\n<p>\u7b2c\u4e8c\u4e2a\u5e38\u89c1\u539f\u56e0\uff0c\u662f<strong>\u76d1\u542c\u7684\u662fstore\u7684getter\uff0c\u800cgetter\u7684\u4f9d\u8d56\u9879\u6709\u591a\u4e2a\u53d8\u5316<\/strong>\u2014\u2014\u6bd4\u5982\u4f60\u6709\u4e00\u4e2agetter\u53eb<code>fullUserInfo<\/code>\uff0c\u4f9d\u8d56<code>name<\/code>\u548c<code>info.age<\/code>\uff0c\u5982\u679c\u4f60\u540c\u65f6\u4fee\u6539\u4e86<code>name<\/code>\u548c<code>info.age<\/code>\uff0c\u90a3\u4e48getter\u4f1a\u91cd\u65b0\u8ba1\u7b97\u4e00\u6b21\uff0c\u4f46watch\u56de\u8c03\u4f1a\u89e6\u53d1\u51e0\u6b21\uff1f\u54e6\uff0c\u9ed8\u8ba4\u662f\u89e6\u53d1\u4e00\u6b21\uff0c\u56e0\u4e3a\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\u561b\uff0c\u4f46\u5982\u679c\u4f60\u5728getter\u91cc\u7528\u4e86<code>computed<\/code>\u7684<code>lazy: false<\/code>\u9009\u9879\uff1f\u4e0d\u5bf9\uff0cVue3\u7684<code>computed<\/code>\u9ed8\u8ba4\u662f<code>lazy: true<\/code>\u7684\uff0c\u53ea\u6709\u88ab\u8bbf\u95ee\u7684\u65f6\u5019\u624d\u4f1a\u8ba1\u7b97\uff0c\u800c\u4e14\u4f9d\u8d56\u9879\u53d8\u5316\u65f6\u4f1a\u6807\u8bb0\u4e3adirty\uff0c\u4e0b\u6b21\u8bbf\u95ee\u7684\u65f6\u5019\u624d\u91cd\u65b0\u8ba1\u7b97\u2014\u2014\u90a3\u4e3a\u4ec0\u4e48\u4f1a\u91cd\u590d\u89e6\u53d1\uff1f\u54e6\uff01\u54e6\u5bf9\u54e6\uff01\u6211\u5f53\u65f6\u5728getter\u91cc\u8c03\u7528\u4e86\u4e00\u4e2a\u666e\u901a\u51fd\u6570\uff0c\u800c\u8fd9\u4e2a\u666e\u901a\u51fd\u6570\u91cc\u8bbf\u95ee\u4e86\u5176\u4ed6\u54cd\u5e94\u5f0f\u6570\u636e\uff01\n\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ user.js store\u7684getter\uff08\u9519\u8bef\u793a\u8303\uff0c\u5bfc\u81f4watch\u91cd\u590d\u89e6\u53d1\uff09\nexport const useUserStore = defineStore(&#39;user&#39;, {\n  state: () =&gt; ({\n    name: &#39;\u5f20\u4e09&#39;,\n    info: {\n      age: 25,\n      hobbies: [&#39;\u6253\u7bee\u7403&#39;, &#39;\u770b\u7535\u5f71&#39;]\n    },\n    token: &#39;&#39;,\n    theme: &#39;light&#39; \/\/ \u65b0\u589e\u4e00\u4e2atheme state\n  }),\n  getters: {\n    fullUserInfo: (state) =&gt; {\n      \/\/ \u8fd9\u91cc\u8c03\u7528\u4e86\u4e00\u4e2a\u666e\u901a\u51fd\u6570\uff0c\u666e\u901a\u51fd\u6570\u91cc\u8bbf\u95ee\u4e86state.theme\n      const formatName = (name) =&gt; {\n        \/\/ \u867d\u7136theme\u548cfullUserInfo\u65e0\u5173\uff0c\u4f46\u8fd9\u91cc\u8bbf\u95ee\u4e86state.theme\uff0c\u5c31\u4f1a\u88ab\u6536\u96c6\u4e3afullUserInfo\u7684\u4f9d\u8d56\n        console.log(&#39;\u5f53\u524d\u4e3b\u9898\uff1a&#39;, state.theme)\n        return name + &#39;\u540c\u5b66&#39;\n      }\n      return `${formatName(state.name)}\uff0c\u4eca\u5e74${state.info.age}\u5c81`\n    }\n  }\n})<\/pre>\n<p>\u8fd9\u4e2a\u4f8b\u5b50\u91cc\uff0c<code>fullUserInfo<\/code>\u7684\u4f9d\u8d56\u9879\u672c\u6765\u5e94\u8be5\u662f<code>name<\/code>\u548c<code>info.age<\/code>\uff0c\u4f46\u56e0\u4e3a<code>formatName<\/code>\u51fd\u6570\u91cc\u8bbf\u95ee\u4e86<code>state.theme<\/code>\uff0c\u6240\u4ee5<code>theme<\/code>\u4e5f\u88ab\u6536\u96c6\u4e3a\u4f9d\u8d56\u4e86\u2014\u2014\u8fd9\u65f6\u5019\u5982\u679c\u4f60\u4fee\u6539\u4e86<code>theme<\/code>\uff0c<code>fullUserInfo<\/code>\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0cwatch\u56de\u8c03\u4e5f\u4f1a\u89e6\u53d1\uff0c\u4f46\u6211\u4eec\u5176\u5b9e\u4e0d\u9700\u8981\u76d1\u542c<code>theme<\/code>\u7684\u53d8\u5316\uff0c\u6240\u4ee5\u8fd9\u5c31\u9020\u6210\u4e86\u4e0d\u5fc5\u8981\u7684\u91cd\u590d\u89e6\u53d1\u3002\n\u90a3\u8fd9\u4e2a\u539f\u56e0\u7684\u89e3\u51b3\u65b9\u6cd5\u662f\u4ec0\u4e48\uff1f\u6709\u4e24\u4e2a\uff1a<\/p>\n<ol>\n<li><strong>\u628a\u666e\u901a\u51fd\u6570\u91cc\u8bbf\u95ee\u7684\u65e0\u5173\u54cd\u5e94\u5f0f\u6570\u636e\u79fb\u5230\u5916\u9762\uff0c\u6216\u8005\u7528<code>markRaw<\/code>\u5305\u88f9<\/strong>\u2014\u2014\u6bd4\u5982\u628a<code>formatName<\/code>\u51fd\u6570\u79fb\u5230getter\u5916\u9762\uff0c\u6216\u8005\u79fb\u5230store\u5916\u9762\uff0c\u4e0d\u8981\u8bbf\u95eestate\u91cc\u7684\u65e0\u5173\u6570\u636e\uff1b\u5982\u679c\u5fc5\u987b\u8bbf\u95ee\uff0c\u53ef\u4ee5\u628a\u90a3\u4e2a\u6570\u636e\u7528<code>markRaw<\/code>\u5305\u88f9\uff0c\u4f46<code>markRaw<\/code>\u5305\u88f9\u7684\u6570\u636e\u5c31\u4e0d\u662f\u54cd\u5e94\u5f0f\u7684\u4e86,\u8981\u6ce8\u610f\u3002<\/li>\n<li><strong>\u5728getter\u91cc\u53ea\u8bbf\u95ee\u9700\u8981\u7684\u4f9d\u8d56\u9879\uff0c\u4e0d\u8981\u8c03\u7528\u5176\u4ed6\u53ef\u80fd\u8bbf\u95ee\u65e0\u5173\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u51fd\u6570<\/strong>\u2014\u2014\u5c3d\u91cf\u8ba9getter\u7684\u903b\u8f91\u7b80\u5355\u3001\u7eaf\u7cb9\uff0c\u53ea\u505a\u8ba1\u7b97\uff0c\u4e0d\u505a\u5176\u4ed6\u64cd\u4f5c\uff08\u6bd4\u5982\u6253\u5370\u3001\u8c03\u7528API\u3001\u4fee\u6539state\uff09\uff0c\u6253\u5370\u548c\u4fee\u6539state\u7684\u64cd\u4f5c\u653e\u5728action\u6216\u8005\u7ec4\u4ef6\u91cc,\u8c03\u7528API\u7684\u64cd\u4f5c\u653e\u5728action\u91cc\u3002<\/li>\n<\/ol>\n<p>\u7b2c\u4e09\u4e2a\u5e38\u89c1\u539f\u56e0\uff0c\u662f<strong>\u7528\u4e86Vue3\u7684<code>watch<\/code>\u76d1\u542c\u591a\u4e2a\u5c5e\u6027\uff0c\u800c\u4e14\u7528\u4e86\u6570\u7ec4\u7684\u5f62\u5f0f\uff0c\u540c\u65f6\u8fd9\u4e9b\u5c5e\u6027\u6709\u4f9d\u8d56\u5173\u7cfb<\/strong>\u2014\u2014\u6bd4\u5982\u4f60\u76d1\u542c\u4e86<code>[name, fullUserInfo]<\/code>\uff0c\u800c<code>fullUserInfo<\/code>\u4f9d\u8d56<code>name<\/code>\uff0c\u8fd9\u65f6\u5019\u5982\u679c\u4f60\u4fee\u6539\u4e86<code>name<\/code>\uff0c<code>name<\/code>\u4f1a\u53d8\uff0c<code>fullUserInfo<\/code>\u4e5f\u4f1a\u53d8\uff0c\u6240\u4ee5watch\u56de\u8c03\u4f1a\u89e6\u53d1\u4e24\u6b21\uff1f\u54e6\uff0c\u9ed8\u8ba4\u662f\u89e6\u53d1\u4e00\u6b21\uff0c\u56e0\u4e3a\u6279\u91cf\u5f02\u6b65\u66f4\u65b0\u561b\uff0c\u4f46\u5982\u679c\u4f60\u5728<code>name<\/code>\u53d8\u5316\u540e\u7acb\u5373\u8bbf\u95ee\u4e86<code>fullUserInfo<\/code>\uff0c\u5bfc\u81f4<code>fullUserInfo<\/code>\u63d0\u524d\u8ba1\u7b97\uff0c\u7136\u540e\u6279\u91cf\u66f4\u65b0\u7684\u65f6\u5019\u53c8\u8ba1\u7b97\u4e86\u4e00\u6b21\uff1f\u4e0d\u5bf9\uff0c\u540c\u7ec4\u6280\u672f\u5b85\u8bf4\u8fd9\u4e2a\u60c5\u51b5\u4e00\u822c\u4e0d\u4f1a\u89e6\u53d1\u4e24\u6b21\uff0c\u4f46\u5982\u679c\u7528\u4e86<code>watch<\/code>\u7684<code>immediate: true<\/code>\u9009\u9879\uff0c\u518d\u52a0\u4e0a\u4fee\u6539\u5c5e\u6027\u7684\u65f6\u673a\u4e0d\u5bf9\uff0c\u53ef\u80fd\u4f1a\u89e6\u53d1\u4e24\u6b21\uff1f\u6216\u8005\u4e3e\u4e2a\u66f4\u51c6\u786e\u7684\u4f8b\u5b50\uff1a\u4f60\u76d1\u542c\u4e86<code>[info.age, info]<\/code>\uff0c\u800c\u4e14\u52a0\u4e86<code>deep: true<\/code>\uff0c\u8fd9\u65f6\u5019\u4fee\u6539<code>info.age<\/code>\uff0c<code>info.age<\/code>\u4f1a\u53d8\uff0c<code>info<\/code>\u56e0\u4e3a\u52a0\u4e86<code>deep: true<\/code>\u4e5f\u4f1a\u53d8\uff0c\u6240\u4ee5watch\u56de\u8c03\u4f1a\u89e6\u53d1\u4e24\u6b21\uff1f\u5bf9\uff01\u8fd9\u4e2a\u60c5\u51b5\u662f\u771f\u7684\u4f1a\u89e6\u53d1\u4e24\u6b21\uff01\n\u54e6,\u8fd9\u4e2a\u4f8b\u5b50\u66f4\u51c6\u786e\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u7ec4\u4ef6\u91cc\u7684\u9519\u8bef\u793a\u8303\uff08\u5bfc\u81f4watch\u91cd\u590d\u89e6\u53d1\uff09\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { storeToRefs, watch } from &#39;pinia&#39;\nconst userStore = useUserStore()\nconst { info } = storeToRefs(userStore)\nwatch([() =&gt; userStore.info.age, info], (newVal) =&gt; {\n  console.log(&#39;\u76d1\u542c\u7684\u5c5e\u6027\u53d8\u4e86\uff1a&#39;, newVal)\n}, { deep: true })<\/pre>\n<p>\u8fd9\u4e2a\u4f8b\u5b50\u91cc\uff0c\u76d1\u542c\u7684\u662f\u4e24\u4e2a\u5c5e\u6027\uff1a\u4e00\u4e2a\u662f<code>info.age<\/code>\uff08\u7528getter\u51fd\u6570\u5199\u6cd5\uff09\uff0c\u53e6\u4e00\u4e2a\u662f<code>info<\/code>\uff08ref\u5bf9\u8c61\uff0c\u52a0\u4e86<code>deep: true<\/code>\uff09\u2014\u2014\u5f53\u4f60\u4fee\u6539<code>info.age<\/code>\u65f6\uff0c\u7b2c\u4e00\u4e2a\u76d1\u542c\u9879\u4f1a\u53d8\uff0c\u7b2c\u4e8c\u4e2a\u76d1\u542c\u9879\u56e0\u4e3a\u52a0\u4e86<code>deep: true<\/code>\u4e5f\u4f1a\u53d8\uff0c\u6240\u4ee5watch\u56de\u8c03\u4f1a\u89e6\u53d1\u4e24\u6b21\uff0c\u7b2c\u4e00\u6b21<code>newVal<\/code>\u662f<code>[26, { age: 26, ... }]<\/code>\uff0c\u7b2c\u4e8c\u6b21\u53ef\u80fd\u4e5f\u662f\u4e00\u6837\u7684\uff0c\u4f46\u4e0d\u7ba1\u600e\u6837\uff0c\u90fd\u662f\u91cd\u590d\u89e6\u53d1\u3002\n\u90a3\u8fd9\u4e2a\u539f\u56e0\u7684\u89e3\u51b3\u65b9\u6cd5\u662f\u4ec0\u4e48\uff1f\u5f88\u7b80\u5355\uff1a<strong>\u907f\u514d\u76d1\u542c\u6709\u4f9d\u8d56\u5173\u7cfb\u7684\u591a\u4e2a\u5c5e\u6027\uff0c\u53ea\u76d1\u542c\u6700\u6838\u5fc3\u7684\u90a3\u4e2a<\/strong>\u2014\u2014\u6bd4\u5982\u8fd9\u4e2a\u4f8b\u5b50\u91cc\uff0c\u53ea\u76d1\u542c<code>() =&gt; userStore.info.age<\/code>\u6216\u8005\u53ea\u76d1\u542c<code>info<\/code>\uff08\u52a0<code>deep: true<\/code>\uff09,\u4e0d\u8981\u4e24\u4e2a\u90fd\u76d1\u542c\u3002<\/p>\n<hr \/>\n<h2>watch store change\u7684\u7b2c\u4e09\u4e2a\u9ad8\u7ea7\u95ee\u9898\uff1a\u6709\u6ca1\u6709\u529e\u6cd5\u76d1\u542cstore\u91cc\u67d0\u4e2a\u6a21\u5757\u7684\u6240\u6709state\u53d8\u5316\uff1f\u6216\u8005\u76d1\u542c\u6574\u4e2astore\u7684\u6240\u6709\u53d8\u5316\uff1f\u6709\u6ca1\u6709\u5fc5\u8981\u8fd9\u4e48\u505a\uff1f<\/h2>\n<p>\u8fd9\u4e2a\u95ee\u9898\u662f\u540c\u7ec4\u6280\u672f\u5b85\u95ee\u6211\u7684\uff0c\u4ed6\u8bf4\u4e4b\u524d\u505a\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u7684\u65f6\u5019\uff0c\u60f3\u5b9e\u73b0\u4e00\u4e2a\u201c\u5168\u5c40\u72b6\u6001\u53d8\u66f4\u65e5\u5fd7\u201d\u7684\u529f\u80fd\uff0c\u8bb0\u5f55\u6240\u6709store\u7684state\u53d8\u5316\uff0c\u65b9\u4fbf\u8c03\u8bd5\u548c\u56de\u6eaf\u2014\u2014\u90a3\u6709\u6ca1\u6709\u529e\u6cd5\u5b9e\u73b0\uff1f\u6709\uff0c\u4f46\u8981\u770b\u4f60\u7528\u7684\u662fPinia\u8fd8\u662fVuex\uff0c\u800c\u4e14\u8981\u8003\u8651\u6709\u6ca1\u6709\u5fc5\u8981\u8fd9\u4e48\u505a\u3002\n\u5148\u8bb2\u6709\u6ca1\u6709\u5fc5\u8981\u8fd9\u4e48\u505a\uff1a<strong>\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u4e0d\u63a8\u8350\u5728\u751f\u4ea7\u73af\u5883\u91cc\u76d1\u542c\u6574\u4e2a\u6a21\u5757\u6216\u8005\u6574\u4e2astore\u7684\u6240\u6709state\u53d8\u5316<\/strong>\uff0c\u56e0\u4e3a\u6027\u80fd\u592a\u5dee\u4e86\uff0c\u4e0d\u7ba1\u662f\u52a0<code>deep: true<\/code>\u7684\u666e\u901awatch\uff0c\u8fd8\u662f\u7528Pinia\/Vuex\u7684\u63d2\u4ef6\uff0c\u90fd\u4f1a\u904d\u5386\u6574\u4e2astate\u5bf9\u8c61\u6811\uff0c\u6bcf\u6b21\u4fee\u6539\u90fd\u4f1a\u6d88\u8017\u4e00\u5b9a\u7684\u6027\u80fd\uff0c\u5728\u5927\u578b\u9879\u76ee\u91cc\u53ef\u80fd\u4f1a\u9020\u6210\u5361\u987f\uff1b\u4f46\u5728\u5f00\u53d1\u73af\u5883\u91cc\uff0c\u662f\u5b8c\u5168\u53ef\u4ee5\u7684\uff0c\u800c\u4e14\u5f88\u6709\u7528\uff0c\u6bd4\u5982\u521a\u624d\u8bf4\u7684\u5168\u5c40\u72b6\u6001\u53d8\u66f4\u65e5\u5fd7\uff0c\u8fd8\u6709\u6301\u4e45\u5316\u63d2\u4ef6\uff08\u4e0d\u8fc7\u6301\u4e45\u5316\u63d2\u4ef6\u4e00\u822c\u53ea\u76d1\u542c\u9700\u8981\u6301\u4e45\u5316\u7684\u6a21\u5757\u6216\u8005\u5c5e\u6027\uff0c\u4e0d\u4f1a\u76d1\u542c\u6574\u4e2astore\uff09\u3002\n\u90a3\u63a5\u4e0b\u6765\u8bb2\u5177\u4f53\u7684\u5b9e\u73b0\u65b9\u6cd5,\u5206Pinia\u548cVuex\u4e24\u79cd\uff1a<\/p>\n<h3>Pinia\u76d1\u542c\u6574\u4e2a\u6a21\u5757\/\u6574\u4e2astore\u7684\u6240\u6709\u53d8\u5316<\/h3>\n<p>Pinia\u5b98\u65b9\u63d0\u4f9b\u4e86<strong>\u63d2\u4ef6\u673a\u5236<\/strong>\uff0c\u53ef\u4ee5\u5728\u63d2\u4ef6\u91cc\u76d1\u542c\u6240\u6709store\u7684\u6240\u6709state\u53d8\u5316\uff0c\u6216\u8005\u5355\u4e2astore\u7684\u6240\u6709state\u53d8\u5316\u2014\u2014\u8fd9\u4e2a\u6bd4\u666e\u901awatch\u52a0<code>deep: true<\/code>\u66f4\u9ad8\u6548\uff0c\u56e0\u4e3aPinia\u7684\u63d2\u4ef6\u662f\u76f4\u63a5\u5728state\u7684reactive\u4ee3\u7406\u4e0a\u6dfb\u52a0<code>watch<\/code>\u6216\u8005<code>watchEffect<\/code>\u7684\uff0c\u800c\u4e14\u53ef\u4ee5\u5728\u63d2\u4ef6\u91cc\u8fc7\u6ee4\u6389\u4e0d\u9700\u8981\u76d1\u542c\u7684store\u6216\u8005\u5c5e\u6027\u3002\n\u4e3e\u4e2a\u4f8b\u5b50,\u5b9e\u73b0\u4e00\u4e2a\u5f00\u53d1\u73af\u5883\u7684\u5168\u5c40\u72b6\u6001\u53d8\u66f4\u65e5\u5fd7\u63d2\u4ef6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ plugins\/logger.js\uff08Pinia\u63d2\u4ef6\uff0c\u53ea\u5728\u5f00\u53d1\u73af\u5883\u751f\u6548\uff09\nimport { watch } from &#39;vue&#39;\nexport function createLoggerPlugin() {\n  return {\n    \/\/ install\u51fd\u6570\u662fPinia\u63d2\u4ef6\u7684\u5165\u53e3\uff0c\u53c2\u6570\u662fapp\u548coptions\uff08\u53ef\u9009\uff09\n    install(app) {\n      \/\/ \u8fd9\u91cc\u7684app\u662fPinia\u7684app\u5b9e\u4f8b\u5417\uff1f\u4e0d\u5bf9\uff0cPinia\u63d2\u4ef6\u7684install\u51fd\u6570\u7684\u53c2\u6570\u662f(pinia, app, options)\uff0c\u54e6\u5bf9\u54e6\uff0c\u521a\u624d\u8bb0\u9519\u4e86\uff0c\u5f97\u770b\u5b98\u65b9\u6587\u6863\u7684\u7b80\u5316\u7248\u903b\u8f91\uff1a\n      install(pinia, app, options) {\n        \/\/ \u53ea\u5728\u5f00\u53d1\u73af\u5883\u751f\u6548\n        if (import.meta.env.MODE !== &#39;development&#39;) return\n        \/\/ \u76d1\u542c\u6240\u6709store\u7684\u521b\u5efa\n        pinia.use(({ store, options }) =&gt; {\n          \/\/ store\u662f\u5f53\u524d\u521b\u5efa\u7684store\u5b9e\u4f8b\n          \/\/ options\u662f\u5f53\u524dstore\u7684\u914d\u7f6e\uff08state\u3001getters\u3001actions\uff09\n          console.log(`Store ${store.$id} \u5df2\u521b\u5efa`)\n          \/\/ \u76d1\u542c\u5f53\u524dstore\u7684\u6240\u6709state\u53d8\u5316\n          watch(\n            () =&gt; store.$state, \/\/ \u76f4\u63a5\u76d1\u542c\u6574\u4e2a$state\uff08reactive\u5bf9\u8c61\uff09\n            (newState, oldState) =&gt; {\n              console.group(`Store ${store.$id} \u72b6\u6001\u53d8\u66f4`)\n              console.log(&#39;\u65e7\u72b6\u6001\uff1a&#39;, oldState)\n              console.log(&#39;\u65b0\u72b6\u6001\uff1a&#39;, newState)\n              console.groupEnd()\n            },\n            { deep: true, flush: &#39;sync&#39; } \/\/ \u52a0deep: true\u76d1\u542c\u6df1\u5c42\u53d8\u5316\uff0cflush: &#39;sync&#39;\u540c\u6b65\u6267\u884c\uff0c\u65b9\u4fbf\u8c03\u8bd5\n          )\n          \/\/ \u4e5f\u53ef\u4ee5\u76d1\u542c\u5355\u4e2aaction\u7684\u6267\u884c\n          store.$onAction(({ name, store, args, after, onError }) =&gt; {\n            console.log(`Store ${store.$id} \u7684 Action ${name} \u5f00\u59cb\u6267\u884c\uff0c\u53c2\u6570\uff1a`, args)\n            after((result) =&gt; {\n              console.log(`Store ${store.$id} \u7684 Action ${name} \u6267\u884c\u6210\u529f\uff0c\u7ed3\u679c\uff1a`, result)\n            })\n            onError((error) =&gt; {\n              console.error(`Store ${store.$id} \u7684 Action ${name} \u6267\u884c\u5931\u8d25\uff0c\u9519\u8bef\uff1a`, error)\n            })\n          })\n        })\n      }\n    }\n  }\n}<\/pre>\n<p>\u7136\u540e\u5728main.js\u91cc\u5f15\u5165\u5e76\u6ce8\u518c\u8fd9\u4e2a\u63d2\u4ef6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ main.js\nimport { createApp } from &#39;vue&#39;\nimport { createPinia } from &#39;pinia&#39;\nimport { createLoggerPlugin } from &#39;@\/plugins\/logger&#39;\nimport App from &#39;.\/App.vue&#39;\nconst app = createApp(App)\nconst pinia = createPinia()\n\/\/ \u6ce8\u518clogger\u63d2\u4ef6\npinia.use(createLoggerPlugin())\napp.use(pinia)\napp.mount(&#39;#app&#39;)<\/pre>\n<p>\u8fd9\u6837\u5728\u5f00\u53d1\u73af\u5883\u91cc\uff0c\u4e0d\u7ba1\u54ea\u4e2astore\u7684state\u53d8\u5316\uff0c\u6216\u8005\u54ea\u4e2aaction\u6267\u884c\uff0c\u90fd\u4f1a\u5728\u63a7\u5236\u53f0\u6253\u5370\u51fa\u6765\uff0c\u975e\u5e38\u65b9\u4fbf\u8c03\u8bd5\u3002\n\u5982\u679c\u53ea\u60f3\u76d1\u542c\u5355\u4e2astore\u7684\u6240\u6709state\u53d8\u5316\uff0c\u4e0d\u9700\u8981\u63d2\u4ef6\uff0c\u76f4\u63a5\u5728store\u7684\u5b9a\u4e49\u91cc\u6216\u8005\u7ec4\u4ef6\u91cc\u7528<code>watch<\/code>\u76d1\u542c<code>store.$state<\/code>\u5c31\u884c\uff0c\u52a0<code>deep: true<\/code>\uff0c<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u53ea\u76d1\u542cuser store\u7684\u6240\u6709state\u53d8\u5316\uff08\u5728\u7ec4\u4ef6\u91cc\uff09\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch } from &#39;vue&#39;\nconst userStore = useUserStore()\nwatch(\n  () =&gt; userStore.$state,\n  (newState, oldState) =&gt; {\n    console.log(&#39;User store \u72b6\u6001\u53d8\u66f4\uff1a&#39;, newState, oldState)\n  },\n  { deep: true }\n)<\/pre>\n<h3>Vuex4\u76d1\u542c\u6574\u4e2a\u6a21\u5757\/\u6574\u4e2astore\u7684\u6240\u6709\u53d8\u5316<\/h3>\n<p>Vuex4\u5b98\u65b9\u4e5f\u63d0\u4f9b\u4e86<strong>\u63d2\u4ef6\u673a\u5236<\/strong>\uff0c\u548cPinia\u7c7b\u4f3c\uff0c\u53ef\u4ee5\u5728\u63d2\u4ef6\u91cc\u76d1\u542c\u6240\u6709state\u53d8\u5316\uff1bVuex4\u7684store\u5b9e\u4f8b\u8fd8\u6709\u4e00\u4e2a<code>subscribe<\/code>\u65b9\u6cd5\uff0c\u53ef\u4ee5\u76d1\u542c\u6240\u6709mutation\u7684\u63d0\u4ea4\uff08\u56e0\u4e3aVuex\u7684state\u53ea\u80fd\u901a\u8fc7mutation\u4fee\u6539\uff0c\u6240\u4ee5\u76d1\u542cmutation\u7684\u63d0\u4ea4\u5c31\u7b49\u4e8e\u76d1\u542c\u6240\u6709state\u53d8\u5316\uff09\u2014\u2014\u8fd9\u4e2a<code>subscribe<\/code>\u65b9\u6cd5\u6bd4\u666e\u901awatch\u52a0<code>deep: true<\/code>\u66f4\u9ad8\u6548\uff0c\u56e0\u4e3a\u4e0d\u9700\u8981\u904d\u5386\u6574\u4e2astate\u5bf9\u8c61\u6811\uff0c\u53ea\u9700\u8981\u76d1\u542cmutation\u7684\u63d0\u4ea4\u4e8b\u4ef6\u5c31\u884c\uff0c\u800c\u4e14\u53ef\u4ee5\u83b7\u53d6\u5230mutation\u7684\u7c7b\u578b\u548c\u53c2\u6570\u3002\n\u4e3e\u4e2a\u4f8b\u5b50,\u5b9e\u73b0\u4e00\u4e2a\u5f00\u53d1\u73af\u5883\u7684Vuex4\u5168\u5c40\u72b6\u6001\u53d8\u66f4\u65e5\u5fd7\u63d2\u4ef6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ plugins\/vuex-logger.js\uff08Vuex4\u63d2\u4ef6\uff0c\u53ea\u5728\u5f00\u53d1\u73af\u5883\u751f\u6548\uff09\nexport function createVuexLoggerPlugin() {\n  return (store) =&gt; {\n    \/\/ store\u662fVuex\u7684store\u5b9e\u4f8b\n    \/\/ \u53ea\u5728\u5f00\u53d1\u73af\u5883\u751f\u6548\n    if (import.meta.env.MODE !== &#39;development&#39;) return\n    \/\/ \u76d1\u542c\u6240\u6709mutation\u7684\u63d0\u4ea4\n    store.subscribe((mutation, state) =&gt; {\n      console.group(`Vuex Mutation ${mutation.type} \u5df2\u63d0\u4ea4`)\n      console.log(&#39;\u53c2\u6570\uff1a&#39;, mutation.payload)\n      console.log(&#39;\u65b0\u72b6\u6001\uff1a&#39;, state)\n      console.groupEnd()\n    })\n    \/\/ \u4e5f\u53ef\u4ee5\u76d1\u542c\u6240\u6709action\u7684\u6267\u884c\n    store.subscribeAction((action, state) =&gt; {\n      console.log(`Vuex Action ${action.type} \u5f00\u59cb\u6267\u884c\uff0c\u53c2\u6570\uff1a`, action.payload)\n    }, { prepend: false }) \/\/ prepend: false\u8868\u793a\u5728action\u6267\u884c\u540e\u76d1\u542c\uff0ctrue\u8868\u793a\u5728\u6267\u884c\u524d\u76d1\u542c\n  }\n}<\/pre>\n<p>\u7136\u540e\u5728main.js\u91cc\u5f15\u5165\u5e76\u6ce8\u518c\u8fd9\u4e2a\u63d2\u4ef6\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ main.js\nimport { createApp } from &#39;vue&#39;\nimport { createStore } from &#39;vuex&#39;\nimport { createVuexLoggerPlugin } from &#39;@\/plugins\/vuex-logger&#39;\nimport App from &#39;.\/App.vue&#39;\n\/\/ \u521b\u5efaVuex store\u5b9e\u4f8b\uff0c\u5f15\u5165logger\u63d2\u4ef6\nconst store = createStore({\n  plugins: [createVuexLoggerPlugin()],\n  \/\/ state\u3001getters\u3001mutations\u3001actions\u7684\u914d\u7f6e\n  state: () =&gt; ({\n    name: &#39;\u5f20\u4e09&#39;,\n    info: {\n      age: 25,\n      hobbies: [&#39;\u6253\u7bee\u7403&#39;, &#39;\u770b\u7535\u5f71&#39;]\n    }\n  })\n})\nconst app = createApp(App)\napp.use(store)\napp.mount(&#39;#app&#39;)<\/pre>\n<p>\u8fd9\u6837\u5728\u5f00\u53d1\u73af\u5883\u91cc\uff0c\u4e0d\u7ba1\u63d0\u4ea4\u54ea\u4e2amutation\uff0c\u6216\u8005\u6267\u884c\u54ea\u4e2aaction\uff0c\u90fd\u4f1a\u5728\u63a7\u5236\u53f0\u6253\u5370\u51fa\u6765\uff0c\u975e\u5e38\u65b9\u4fbf\u8c03\u8bd5\u3002\n\u5982\u679c\u53ea\u60f3\u76d1\u542c\u5355\u4e2a\u6a21\u5757\u7684\u6240\u6709state\u53d8\u5316\uff0cVuex4\u53ef\u4ee5\u7528<code>subscribe<\/code>\u65b9\u6cd5\u52a0\u8fc7\u6ee4\uff0c\u6bd4\u5982\u53ea\u76d1\u542c<code>user<\/code>\u6a21\u5757\u7684mutation\uff08Vuex\u7684mutation\u7c7b\u578b\u5982\u679c\u662f\u6a21\u5757\u5316\u7684\uff0c\u4f1a\u81ea\u52a8\u52a0\u4e0a\u6a21\u5757\u540d\u524d\u7f00\uff0c\u6bd4\u5982<code>user\/setName<\/code>\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u53ea\u76d1\u542cuser\u6a21\u5757\u7684\u6240\u6709state\u53d8\u5316\uff08\u5728Vuex\u63d2\u4ef6\u91cc\u6216\u8005\u7ec4\u4ef6\u91cc\uff09\n\/\/ \u5728\u63d2\u4ef6\u91cc\uff1a\nstore.subscribe((mutation, state) =&gt; {\n  if (mutation.type.startsWith(&#39;user\/&#39;)) {\n    console.group(`Vuex User Module Mutation ${mutation.type} \u5df2\u63d0\u4ea4`)\n    console.log(&#39;\u53c2\u6570\uff1a&#39;, mutation.payload)\n    console.log(&#39;\u65b0\u72b6\u6001\uff1a&#39;, state.user)\n    console.groupEnd()\n  }\n})\n\/\/ \u5728\u7ec4\u4ef6\u91cc\uff1a\nimport { useStore } from &#39;vuex&#39;\nconst store = useStore()\nstore.subscribe((mutation, state) =&gt; {\n  if (mutation.type.startsWith(&#39;user\/&#39;)) {\n    console.log(&#39;User module \u72b6\u6001\u53d8\u66f4&#39;)\n  }\n})<\/pre>\n<hr \/>\n<h2>watch store change\u7684\u7b2c\u56db\u4e2a\u5b9e\u7528\u95ee\u9898\uff1a\u6709\u6ca1\u6709\u529e\u6cd5\u76d1\u542cstore\u91ccstate\u7684\u53d8\u5316\uff0c\u4f46\u53ea\u5728\u53d8\u5316\u6ee1\u8db3\u67d0\u4e2a\u6761\u4ef6\u7684\u65f6\u5019\u624d\u89e6\u53d1\u56de\u8c03\uff1f\u6bd4\u5982\u53ea\u6709\u5f53age\u5927\u4e8e30\u7684\u65f6\u5019\u624d\u6253\u5370\uff1f<\/h2>\n<p>\u8fd9\u4e2a\u95ee\u9898\u5f88\u5e38\u89c1\uff0c\u6bd4\u5982\u505a\u8868\u5355\u9a8c\u8bc1\u7684\u65f6\u5019\uff0c\u53ea\u6709\u5f53\u8f93\u5165\u7684\u5185\u5bb9\u957f\u5ea6\u5927\u4e8e6\u7684\u65f6\u5019\u624d\u663e\u793a\u9519\u8bef\u63d0\u793a\uff1b\u6216\u8005\u505a\u6570\u636e\u8fc7\u6ee4\u7684\u65f6\u5019\uff0c\u53ea\u6709\u5f53\u8fc7\u6ee4\u6761\u4ef6\u53d8\u5316\u7684\u65f6\u5019\u624d\u91cd\u65b0\u8bf7\u6c42\u63a5\u53e3\u2014\u2014\u90a3\u6709\u6ca1\u6709\u529e\u6cd5\u5b9e\u73b0\uff1f\u6709\uff0c\u800c\u4e14\u5f88\u7b80\u5355\uff0c\u4e0d\u9700\u8981\u7528<code>if<\/code>\u5224\u65ad\u5305\u88f9\u6574\u4e2a\u56de\u8c03\u903b\u8f91\uff08\u867d\u7136\u7528<code>if<\/code>\u5224\u65ad\u4e5f\u53ef\u4ee5\uff0c\u4f46\u6709\u66f4\u4f18\u96c5\u7684\u65b9\u6cd5\uff09\uff0c\u5c31\u662f\u7528<strong><code>watch<\/code>\u7684<code>callback<\/code>\u51fd\u6570\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570<code>onCleanup<\/code><\/strong>\uff1f\u4e0d\u5bf9\uff0c\u6216\u8005\u7528<strong><code>watch<\/code>\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u8fd4\u56de<code>undefined<\/code>\u6216\u8005<code>null<\/code>\u5f53\u6761\u4ef6\u4e0d\u6ee1\u8db3\u7684\u65f6\u5019<\/strong>\uff1f\u4e0d\u5bf9\uff0c\u6216\u8005\u7528<strong><code>computed<\/code>\u5148\u8ba1\u7b97\u4e00\u4e2a\u6761\u4ef6\u6ee1\u8db3\u7684\u7ed3\u679c\uff0c\u7136\u540e\u76d1\u542c\u8fd9\u4e2a<code>computed<\/code><\/strong>\u2014\u2014\u5bf9\uff01\u8fd9\u4e2a\u65b9\u6cd5\u6700\u4f18\u96c5\uff0c\u800c\u4e14\u903b\u8f91\u6700\u6e05\u6670\uff0c<code>computed<\/code>\u8fd8\u80fd\u7f13\u5b58\u7ed3\u679c\u3002\n\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u76d1\u542cuser store\u91cc\u7684<code>info.age<\/code>\uff0c\u53ea\u6709\u5f53age\u5927\u4e8e30\u7684\u65f6\u5019\u624d\u6253\u5370\u201c\u5e74\u9f84\u8d85\u8fc730\u4e86\u201d\uff1a\n\u5148\u770b\u7528<code>if<\/code>\u5224\u65ad\u7684\u5199\u6cd5\uff08\u867d\u7136\u53ef\u4ee5\uff0c\u4f46\u4e0d\u591f\u4f18\u96c5\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u7ec4\u4ef6\u91cc\u7684if\u5224\u65ad\u5199\u6cd5\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch } from &#39;vue&#39;\nconst userStore = useUserStore()\nwatch(() =&gt; userStore.info.age, (newAge) =&gt; {\n  if (newAge &gt; 30) {\n    console.log(&#39;\u5e74\u9f84\u8d85\u8fc730\u4e86&#39;)\n  }\n})<\/pre>\n<p>\u7136\u540e\u770b\u7528<code>computed<\/code>\u7684\u5199\u6cd5\uff08\u66f4\u4f18\u96c5\uff0c\u903b\u8f91\u66f4\u6e05\u6670\uff09\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u7ec4\u4ef6\u91cc\u7684computed\u5199\u6cd5\nimport { useUserStore } from &#39;@\/stores\/user&#39;\nimport { watch, computed } from &#39;vue&#39;\nconst userStore = useUserStore()\n\/\/ \u5148\u8ba1\u7b97\u4e00\u4e2a\u6761\u4ef6\u6ee1\u8db3\u7684\u5e03\u5c14\u503c\nconst isAgeOver30 = computed(() =&gt; userStore.info.age &gt; 30)\n\/\/ \u7136\u540e\u76d1\u542c\u8fd9\u4e2a\u5e03\u5c14\u503c\uff0c\u53ea\u6709\u5f53\u5b83\u4ecefalse\u53d8\u6210true\u7684\u65f6\u5019\u624d\u89e6\u53d1\uff08\u9ed8\u8ba4\u53ea\u8981\u53d8\u5316\u5c31\u89e6\u53d1\uff0c\u5305\u62ectrue\u53d8\u6210false\uff09\nwatch(isAgeOver30, (newVal) =&gt; {\n  if (newVal) { \/\/ \u8fd9\u91cc\u52a0\u4e2a\u5224\u65ad\u662f\u4e3a\u4e86\u907f\u514dtrue\u53d8\u6210false\u7684\u65f6\u5019\u4e5f\u89e6\u53d1\n    console.log(&#39;\u5e74\u9f84\u8d85\u8fc730\u4e86&#39;)\n  }\n})\n\/\/ \u5982\u679c\u53ea\u60f3\u76d1\u542c\u4ecefalse\u53d8\u6210true\u7684\u53d8\u5316\uff0c\u4e0d\u9700\u8981true\u53d8\u6210false\u7684\uff0c\u8fd8\u53ef\u4ee5\u7528watch\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\uff1f\u4e0d\u5bf9\uff0c\u6216\u8005\u7528watch\u7684`immediate: false`\uff08\u9ed8\u8ba4\u5c31\u662f\uff09\u52a0\u4e0a\u5224\u65adnewVal\u548coldVal\u7684\u53d8\u5316\uff1a\nwatch(isAgeOver30, (newVal, oldVal) =&gt; {\n  if (newVal &amp;&amp; !oldVal) {\n    console.log(&#39;\u5e74\u9f84\u8d85\u8fc730\u4e86&#39;)\n  }\n})<\/pre>\n<p>\u8fd9\u4e2a\u5199\u6cd5\u7684\u4f18\u70b9\u662f\uff1a\u6761\u4ef6\u903b\u8f91\u548c\u56de\u8c03\u903b\u8f91\u5206\u5f00\u4e86\uff0c\u4ee3\u7801\u66f4\u6e05\u6670\uff0c\u66f4\u5bb9\u6613\u7ef4\u62a4\uff1b\u800c\u4e14<code>isAgeOver30<\/code>\u662f\u4e00\u4e2a<code>computed<\/code>\uff0c\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u5176\u4ed6\u5730\u65b9\u590d\u7528\uff08\u6bd4\u5982\u5728\u6a21\u677f\u91cc\u663e\u793a\u201c\u5e74\u9f84\u8d85\u8fc730\u4e86\u201d\u7684\u63d0\u793a\uff09\u3002\n\u8fd8\u6709\u4e00\u4e2a\u65b9\u6cd5\uff0c\u5c31\u662f\u7528<strong><code>watch<\/code>\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u8fd4\u56de\u6761\u4ef6\u6ee1\u8db3\u65f6\u7684\u65b0\u503c\uff0c\u6761\u4ef6\u4e0d\u6ee1\u8db3\u65f6\u8fd4\u56de\u4e4b\u524d\u7684\u65e7\u503c<\/strong>\u2014\u2014\u8fd9\u4e2a\u65b9\u6cd5\u53ef\u4ee5\u7528<code>onCleanup<\/code>\u6765\u5b9e\u73b0\uff0c\u4e0d\u8fc7\u6bd4\u8f83\u590d\u6742\uff0c\u4e0d\u5982\u7528<code>computed<\/code>\u7684\u5199\u6cd5\u4f18\u96c5\uff0c\u6240\u4ee5\u4e0d\u63a8\u8350,\u611f\u5174\u8da3\u7684\u53ef\u4ee5\u81ea\u5df1\u67e5\u4e00\u4e0b\u3002<\/p>\n<hr \/>\n<h2>\u603b\u7ed3\u4e00\u4e0bVue3 watch store change\u7684\u6240\u6709\u6838\u5fc3\u8981\u70b9<\/h2>\n<p>\u4eca\u5929\u8bb2\u4e86\u56db\u4e2a\u5173\u4e8eVue3 watch store change\u7684\u95ee\u9898\uff0c\u4ece\u57fa\u7840\u5230\u8fdb\u9636\u5230\u9ad8\u7ea7\u5230\u5b9e\u7528,\u603b\u7ed3\u4e00\u4e0b\u6838\u5fc3\u8981\u70b9\uff1a<\/p>\n<ol>\n<li><strong>\u57fa\u7840\u524d\u63d0<\/strong>\uff1a\u8981\u7528\u54cd\u5e94\u5f0f\u7684\u65b9\u5f0f\u83b7\u53d6store\u7684\u6570\u636e\uff0cPinia\u7528<code>storeToRefs<\/code>\u8f6cstate\/getter\uff0cVuex4\u7528<code>toRefs<\/code>\u8f6c<code>store.state<\/code>\uff1b\u4e0d\u8981\u76f4\u63a5\u8d4b\u503c\u57fa\u672c\u7c7b\u578b\u5c5e\u6027,\u4e0d\u8981\u76f4\u63a5\u66ff\u6362\u590d\u5236\u51fa\u6765\u7684\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\u3002<\/li>\n<li><strong>\u9ad8\u6548\u76d1\u542c\u6df1\u5c42\u5c5e\u6027<\/strong>\uff1a\u4f18\u5148\u7528getter\u8f6cref\u76d1\u542c\uff0c\u5176\u6b21\u7528watch\u7684getter\u51fd\u6570\u5199\u6cd5\uff0c\u5c3d\u91cf\u907f\u514d\u52a0<code>deep: true<\/code>\u7684\u666e\u901awatch\u3002<\/li>\n<li><strong>\u907f\u514d\u91cd\u590d\u89e6\u53d1<\/strong>\uff1a\u628a\u6240\u6709\u4fee\u6539\u653e\u5728\u540c\u4e00\u4e2a\u540c\u6b65\/\u5fae\u4efb\u52a1\u91cc\uff0c\u8ba9getter\u903b\u8f91\u7b80\u5355\u7eaf\u7cb9\u53ea\u4f9d\u8d56\u9700\u8981\u7684state,\u907f\u514d\u76d1\u542c\u6709\u4f9d\u8d56\u5173\u7cfb\u7684\u591a\u4e2a\u5c5e\u6027\u3002<\/li>\n<li><strong>\u76d1\u542c\u6574\u4e2a\u6a21\u5757\/\u6574\u4e2astore<\/strong>\uff1a\u5f00\u53d1\u73af\u5883\u53ef\u4ee5\u7528Pinia\/Vuex\u7684\u63d2\u4ef6\uff0c\u751f\u4ea7\u73af\u5883\u4e0d\u63a8\u8350\uff1bVuex4\u8fd8\u53ef\u4ee5\u7528<code>subscribe<\/code>\u65b9\u6cd5\u76d1\u542cmutation\u7684\u63d0\u4ea4,\u66f4\u9ad8\u6548\u3002<\/li>\n<li><strong>\u6761\u4ef6\u89e6\u53d1\u56de\u8c03<\/strong>\uff1a\u4f18\u5148\u7528computed\u5148\u8ba1\u7b97\u6761\u4ef6\u6ee1\u8db3\u7684\u7ed3\u679c\uff0c\u518d\u76d1\u542c\u8fd9\u4e2acomputed\uff0c\u903b\u8f91\u66f4\u6e05\u6670,\u66f4\u5bb9\u6613\u590d\u7528\u3002<\/li>\n<\/ol>\n<p>\u518d\u7ed9\u5927\u5bb6\u63d0\u4e00\u4e2a\u5c0f\u5efa\u8bae\uff1a\u4e0d\u7ba1\u7528\u4ec0\u4e48\u65b9\u5f0f\u76d1\u542cstore\u7684\u6570\u636e\u53d8\u5316\uff0c\u90fd\u8981\u5c3d\u91cf\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u76d1\u542c\uff0c\u53ea\u76d1\u542c\u9700\u8981\u7684\u5c5e\u6027\uff0c\u8fd9\u6837\u53ef\u4ee5\u63d0\u9ad8app\u7684\u6027\u80fd\uff0c\u5c24\u5176\u662f\u5728\u624b\u673a\u7aef\u6216\u8005\u5927\u578b\u9879\u76ee\u91cc\uff0c\u5e0c\u671b\u4eca\u5929\u7684\u5206\u4eab\u80fd\u5e2e\u5230\u5927\u5bb6\uff0c\u5982\u679c\u6709\u4ec0\u4e48\u95ee\u9898,\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u8ba8\u8bba\uff01<\/p>","pubDate":"Fri, 17 Apr 2026 08:02:54 +0800"},{"title":"Vue3 watch\u54cd\u5e94\u5f0f\u72b6\u6001\u9700\u8981\u6ce8\u610f\u4ec0\u4e48\uff1fwatch\u548cwatchEffect\u5230\u5e95\u9009\u54ea\u4e2a\uff1f","link":"https:\/\/www.codeqd.com\/post\/20260421754.html","description":"<p>\u65e5\u5e38\u5199Vue3\u9879\u76ee\u65f6\uff0c\u54cd\u5e94\u5f0f\u72b6\u6001\u7684\u76d1\u542c\u80af\u5b9a\u7ed5\u4e0d\u5f00watch\u548cwatchEffect\u8fd9\u4fe9API\uff0c\u65b0\u624b\u521a\u4e0a\u624b\u53ef\u80fd\u89c9\u5f97\u201c\u8fd9\u4e0d\u90fd\u662f\u770b\u6570\u636e\u53d8\u4e86\u5e72\u70b9\u4e8b\u5417\uff1f\u968f\u4fbf\u7528\u54ea\u4e2a\u90fd\u884c\u201d\uff0c\u7ed3\u679c\u5199\u7740\u5199\u7740\u5c31\u8e29\u5751\uff1a\u8981\u4e48\u76d1\u542c\u4e0d\u5230\u72b6\u6001\u53d8\u5316\u3001\u8981\u4e48\u91cd\u590d\u89e6\u53d1\u56de\u8c03\u3001\u8981\u4e48\u6e05\u7406\u51fd\u6570\u5fd8\u52a0\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f\uff0c\u66f4\u522b\u8bf4\u641e\u4e0d\u6e05\u4ec0\u4e48\u65f6\u5019\u8be5\u7528\u54ea\u4e2a\u4e86\uff0c\u4eca\u5929\u5c31\u63b0\u5f00\u63c9\u788e\u8bb2\u6e05\u695a\u8fd9\u4fe9\u5bb6\u4f19\u7684\u7528\u6cd5\u3001\u5751\u70b9\uff0c\u8fd8\u6709\u600e\u4e48\u6839\u636e\u573a\u666f\u9009,\u4ece\u65b0\u624b\u5165\u95e8\u5230\u8001\u624b\u907f\u5751\u90fd\u80fd\u7528\u5230\u3002<\/p>\n<h2>\u9996\u5148\u5f97\u641e\u61c2\uff1aVue3\u7684\u54cd\u5e94\u5f0f\u72b6\u6001\u5230\u5e95\u6709\u54ea\u4e9b\uff1f<\/h2>\n<p>\u804awatch\u600e\u4e48\u7528\u4e4b\u524d\uff0c\u5f97\u5148\u628a\u76d1\u542c\u7684\u201c\u5bf9\u8c61\u201d\u2014\u2014Vue3\u7684\u54cd\u5e94\u5f0f\u72b6\u6001\u8bf4\u6e05\u695a\uff0c\u4e0d\u7136\u4e0a\u6765\u5c31\u8bb2API\uff0c\u80af\u5b9a\u4e91\u91cc\u96fe\u91cc\u7684,Vue3\u7684\u54cd\u5e94\u5f0f\u72b6\u6001\u4e3b\u8981\u5206\u4e24\u7c7b\uff1a<\/p>\n<p>\u7b2c\u4e00\u7c7b\u662f<strong>\u57fa\u7840\u7c7b\u578b\u503c\u7684\u54cd\u5e94\u5f0f\u72b6\u6001<\/strong>\uff0c\u4e5f\u5c31\u662f\u7528ref\u5b9a\u4e49\u7684\uff0c\u4e0d\u7ba1\u662fnumber\u3001string\u3001boolean\uff0c\u8fd8\u662fnull\u3001undefined\uff0cref\u90fd\u4f1a\u628a\u5b83\u4eec\u5305\u6210\u4e00\u4e2a\u5e26.value\u5c5e\u6027\u7684\u5bf9\u8c61\uff0c.value\u624d\u662f\u771f\u6b63\u5b58\u503c\u7684\u5730\u65b9\uff0c\u800c\u4e14ref\u662f\u6df1\u5ea6\u54cd\u5e94\u5f0f\u5417\uff1f\u4e0d\u662f\u9ed8\u8ba4\u7684\uff01\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cref\u53ea\u76d1\u542c\u81ea\u8eab.value\u7684\u5f15\u7528\u53d8\u5316\uff0c\u6bd4\u5982\u4f60\u7ed9ref.value\u8d4b\u503c\u4e00\u4e2a\u65b0\u5bf9\u8c61\uff0c\u624d\u4f1a\u89e6\u53d1\uff1b\u5982\u679c\u662f\u76f4\u63a5\u4fee\u6539\u8001\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\uff0c\u9ed8\u8ba4\u4e0d\u89e6\u53d1\uff0c\u9664\u975e\u624b\u52a8\u8bbe\u7f6edeep:true\u3002<\/p>\n<p>\u7b2c\u4e8c\u7c7b\u662f<strong>\u5f15\u7528\u7c7b\u578b\u503c\u7684\u54cd\u5e94\u5f0f\u72b6\u6001<\/strong>\uff0c\u4e5f\u5c31\u662f\u7528reactive\u5b9a\u4e49\u7684\uff0creactive\u4f1a\u628a\u4f20\u5165\u7684\u5bf9\u8c61\u3001\u6570\u7ec4\u53d8\u6210\u54cd\u5e94\u5f0f\u4ee3\u7406\uff0c\u9ed8\u8ba4\u662f\u6df1\u5ea6\u54cd\u5e94\u5f0f\u7684\uff0c\u4e0d\u7ba1\u4f60\u6539\u5bf9\u8c61\u7684\u5c5e\u6027\u3001\u5d4c\u5957\u5c5e\u6027\uff0c\u8fd8\u662f\u6570\u7ec4\u7684push\u3001pop\u3001splice\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u751a\u81f3\u662f\u7ed9\u6570\u7ec4\u65b0\u589e\u7d22\u5f15\u3001\u7ed9\u5bf9\u8c61\u65b0\u589e\u5c5e\u6027\uff0c\u90fd\u4f1a\u89e6\u53d1\u76d1\u542c\uff0c\u4e0d\u8fc7\u8981\u6ce8\u610f\uff0creactive\u4e0d\u80fd\u76f4\u63a5\u8d4b\u503c\u65b0\u5bf9\u8c61\uff0c\u4e0d\u7136\u4f1a\u5931\u53bb\u54cd\u5e94\u5f0f\uff0c\u6bd4\u5982user = reactive({name:'\u5f20\u4e09'});\u540e\u6765\u4f60\u5199user = {name:'\u674e\u56db'}\uff0c\u8fd9\u65f6\u5019user\u5c31\u53d8\u6210\u666e\u901a\u5bf9\u8c61\u4e86,\u518d\u6539name\u4e5f\u6ca1\u7528\u3002<\/p>\n<h2>Vue3 watch\u7684\u6838\u5fc3\u7528\u6cd5\uff1a\u770b\u83dc\u4e0b\u996d\u9009\u76d1\u542c\u6e90<\/h2>\n<p>watch\u7684\u6838\u5fc3\u5728\u4e8e\u201c\u6307\u5b9a\u76d1\u542c\u6e90\uff0c\u53ea\u6709\u6e90\u53d8\u5316\u65f6\u624d\u89e6\u53d1\u56de\u8c03\u201d\uff0c\u800c\u4e14\u56de\u8c03\u91cc\u80fd\u62ff\u5230\u65b0\u503c\u548c\u65e7\u503c\uff0c\u8fd9\u70b9\u662f\u5b83\u548cwatchEffect\u6700\u5927\u7684\u533a\u522b,\u90a3watch\u7684\u76d1\u542c\u6e90\u53ef\u4ee5\u662f\u54ea\u4e9b\u5462\uff1f<\/p>\n<h3>\u76d1\u542c\u5355\u4e2aref<\/h3>\n<p>\u8fd9\u4e2a\u6700\u7b80\u5355\uff0c\u76f4\u63a5\u628aref\u7684\u53d8\u91cf\u540d\uff08\u6ce8\u610f\u4e0d\u662f.value\uff01\u4e0d\u7136\u5c31\u53d8\u6210\u76d1\u542c\u4e00\u4e2a\u666e\u901a\u503c\u4e86\uff0c\u9664\u975e\u624b\u52a8\u8f6c\u6210\u51fd\u6570\u8fd4\u56de\uff09\u4f20\u7ed9watch\u5c31\u884c,\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst count = ref(0)\n\/\/ \u6b63\u786e\u5199\u6cd51\uff1a\u76f4\u63a5\u4f20ref\u53d8\u91cf\nwatch(count, (newVal, oldVal) =&gt; {\n  console.log(`count\u53d8\u4e86\uff1a${oldVal} \u2192 ${newVal}`)\n})\n\/\/ \u6b63\u786e\u5199\u6cd52\uff1a\u4f20\u51fd\u6570\u8fd4\u56deref.value\uff08\u8fd9\u79cd\u5199\u6cd5\u5728\u591a\u4e2aref\u7ec4\u5408\u76d1\u542c\u3001\u6216\u8005\u76d1\u542ccomputed\u91cc\u7684\u67d0\u4e2a\u503c\u65f6\u5e38\u7528\uff09\nwatch(() =&gt; count.value, (newVal, oldVal) =&gt; {\n  console.log(`count\u53d8\u4e86\uff08\u51fd\u6570\u5199\u6cd5\uff09\uff1a${oldVal} \u2192 ${newVal}`)\n})\n\/\/ \u9519\u8bef\u5199\u6cd5\uff1a\u76f4\u63a5\u4f20count.value\uff0c\u8fd9\u65f6\u5019\u76d1\u542c\u7684\u662f\u521d\u59cb\u503c0\uff0c\u6c38\u8fdc\u4e0d\u4f1a\u89e6\u53d1\n\/\/ watch(count.value, (newVal, oldVal) =&gt; {})<\/pre>\n<p>\u8fd9\u91cc\u63d0\u4e00\u4e0b\uff0c\u5982\u679c\u76d1\u542c\u7684\u662fref\u5305\u7684\u5bf9\u8c61\uff0c\u9ed8\u8ba4\u4e0d\u76d1\u542c\u5c5e\u6027\u53d8\u5316\u5bf9\u5427\uff1f\u90a3\u52a0\u4e2adeep:true\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">const user = ref({name:&#39;\u5f20\u4e09&#39;, age:18})\nwatch(user, (newVal, oldVal) =&gt; {\n  console.log(&#39;user\u91cc\u7684\u67d0\u4e2a\u5c5e\u6027\u53d8\u4e86&#39;)\n  \/\/ \u6ce8\u610f\uff1a\u5982\u679c\u52a0\u4e86deep:true\uff0cnewVal\u548coldVal\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\u7684\u5f15\u7528\uff0c\u5bf9\u6bd4\u4e0d\u51fa\u5177\u4f53\u54ea\u91cc\u53d8\u4e86\uff01\n  console.log(newVal === oldVal) \/\/ \u8f93\u51fatrue\n}, {deep:true})<\/pre>\n<p>\u5982\u679c\u60f3\u62ff\u5230\u5177\u4f53\u53d8\u5316\u7684\u5c5e\u6027\u503c\uff0c\u600e\u4e48\u529e\uff1f\u8981\u4e48\u7528watch\u76d1\u542c\u5177\u4f53\u7684\u5c5e\u6027\uff08) =&gt; user.value.age\uff09\uff0c\u8981\u4e48\u7528vue3.2+\u65b0\u589e\u7684watchEffect\u7684\u53d8\u4f53,\u6216\u8005\u540e\u9762\u63d0\u5230\u7684computed\u3002<\/p>\n<h3>\u76d1\u542c\u5355\u4e2areactive\u5bf9\u8c61\/\u5c5e\u6027<\/h3>\n<p>\u76d1\u542c\u5355\u4e2areactive\u5bf9\u8c61\u7684\u8bdd\uff0c\u9ed8\u8ba4\u5c31\u662f\u6df1\u5ea6\u76d1\u542c\uff0c\u548cref\u5305\u5bf9\u8c61\u52a0deep:true\u4e00\u6837\uff0cnewVal\u548coldVal\u662f\u540c\u4e00\u4e2a\u5f15\u7528\uff0c\u90a3\u600e\u4e48\u76d1\u542creactive\u91cc\u7684\u67d0\u4e2a\u5177\u4f53\u5c5e\u6027\u5462\uff1f\u4e5f\u5f97\u7528\u51fd\u6570\u5199\u6cd5\u8fd4\u56de\u8fd9\u4e2a\u5c5e\u6027\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { reactive, watch } from &#39;vue&#39;\nconst user = reactive({name:&#39;\u5f20\u4e09&#39;, age:18})\n\/\/ \u76d1\u542c\u6574\u4e2auser\u5bf9\u8c61\uff08\u9ed8\u8ba4\u6df1\u5ea6\uff09\nwatch(user, () =&gt; {})\n\/\/ \u76d1\u542c\u5177\u4f53\u7684age\u5c5e\u6027\nwatch(() =&gt; user.age, (newVal, oldVal) =&gt; {\n  console.log(`age\u53d8\u4e86\uff1a${oldVal} \u2192 ${newVal}`)\n  \/\/ \u8fd9\u91ccnewVal\u548coldVal\u662f\u4e0d\u540c\u7684\uff01\u56e0\u4e3a\u57fa\u7840\u7c7b\u578b\u662f\u503c\u4f20\u9012\n})<\/pre>\n<p>\u8fd9\u91cc\u6709\u4e2a\u5c0f\u6280\u5de7\uff0c\u5982\u679c\u60f3\u76d1\u542creactive\u91cc\u7684\u591a\u4e2a\u5c5e\u6027\uff0c\u4f46\u4e0d\u60f3\u5199\u591a\u4e2awatch\uff0c\u4e5f\u4e0d\u60f3\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\u5bfc\u81f4\u592a\u6cdb,\u53ef\u4ee5\u628a\u51fd\u6570\u653e\u5728\u6570\u7ec4\u91cc\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">watch([() =&gt; user.name, () =&gt; user.age], ([newName, newAge], [oldName, oldAge]) =&gt; {\n  console.log(`name\u6216age\u53d8\u4e86\uff1aname(${oldName}\u2192${newName}), age(${oldAge}\u2192${newAge})`)\n})<\/pre>\n<p>\u8fd9\u4e2a\u6570\u7ec4\u5199\u6cd5\u4e0d\u7ba1\u662fref\u7ec4\u5408\u8fd8\u662freactive\u5c5e\u6027\u7ec4\u5408\u90fd\u80fd\u7528,\u975e\u5e38\u7075\u6d3b\u3002<\/p>\n<h3>\u76d1\u542ccomputed\u503c<\/h3>\n<p>computed\u672c\u8eab\u5c31\u662f\u54cd\u5e94\u5f0f\u7684\uff0c\u800c\u4e14\u662f\u7f13\u5b58\u7684\uff0c\u53ea\u6709\u4f9d\u8d56\u7684\u54cd\u5e94\u5f0f\u72b6\u6001\u53d8\u5316\u65f6\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0c\u6240\u4ee5\u76d1\u542ccomputed\u662f\u975e\u5e38\u63a8\u8350\u7684\u505a\u6cd5\uff0c\u65e2\u80fd\u4fdd\u8bc1\u76d1\u542c\u7684\u662f\u9700\u8981\u7684\u903b\u8f91\u503c,\u53c8\u80fd\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u8ba1\u7b97\u548c\u56de\u8c03\u89e6\u53d1\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, computed, watch } from &#39;vue&#39;\nconst firstName = ref(&#39;\u5f20&#39;)\nconst lastName = ref(&#39;\u4e09&#39;)\nconst fullName = computed(() =&gt; firstName.value + lastName.value)\nwatch(fullName, (newVal, oldVal) =&gt; {\n  console.log(`fullName\u53d8\u4e86\uff1a${oldVal} \u2192 ${newVal}`)\n})\n\/\/ \u8fd9\u65f6\u5019\u53ea\u6709firstName\u6216lastName\u53d8\u4e86\uff0cfullName\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0cwatch\u624d\u4f1a\u89e6\u53d1<\/pre>\n<h2>watch\u7684\u907f\u5751\u6307\u5357\uff1a90%\u7684\u65b0\u624b\u90fd\u4f1a\u8e29\u8fd9\u51e0\u4e2a\u96f7<\/h2>\n<p>\u521a\u624d\u8bb2\u7528\u6cd5\u7684\u65f6\u5019\u5176\u5b9e\u5df2\u7ecf\u63d0\u5230\u4e86\u4e00\u4e9b\u5751\uff0c\u73b0\u5728\u4e13\u95e8\u62ce\u51fa\u6765\u6574\u7406\u4e00\u4e0b,\u90fd\u662f\u65e5\u5e38\u5f00\u53d1\u4e2d\u9ad8\u9891\u51fa\u73b0\u7684\uff1a<\/p>\n<h3>\u96f7\u533a1\uff1a\u76d1\u542cref\u65f6\u76f4\u63a5\u4f20.value<\/h3>\n<p>\u8fd9\u4e2a\u521a\u624d\u4e3e\u8fc7\u9519\u8bef\u4f8b\u5b50\uff0c\u4e00\u5b9a\u8981\u8bb0\u4f4f\uff1a\u76d1\u542cref\u672c\u8eab\uff08\u53d8\u91cf\u540d\uff09\u6216\u8005\u4f20\u51fd\u6570\u8fd4\u56de.value\uff0c\u4f20.value\u7684\u8bdd\uff0c\u76f8\u5f53\u4e8e\u7ed9watch\u4f20\u4e86\u4e00\u4e2a\u9759\u6001\u503c\uff0c\u6bd4\u5982\u521d\u59cb\u76840\uff0c\u8fd9\u4e2a\u503c\u4e0d\u4f1a\u53d8,\u6240\u4ee5watch\u6c38\u8fdc\u4e0d\u4f1a\u89e6\u53d1\u3002<\/p>\n<h3>\u96f7\u533a2\uff1a\u76d1\u542creactive\u65f6\u76f4\u63a5\u8d4b\u503c\u65b0\u5bf9\u8c61<\/h3>\n<p>reactive\u662f\u8fd4\u56de\u4e00\u4e2a\u4ee3\u7406\u5bf9\u8c61\uff0c\u5982\u679c\u4f60\u540e\u6765\u76f4\u63a5\u628a\u666e\u901a\u5bf9\u8c61\u8d4b\u503c\u7ed9\u8fd9\u4e2a\u4ee3\u7406\u53d8\u91cf\uff0c\u90a3\u53d8\u91cf\u5c31\u53d8\u6210\u666e\u901a\u5bf9\u8c61\u4e86\uff0c\u5931\u53bb\u4e86\u54cd\u5e94\u5f0f\uff0c\u540e\u7eed\u7684\u4fee\u6539\u4e0d\u7ba1\u662f\u5bf9\u5bf9\u8c61\u672c\u8eab\u8fd8\u662f\u5c5e\u6027\uff0c\u90fd\u4e0d\u4f1a\u89e6\u53d1watch\uff0c\u90a3\u5982\u679c\u8981\u66ff\u6362\u6574\u4e2areactive\u5bf9\u8c61\u600e\u4e48\u529e\uff1f\u63a8\u8350\u7684\u505a\u6cd5\u6709\u4e24\u4e2a\uff1a\u4e00\u662f\u7528ref\u5305\u5bf9\u8c61\uff0c\u66ff\u6362\u7684\u65f6\u5019\u76f4\u63a5\u6539ref.value\uff1b\u4e8c\u662f\u7528Object.assign\u6216\u8005\u5c55\u5f00\u8fd0\u7b97\u7b26\u66f4\u65b0\u539freactive\u5bf9\u8c61\u7684\u5c5e\u6027\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">\/\/ \u9519\u8bef\u505a\u6cd5\nlet user = reactive({name:&#39;\u5f20\u4e09&#39;})\nuser = {name:&#39;\u674e\u56db&#39;} \/\/ \u5931\u53bb\u54cd\u5e94\u5f0f\n\/\/ \u6b63\u786e\u505a\u6cd51\uff1a\u7528ref\u5305\nconst user = ref({name:&#39;\u5f20\u4e09&#39;})\nuser.value = {name:&#39;\u674e\u56db&#39;} \/\/ \u6ca1\u95ee\u9898\uff0c\u52a0deep:true\u7684\u8bdd\u8fd8\u80fd\u89e6\u53d1\n\/\/ \u6b63\u786e\u505a\u6cd52\uff1aObject.assign\u66f4\u65b0\nconst user = reactive({name:&#39;\u5f20\u4e09&#39;, age:18})\nObject.assign(user, {name:&#39;\u674e\u56db&#39;, gender:&#39;\u7537&#39;}) \/\/ \u65b0\u589e\u6216\u4fee\u6539\u5c5e\u6027\u90fd\u53ef\u4ee5\uff0c\u4fdd\u6301\u54cd\u5e94\u5f0f<\/pre>\n<h3>\u96f7\u533a3\uff1a\u52a0\u4e86deep:true\u540e\u5bf9\u6bd4\u4e0d\u51faoldVal\u548cnewVal<\/h3>\n<p>\u4e0d\u7ba1\u662fref\u5305\u5bf9\u8c61\u52a0deep:true\uff0c\u8fd8\u662f\u76f4\u63a5\u76d1\u542creactive\u5bf9\u8c61\uff0cnewVal\u548coldVal\u90fd\u662f\u540c\u4e00\u4e2a\u54cd\u5e94\u5f0f\u4ee3\u7406\u7684\u5f15\u7528\uff0c\u6240\u4ee5\u76f4\u63a5\u7528===\u6bd4\u8f83\u6c38\u8fdc\u662ftrue\uff0c\u6ca1\u6cd5\u77e5\u9053\u5177\u4f53\u54ea\u4e2a\u5c5e\u6027\u53d8\u4e86\uff0c\u5982\u679c\u786e\u5b9e\u9700\u8981\u77e5\u9053\u53d8\u5316\u7684\u5177\u4f53\u503c\uff0c\u8981\u4e48\u76d1\u542c\u5177\u4f53\u7684\u5c5e\u6027\uff08\u7528\u51fd\u6570\u5199\u6cd5\uff09\uff0c\u8981\u4e48\u7528vue-devtools\u8c03\u8bd5\uff0c\u6216\u8005\u5982\u679c\u662f\u5bf9\u8c61\u7684\u8bdd\uff0c\u53ef\u4ee5\u7528JSON.parse(JSON.stringify())\u6df1\u62f7\u8d1d\u4e00\u4efd\u5b58\u8d77\u6765\u5f53oldVal\uff0c\u4f46\u8fd9\u4e2a\u65b9\u6cd5\u53ea\u9002\u5408\u7b80\u5355\u5bf9\u8c61\uff0c\u590d\u6742\u5bf9\u8c61\uff08\u6bd4\u5982\u6709\u51fd\u6570\u3001\u5faa\u73af\u5f15\u7528\uff09\u7684\u8bdd\u4f1a\u51fa\u95ee\u9898\uff0c\u800c\u4e14\u6027\u80fd\u4e5f\u4e0d\u597d,\u5c3d\u91cf\u5c11\u7528\u3002<\/p>\n<h3>\u96f7\u533a4\uff1a\u6e05\u7406\u51fd\u6570\u5fd8\u52a0\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f<\/h3>\n<p>\u4ec0\u4e48\u662fwatch\u7684\u6e05\u7406\u51fd\u6570\uff1f\u6bd4\u5982\u4f60\u5728watch\u7684\u56de\u8c03\u91cc\u505a\u4e86\u4e00\u4e9b\u5f02\u6b65\u64cd\u4f5c\uff08\u6bd4\u5982\u53d1\u8bf7\u6c42\u3001\u52a0\u5b9a\u65f6\u5668\u3001\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\uff09\uff0c\u5982\u679c\u5728\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u4e4b\u524d\uff0c\u76d1\u542c\u6e90\u53c8\u53d8\u4e86\uff0c\u6216\u8005\u7ec4\u4ef6\u9500\u6bc1\u4e86\uff0c\u90a3\u4e4b\u524d\u7684\u5f02\u6b65\u64cd\u4f5c\u3001\u5b9a\u65f6\u5668\u3001\u4e8b\u4ef6\u76d1\u542c\u5668\u5c31\u4f1a\u53d8\u6210\u201c\u5b64\u513f\u201d\uff0c\u5360\u7528\u5185\u5b58\uff0c\u751a\u81f3\u5bfc\u81f4bug\uff08\u6bd4\u5982\u65e7\u7684\u8bf7\u6c42\u56de\u6765\u4e86\u66f4\u65b0\u4e86\u65b0\u7684\u6570\u636e\uff09,\u8fd9\u65f6\u5019\u5c31\u9700\u8981\u7528\u5230watch\u7684\u6e05\u7406\u51fd\u6570\u4e86\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watch } from &#39;vue&#39;\nconst keyword = ref(&#39;&#39;)\nwatch(keyword, (newVal, oldVal, onCleanup) =&gt; {\n  if (!newVal) return\n  \/\/ \u52a0\u4e2a\u5b9a\u65f6\u5668\u6a21\u62df\u53d1\u8bf7\u6c42\n  const timer = setTimeout(() =&gt; {\n    console.log(`\u641c\u7d22${newVal}\u7684\u7ed3\u679c`)\n  }, 1000)\n  \/\/ \u6ce8\u518c\u6e05\u7406\u51fd\u6570\uff1a\u5f53\u76d1\u542c\u6e90\u518d\u6b21\u53d8\u5316\u3001\u6216\u8005\u7ec4\u4ef6\u9500\u6bc1\u65f6\uff0c\u4f1a\u5148\u6267\u884c\u8fd9\u4e2a\u6e05\u7406\u51fd\u6570\n  onCleanup(() =&gt; {\n    clearTimeout(timer)\n    console.log(&#39;\u6e05\u7406\u4e86\u65e7\u7684\u641c\u7d22\u8bf7\u6c42&#39;)\n  })\n})<\/pre>\n<p>\u8fd9\u4e2a\u6e05\u7406\u51fd\u6570\u5728\u5904\u7406\u9632\u6296\u8282\u6d41\uff08\u867d\u7136Vue3\u6709watchPostEffect\u914d\u5408useDebounceFn\uff0c\u4f46\u8fd9\u4e2a\u5199\u6cd5\u66f4\u57fa\u7840\uff09\u3001\u53d6\u6d88axios\u8bf7\u6c42\u65f6\u975e\u5e38\u5e38\u7528,\u4e00\u5b9a\u8981\u8bb0\u5f97\u52a0\u3002<\/p>\n<h3>\u96f7\u533a5\uff1aimmediate:true\u548c\u6e05\u7406\u51fd\u6570\u7684\u914d\u5408\u95ee\u9898<\/h3>\n<p>immediate:true\u7684\u4f5c\u7528\u662f\u8ba9watch\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u7acb\u5373\u6267\u884c\u4e00\u6b21\u56de\u8c03\uff0c\u8fd9\u65f6\u5019oldVal\u4f1a\u662fundefined\uff0c\u90a3\u5982\u679c\u52a0\u4e86immediate:true\uff0c\u7b2c\u4e00\u6b21\u6267\u884c\u56de\u8c03\u65f6\u4f1a\u4e0d\u4f1a\u89e6\u53d1\u6e05\u7406\u51fd\u6570\uff1f\u4e0d\u4f1a\uff01\u6e05\u7406\u51fd\u6570\u53ea\u6709\u5728<strong>\u7b2c\u4e8c\u6b21\u53ca\u4ee5\u540e\u76d1\u542c\u6e90\u53d8\u5316<\/strong>\uff0c\u6216\u8005<strong>\u7ec4\u4ef6\u9500\u6bc1<\/strong>\u7684\u65f6\u5019\u624d\u4f1a\u6267\u884c,\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">const count = ref(0)\nwatch(count, (newVal, oldVal, onCleanup) =&gt; {\n  console.log(`\u6267\u884c\u56de\u8c03\uff1anewVal=${newVal}, oldVal=${oldVal}`)\n  onCleanup(() =&gt; {\n    console.log(&#39;\u6267\u884c\u6e05\u7406\u51fd\u6570&#39;)\n  })\n}, {immediate:true})\ncount.value = 1 \/\/ \u8fd9\u65f6\u5019\u4f1a\u5148\u6267\u884c\u7b2c\u4e00\u6b21\u56de\u8c03\u7684\u6e05\u7406\u51fd\u6570\uff0c\u518d\u6267\u884c\u7b2c\u4e8c\u6b21\u56de\u8c03\n\/\/ \u8f93\u51fa\u987a\u5e8f\uff1a\n\/\/ \u6267\u884c\u56de\u8c03\uff1anewVal=0, oldVal=undefined\n\/\/ \u6267\u884c\u6e05\u7406\u51fd\u6570\uff08\u7b2c\u4e00\u6b21\u7684\uff09\n\/\/ \u6267\u884c\u56de\u8c03\uff1anewVal=1, oldVal=0<\/pre>\n<h2>watch\u548cwatchEffect\u5230\u5e95\u9009\u54ea\u4e2a\uff1f\u770b\u8fd93\u4e2a\u573a\u666f\u5c31\u591f\u4e86<\/h2>\n<p>\u7ec8\u4e8e\u5230\u4e86\u5927\u5bb6\u6700\u5173\u5fc3\u7684\u95ee\u9898\uff1a\u8fd9\u4fe9API\u529f\u80fd\u8fd9\u4e48\u50cf\uff0c\u5230\u5e95\u4ec0\u4e48\u65f6\u5019\u7528\u54ea\u4e2a\uff1f\u5176\u5b9e\u5b83\u4eec\u7684\u6838\u5fc3\u533a\u522b\u5c31\u4e24\u4e2a\uff1a<strong>\u662f\u5426\u9700\u8981\u6307\u5b9a\u76d1\u542c\u6e90<\/strong>\u3001<strong>\u662f\u5426\u9700\u8981\u62ff\u5230\u65b0\u503c\u548c\u65e7\u503c<\/strong>\uff0c\u518d\u52a0\u4e0a<strong>\u6267\u884c\u65f6\u673a\u7684\u7ec6\u5fae\u5dee\u5f02<\/strong>,\u5c31\u53ef\u4ee5\u6839\u636e\u573a\u666f\u9009\u4e86\u3002<\/p>\n<h3>\u573a\u666f1\uff1a\u53ea\u5173\u5fc3\u6570\u636e\u53d8\u5316\u540e\u7684\u7ed3\u679c\uff0c\u4e0d\u9700\u8981\u77e5\u9053\u65e7\u503c\uff0c\u4e5f\u4e0d\u60f3\u624b\u52a8\u6307\u5b9a\u76d1\u542c\u6e90\u2014\u2014\u9009watchEffect<\/h3>\n<p>watchEffect\u7684\u6838\u5fc3\u7279\u70b9\u662f\u201c\u81ea\u52a8\u6536\u96c6\u4f9d\u8d56\u201d\uff1a\u5b83\u4f1a\u5728\u7b2c\u4e00\u6b21\u6267\u884c\u56de\u8c03\u65f6\uff0c\u81ea\u52a8\u628a\u56de\u8c03\u91cc\u7528\u5230\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u72b6\u6001\u90fd\u5f53\u6210\u76d1\u542c\u6e90\uff0c\u53ea\u8981\u5176\u4e2d\u4e00\u4e2a\u53d8\u5316\uff0c\u5c31\u4f1a\u91cd\u65b0\u6267\u884c\u56de\u8c03\uff0c\u800c\u4e14\u4e0d\u9700\u8981\u624b\u52a8\u6307\u5b9a\uff0c\u4e5f\u62ff\u4e0d\u5230\u65b0\u503c\u548c\u65e7\u503c\uff0c\u6bd4\u5982\u4f60\u60f3\u5728\u9875\u9762\u4e0a\u5b9e\u65f6\u663e\u793a\u5f53\u524d\u65f6\u95f4\uff0c\u5e76\u4e14\u65f6\u95f4\u6bcf\u79d2\u66f4\u65b0\u4e00\u6b21,\u5c31\u53ef\u4ee5\u7528watchEffect\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watchEffect, onMounted, onUnmounted } from &#39;vue&#39;\nconst currentTime = ref(new Date())\nlet timer = null\nwatchEffect(() =&gt; {\n  \/\/ \u8fd9\u91cc\u7528\u5230\u4e86currentTime.value\uff0c\u6240\u4ee5currentTime\u53d8\u5316\u65f6\u4f1a\u91cd\u65b0\u6267\u884c\uff1f\n  \/\/ \u4e0d\uff0c\u8fd9\u91cc\u6211\u4eec\u662f\u60f3\u4e3b\u52a8\u66f4\u65b0currentTime\uff0c\u6240\u4ee5\u7528\u5b9a\u65f6\u5668\n  \/\/ \u90a3watchEffect\u5728\u8fd9\u91cc\u7684\u4f5c\u7528\u662f\u4ec0\u4e48\uff1f\u81ea\u52a8\u6536\u96c6timer\u76f8\u5173\u7684\u6e05\u7406\u903b\u8f91\uff1f\u4e0d\u5bf9\uff0c\u6e05\u7406\u903b\u8f91\u8fd8\u662f\u8981\u624b\u52a8\u52a0onCleanup\n  \/\/ \u54e6\uff0c\u4e3e\u4e2a\u66f4\u8d34\u5408\u7684\u4f8b\u5b50\uff1a\u6839\u636e\u641c\u7d22\u5173\u952e\u8bcd\u5b9e\u65f6\u663e\u793a\u641c\u7d22\u6846\u7684\u9ad8\u4eae\n  const keyword = ref(&#39;&#39;)\n  const inputEl = ref(null)\n  watchEffect(() =&gt; {\n    if (!keyword.value || !inputEl.value) return\n    \/\/ \u81ea\u52a8\u6536\u96c6keyword\u548cinputEl\u7684\u4f9d\u8d56\uff0c\u53ea\u8981\u5176\u4e2d\u4e00\u4e2a\u53d8\u4e86\uff0c\u5c31\u91cd\u65b0\u9ad8\u4eae\n    const text = inputEl.value.innerText\n    const highlightedText = text.replaceAll(keyword.value, `&lt;span style=&quot;color:red&quot;&gt;${keyword.value}&lt;\/span&gt;`)\n    inputEl.value.innerHTML = highlightedText\n  })<\/pre>\n<p>\u518d\u6bd4\u5982\uff0c\u4f60\u60f3\u5728\u54cd\u5e94\u5f0f\u72b6\u6001\u53d8\u5316\u540e\uff0c\u628a\u5b83\u540c\u6b65\u5230localStorage\u91cc\uff0c\u4e5f\u53ef\u4ee5\u7528watchEffect\uff0c\u56e0\u4e3a\u4e0d\u9700\u8981\u77e5\u9053\u65e7\u503c,\u53ea\u9700\u8981\u628a\u6700\u65b0\u7684\u503c\u5b58\u8fdb\u53bb\u5c31\u884c\uff1a<\/p>\n<pre class=\"brush:javascript;toolbar:false\">import { ref, watchEffect } from &#39;vue&#39;\nconst theme = ref(localStorage.getItem(&#39;theme&#39;) || &#39;light&#39;)\nwatchEffect(() =&gt; {\n  localStorage.setItem(&#39;theme&#39;, theme.value)\n  document.documentElement.setAttribute(&#39;data-theme&#39;, theme.value)\n})<\/pre>\n<p>watchEffect\u8fd8\u6709\u4e24\u4e2a\u53d8\u4f53\uff1awatchPostEffect\u548cwatchSyncEffect\uff0c\u5206\u522b\u5bf9\u5e94\u4e0d\u540c\u7684\u6267\u884c\u65f6\u673a\uff1awatchEffect\u9ed8\u8ba4\u662f\u5728Vue\u7684\u54cd\u5e94\u5f0f\u66f4\u65b0\u4e4b\u524d\u6267\u884c\uff08\u5373pre\u6a21\u5f0f\uff09\uff0cwatchPostEffect\u662f\u5728DOM\u66f4\u65b0\u4e4b\u540e\u6267\u884c\uff08\u5373post\u6a21\u5f0f\uff0c\u9002\u5408\u64cd\u4f5cDOM\uff09\uff0cwatchSyncEffect\u662f\u540c\u6b65\u6267\u884c\uff08\u5373sync\u6a21\u5f0f\uff0c\u5c3d\u91cf\u5c11\u7528\uff0c\u4f1a\u5f71\u54cd\u6027\u80fd\uff09\u3002<\/p>\n<h3>\u573a\u666f2\uff1a\u9700\u8981\u77e5\u9053\u65e7\u503c\uff0c\u6216\u8005\u53ea\u60f3\u76d1\u542c\u7279\u5b9a\u7684\u72b6\u6001\u53d8\u5316\u2014\u2014\u9009watch<\/h3>\n<p>\u521a\u624d\u8bb2\u7684\u96f7\u533a3\u5176\u5b9e\u5c31\u662f\u8fd9\u4e2a\u573a\u666f\u7684\u53cd\u9762\uff1a\u5982\u679c\u9700\u8981\u5bf9\u6bd4\u65b0\u503c\u548c\u65e7\u503c\uff0c\u6bd4\u5982\u505a\u6570\u636e\u53d8\u66f4\u7684\u8bb0\u5f55\uff08\u6bd4\u5982\u7528\u6237\u4fee\u6539\u4e86\u5e74\u9f84\uff0c\u4ece18\u53d8\u523020\uff0c\u9700\u8981\u8bb0\u5f55\u8fd9\u4e2a\u53d8\u5316\uff09\uff0c\u90a3\u5fc5\u987b\u7528watch\u76d1\u542c\u5177\u4f53\u7684\u5c5e\u6027\uff0c\u62ff\u5230newVal\u548coldVal\uff0c\u518d\u6bd4\u5982\uff0c\u4f60\u6709\u4e00\u4e2a\u641c\u7d22\u6846\uff0c\u53ea\u60f3\u5728\u7528\u6237\u8f93\u5165\u5b8c\u6574\u7684\u5173\u952e\u8bcd\uff08\u6bd4\u5982\u505c\u6b62\u8f93\u5165500ms\uff09\u540e\u624d\u53d1\u8bf7\u6c42\uff0c\u800c\u4e14\u9700\u8981\u53d6\u6d88\u4e4b\u524d\u7684\u8bf7\u6c42\uff0c\u8fd9\u65f6\u5019\u4e5f\u9700\u8981\u7528watch\uff0c\u56e0\u4e3a\u4f60\u8981\u6307\u5b9a\u76d1\u542ckeyword\uff0c\u62ff\u5230newVal,\u8fd8\u8981\u52a0\u6e05\u7406\u51fd\u6570\u53d6\u6d88\u65e7\u8bf7\u6c42\u3002<\/p>\n<h3>\u573a\u666f3\uff1a\u9700\u8981\u63a7\u5236\u76d1\u542c\u7684\u6df1\u5ea6\u3001\u662f\u5426\u7acb\u5373\u6267\u884c\u2014\u2014\u9009watch<\/h3>\n<p>watchEffect\u9ed8\u8ba4\u662f\u6df1\u5ea6\u76d1\u542c\u7684\u5417\uff1f\u662f\u7684\uff01\u56e0\u4e3a\u5b83\u81ea\u52a8\u6536\u96c6\u4f9d\u8d56\uff0c\u5982\u679c\u4f9d\u8d56\u7684\u662freactive\u5bf9\u8c61\u6216\u8005ref\u5305\u7684\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u90a3\u4e0d\u7ba1\u5d4c\u5957\u591a\u6df1\uff0c\u90fd\u4f1a\u81ea\u52a8\u76d1\u542c\uff0c\u4f46\u5982\u679c\u4f60\u60f3\u63a7\u5236\u6df1\u5ea6\uff08\u6bd4\u5982\u53ea\u60f3\u76d1\u542cref\u5305\u7684\u5bf9\u8c61\u7684\u7b2c\u4e00\u5c42\u5c5e\u6027\uff0c\u4e0d\u60f3\u76d1\u542c\u5d4c\u5957\u5c5e\u6027\uff09\uff0c\u90a3\u53ea\u80fd\u7528watch\u52a0deep:false\uff08\u4e0d\u8fc7ref\u5305\u5bf9\u8c61\u9ed8\u8ba4\u5c31\u662fdeep:false\uff09\uff0c\u5982\u679c\u4f60\u60f3\u8ba9\u76d1\u542c\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u7acb\u5373\u6267\u884c\u4e00\u6b21\uff0c\u90a3\u53ef\u4ee5\u7528watch\u52a0immediate:true,\u800cwatchEffect\u9ed8\u8ba4\u5c31\u662f\u7acb\u5373\u6267\u884c\u4e00\u6b21\u7684\u3002<\/p>\n<h2>Vue3 watch state\u7684\u6838\u5fc3\u8981\u70b9<\/h2>\n<ol>\n<li>\u5148\u641e\u61c2\u76d1\u542c\u7684\u5bf9\u8c61\uff1aref\uff08\u57fa\u7840\/\u5f15\u7528\u7c7b\u578b\uff0c\u9ed8\u8ba4\u6d45\u76d1\u542c\uff09\u548creactive\uff08\u5f15\u7528\u7c7b\u578b\uff0c\u9ed8\u8ba4\u6df1\u76d1\u542c\uff09\u3002<\/li>\n<li>watch\u7684\u76d1\u542c\u6e90\u53ef\u4ee5\u662f\u5355\u4e2aref\u3001\u5355\u4e2areactive\u5bf9\u8c61\/\u5c5e\u6027\uff08\u7528\u51fd\u6570\u5199\u6cd5\uff09\u3001\u591a\u4e2aref\/reactive\u5c5e\u6027\u7ec4\u5408\uff08\u7528\u6570\u7ec4\u5199\u6cd5\uff09\u3001computed\u503c\u3002<\/li>\n<li>watch\u7684\u907f\u5751\u6307\u5357\uff1a\u4e0d\u8981\u76f4\u63a5\u4f20ref.value\u3001\u4e0d\u8981\u76f4\u63a5\u66ff\u6362reactive\u5bf9\u8c61\u3001\u52a0deep:true\u540e\u5bf9\u6bd4\u4e0d\u51faoldVal\/newVal\u3001\u8bb0\u5f97\u52a0\u6e05\u7406\u51fd\u6570\u3001\u6ce8\u610fimmediate:true\u548c\u6e05\u7406\u51fd\u6570\u7684\u914d\u5408\u3002<\/li>\n<li>watch\u548cwatchEffect\u7684\u9009\u62e9\uff1a\u4e0d\u9700\u8981\u6307\u5b9a\u76d1\u542c\u6e90\u3001\u4e0d\u9700\u8981\u65e7\u503c\u2192\u9009watchEffect\uff1b\u9700\u8981\u6307\u5b9a\u76d1\u542c\u6e90\u3001\u9700\u8981\u65e7\u503c\u3001\u9700\u8981\u63a7\u5236\u6df1\u5ea6\/\u7acb\u5373\u6267\u884c\u2192\u9009watch\u3002<\/li>\n<\/ol>\n<p>\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u5e2e\u4f60\u5f7b\u5e95\u641e\u61c2Vue3\u7684watch\u548cwatchEffect\uff0c\u4ee5\u540e\u5199\u9879\u76ee\u7684\u65f6\u5019\u518d\u4e5f\u4e0d\u4f1a\u8e29\u5751\u5566\uff01\u5982\u679c\u8fd8\u6709\u5176\u4ed6\u95ee\u9898,\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u7559\u8a00\u8ba8\u8bba\u3002<\/p>","pubDate":"Thu, 16 Apr 2026 20:01:36 +0800"}]}}