{"id":314,"date":"2025-11-29T09:54:00","date_gmt":"2025-11-29T01:54:00","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=314"},"modified":"2025-11-29T09:54:00","modified_gmt":"2025-11-29T01:54:00","slug":"vue-%e4%b8%89%e7%a7%8d%e5%bc%ba%e5%88%b6%e5%88%b7%e6%96%b0%e6%96%b9%e6%b3%95%e7%9a%84%e6%9c%ba%e5%88%b6%e3%80%81%e4%bd%bf%e7%94%a8%e5%9c%ba%e6%99%af%e3%80%81%e5%bc%80%e9%94%80%e8%af%b4%e6%98%8e","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/29\/vue-%e4%b8%89%e7%a7%8d%e5%bc%ba%e5%88%b6%e5%88%b7%e6%96%b0%e6%96%b9%e6%b3%95%e7%9a%84%e6%9c%ba%e5%88%b6%e3%80%81%e4%bd%bf%e7%94%a8%e5%9c%ba%e6%99%af%e3%80%81%e5%bc%80%e9%94%80%e8%af%b4%e6%98%8e\/","title":{"rendered":"Vue \u4e09\u79cd\u5f3a\u5236\u5237\u65b0\u65b9\u6cd5\u7684\u673a\u5236\u3001\u4f7f\u7528\u573a\u666f\u3001\u5f00\u9500\u8bf4\u660e"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u6765\u5e2e\u4f60\u6574\u7406 <strong>Vue \u4e2d\u4e09\u79cd\u5f3a\u5236\u5237\u65b0\uff08\u5f3a\u5236\u91cd\u65b0\u6e32\u67d3\uff09\u65b9\u6cd5\u7684\u673a\u5236\u3001\u4f7f\u7528\u573a\u666f\u548c\u6027\u80fd\u5f00\u9500<\/strong>\uff0c\u540c\u65f6\u9644\u5e26\u793a\u4f8b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u4e00\u3001Vue \u5f3a\u5236\u5237\u65b0\u6982\u8ff0<\/strong><\/h1>\n\n\n\n<p>\u5728 Vue \u4e2d\uff0c\u54cd\u5e94\u5f0f\u7cfb\u7edf\u4f9d\u8d56 <strong>\u6570\u636e\u53d8\u52a8\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0<\/strong>\u3002<br>\u5982\u679c\u4fee\u6539\u7684\u6570\u636e Vue \u6ca1\u6709\u68c0\u6d4b\u5230\uff0c\u6216\u8005\u4f60\u60f3\u5f3a\u5236\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u65b9\u6cd5 1\uff1a<code>this.$forceUpdate()<\/code><\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u673a\u5236<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue \u63d0\u4f9b\u7684\u5b9e\u4f8b\u65b9\u6cd5<\/li>\n\n\n\n<li><strong>\u4ec5\u5f3a\u5236\u5f53\u524d\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\uff0c\u4e0d\u5f71\u54cd\u5b50\u7ec4\u4ef6<\/strong><\/li>\n\n\n\n<li>\u91cd\u65b0\u6267\u884c render \u51fd\u6570\u6216\u6a21\u677f\u7f16\u8bd1<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u8bed\u6cd5<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nthis.$forceUpdate();\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u4f7f\u7528\u573a\u666f<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6570\u636e\u4e0d\u662f\u54cd\u5e94\u5f0f\uff08\u672a\u7528 <code>data<\/code> \u6216\u672a <code>ref<\/code>\/<code>reactive<\/code> \u5305\u88c5\uff09<\/li>\n\n\n\n<li>\u7b2c\u4e09\u65b9\u5e93\u66f4\u65b0\u4e86 DOM \u4f46 Vue \u672a\u5bdf\u89c9<\/li>\n\n\n\n<li>\u5c0f\u8303\u56f4\u5237\u65b0\u7ec4\u4ef6\u5185\u5bb9<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u6027\u80fd\u5f00\u9500<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8f7b\u91cf<\/strong>\uff0c\u53ea\u91cd\u65b0\u6e32\u67d3\u5f53\u524d\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u4e0d\u4f1a\u89e6\u53d1\u6574\u4e2a\u5e94\u7528\u66f4\u65b0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u793a\u4f8b<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;div&gt;\n    &amp;lt;p&gt;{{ obj.text }}&amp;lt;\/p&gt;\n    &amp;lt;button @click=&quot;changeText&quot;&gt;\u4fee\u6539\u6587\u672c&amp;lt;\/button&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script&gt;\nexport default {\n  data() {\n    return { obj: {} }\n  },\n  methods: {\n    changeText() {\n      this.obj.text = &#039;\u65b0\u6587\u672c&#039;;\n      this.$forceUpdate(); \/\/ obj \u662f\u975e\u54cd\u5e94\u5f0f\u7684\uff0c\u5f3a\u5236\u5237\u65b0\n    }\n  }\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u65b9\u6cd5 2\uff1a\u6539\u53d8 <code>key<\/code> \u503c<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u673a\u5236<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue \u6839\u636e\u7ec4\u4ef6\u7684 <strong><code>key<\/code> \u503c<\/strong> \u51b3\u5b9a\u662f\u5426\u590d\u7528\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u4fee\u6539 <code>key<\/code> \u2192 Vue \u9500\u6bc1\u65e7\u7ec4\u4ef6\uff0c\u521b\u5efa\u65b0\u7ec4\u4ef6 \u2192 \u5b8c\u5168\u91cd\u65b0\u6e32\u67d3<\/li>\n\n\n\n<li>\u76f8\u5f53\u4e8e\u7ec4\u4ef6 <strong>\u5378\u8f7d + \u91cd\u5efa<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u8bed\u6cd5<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;child-component :key=&quot;componentKey&quot; \/&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nthis.componentKey += 1; \/\/ \u89e6\u53d1 child \u91cd\u65b0\u521b\u5efa\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u4f7f\u7528\u573a\u666f<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9700\u8981 <strong>\u5f7b\u5e95\u91cd\u7f6e\u7ec4\u4ef6\u72b6\u6001<\/strong><\/li>\n\n\n\n<li>\u5f53\u7ec4\u4ef6\u5185\u90e8\u72b6\u6001\u590d\u6742\uff0c\u5355\u9760 <code>$forceUpdate<\/code> \u65e0\u6cd5\u5237\u65b0\u65f6<\/li>\n\n\n\n<li>\u8868\u5355\u91cd\u7f6e\u3001\u590d\u6742\u52a8\u753b\u5237\u65b0\u3001\u7b2c\u4e09\u65b9\u63d2\u4ef6\u91cd\u65b0\u521d\u59cb\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u6027\u80fd\u5f00\u9500<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5927<\/strong>\uff0c\u9500\u6bc1 + \u521b\u5efa\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u4f1a\u89e6\u53d1\u5b50\u7ec4\u4ef6 <code>beforeDestroy<\/code> \/ <code>created<\/code> \/ <code>mounted<\/code> \u751f\u547d\u5468\u671f<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u793a\u4f8b<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;child-component :key=&quot;childKey&quot; \/&gt;\n  &amp;lt;button @click=&quot;reloadChild&quot;&gt;\u91cd\u7f6e\u5b50\u7ec4\u4ef6&amp;lt;\/button&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script&gt;\nimport ChildComponent from &#039;.\/ChildComponent.vue&#039;;\nexport default {\n  components: { ChildComponent },\n  data() { return { childKey: 0 }; },\n  methods: {\n    reloadChild() {\n      this.childKey += 1; \/\/ \u5f3a\u5236\u91cd\u5efa\u5b50\u7ec4\u4ef6\n    }\n  }\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u65b9\u6cd5 3\uff1a\u5229\u7528\u54cd\u5e94\u5f0f\u66ff\u6362\u5bf9\u8c61 \/ \u6570\u7ec4<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u673a\u5236<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue \u65e0\u6cd5\u68c0\u6d4b\u5230\u67d0\u4e9b\u76f4\u63a5\u8d4b\u503c\u6216\u6570\u7ec4\u7d22\u5f15\u4fee\u6539<\/li>\n\n\n\n<li><strong>\u901a\u8fc7\u66ff\u6362\u6574\u4e2a\u5bf9\u8c61\u6216\u6570\u7ec4<\/strong> \u2192 Vue \u89e6\u53d1\u54cd\u5e94\u5f0f\u66f4\u65b0<\/li>\n\n\n\n<li>\u6838\u5fc3\uff1a\u66ff\u6362\u5f15\u7528\uff0c\u8ba9 Vue \u54cd\u5e94\u7cfb\u7edf\u5bdf\u89c9\u53d8\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u8bed\u6cd5<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ \u5bf9\u8c61\nthis.obj = { ...this.obj, newProp: &#039;\u65b0\u503c&#039; }\n\n\/\/ \u6570\u7ec4\nthis.list = &#x5B;...this.list, newItem]\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u4f7f\u7528\u573a\u666f<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4fee\u6539\u5bf9\u8c61\u65b0\u589e\u5c5e\u6027\u6216\u6570\u7ec4\u7d22\u5f15\uff0cVue \u65e0\u6cd5\u68c0\u6d4b<\/li>\n\n\n\n<li>\u60f3\u5c40\u90e8\u5237\u65b0\u4f46\u6570\u636e\u672c\u8eab\u975e\u54cd\u5e94\u5f0f<\/li>\n\n\n\n<li>\u907f\u514d\u4f7f\u7528 <code>$forceUpdate<\/code>\uff0c\u4fdd\u6301\u54cd\u5e94\u5f0f\u7cfb\u7edf\u81ea\u7136\u66f4\u65b0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u6027\u80fd\u5f00\u9500<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4e2d\u7b49<\/strong>\uff0c\u53ea\u5237\u65b0\u53d7\u5f71\u54cd\u7684\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u4e0d\u9500\u6bc1\u7ec4\u4ef6\uff0c\u53ea\u66f4\u65b0\u89c6\u56fe<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u793a\u4f8b<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;div&gt;\n    &amp;lt;p&gt;{{ obj.newProp }}&amp;lt;\/p&gt;\n    &amp;lt;button @click=&quot;addProp&quot;&gt;\u65b0\u589e\u5c5e\u6027&amp;lt;\/button&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script&gt;\nexport default {\n  data() { return { obj: {} }; },\n  methods: {\n    addProp() {\n      this.obj = { ...this.obj, newProp: &#039;\u65b0\u503c&#039; }; \/\/ \u66ff\u6362\u5bf9\u8c61\uff0c\u89e6\u53d1\u5237\u65b0\n    }\n  }\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u603b\u7ed3\u5bf9\u6bd4\u8868<\/strong><\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6cd5<\/th><th>\u5237\u65b0\u8303\u56f4<\/th><th>\u751f\u547d\u5468\u671f\u89e6\u53d1<\/th><th>\u5f00\u9500<\/th><th>\u4f7f\u7528\u573a\u666f<\/th><\/tr><\/thead><tbody><tr><td><code>this.$forceUpdate()<\/code><\/td><td>\u5f53\u524d\u7ec4\u4ef6<\/td><td>render \/ updated<\/td><td>\u5c0f<\/td><td>\u975e\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u7b2c\u4e09\u65b9\u5e93\u66f4\u65b0 DOM<\/td><\/tr><tr><td>\u6539\u53d8 <code>key<\/code><\/td><td>\u5f53\u524d\u7ec4\u4ef6\u53ca\u5b50\u7ec4\u4ef6<\/td><td>beforeDestroy \/ created \/ mounted<\/td><td>\u5927<\/td><td>\u5b8c\u5168\u91cd\u7f6e\u7ec4\u4ef6\u72b6\u6001\uff0c\u8868\u5355\u6216\u63d2\u4ef6\u91cd\u7f6e<\/td><\/tr><tr><td>\u66ff\u6362\u5bf9\u8c61\/\u6570\u7ec4<\/td><td>\u5f53\u524d\u7ec4\u4ef6<\/td><td>render \/ updated<\/td><td>\u4e2d<\/td><td>\u65b0\u589e\u5bf9\u8c61\u5c5e\u6027\u6216\u6570\u7ec4\u7d22\u5f15\uff0c\u4fdd\u6301\u54cd\u5e94\u5f0f\u66f4\u65b0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udca1 <strong>\u6700\u4f73\u5b9e\u8df5\u5efa\u8bae<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4f18\u5148\u4f7f\u7528\u54cd\u5e94\u5f0f\u6570\u636e\u66ff\u6362<\/strong>\uff08\u65b9\u5f0f 3\uff09\uff0c\u4fdd\u6301 Vue \u54cd\u5e94\u5f0f\u673a\u5236\u81ea\u7136\u66f4\u65b0<\/li>\n\n\n\n<li><strong>$forceUpdate<\/strong> \u4ec5\u7528\u4e8e\u5c11\u6570\u975e\u54cd\u5e94\u5f0f\u573a\u666f<\/li>\n\n\n\n<li><strong>\u6539\u53d8 key<\/strong> \u9002\u5408\u9700\u8981\u5b8c\u5168\u91cd\u5efa\u7ec4\u4ef6\u72b6\u6001\u7684\u573a\u666f\uff0c\u4f46\u6027\u80fd\u6d88\u8017\u5927<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u6765\u5e2e\u4f60\u6574\u7406 Vue \u4e2d\u4e09\u79cd\u5f3a\u5236\u5237\u65b0\uff08\u5f3a\u5236\u91cd\u65b0\u6e32\u67d3\uff09\u65b9\u6cd5\u7684\u673a\u5236\u3001\u4f7f\u7528&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/29\/vue-%e4%b8%89%e7%a7%8d%e5%bc%ba%e5%88%b6%e5%88%b7%e6%96%b0%e6%96%b9%e6%b3%95%e7%9a%84%e6%9c%ba%e5%88%b6%e3%80%81%e4%bd%bf%e7%94%a8%e5%9c%ba%e6%99%af%e3%80%81%e5%bc%80%e9%94%80%e8%af%b4%e6%98%8e\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-314","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/314\/revisions\/315"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}