{"id":1991,"date":"2025-08-27T10:17:37","date_gmt":"2025-08-27T10:17:37","guid":{"rendered":"https:\/\/linuxjk.cn\/?p=1991"},"modified":"2025-09-11T07:39:19","modified_gmt":"2025-09-11T07:39:19","slug":"vue3","status":"publish","type":"post","link":"https:\/\/linuxjk.cn\/?p=1991","title":{"rendered":"VUE3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1991\" class=\"elementor elementor-1991\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52cc08ef e-flex e-con-boxed e-con e-parent\" data-id=\"52cc08ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2393e73 elementor-widget elementor-widget-text-editor\" data-id=\"2393e73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"lake-content\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u76ee\u5f55<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E4%B8%80%E4%BA%86%E8%A7%A3vue3\" >\u4e00.\u4e86\u89e3vue3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E4%BA%8C%E5%88%9B%E5%BB%BAvue3\" >\u4e8c.\u521b\u5efavue3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E4%B8%89vue3%E5%9F%BA%E7%A1%80\" >\u4e09.vue3\u57fa\u7840<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E6%9B%B4%E6%94%B9%E5%90%8D%E7%A7%B0\" >1.\u66f4\u6539\u540d\u79f0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2setup\" >2.setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E5%93%8D%E5%BA%94%E5%BC%8F\" >3.\u54cd\u5e94\u5f0f<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1ref\" >1.ref<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2reactive\" >2.reactive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3vue2%E4%B8%8Evue3_%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB\" >3.vue2\u4e0evue3 \u54cd\u5e94\u5f0f\u7684\u533a\u522b<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4%E8%A7%A3%E6%9E%84\" >4.\u89e3\u6784<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%BC%95%E5%85%A5\" >1.\u5f15\u5165<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%85%A8%E9%83%A8%E8%A7%A3%E6%9E%84%EF%BC%9A\" >2.\u5168\u90e8\u89e3\u6784\uff1a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E9%83%A8%E5%88%86%E8%A7%A3%E6%9E%84\" >3.\u90e8\u5206\u89e3\u6784<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#5%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7_computed\" >5.\u8ba1\u7b97\u5c5e\u6027 computed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#6%E7%9B%91%E5%90%AC%E5%B1%9E%E6%80%A7Watch\" >6.\u76d1\u542c\u5c5e\u6027Watch<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1Watch_%E7%9B%91%E5%90%ACref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\" >1.Watch:\u76d1\u542cref\u5b9a\u4e49\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2Watch_%E7%9B%91%E5%90%ACref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\" >2.Watch:\u76d1\u542cref\u5b9a\u4e49\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E6%B3%A8%E6%84%8F%EF%BC%9A\" >\u6ce8\u610f\uff1a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3Watch_%E7%9B%91%E5%90%ACreactive%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\" >3.Watch:\u76d1\u542creactive\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#7%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0\" >7.\u751f\u547d\u5468\u671f\u51fd\u6570<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1_vue2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\" >1. vue2\u751f\u547d\u5468\u671f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2vue3%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\" >2.vue3\u751f\u547d\u5468\u671f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#8%E5%9C%A8vue3%E4%B8%AD%E4%BD%BF%E7%94%A8ts\" >8.\u5728vue3\u4e2d\u4f7f\u7528ts<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%EF%BC%89%E5%BC%95%E7%94%A8\" >1\uff09\u5f15\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%EF%BC%89ref\" >2\uff09ref<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3reative\" >3)reative<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4%E5%87%BD%E6%95%B0\" >4)\u51fd\u6570<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#5%EF%BC%89computed%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7\" >5\uff09computed\u8ba1\u7b97\u5c5e\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#6%EF%BC%89watch%E7%9B%91%E5%90%AC%E5%B1%9E%E6%80%A7%E5%8A%A0%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\" >6\uff09watch\u76d1\u542c\u5c5e\u6027\u52a0\u6570\u636e\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#7%EF%BC%89%E5%B0%86ts%E5%86%99%E5%85%A5%E5%8D%95%E7%8B%AC%E6%96%87%E4%BB%B6%E5%86%8D%E5%BC%95%E7%94%A8\" >7\uff09\u5c06ts\u5199\u5165\u5355\u72ec\u6587\u4ef6\u518d\u5f15\u7528<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#9Ref\" >9.Ref<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1ref%E7%9A%84%E4%BD%BF%E7%94%A8\" >1.ref\u7684\u4f7f\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E4%BD%BF%E7%94%A8ref%E6%8E%A7%E5%88%B6input%E6%A0%87%E7%AD%BE%E8%81%9A%E7%84%A6%E3%80%81%E5%A4%B1%E7%84%A6\" >2.\u4f7f\u7528ref\u63a7\u5236input\u6807\u7b7e\u805a\u7126\u3001\u5931\u7126<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3defineExpose\" >3.defineExpose<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#10defineProps_%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82\" >10.defineProps \u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u53c2<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E4%BC%A0%E4%BB%80%E4%B9%88%E6%8E%A5%E4%BB%80%E4%B9%88\" >1.\u4f20\u4ec0\u4e48\u63a5\u4ec0\u4e48<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E8%A7%84%E5%AE%9A%E6%8E%A5%E6%94%B6%E7%B1%BB%E5%9E%8B%E4%BC%A0%E5%8F%82\" >2.\u89c4\u5b9a\u63a5\u6536\u7c7b\u578b\u4f20\u53c2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E6%98%AF%E5%90%A6%E5%BF%85%E4%BC%A0%E5%B1%95%E7%A4%BA%E9%BB%98%E8%AE%A4\" >3.\u662f\u5426\u5fc5\u4f20+\u5c55\u793a\u9ed8\u8ba4<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#11watchEffect\" >11.watchEffect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#12%E8%87%AA%E5%AE%9A%E4%B9%89HOOKS\" >12.\u81ea\u5b9a\u4e49HOOKS<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E6%96%B0%E5%BB%BAhooks%E6%96%87%E4%BB%B6%E5%A4%B9\" >1.\u65b0\u5efahooks\u6587\u4ef6\u5939<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%86%99%E9%92%A9%E5%AD%90_useMove\" >2.\u5199\u94a9\u5b50 useMove:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E5%BC%95%E7%94%A8%EF%BC%9A\" >3.\u5f15\u7528\uff1a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E2%AD%90addEventListener%E2%91%A0%EF%BC%8C%E2%91%A1%EF%BC%8C%E2%91%A2\" >\u2b50addEventListener(\u2460\uff0c\u2461\uff0c\u2462 )<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E2%AD%90_%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7\" >\u2b50 \u4e8b\u4ef6\u5192\u6ce1\u4e0e\u4e8b\u4ef6\u6355\u83b7<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#13%E8%B7%AF%E7%94%B1\" >13.\u8def\u7531<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%90%8E%E5%AE%89%E8%A3%85%E8%B7%AF%E7%94%B1\" >1.\u521b\u5efa\u9879\u76ee\u540e\u5b89\u88c5\u8def\u7531<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E9%85%8D%E7%BD%AE\" >2.\u914d\u7f6e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1\" >3.\u591a\u7ea7\u8def\u7531<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-50\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4%E7%BB%99router%E5%8A%A0ts%E7%B1%BB%E5%9E%8B\" >4.\u7ed9router\u52a0ts\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-51\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#5%E9%87%8D%E5%AE%9A%E5%90%91\" >5.\u91cd\u5b9a\u5411<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-52\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#6query_%E4%BC%A0%E5%8F%82\" >6.query \u4f20\u53c2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-53\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#7params%E4%BC%A0%E5%8F%82\" >7.params\u4f20\u53c2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-54\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#8%E5%A3%B0%E6%98%8E%E5%BC%8F%E5%AF%BC%E8%88%AA\" >8.\u58f0\u660e\u5f0f\u5bfc\u822a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-55\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#9%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA\" >9.\u7f16\u7a0b\u5f0f\u5bfc\u822a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-56\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#10%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD\" >10.\u8def\u7531\u61d2\u52a0\u8f7d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-57\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#11RouterLink\" >11.RouterLink<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-58\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#12%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98\" >12.\u7ec4\u4ef6\u7f13\u5b58<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-59\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#14%E7%BB%84%E4%BB%B6%E9%97%B4%E4%BC%A0%E5%8F%82\" >14.\u7ec4\u4ef6\u95f4\u4f20\u53c2<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-60\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1props\" >1.props<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-61\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2custom\" >2.custom<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-62\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3refs_%E4%B8%8Eparent\" >3.$refs \u4e0e$parent<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-63\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1refs_%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%8C%E6%97%B6%E6%8E%A7%E5%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E5%85%B1%E6%9C%89%E7%9A%84%E5%8F%98%E9%87%8F\" >1.$refs \u7236\u7ec4\u4ef6\u540c\u65f6\u63a7\u5236\u5b50\u7ec4\u4ef6\u5171\u6709\u7684\u53d8\u91cf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-64\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#for_in_%E5%BE%AA%E7%8E%AF\" >for in \u5faa\u73af<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-65\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2parent\" >2.$parent<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-66\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4mitt\" >4.mitt<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-67\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%AE%89%E8%A3%85_mitt_%EF%BC%9Anpm_install_mitt\" >1.\u5b89\u88c5 mitt \uff1anpm install mitt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-68\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E4%BD%BF%E7%94%A8_mitt_%E4%BC%A0%E5%8F%82\" >2.\u4f7f\u7528 mitt \u4f20\u53c2<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-69\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#5attrs\" >5.attrs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-70\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#6provide_%E4%B8%8E_inject\" >6.provide \u4e0e inject<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-71\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#15%E6%8F%92%E6%A7%BD\" >15.\u63d2\u69fd<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-72\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD\" >1.\u9ed8\u8ba4\u63d2\u69fd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-73\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD\" >2.\u5177\u540d\u63d2\u69fd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-74\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD\" >3.\u4f5c\u7528\u57df\u63d2\u69fd<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-75\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#16pinia\" >16.pinia<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-76\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%AE%89%E8%A3%85_pinia\" >1.\u5b89\u88c5 pinia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-77\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E9%85%8D%E7%BD%AE-2\" >2.\u914d\u7f6e<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-78\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%9C%A8_maints_%E4%B8%AD%E5%BC%95%E5%85%A5\" >1.\u5728 main.ts \u4e2d\u5f15\u5165<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-79\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E6%96%B0%E5%BB%BA_store_%E6%96%87%E4%BB%B6%E5%A4%B9\" >2.\u65b0\u5efa store \u6587\u4ef6\u5939<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-80\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E6%96%B0%E5%BB%BA_ts_%E6%96%87%E4%BB%B6\" >1.\u6587\u4ef6\u5939\u4e2d\u65b0\u5efa ts \u6587\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-81\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%9C%A8_ts_%E6%96%87%E4%BB%B6%E4%B8%AD%E5%BC%95%E5%85%A5_defineStore\" >2.\u5728 ts \u6587\u4ef6\u4e2d\u5f15\u5165 defineStore<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-82\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%BC%95%E5%85%A5%E6%AD%A4_ts_%E6%96%87%E4%BB%B6\" >3.\u5728\u7ec4\u4ef6\u4e2d\u5f15\u5165\u6b64 ts \u6587\u4ef6<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-83\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E6%9E%84%E6%88%90\" >3.\u6784\u6210<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-84\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1state\" >1.state<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-85\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2getter\" >2.getter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-86\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3action\" >3.action<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-87\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4%E8%B0%83%E7%94%A8\" >4.\u8c03\u7528<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-88\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E8%A7%A3%E6%9E%84\" >1.\u89e3\u6784<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-89\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E4%BD%BF%E7%94%A8\" >2.\u4f7f\u7528<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-90\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#17toRaw_%E4%B8%8E_markRaw\" >17.toRaw \u4e0e markRaw<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-91\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#18shallowRef_%E4%B8%8E_shallowReactive\" >18.shallowRef \u4e0e shallowReactive<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-92\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1shallowRef\" >1.shallowRef<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-93\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2shallowReactive\" >2.shallowReactive<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-94\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#19readonly_%E4%B8%8E_shallowReadonly\" >19.readonly \u4e0e shallowReadonly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-95\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#20Teleport\" >20.Teleport<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-96\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#21Suspense\" >21.Suspense<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-97\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#22vant\" >22.vant<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-98\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#23%EF%BC%9A%E9%85%8D%E6%9C%8D%E5%8A%A1\" >23\uff1a\u914d\u670d\u52a1<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-99\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E6%96%B9%E6%B3%95_1\" >\u65b9\u6cd5 1.<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-100\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%9C%A8_viteconfigvue_%E4%B8%AD%E9%85%8D%E6%9C%8D%E5%8A%A1\" >1.\u5728 vite.config.vue \u4e2d\u914d\u670d\u52a1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-101\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%9C%A8server_%E4%B8%AD_%E7%94%A8_proxy_%E9%85%8D%E7%BD%AE\" >2.\u5728server \u4e2d \u7528 proxy \u914d\u7f6e<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-102\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#%E6%96%B9%E6%B3%95_2\" >\u65b9\u6cd5 2<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-103\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#1%E5%9C%A8_src_%E6%96%B0%E5%BB%BA_utils_%E6%96%87%E4%BB%B6%E5%A4%B9_%E5%86%99_request_%E6%96%87%E4%BB%B6\" >1.\u5728 src \u65b0\u5efa utils \u6587\u4ef6\u5939 \u5199 request \u6587\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-104\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#2%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%8B%E6%96%B0%E5%BB%BAevndevelopment\" >2.\u5728\u9879\u76ee\u4e0b\u65b0\u5efa.evn.development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-105\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#3%E5%9C%A8_src_%E4%B8%AD%E6%96%B0%E5%BB%BA_api_%E6%96%87%E4%BB%B6%E5%A4%B9_%E5%9C%A8_xxxjs_%E5%86%99%E5%85%B7%E4%BD%93%E9%A1%B5%E9%9D%A2%E6%89%80%E9%9C%80%E7%9A%84%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95\" >3.\u5728 src \u4e2d\u65b0\u5efa api \u6587\u4ef6\u5939 \u5728 xxx.js \u5199\u5177\u4f53\u9875\u9762\u6240\u9700\u7684\u8bf7\u6c42\u65b9\u6cd5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-106\" href=\"https:\/\/linuxjk.cn\/?p=1991\/#4%E5%9C%A8%E5%85%B7%E4%BD%93%E9%A1%B5%E9%9D%A2%E5%BC%95%E5%85%A5_api_%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E8%AF%A5%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95\" >4.\u5728\u5177\u4f53\u9875\u9762\u5f15\u5165 api \u6587\u4ef6\u5939\u4e0b\u8be5\u9875\u9762\u7684\u65b9\u6cd5<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 id=\"MIKAc\"><span class=\"ez-toc-section\" id=\"%E4%B8%80%E4%BA%86%E8%A7%A3vue3\"><\/span><span class=\"ne-text\">\u4e00.\u4e86\u89e3vue3<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p id=\"ua864c060\" class=\"ne-p\"><span class=\"ne-text\">Vue3 \u662f\u4e00\u5957\u6784\u5efa\u7528\u6237\u754c\u9762\u7684\u6e10\u8fdb\u5f0f\u6846\u67b6\uff0c\u7528\u6765\u6784\u5efa\u54cd\u5e94\u5f0f\u9875\u9762\u3002<\/span><\/p>\n<p id=\"ue28f72ca\" class=\"ne-p\"><span class=\"ne-text\">Vue \u7684\u76ee\u6807\u662f\u901a\u8fc7\u5c3d\u53ef\u80fd\u7b80\u5355\u7684 API \u5b9e\u73b0\u54cd\u5e94\u7684\u6570\u636e\u7ed1\u5b9a\u548c\u7ec4\u5408\u7684\u89c6\u56fe\u7ec4\u4ef6\u3002<\/span><\/p>\n<h2 id=\"nQIqM\"><span class=\"ez-toc-section\" id=\"%E4%BA%8C%E5%88%9B%E5%BB%BAvue3\"><\/span><span class=\"ne-text\">\u4e8c.\u521b\u5efavue3<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p id=\"u317bc5df\" class=\"ne-p\"><span class=\"ne-text\">1.\u5728\u6587\u4ef6\u5939\u4e2d\u6253\u5f00\u7ec8\u7aef \u8f93\u5165<\/span><span class=\"ne-text\">npm create vue@latest<\/span><span class=\"ne-text\">\uff08\u786e\u4fddnode\u7248\u672c\u5927\u4e8e20\uff09<\/span><\/p>\n<p id=\"u32f72300\" class=\"ne-p\"><span class=\"ne-text\">2.\u521b\u5efa\u8fc7\u7a0b \u7b2c\u4e00\u4e2a\u9009\u62e9<\/span><span class=\"ne-text\">typescript<\/span><span class=\"ne-text\"> \u7b2c\u4e8c\u4e2a\u4e0d\u9009\u76f4\u63a5\u56de\u8f66 \u7136\u540e\u9009\u62e9yes\u5373\u53ef\u521b\u5efa\u6210\u529f<\/span><\/p>\n<p id=\"u49146275\" class=\"ne-p\"><span class=\"ne-text\">3.\u5b89\u88c5node <\/span><span class=\"ne-text\">npm install<\/span><\/p>\n<p id=\"uef137991\" class=\"ne-p\"><span class=\"ne-text\">4.\u542f\u52a8\u670d\u52a1 <\/span><span class=\"ne-text\">npm run dev<\/span><\/p>\n<p id=\"u57c53886\" class=\"ne-p\"><img decoding=\"async\" id=\"uffc8710b\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756266821216-97b1acad-d722-41b9-b6fe-08794c834369.png\" width=\"196.66666666666666\" \/><\/p>\n<hr id=\"DsrpL\" class=\"ne-hr\" \/>\n<h2 id=\"euFYj\"><span class=\"ez-toc-section\" id=\"%E4%B8%89vue3%E5%9F%BA%E7%A1%80\"><\/span><span class=\"ne-text\">\u4e09.vue3\u57fa\u7840<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"lU9qx\"><span class=\"ez-toc-section\" id=\"1%E6%9B%B4%E6%94%B9%E5%90%8D%E7%A7%B0\"><\/span><span class=\"ne-text\">1.\u66f4\u6539\u540d\u79f0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u11cb77be\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5148\u5728\u5f53\u524d\u9879\u76ee\u6587\u4ef6\u5939\u7ec8\u7aef\u8f93\u5165 <\/span><span class=\"ne-text\"> npm i vite-plugin-vue-setup-extend -D<\/span><span class=\"ne-text\"> \u4e0b\u8f7d<\/span><\/p>\n<p id=\"u02b66540\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u5728<\/span><span class=\"ne-text\">vite.config.ts<\/span><span class=\"ne-text\">\u8fdb\u884c\u914d\u7f6e<\/span><\/p>\n<p id=\"uecff8381\" class=\"ne-p\"><span class=\"ne-text\"> 1.import vueSetupExtend from &#8216;vite-plugin-vue-setup-extend&#8217;;<\/span><\/p>\n<p id=\"uddf7908b\" class=\"ne-p\"><span class=\"ne-text\"> 2.\u00a0vueSetupExtend(),<\/span><\/p>\n<p id=\"u8b28f344\" class=\"ne-p\"><img decoding=\"async\" id=\"u372a25ba\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756267442433-af33d5af-6506-4aaf-aaf7-213b2a3a115d.png\" width=\"476.6666666666667\" \/><\/p>\n<p id=\"u35dd3064\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728script \u6807\u7b7e\u540e\u9762\u4f7f\u7528\u5373\u53ef\uff0c\u5982\u56fe<\/span><span class=\"ne-text\">\u2b07<\/span><\/p>\n<p id=\"uc54a02db\" class=\"ne-p\"><img decoding=\"async\" id=\"u9459aeac\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756272666455-fb3ffc9d-d2cf-42f9-8578-eb60979f87d4.png\" width=\"244.66666666666666\" \/><\/p>\n<h3 id=\"yfi1n\"><span class=\"ez-toc-section\" id=\"2setup\"><\/span><span class=\"ne-text\">2.setup<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u9fa2c725\" class=\"ne-p\"><span class=\"ne-text\">setup\u65f6vue3\u65b0\u589e\u7684\u8bed\u6cd5\u7cd6(api)<\/span><\/p>\n<p id=\"ufbd2446d\" class=\"ne-p\"><span class=\"ne-text\">\u4e0d\u652f\u6301\u4f7f\u7528this<\/span><\/p>\n<p id=\"uf2f895b3\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728script \u6807\u7b7e\u540e\u9762\u4f7f\u7528\u5373\u53ef\uff0c\u5982\u56fe<\/span><span class=\"ne-text\">\u2b07<\/span><\/p>\n<p id=\"u983367f8\" class=\"ne-p\"><img decoding=\"async\" id=\"u4398a106\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756267249517-7085edee-7881-465e-9e65-636f899ec7c4.png\" width=\"122.66666666666667\" \/><\/p>\n<p id=\"u8e6474bf\" class=\"ne-p\">\u00a0<\/p>\n<h3 id=\"IqyAh\"><span class=\"ez-toc-section\" id=\"3%E5%93%8D%E5%BA%94%E5%BC%8F\"><\/span><span class=\"ne-text\">3.\u54cd\u5e94\u5f0f<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h5 id=\"bFvW6\"><span class=\"ez-toc-section\" id=\"1ref\"><\/span><span class=\"ne-text\">1.ref<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"ne-quote\">\n<p id=\"uc7f4d8aa\" class=\"ne-p\"><span class=\"ne-text\">1.\u7528\u4e8e<\/span><span class=\"ne-text\">\u57fa\u672c\u6570\u636e\u7c7b\u578b<\/span><span class=\"ne-text\">\u65f6\uff1a<\/span><\/p>\n<p id=\"u415ddff3\" class=\"ne-p\"><span class=\"ne-text\"> * \u9700\u8981\u6dfb\u52a0.value\uff1b<\/span><\/p>\n<p id=\"u529af107\" class=\"ne-p\"><img decoding=\"async\" id=\"u486f0c56\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756273133848-fe516493-faaf-4de0-b2b2-d3169a98d9bd.png\" width=\"336\" \/><\/p>\n<p id=\"u22434814\" class=\"ne-p\"><span class=\"ne-text\">2.\u7528\u4e8e<\/span><span class=\"ne-text\">\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/span><span class=\"ne-text\">\u65f6\uff1a<\/span><\/p>\n<p id=\"ubc6ad6ac\" class=\"ne-p\"><span class=\"ne-text\"> * proxy\u5e95\u5c42<\/span><\/p>\n<p id=\"u3eadc9c7\" class=\"ne-p\"><span class=\"ne-text\"> * \u4fee\u6539\u65f6 \u53ef\u4ee5\u76f4\u63a5\u4fee\u6539\u5bf9\u8c61 \u4e5f\u53ef\u4f7f\u7528<\/span><span class=\"ne-text\">Object.assign() <\/span><img decoding=\"async\" id=\"ucc606495\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756273168493-760291fe-615d-46d4-a52d-e70744d71ef5.png\" width=\"369.3333333333333\" \/><\/p>\n<p id=\"u5648acb9\" class=\"ne-p\"><span class=\"ne-text\">3.\u4f5c\u7528\u4e8e\u591a\u5c42\u7ed3\u6784\u4fee\u6539\u6574\u4f53\u65f6<\/span><\/p>\n<p id=\"uee58047a\" class=\"ne-p\"><span class=\"ne-text\">\u90fd\u53ef\u76f4\u63a5\u4fee\u6539\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528<\/span><span class=\"ne-text\">Object.assign() <\/span><\/p>\n<p id=\"u63a37d52\" class=\"ne-p\"><img decoding=\"async\" id=\"u120ed98d\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756277022616-ab9021f8-82d0-422f-81aa-b3130f1d6739.png\" width=\"320.6666666666667\" \/><\/p>\n<\/div>\n<p id=\"u4e767073\" class=\"ne-p\">\u00a0<\/p>\n<h5 id=\"dKS1g\"><span class=\"ez-toc-section\" id=\"2reactive\"><\/span><span class=\"ne-text\">2.reactive<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"ne-quote\">\n<p id=\"u32f12f31\" class=\"ne-p\"><span class=\"ne-text\">1.\u7528\u4e8e\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/span><\/p>\n<p id=\"u8abb6691\" class=\"ne-p\"><span class=\"ne-text\"> * \u4fee\u6539\u6574\u4f53\u65f6\u5019 \u4f7f\u7528<\/span><span class=\"ne-text\">Object.assign()<\/span><span class=\"ne-text\">\u8fdb\u884c\u5408\u5e76\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u8981\u5408\u5e76\u5230\u7684\u5730\u65b9\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3a\u8981\u5408\u5e76\u7684\u53c2\u6570<\/span><\/p>\n<p id=\"uf4471c19\" class=\"ne-p\"><img decoding=\"async\" id=\"ufa973a61\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756273208222-21b7b525-131d-4a72-a52e-916702078b61.png\" width=\"426.6666666666667\" \/><\/p>\n<p id=\"u9862282f\" class=\"ne-p\"><span class=\"ne-text\">2.\u7528\u4e8e\u591a\u5c42\u7ed3\u6784\u4fee\u6539\u6574\u4f53\u65f6<\/span><\/p>\n<p id=\"u9246b0f1\" class=\"ne-p\"><span class=\"ne-text\">\u5fc5\u987b\u7528<\/span><span class=\"ne-text\">Object.assign() <\/span><span class=\"ne-text\">\u8fdb\u884c\u4fee\u6539<\/span><\/p>\n<p id=\"uae70b6c6\" class=\"ne-p\"><img decoding=\"async\" id=\"uf1c751bd\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756277132761-d720d456-20db-4da3-9738-6f693b381afe.png\" width=\"230.66666666666666\" \/><\/p>\n<\/div>\n<p id=\"u82fae0f0\" class=\"ne-p\">\u00a0<\/p>\n<h5 id=\"VrfXE\"><span class=\"ez-toc-section\" id=\"3vue2%E4%B8%8Evue3_%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB\"><\/span><span class=\"ne-text\">3.vue2\u4e0evue3 \u54cd\u5e94\u5f0f\u7684\u533a\u522b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"ne-quote\">\n<p id=\"ub9371bcb\" class=\"ne-p\"><span class=\"ne-text\">vue2\u54cd\u5e94\u5f0f\uff1aObject.defineproperty() \u4e2d\u7684getter\u548csetter\u53bb\u52ab\u6301\u6570\u636e\u4fee\u6539\u6570\u636e \u4ee5\u8fbe\u5230\u6570\u636e\u54cd\u5e94\u5f0f<\/span><\/p>\n<p id=\"u8afce2d8\" class=\"ne-p\"><span class=\"ne-text\">vue3\u54cd\u5e94\u5f0f\uff1a\u901a\u8fc7<\/span><span class=\"ne-text\">Proxy<\/span><span class=\"ne-text\">\u4ee3\u7406 \u53bb\u6267\u884c\u54cd\u5e94\u5f0f<\/span><\/p>\n<\/div>\n<h3 id=\"In1n1\"><span class=\"ez-toc-section\" id=\"4%E8%A7%A3%E6%9E%84\"><\/span><span class=\"ne-text\">4.\u89e3\u6784<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"NZ6bY\"><span class=\"ez-toc-section\" id=\"1%E5%BC%95%E5%85%A5\"><\/span><span class=\"ne-text\">1.\u5f15\u5165<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u40b9e229\" class=\"ne-p\"><span class=\"ne-text\">toRefs(\u5168\u90e8\u89e3\u6784)\u6216toRef\uff08\u90e8\u5206\u89e3\u6784\uff09<\/span><\/p>\n<p id=\"uc82d4ee8\" class=\"ne-p\"><img decoding=\"async\" id=\"u41ab7160\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756281980949-ebced48f-79a3-4d0b-8ed0-2ee3d3ed9762.png\" width=\"393.3333333333333\" \/><\/p>\n<h4 id=\"wAjOn\"><span class=\"ez-toc-section\" id=\"2%E5%85%A8%E9%83%A8%E8%A7%A3%E6%9E%84%EF%BC%9A\"><\/span><span class=\"ne-text\">2.\u5168\u90e8\u89e3\u6784\uff1a<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ued2b2df8\" class=\"ne-p\"><span class=\"ne-text\">const{\u5c5e\u6027\uff0c\u5c5e\u6027}=toRefs(\u5bf9\u8c61\u540d)<\/span><\/p>\n<h4 id=\"Oq87k\"><span class=\"ez-toc-section\" id=\"3%E9%83%A8%E5%88%86%E8%A7%A3%E6%9E%84\"><\/span><span class=\"ne-text\">3.\u90e8\u5206\u89e3\u6784<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"uf5f27105\" class=\"ne-p\"><span class=\"ne-text\">let \u5bf9\u5e94\u5c5e\u6027\u7684\u53d8\u91cf\u540d =toRef(\u5bf9\u8c61\u540d,&#8217;\u5bf9\u5e94\u5c5e\u6027&#8217;)<\/span><\/p>\n<p id=\"ua9d7ab31\" class=\"ne-p\"><span class=\"ne-text\">\u4e5f\u8981\u7528.value\u624d\u53ef\u4ee5\u4f7f\u7528<\/span><\/p>\n<pre id=\"DGsb3\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>\/\/\u5168\u90e8\u89e3\u6784\nconst{name,age}=toRefs(obj)\nconsole.log(name,age)\n\/\/\u90e8\u5206\u89e3\u6784\nlet age1 =toRef(obj,'age')\n\nfunction changeName() {\n    \/\/.value\u4f7f\u7528\n    name.value = '\u5c0f\u674e'\n}<\/code><\/pre>\n<h3 id=\"k7qdW\"><span class=\"ez-toc-section\" id=\"5%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7_computed\"><\/span><span class=\"ne-text\">5.\u8ba1\u7b97\u5c5e\u6027 computed<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u6408854c\" class=\"ne-p\"><span class=\"ne-text\">1.\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027\u9700\u5f15\u5165<\/span><\/p>\n<p id=\"uc66715ca\" class=\"ne-p\"><img decoding=\"async\" id=\"u65bcd6ac\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756282626389-b4d637e7-f2cb-46c6-aaf0-7003a99c7571.png\" width=\"367.3333333333333\" \/><\/p>\n<p id=\"ufda07f9b\" class=\"ne-p\"><span class=\"ne-text\">2..\u8ba1\u7b97\u5c5e\u6027\u5305\u542bget \u548c set<\/span><\/p>\n<pre id=\"D5DOQ\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>let firstName = ref(\"\");\nlet lastName = ref(\"\");\nlet fullName = computed({\n    \/\/ \u8ba1\u7b97\u5c5e\u6027\u5305\u542bget \u548c set\n  get() {\n    return firstName.value + lastName.value;\n  },\n  set(val) {\n  &lt;!-- \u89e3\u6784\u6570\u7ec4 --&gt;\n    let [x, y] = val.split(\"-\");\n    firstName.value = x;\n    lastName.value = y;\n  },\n});\n\/\/ \u8bbe\u7f6e\u8ba1\u7b97\u5c5e\u6027\u7684\u8bbe\u7f6e\u51fd\u6570\nfunction setName() {\n  fullName.value = \"\u5f20-\u98de\";\n}<\/code><\/pre>\n<div class=\"ne-quote\">\n<p id=\"u5f69e396\" class=\"ne-p\"><span class=\"ne-text\">split(&#8220;-&#8220;) \u7528\u6765\u8868\u793a\u4ee5-\u4e3a\u6807\u5fd7 \u62c6\u5206\u5b57\u7b26\u4e32 \u53d8\u4e3a\u6570\u7ec4<\/span><\/p>\n<\/div>\n<h3 id=\"We9b9\"><span class=\"ez-toc-section\" id=\"6%E7%9B%91%E5%90%AC%E5%B1%9E%E6%80%A7Watch\"><\/span><span class=\"ne-text\">6.\u76d1\u542c\u5c5e\u6027Watch<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u200f7cdc\" class=\"ne-p\"><span class=\"ne-text\">\u76d1\u542c\u5c5e\u6027 \u4f7f\u7528\u65f6\u5148\u5f15\u7528<\/span><\/p>\n<p id=\"ude942f30\" class=\"ne-p\"><img decoding=\"async\" id=\"u10e077a0\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756344929889-2050d83d-86e0-4579-a317-ec5f6aa7f44c.png\" width=\"326.666689743232\" \/><\/p>\n<p id=\"u18a6f06f\" class=\"ne-p\"><span class=\"ne-text\">\u683c\u5f0f\uff1a<\/span><span class=\"ne-text\">watch(\u76d1\u542c\u5bf9\u8c61\uff0c\uff08\u65b0\u503c\uff0c\u65e7\u503c\uff09=&gt;{ \u76d1\u542c\u65f6\u6267\u884c\u7684\u51fd\u6570}\uff0c{ deep:true,<\/span><\/p>\n<p id=\"ufed9d4de\" class=\"ne-p\"><span class=\"ne-text\"> immediate:true}<\/span><\/p>\n<p id=\"ub5f703da\" class=\"ne-p\"><span class=\"ne-text\"> * 1.\u76d1\u542c\u5bf9\u8c61<\/span><\/p>\n<p id=\"u19fd5b18\" class=\"ne-p\"><span class=\"ne-text\"> * 2.\u56de\u8c03\u65b9\u6cd5\uff08\u81ea\u5e26\u4e24\u4e2a\u5c5e\u6027 newValue, oldValue\uff09<\/span><\/p>\n<p id=\"u6617e840\" class=\"ne-p\"><span class=\"ne-text\"> * 3.\u5f00\u542f\u7acb\u5373\u6df1\u5ea6\u76d1\u542c deep:true, immediate:true<\/span><\/p>\n<p id=\"ud437c575\" class=\"ne-p\"><img decoding=\"async\" id=\"uc8ea3cd4\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756344994130-1bdcb1cf-180f-4118-970d-8116099e1e3b.png\" width=\"359.25928463824835\" \/><\/p>\n<h4 id=\"olc7r\"><span class=\"ez-toc-section\" id=\"1Watch_%E7%9B%91%E5%90%ACref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\"><\/span><span class=\"ne-text\">1.<\/span><span class=\"ne-text\">Watch:\u76d1\u542cref\u5b9a\u4e49\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u042da3a7\" class=\"ne-p\"><span class=\"ne-text\">\u76d1\u89c6ref\u5b9a\u4e49\u7684\u57fa\u672c\u7c7b\u578b\u6570\u636e\uff1a\u76f4\u63a5\u5199\u6570\u636e\u540d\u5373\u53ef\uff0c\u76d1\u89c6\u7684\u662f\u5176value\u503c\u7684\u6539\u53d8<\/span><\/p>\n<p id=\"u4641b87c\" class=\"ne-p\"><span class=\"ne-text\">\u53ea\u8981\u6570\u503c\u53d8\u5316 \u5373\u53ef\u76d1\u542c<\/span><\/p>\n<h4 id=\"e9KGU\"><span class=\"ez-toc-section\" id=\"2Watch_%E7%9B%91%E5%90%ACref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\"><\/span><span class=\"ne-text\">2.<\/span><span class=\"ne-text\">Watch:\u76d1\u542cref\u5b9a\u4e49\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u799b03e4\" class=\"ne-p\"><span class=\"ne-text\">watch\u76d1\u542cref\u5f15\u7528\u6570\u636e\u7c7b\u578b \u76d1\u542c\u7684\u662f\u6574\u4f53 \u800c\u4e0d\u662f\u5355\u72ec\u7684\u5c5e\u6027<\/span><\/p>\n<p id=\"u37747849\" class=\"ne-p\"><span class=\"ne-text\">\u76d1\u89c6ref\u5b9a\u4e49\u7684\u5f15\u7528\u7c7b\u578b\u6570\u636e\uff1a\u76f4\u63a5\u5199\u6570\u636e\u540d\uff0c\u76d1\u89c6\u7684\u662f\u5bf9\u8c61\u7684\u5730\u5740\u503c\uff0c\u82e5\u60f3\u76d1\u89c6\u5bf9\u8c61\u5185\u90e8\u7684\u6570\u636e\uff0c\u8981\u624b\u52a8\u5f00\u542f\u6df1\u5ea6\u76d1\u89c6\u3002<\/span><\/p>\n<h4 id=\"r5hXC\"><span class=\"ez-toc-section\" id=\"%E6%B3%A8%E6%84%8F%EF%BC%9A\"><\/span><span class=\"ne-text\">\u6ce8\u610f\uff1a<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul class=\"ne-ul\">\n<li id=\"u30b68825\" data-lake-index-type=\"0\"><span class=\"ne-text\">\u82e5\u4fee\u6539\u7684\u662fref\u5b9a\u4e49\u7684\u5bf9\u8c61\u4e2d\u7684\u5c5e\u6027\uff0cnewValue \u548c oldValue \u90fd\u662f\u65b0\u503c\uff0c\u56e0\u4e3a\u5b83\u4eec\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\u3002<\/span><\/li>\n<li id=\"uf1ad5435\" data-lake-index-type=\"0\"><span class=\"ne-text\">\u82e5\u4fee\u6539\u6574\u4e2aref\u5b9a\u4e49\u7684\u5bf9\u8c61\uff0cnewValue \u662f\u65b0\u503c\uff0c oldValue \u662f\u65e7\u503c\uff0c\u56e0\u4e3a\u4e0d\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\u4e86\u3002<\/span><\/li>\n<\/ul>\n<p id=\"u8ea351dc\" class=\"ne-p\">\u00a0<\/p>\n<p id=\"u2f48c98b\" class=\"ne-p\"><img decoding=\"async\" id=\"u6fc4f1d7\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756345403897-aa1152c3-e7d5-446d-b4a4-33a53e9d8b78.png\" width=\"414.0741033253213\" \/><\/p>\n<pre id=\"PpooT\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;script lang='ts' setup&gt;\nimport { ref, watch} from 'vue';\nlet obj = ref({\n  name:'\u5f20\u4e09',\n  city:'\u4e0a\u6d77'\n})\nfunction changeName() {\n  obj.value.name = '\u674e\u56db'\n}\nfunction changeAll() {\n  obj.value = {\n    name:'\u738b\u4e94',\n    city:'\u5317\u4eac'\n  }\n}\nwatch(obj,(newValue, oldValue)=&gt;{\n    console.log(newValue, oldValue);\n},{\n    deep:true,\n    immediate:true\n})\n&lt;\/script&gt;<\/code><\/pre>\n<h4 id=\"S7eTO\"><span class=\"ez-toc-section\" id=\"3Watch_%E7%9B%91%E5%90%ACreactive%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\"><\/span><span class=\"ne-text\">3.<\/span><span class=\"ne-text\">Watch:\u76d1\u542creactive\u5f15\u7528\u6570\u636e\u7c7b\u578b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u12596c55\" class=\"ne-p\"><span class=\"ne-text\">\u65e0\u8bba\u662f\u5355\u5c42\u8fd8\u662f\u591a\u5c42\u6216\u8005\u662f\u6574\u4f53\uff0c\u90fd\u53ef\u4ee5\u76d1\u542c\u5230\uff0c\u6709\u6ca1\u6709deep\u4e5f\u90fd\u6ca1\u6709\u5f71\u54cd\uff0c\u76d1\u542c\u53d8\u5316\u65f6 \u65e7\u503c\u548c\u65b0\u503c\u76f8\u7b49<\/span><\/p>\n<p id=\"u075efbd5\" class=\"ne-p\"><span class=\"ne-text\">\u4f46\u662f\u5982\u679c\u76d1\u542c\u67d0\u4e00\u4e2a\u5c5e\u6027\u7684\u53d8\u5316\uff0c\u9700\u8981\u5199\u6210\u51fd\u6570\u4f53\u5f62\u5f0f \u00a0 <\/span><span class=\"ne-text\">()=&gt;\u5bf9\u8c61\u540d.\u5c5e\u6027\u540d<\/span><span class=\"ne-text\">,\uff0c\u6b64\u65f6\u65b0\u65e7\u503c\u4e0d\u76f8\u7b49<\/span><\/p>\n<p id=\"ufd093f68\" class=\"ne-p\"><img decoding=\"async\" id=\"u692ad386\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756347806890-4d0178ac-1187-4052-b252-de4e72611983.png\" width=\"348.14817274222\" \/><\/p>\n<p id=\"u5e6e9f68\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u5982\u679c\u76d1\u542c\u5bf9\u8c61\u4e2d\u7684\u7b2c\u4e8c\u5c42\u5bf9\u8c61 \u5219\u53ea\u6709\u7b2c\u4e8c\u5c42\u5bf9\u8c61\u4e2d\u6240\u6709\u5c5e\u6027\u90fd\u53d8\u5316\u65f6\u624d\u4f1a\u88ab\u76d1\u542c\uff0c\u4f46\u5982\u5f00\u542f\u6df1\u5ea6\u76d1\u542c\uff0c\u5219\u6709\u4e00\u4e2a\u5c5e\u6027\u53d8\u5316\u5373\u53ef\u88ab\u76d1\u542c <\/span><\/p>\n<p id=\"u9ddc1d95\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u5982\u679c\u9700\u8981\u76d1\u542c\u591a\u4e2a\u5c5e\u6027\uff0c\u5219\u5199\u6210\u6570\u7ec4\u5f62\u5f0f\uff0c\u91cc\u9762\u5199\u51fd\u6570\u4f53\u5373\u53ef\uff0c\u5176\u4ed6\u540c\u4e0a<\/span><\/p>\n<pre id=\"mBVQR\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>watch(\n  \/\/ \u4e24\u4e2a\u5c5e\u6027\u540c\u65f6\u76d1\u542c \u5199\u6210\u6570\u7ec4\u5f62\u5f0f\n [()=&gt;obj.main,()=&gt;obj.name],\n  (newValue, oldValue) =&gt; {\n    console.log(newValue, oldValue);\n  },\n  {\n    deep: true,\n    immediate: true,\n  }\n);<\/code><\/pre>\n<p id=\"u543ba7ff\" class=\"ne-p\"><span class=\"ne-text\">\u7efc\u4e0a\u3002\u76d1\u89c6ref\u6216reactive\u5b9a\u4e49\u7684\u5f15\u7528\u7c7b\u578b\u6570\u636e\u4e2d\u7684\u67d0\u4e2a\u5c5e\u6027\uff0c\u6ce8\u610f<\/span><\/p>\n<ul class=\"ne-ul\">\n<li id=\"ude88b2bd\" data-lake-index-type=\"0\"><span class=\"ne-text\">\u82e5\u8be5\u5c5e\u6027\u503c\u4e0d\u662f\u5f15\u7528\u7c7b\u578b\u6570\u636e\uff0c\u9700\u8981\u5199\u6210\u51fd\u6570\u5f62\u5f0f\u3002<\/span><\/li>\n<li id=\"u17ae1139\" data-lake-index-type=\"0\"><span class=\"ne-text\">\u82e5\u8be5\u5c5e\u6027\u503c\u662f\u4f9d\u7136\u662f\u5f15\u7528\u7c7b\u578b\u6570\u636e\uff0c\u53ef\u76f4\u63a5\u7f16\uff0c\u4e5f\u53ef\u5199\u6210\u51fd\u6570\uff0c\u5efa\u8bae\u5199\u6210\u51fd\u6570\u3002<\/span><\/li>\n<li id=\"u3d2db521\" data-lake-index-type=\"0\"><span class=\"ne-text\">\u76d1\u89c6\u7684\u8981\u662f\u5bf9\u8c61\u91cc\u7684\u5c5e\u6027\uff0c\u90a3\u4e48\u6700\u597d\u5199\u51fd\u6570\u5f0f\uff0c\u6ce8\u610f\u70b9\uff1a\u82e5\u662f\u5bf9\u8c61\u76d1\u89c6\u7684\u662f\u5730\u5740\u503c\uff0c\u9700\u8981\u5173\u6ce8\u5bf9\u8c61\u5185\u90e8\uff0c\u9700\u8981\u624b\u52a8\u5f00\u542f\u6df1\u5ea6\u76d1\u89c6<\/span><\/li>\n<\/ul>\n<h3 id=\"T3jZy\"><span class=\"ez-toc-section\" id=\"7%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0\"><\/span><span class=\"ne-text\">7.\u751f\u547d\u5468\u671f\u51fd\u6570<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"XPnLV\"><span class=\"ez-toc-section\" id=\"1_vue2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\"><\/span><span class=\"ne-text\">1. vue2\u751f\u547d\u5468\u671f<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u509335e8\" class=\"ne-p\"><span class=\"ne-text\"> \u4e09\u4e2a\u9636\u6bb5\uff1a<\/span><\/p>\n<p id=\"uea1e4b11\" class=\"ne-p\"><span class=\"ne-text\"> 1.\u521d\u59cb\u5316\uff1a <\/span><\/p>\n<p id=\"ucfc8d2d5\" class=\"ne-p\"><span class=\"ne-text\"> beforeCreate \u521b\u5efa\u524d \u65b9\u6cd5methods\u4e0e\u6570\u636edata\u90fd\u662f\u65e0\u6cd5\u8bbf\u95ee\u7684<\/span><\/p>\n<p id=\"uad2bddef\" class=\"ne-p\"><span class=\"ne-text\"> created \u521b\u5efa\u540e \u65b9\u6cd5methods\u4e0e\u6570\u636edata\u90fd\u662f\u53ef\u4ee5\u8bbf\u95ee\u7684<\/span><\/p>\n<p id=\"uee1bdb15\" class=\"ne-p\"><span class=\"ne-text\"> 2.\u8fd0\u884c:<\/span><\/p>\n<p id=\"u0733ae0f\" class=\"ne-p\"><span class=\"ne-text\"> beforeMount \u6302\u8f7d\u524d \u9875\u9762\u6ca1\u6709\u771f\u5b9e\u6e32\u67d3dom \u65e0\u6cd5\u8fdb\u884cdom\u64cd\u4f5c<\/span><\/p>\n<p id=\"uf198809b\" class=\"ne-p\"><span class=\"ne-text\"> mounted \u6302\u8f7d\u540e \u9875\u9762\u771f\u5b9e\u6e32\u67d3dom \u53ef\u4ee5\u8fdb\u884cdom\u64cd\u4f5c<\/span><\/p>\n<p id=\"u9fa9b196\" class=\"ne-p\"><span class=\"ne-text\"> beforeUpdate \u66f4\u65b0\u524d \u6570\u636e\u53d8\u5316 \u89c6\u56fe\u672a\u53d8\uff08\u9875\u9762\u5185\u7684\u5185\u5bb9\u4ee5\u6539\u53d8<\/span><\/p>\n<p id=\"ud06fbeaf\" class=\"ne-p\"><span class=\"ne-text\"> \u4f46\u672a\u6e32\u67d3\u9875\u9762,\u6240\u4ee5\u83b7\u53d6\u5230\u8fd8\u662f\u4e4b\u524d\u89c6\u56fe\u7684\u6570\u636e\uff09<\/span><\/p>\n<p id=\"u7fe703eb\" class=\"ne-p\"><img decoding=\"async\" id=\"u99386f8b\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756361931423-4f08efab-d18e-4c52-b943-ab2e3ca00fd1.png\" width=\"454.07410615102316\" \/><\/p>\n<p id=\"ucd0cf921\" class=\"ne-p\"><span class=\"ne-text\"> updated \u66f4\u65b0\u540e \u6570\u636e\u53d8\u5316 \u89c6\u56fe\u6539\u53d8<\/span><\/p>\n<p id=\"u1ae61064\" class=\"ne-p\"><span class=\"ne-text\"> 3.\u9500\u6bc1:<\/span><\/p>\n<p id=\"ub3590ade\" class=\"ne-p\"><span class=\"ne-text\"> beforeDestory \u9500\u6bc1\u524d \u5bf9DOM\u64cd\u4f5c\u5df2\u7ecf\u65e0\u6548<\/span><\/p>\n<p id=\"u0064c7a6\" class=\"ne-p\"><span class=\"ne-text\"> destoryed \u9500\u6bc1\u540e \u5f7b\u5e95\u9500\u6bc1<\/span><\/p>\n<p id=\"ue257edd6\" class=\"ne-p\">\u00a0<\/p>\n<h4 id=\"Pn8HX\"><span class=\"ez-toc-section\" id=\"2vue3%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\"><\/span><span class=\"ne-text\">2.<\/span><span class=\"ne-text\">vue3\u751f\u547d\u5468\u671f<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u4d57b106\" class=\"ne-p\"><span class=\"ne-text\"> \u5199\u4f5c\u56de\u8c03\u51fd\u6570\uff1a\u4f8b\u5982<\/span><span class=\"ne-text\">\u2b07<\/span><\/p>\n<p id=\"ud11cadf9\" class=\"ne-p\"><span class=\"ne-text\">onBeforeMount(() =&gt; {<br \/><\/span><span class=\"ne-text\"> console.log(&#8220;onBeforeMount&#8221;);<br \/><\/span><span class=\"ne-text\">});<\/span><\/p>\n<p id=\"ub38af900\" class=\"ne-p\"><span class=\"ne-text\"> 1.\u521d\u59cb\uff1asetup<\/span><\/p>\n<p id=\"ud0e3cf3c\" class=\"ne-p\"><span class=\"ne-text\"> 2.\u8fd0\u884c\uff1a<\/span><\/p>\n<p id=\"u1b52bc0b\" class=\"ne-p\"><span class=\"ne-text\"> \u6302\u8f7d:onBeforeMount onMounted\uff08\u540c\u7406\uff09<\/span><\/p>\n<p id=\"u23d423d8\" class=\"ne-p\"><span class=\"ne-text\"> \u66f4\u65b0:onBeforeUpdate onUpdated\uff08\u540c\u7406\uff09<\/span><\/p>\n<p id=\"u2c546e26\" class=\"ne-p\"><span class=\"ne-text\"> 3.\u5378\u8f7d\uff1a<\/span><\/p>\n<p id=\"uca930196\" class=\"ne-p\"><span class=\"ne-text\"> onBeforeUnmount onUnmounted <\/span><\/p>\n<h3 id=\"nZcT8\"><span class=\"ez-toc-section\" id=\"8%E5%9C%A8vue3%E4%B8%AD%E4%BD%BF%E7%94%A8ts\"><\/span><span class=\"ne-text\">8.\u5728vue3\u4e2d\u4f7f\u7528ts<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"JOfpJ\"><span class=\"ez-toc-section\" id=\"1%EF%BC%89%E5%BC%95%E7%94%A8\"><\/span><span class=\"ne-text\">1\uff09\u5f15\u7528<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u5116ba96\" class=\"ne-p\"><span class=\"ne-text\">1.\u5f15\u7528ts \u76f4\u63a5\u5728scrpit\u540e\u9762\u5199 lang=&#8221;ts&#8221;<\/span><\/p>\n<p id=\"u3a34d107\" class=\"ne-p\"><img decoding=\"async\" id=\"uc20de44b\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756364545066-50971680-9d4d-480c-b14c-9a0f1b5ce895.png\" width=\"371.1111373273452\" \/><\/p>\n<h4 id=\"xHBzV\"><span class=\"ez-toc-section\" id=\"2%EF%BC%89ref\"><\/span><span class=\"ne-text\">2\uff09ref<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"uf32f25b5\" class=\"ne-p\"><span class=\"ne-text\">1.ref\u5b9a\u4e49\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b \u76f4\u63a5\u5728ref\u540e\u9762\u52a0\u4e0a&lt;\u6570\u636e\u7c7b\u578b1 | \u6570\u636e\u7c7b\u578b2&gt;\uff08| \u8868\u793a\u4e8c\u8005\u90fd\u53ef\u4ee5\uff09<\/span><\/p>\n<p id=\"ub99df618\" class=\"ne-p\"><img decoding=\"async\" id=\"u1358df3a\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756364631716-63b61ea8-ca9b-459e-8b02-b7e41b48366c.png\" width=\"437.777808703515\" \/><\/p>\n<p id=\"ua05836fb\" class=\"ne-p\"><span class=\"ne-text\">2.ref\u5b9a\u4e49\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b \u5148\u5b9a\u4e49\u63a5\u53e3 \u7136\u540e\u5728ref\u540e\u9762\u52a0\u4e0a&lt;\u63a5\u53e3\u540d&gt;<\/span><\/p>\n<pre id=\"uTpmk\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>interface Person{\n    name:string;\n    age:number;\n}\nlet obj:Person = reactive({\n  name: \"\u56fe\u56fe\",\n  age: 3,\n});<\/code><\/pre>\n<h4 id=\"SfHxi\"><span class=\"ez-toc-section\" id=\"3reative\"><\/span><span class=\"ne-text\">3)reative<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u3c164278\" class=\"ne-p\"><span class=\"ne-text\">reative\u5b9a\u4e49\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b \u5148\u5b9a\u4e49\u63a5\u53e3 \u7136\u540e\u5728\u5bf9\u8c61\u540d\u540e\u9762\u52a0\u4e0a:\u63a5\u53e3\u540d<\/span><\/p>\n<pre id=\"ow2Rr\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>interface Person{\n    name:string;\n    age:number;\n}\nlet obj = ref&lt;Person&gt;({\n  name: \"\u7f8e\u7f8a\u7f8a\",\n  age: 4,\n});<\/code><\/pre>\n<h4 id=\"W0IgE\"><span class=\"ez-toc-section\" id=\"4%E5%87%BD%E6%95%B0\"><\/span><span class=\"ne-text\">4)\u51fd\u6570<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ua08efddc\" class=\"ne-p\"><span class=\"ne-text\">\u51fd\u6570\u52a0\u6570\u636e\u7c7b\u578b \u76f4\u63a5\u5728\u51fd\u6570\u540d\uff08\uff09\u540e\u9762\u52a0\u4e0a\u6570\u636e\u7c7b\u578b <\/span><\/p>\n<p id=\"u286b978c\" class=\"ne-p\"><span class=\"ne-text\">\u6ce8\u610f\uff1a\u52a0\u9664\u4e86any,unknow\u7684\u6570\u636e\u7c7b\u578b\u5916 \u51fd\u6570\u4f53\u5185\u90fd\u8981\u52a0return \u8fd4\u56de\u503c\uff0c\u5426\u5219\u52a0void\u8fd4\u56de\u7a7a\u4e5f\u53ef\u4ee5<\/span><\/p>\n<p id=\"udde8824c\" class=\"ne-p\"><img decoding=\"async\" id=\"u05426dc3\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756364825199-63ac81c3-bc6a-4e28-a599-b40ae9d4d30d.png\" width=\"285.9259461244616\" \/> <img decoding=\"async\" id=\"u827bebef\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756364881039-58ebf79c-00f5-4ed6-ae30-5fb0a7041d9e.png\" width=\"320.74076339868355\" \/><\/p>\n<p id=\"u272e65e3\" class=\"ne-p\">\u00a0<\/p>\n<h4 id=\"K6B4Z\"><span class=\"ez-toc-section\" id=\"5%EF%BC%89computed%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7\"><\/span><span class=\"ne-text\">5\uff09computed\u8ba1\u7b97\u5c5e\u6027<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u92e90f73\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728computed\u540e\u9762\u52a0&lt;&gt;<\/span><\/p>\n<p id=\"u4dcb8814\" class=\"ne-p\"><span class=\"ne-text\">\u5982\u6709set \u5c31\u5728set\u4e2d\u7684\u53c2\u6570\u540e\u9762\u52a0\u6570\u636e\u7c7b\u578b set()\u540e\u9762\u4e5f\u52a0\u6570\u636e\u7c7b\u578b<\/span><\/p>\n<pre id=\"sDFTq\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>let fullName = computed&lt;string&gt;({\n\n  get() {\n    return firstName.value + lastName.value;\n  },\n  set(val: string):void{\n    let [x, y] = val.split(\"-\");\n    firstName.value = x;\n    lastName.value = y;\n  },\n});<\/code><\/pre>\n<p id=\"uf54e8c46\" class=\"ne-p\">\u00a0<\/p>\n<h4 id=\"SDdCa\"><span class=\"ez-toc-section\" id=\"6%EF%BC%89watch%E7%9B%91%E5%90%AC%E5%B1%9E%E6%80%A7%E5%8A%A0%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\"><\/span><span class=\"ne-text\">6\uff09watch\u76d1\u542c\u5c5e\u6027\u52a0\u6570\u636e\u7c7b\u578b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u31cce700\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728newValue, oldValue \u540e\u9762\u6dfb\u52a0\u6570\u636e\u7c7b\u578b <\/span><\/p>\n<p id=\"u101bdceb\" class=\"ne-p\"><span class=\"ne-text\">\u6ce8\u610f<\/span><span class=\"ne-text\"> \u5982\u679c\u5f00\u542f\u4e86\u7acb\u5373\u6df1\u5ea6\u76d1\u542c \u5219oldValue \u540e\u9664\u4e86\u6b63\u5e38\u7684\u6570\u636e\u7c7b\u578b\u8fd8\u8981\u52a0undefined<\/span><\/p>\n<pre id=\"boHdo\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>watch(\n  flower,\n  (newValue:number, oldValue:number|undefined) =&gt; {\n    console.log(newValue, oldValue);\n  },\n  {\n    deep: true,\n    immediate: true,\n  }\n);<\/code><\/pre>\n<p id=\"uda597a81\" class=\"ne-p\"><span class=\"ne-text\">\u5bf9\u8c61\u4e5f\u540c\u7406 \u4f46\u662fnewValue, oldValue \u540e\u9762\u6dfb\u52a0\u5b9a\u4e49\u597d\u7684\u63a5\u53e3<\/span><\/p>\n<p id=\"ub0113098\" class=\"ne-p\"><img decoding=\"async\" id=\"u82226de4\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756367912059-0b6533a2-fb54-461b-aab1-bb8820ee0b73.png\" width=\"594.8148568340483\" \/><\/p>\n<h4 id=\"Qb1vx\"><span class=\"ez-toc-section\" id=\"7%EF%BC%89%E5%B0%86ts%E5%86%99%E5%85%A5%E5%8D%95%E7%8B%AC%E6%96%87%E4%BB%B6%E5%86%8D%E5%BC%95%E7%94%A8\"><\/span><span class=\"ne-text\">7\uff09\u5c06ts\u5199\u5165\u5355\u72ec\u6587\u4ef6\u518d\u5f15\u7528<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ua3354ede\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u5c06ts\u62bd\u79bb\u5230\u6587\u4ef6\u4e2d\u5f15\u7528<\/span><\/p>\n<p id=\"ube565401\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u60f3\u8981\u5728\u5176\u4ed6\u6587\u4ef6\u4e2d\u88ab\u4f7f\u7528\u7684 \u5fc5\u987b\u524d\u9762\u52a0export<\/span><\/p>\n<p id=\"ub77ddf50\" class=\"ne-p\"><img decoding=\"async\" id=\"u976e09df\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756368948247-5ff5659f-f4a6-474c-bccd-664aff51d2f2.png\" width=\"316.29631864027226\" \/><\/p>\n<p id=\"uda2b6134\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u5728\u9700\u8981\u5f15\u7528\u7684\u6587\u4ef6\u4e2dimport \u76f4\u63a5\u5f15\u7528\u540d\u5b57\u4e0d\u597d\u4f7f\u5c31\u5728\u524d\u9762\u52a0type \u4f8b\u5982 type Person<\/span><\/p>\n<p id=\"u9b2d2a94\" class=\"ne-p\"><img decoding=\"async\" id=\"u99eba578\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756368328196-084b5e03-44c5-4910-9d0a-d299186353b7.png\" width=\"388.14817556792195\" \/><\/p>\n<p id=\"u66ee5492\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u5982\u679c\u60f3\u5f15\u7528\u63a5\u53e3 \u6cdb\u578b\u7ee7\u627f\u63a5\u53e3\uff0c\u65b9\u6cd5\u5982\u4e0b<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<pre id=\"eVTJn\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>import {Person} from '..\/type\/Demo23'\n  function fn1&lt;T extends Person&gt;(a:T):T {\n    return a;\n  }\n  fn1({name:'\u56fe\u56fe'})<\/code><\/pre>\n<p id=\"u7ef12cb7\" class=\"ne-p\"><span class=\"ne-text\">\u2463.\u5982\u679c\u60f3\u7528\u63a5\u53e3\u5b9a\u4e49\u7684\u6570\u636e\u7c7b\u578b\u7ec4\u6210\u7684\u6570\u7ec4<\/span><\/p>\n<p id=\"u0c99db0f\" class=\"ne-p\"><span class=\"ne-text\">\u5219\u6570\u7ec4\u524d\u9762\u52a0type,\u540e\u9762\u6dfb\u52a0\u63a5\u53e3\u4e3a\u6570\u636e\u7c7b\u578b<\/span><\/p>\n<p id=\"u706929ff\" class=\"ne-p\"><span class=\"ne-text\">\u683c\u5f0f\uff1atype \u6570\u7ec4\u540d=\u63a5\u53e3\u540d[ ]<\/span><\/p>\n<p id=\"u57c6c5f5\" class=\"ne-p\"><img decoding=\"async\" id=\"uad709cb6\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756368504894-d4480a1c-0a6a-4a1b-a906-f08ae5ef8dea.png\" width=\"350.3703951214257\" \/><\/p>\n<p id=\"ue0b2ec0f\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u7528\u8fd9\u4e2a\u6570\u7ec4\u65b9\u6cd5\u5982\u4e0b<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<pre id=\"SFQaH\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>import {list} from '..\/type\/Demo23'\nlet newList:list = reactive([\n    {\n        name:'\u56fe\u56fe',\n        age: 103,\n        sex:'\u7537'\n    }\n])<\/code><\/pre>\n<h3 id=\"U09G6\"><span class=\"ez-toc-section\" id=\"9Ref\"><\/span><span class=\"ne-text\">9.Ref<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"e02Ih\"><span class=\"ez-toc-section\" id=\"1ref%E7%9A%84%E4%BD%BF%E7%94%A8\"><\/span><span class=\"ne-text\">1.ref\u7684\u4f7f\u7528<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u074b7aa1\" class=\"ne-p\"><span class=\"ne-text\">\u5728\u6807\u7b7e\u4e2d\u5b9a\u4e49ref \u7136\u540e\u5728script\u4e2d\u7528\u5b9a\u4e49\u7684\u540d\u5b57\u52a0.value\u5373\u53ef\u83b7\u5f97\u6807\u7b7e<\/span><\/p>\n<pre id=\"qcdDF\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code> &lt;p ref=\"aaa\"&gt;\u6807\u7b7e&lt;\/p&gt;\n&lt;!-- script \u4e2d --&gt;\n console.log(aaa.value);<\/code><\/pre>\n<p id=\"u1d1d8f88\" class=\"ne-p\"><img decoding=\"async\" id=\"ued2ec440\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756432862969-a1f07efc-2b99-4c93-8a91-c33b8f7be628.png\" width=\"461.4815140817087\" \/><\/p>\n<p id=\"u1a8e54bd\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u6dfb\u52a0\u7c7b\u578b\u6570\u636e\u65f6\u540e\u9762\u662fnull,&lt;&gt;\u5185\u53ef\u4ee5\u7528any\uff08\u4f46\u5c11\u7528\uff09\uff0c\u4e5f\u53ef\u4ee5\u7528<\/span><span class=\"ne-text\">HTMLInputElement <\/span><span class=\"ne-text\"> \u8868\u793a\u6807\u7b7e\u5185\u5bb9\u7684\u7c7b\u578b<\/span><\/p>\n<p id=\"uee91d1f2\" class=\"ne-p\"><span class=\"ne-text\">let inputRef = ref&lt;HTMLInputElement | null&gt;(null);<\/span><\/p>\n<p id=\"u8dffd4f9\" class=\"ne-p\"><span class=\"ne-text\">input\u6807\u7b7e\u540c\u7406<\/span><\/p>\n<h4 id=\"Wobzp\"><span class=\"ez-toc-section\" id=\"2%E4%BD%BF%E7%94%A8ref%E6%8E%A7%E5%88%B6input%E6%A0%87%E7%AD%BE%E8%81%9A%E7%84%A6%E3%80%81%E5%A4%B1%E7%84%A6\"><\/span><span class=\"ne-text\">2.\u4f7f\u7528ref\u63a7\u5236input\u6807\u7b7e\u805a\u7126\u3001\u5931\u7126<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ubfcdc8b1\" class=\"ne-p\"><span class=\"ne-text\">1.\u5b9a\u4e49ref<\/span><\/p>\n<p id=\"u97559765\" class=\"ne-p\"><span class=\"ne-text\">2.\u4f7f\u7528ref\u5b9a\u4e49\u7684\u540d\u5b57\u52a0.value\u52a0.focus\u63a7\u5236\u805a\u7126<\/span><\/p>\n<p id=\"uaf2a8070\" class=\"ne-p\"><span class=\"ne-text\"> \u4f7f\u7528ref\u5b9a\u4e49\u7684\u540d\u5b57\u52a0.value\u52a0.blur\u63a7\u5236\u5931\u7126<\/span><\/p>\n<pre id=\"gjwtr\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code> &lt;input type=\"text\" ref=\"inputRef\" \/&gt;\n &lt;!--sc  --&gt;\n onMounted(() =&gt; {\n  \/\/ \u805a\u7126\u5931\u7126\n  setTimeout(\n    () =&gt; {\n      inputRef.value?.focus();\n      2000;\n    },\n    setTimeout(() =&gt; {\n      inputRef.value?.blur();\n    }, 4000)\n  );\n});<\/code><\/pre>\n<h4 id=\"et487\"><span class=\"ez-toc-section\" id=\"3defineExpose\"><\/span><span class=\"ne-text\">3.defineExpose<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u9568b5a9\" class=\"ne-p\"><span class=\"ne-text\">defineExpose\u540e\u9762\u5199\u8c01 \u8c01\u5c31\u53ef\u4ee5\u88ab\u5c55\u793a<\/span><\/p>\n<p id=\"u654b914c\" class=\"ne-p\"><span class=\"ne-text\">\u4f8b\u5982<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><span class=\"ne-text\">\u5b50\u9875\u9762\u4e2d<\/span><\/p>\n<pre id=\"J1Zxl\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>let a = ref&lt;number&gt;(1);\nlet b = ref&lt;number&gt;(2);\ndefineExpose({ a, b })<\/code><\/pre>\n<p id=\"u04ae8610\" class=\"ne-p\"><span class=\"ne-text\">\u540c\u65f6\u4e3b\u9875\u9762\u4e2d<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<pre id=\"x7v0S\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;Demo24 ref='main'&gt;&lt;\/Demo24&gt;\n \n&lt;\/template&gt;\n &lt;script lang=\"ts\" setup&gt;\nimport { ref ,onMounted} from \"vue\";\nimport Demo24 from \".\/components\/Demo24.vue\";\nlet main =ref&lt;any&gt;(null)\nonMounted(() =&gt; {\n  console.log(main.value.a)\n  console.log(main.value.b)\n}) <\/code><\/pre>\n<p id=\"ud41503de\" class=\"ne-p\"><span class=\"ne-text\">\u5373\u53ef\u5c55\u793aa,b<\/span><\/p>\n<h3 id=\"tZpM1\"><span class=\"ez-toc-section\" id=\"10defineProps_%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">10.defineProps \u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h5 id=\"Tr1Vc\"><span class=\"ez-toc-section\" id=\"1%E4%BC%A0%E4%BB%80%E4%B9%88%E6%8E%A5%E4%BB%80%E4%B9%88\"><\/span><span class=\"ne-text\">1.\u4f20\u4ec0\u4e48\u63a5\u4ec0\u4e48<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ub3546a4e\" class=\"ne-p\"><span class=\"ne-text\">\u4f8b\u5b50<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"u3ea0f6fb\" class=\"ne-p\"><span class=\"ne-text\">\u7236\u7ec4\u4ef6\u4f20\u53c2\uff1a<\/span><\/p>\n<pre id=\"Q3u5J\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code> &lt;Demo25 :list1='list'&gt;&lt;\/Demo25&gt; \n&lt;!-- sc\u4e2d --&gt;\n import Demo25 from \".\/components\/Demo25.vue\";\ninterface Person{\n  name:string;\n  age:number;\n}\nlet list:Person[]=[\n  {name:\"\u5f20\u4e09\",age:18},\n  {name:\"\u674e\u56db\",age:20},\n  {name:\"\u8d75\u4e94\",age:100}\n]<\/code><\/pre>\n<p id=\"ufc7cbef6\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\"> \u5176\u4e2dlist1\u4e3a\u5b50\u7ec4\u4ef6\u63a5\u53d7\u65f6\u7684\u540d\u5b57 list\u4e3a\u7236\u7ec4\u4ef6\u4f20\u53c2\u65f6\u7684\u540d\u5b57<\/span><\/p>\n<p id=\"u14324db4\" class=\"ne-p\"><span class=\"ne-text\">\u5b50\u7ec4\u4ef6\u63a5\u6536<\/span><\/p>\n<pre id=\"WGkIA\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;ul&gt;\n      &lt;li v-for=\"item in list1\" :key=\"item.index\"&gt;\n        \u6211\u53eb{{ item.name }}\uff0c\u4eca\u5e74{{ item.age }}\u5c81\n      &lt;\/li&gt;\n&lt;\/ul&gt;\n\/\/ sc\u4e2d\ndefineProps(['list1'])<\/code><\/pre>\n<p id=\"u3d50fa60\" class=\"ne-p\"><span class=\"ne-text\">\u6548\u679c\uff1a<\/span><\/p>\n<p id=\"ucad47d91\" class=\"ne-p\"><img decoding=\"async\" id=\"u481917de\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756436463514-08c20770-a7d5-4d79-a51d-cd78ee0a9388.png\" width=\"357.77780305211127\" \/><\/p>\n<h5 id=\"v3FpV\"><span class=\"ez-toc-section\" id=\"2%E8%A7%84%E5%AE%9A%E6%8E%A5%E6%94%B6%E7%B1%BB%E5%9E%8B%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">2.\u89c4\u5b9a\u63a5\u6536\u7c7b\u578b\u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"udc54340f\" class=\"ne-p\"><span class=\"ne-text\">\u4f8b\u5b50<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"u9600ecbc\" class=\"ne-p\"><span class=\"ne-text\">\u7236\u7ec4\u4ef6\u4f20\u53c2\uff1a<\/span><\/p>\n<pre id=\"oJMpx\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>     &lt;Demo25 :name1='name' :age1='age'&gt;&lt;\/Demo25&gt;\n     &lt;!--sc--&gt;\n     let name = ref&lt;string&gt;('\u8fea\u8fe6')\nlet age = ref&lt;number&gt;(15)<\/code><\/pre>\n<p id=\"u376951fd\" class=\"ne-p\"><span class=\"ne-text\">\u5b50\u7ec4\u4ef6\u63a5\u6536\uff1a<\/span><\/p>\n<pre id=\"tgqV9\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code> &lt;p&gt;\u6211\u53eb{{ name1 }}\uff0c\u4eca\u5e74{{ age1 }}\u5c81&lt;\/p&gt;\n   \/\/ sc\n   defineProps({\n    name1:String,\n    age1:Number,\n})<\/code><\/pre>\n<p id=\"u2946423d\" class=\"ne-p\"><span class=\"ne-text\">\u6b64\u65f6\u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u8fdb\u6765\u7684\u53c2\u6570\u7c7b\u578b\u4e0d\u7b26\u5408 \u5219\u62a5\u9519<\/span><\/p>\n<p id=\"ud077356d\" class=\"ne-p\"><span class=\"ne-text\">\u6548\u679c\uff1a<\/span><\/p>\n<p id=\"u824f6ead\" class=\"ne-p\"><img decoding=\"async\" id=\"ue7125e4e\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756436741282-bdbe0d0f-25c4-4939-bb3e-9b39d804600e.png\" width=\"374.81484129268796\" \/><\/p>\n<h5 id=\"HgYXT\"><span class=\"ez-toc-section\" id=\"3%E6%98%AF%E5%90%A6%E5%BF%85%E4%BC%A0%E5%B1%95%E7%A4%BA%E9%BB%98%E8%AE%A4\"><\/span><span class=\"ne-text\">3.\u662f\u5426\u5fc5\u4f20+\u5c55\u793a\u9ed8\u8ba4<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uda376bf5\" class=\"ne-p\"><span class=\"ne-text\">\u683c\u5f0f\uff1a<\/span><span class=\"ne-text\">withDefaults(defineProps&lt;{ \u2460\u5199\u5fc5\u4f20\u9879\u6240\u6709\u53c2\u6570\u7684\u7c7b\u578b}&gt;(),<\/span><\/p>\n<p id=\"uaea1d7a9\" class=\"ne-p\"><span class=\"ne-text\">{ \u2461\u5199\u5982\u679c\u4e0d\u4f20\u53c2 \u5219\u9ed8\u8ba4\u5c55\u793a\u7684\u5185\u5bb9})<\/span><\/p>\n<p id=\"ue4fc9bbd\" class=\"ne-p\">\u00a0<\/p>\n<p id=\"u57f98424\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u2460\u5904\u5982\u679c\u5728\u5c5e\u6027\u540e\u9762\u52a0\u4e0a\uff1f\u5219\u8868\u793a\u4e0d\u662f\u5fc5\u4f20<\/span><\/p>\n<p id=\"u009667b9\" class=\"ne-p\"><span class=\"ne-text\">\u4f8b\u5b50<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><span class=\"ne-text\"> \u5b50\u7ec4\u4ef6\u4e2d\uff1a<\/span><\/p>\n<pre id=\"yHcjy\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>withDefaults(\n  defineProps&lt;{\n    list1?: Person[];\n    name1?: string;\n    age1?: number;\n  }&gt;(),\n  {\n    name1: \"\u672a\u77e5\u7528\u6237\",\n    age1: 100,\n    list1: () =&gt; {\n      return [{ name: \"q\", age: 12 }];\n    },\n  }\n);<\/code><\/pre>\n<p id=\"u8fe8722d\" class=\"ne-p\"><span class=\"ne-text\">\u6548\u679c\uff1a<\/span><\/p>\n<p id=\"u827eaca6\" class=\"ne-p\"><img decoding=\"async\" id=\"u06bdc9ce\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756437022001-a2051d34-bdec-4b1f-94ef-e7ad1719a970.png\" width=\"360.0000254313169\" \/><\/p>\n<p id=\"u1903c141\" class=\"ne-p\"><span class=\"ne-text\">\u6ce8\u610f\uff1a\u6b64\u5904<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><span class=\"ne-text\"> \u6570\u7ec4\u7c7b\u578b\u52a0return \u56e0\u4e3a\u7c7b\u578b\u9ed8\u8ba4\u4e3a\u63a5\u53e3\u5b9a\u4e49\u7684\u7c7b\u578b \u5fc5\u987b\u6709\u8fd4\u56de\u503c<\/span><img decoding=\"async\" id=\"n7i04\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756437094560-47b1825f-d23c-401c-82c8-6365e201f202.png\" width=\"300.0000211927641\" \/><\/p>\n<h3 id=\"B2ENI\"><span class=\"ez-toc-section\" id=\"11watchEffect\"><\/span><span class=\"ne-text\">11.watchEffect<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u684359c1\" class=\"ne-p\"><span class=\"ne-text\">watchEffect \u81ea\u52a8\u7684\u76d1\u542c\u6570\u636e \u53d1\u751f\u6539\u53d8 \u4f9d\u8d56\u4e5f\u4f1a\u968f\u4e4b\u53d8\u5316<\/span><\/p>\n<p id=\"u11706449\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728\u91cc\u9762\u62fc\u63a5 \u6bcf\u5f53\u6709\u503c\u53d8\u5316 \u7ed3\u679c\u5c31\u4f1a\u968f\u4e4b\u53d8\u5316<\/span><\/p>\n<pre id=\"BQbKF\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>watchEffect(()=&gt;{\n    console.log(user,'user')\n    console.log(fullName.value,'fullName')\n    fullName.value = user.firstName + user.lastName\n})<\/code><\/pre>\n<h3 id=\"QnXfR\"><span class=\"ez-toc-section\" id=\"12%E8%87%AA%E5%AE%9A%E4%B9%89HOOKS\"><\/span><span class=\"ne-text\">12.\u81ea\u5b9a\u4e49HOOKS<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"uacae7912\" class=\"ne-p\"><span class=\"ne-text\">\u5c31\u662f\u628a\u81ea\u5df1\u5b9a\u4e49\u7684\u65b9\u6cd5\u62bd\u79bb\u51fa\u6765 \u4f7f\u7528\u65f6\u5f15\u5165<\/span><\/p>\n<h5 id=\"lFKnT\"><span class=\"ez-toc-section\" id=\"1%E6%96%B0%E5%BB%BAhooks%E6%96%87%E4%BB%B6%E5%A4%B9\"><\/span><span class=\"ne-text\">1.\u65b0\u5efahooks\u6587\u4ef6\u5939<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u242ea339\" class=\"ne-p\"><span class=\"ne-text\"> \u94a9\u5b50\u6587\u4ef6\u4e00\u5b9a\u8981\u4ee5use\u5f00\u5934\u547d\u540d<\/span><\/p>\n<p id=\"u08903a8f\" class=\"ne-p\"><span class=\"ne-text\">\u4f8b\u5b50 \u9f20\u6807\u4f4d\u7f6e\u53ef\u89c6\u5316\uff1a<\/span><\/p>\n<h5 id=\"wcv9a\"><span class=\"ez-toc-section\" id=\"2%E5%86%99%E9%92%A9%E5%AD%90_useMove\"><\/span><span class=\"ne-text\">2.\u5199\u94a9\u5b50 useMove:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<pre id=\"ZCMnq\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>import { ref, onMounted, onUnmounted } from 'vue'\nexport function useMove() {\n    let x = ref&lt;number&gt;(0);\n    let y = ref&lt;number&gt;(0);\n    function handleMove(e: MouseEvent): void {\n        x.value = e.pageX;\n        y.value = e.pageY;\n    }\n    onMounted(() =&gt; {\n        window.addEventListener('mousemove', handleMove)\n    })\n\n    onUnmounted(() =&gt; {\n        window.removeEventListener('mousemove', handleMove)\n    })\n    \/\/ \u8981\u8fd4\u56de\uff01\n    return { x, y }\n}<\/code><\/pre>\n<p id=\"u53ec5cf4\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u2460.\u56e0\u4e3a\u6211\u4eec\u8981\u4f7f\u7528\u7684\u662fx,y \u6240\u4ee5\u4e00\u5b9a\u8981\u8fd4\u56dex\u548cy \u4e0d\u7136\u5f15\u7528\u7684\u65f6\u5019\u65e0\u6cd5\u63a5\u6536<\/span><\/p>\n<p id=\"u644f92a1\" class=\"ne-p\"><span class=\"ne-text\"> \u2461.e(event)\u7c7b\u578b\u53ef\u4ee5\u5199MouseEvent \u9f20\u6807\u4e8b\u4ef6\u81ea\u5e26\u7684\u7c7b\u578b<\/span><\/p>\n<h5 id=\"X7BHS\"><span class=\"ez-toc-section\" id=\"3%E5%BC%95%E7%94%A8%EF%BC%9A\"><\/span><span class=\"ne-text\">3.\u5f15\u7528\uff1a<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<pre id=\"ZiA2g\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;template&gt;\n &lt;div&gt;\n&lt;h1&gt;\u81ea\u5b9a\u4e49hooks&lt;\/h1&gt;\n&lt;p&gt;\u9f20\u6807\u4f4d\u7f6e:x\u8f74:{{x}};y\u8f74:{{y}}&lt;\/p&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script lang='ts' setup&gt;\nimport {useMove} from '..\/hooks\/useMove';\n\/\/ \u89e3\u6784\nconst {x,y}=useMove();<\/code><\/pre>\n<p id=\"u7d4e6d77\" class=\"ne-p\"><span class=\"ne-text\">\u56e0\u4e3auseMove\u94a9\u5b50\u8fd4\u56de\u7684\u662f\u6570\u7ec4{x,y} \u6240\u4ee5\u76f4\u63a5\u89e3\u6784\u5373\u53ef\u4f7f\u7528 \u540d\u5b57\u4e00\u5b9a\u8981\u5bf9\u5e94<\/span><\/p>\n<h5 id=\"pCFlk\"><span class=\"ez-toc-section\" id=\"%E2%AD%90addEventListener%E2%91%A0%EF%BC%8C%E2%91%A1%EF%BC%8C%E2%91%A2\"><\/span><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">addEventListener(\u2460\uff0c\u2461\uff0c\u2462 )<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u81c1e87f\" class=\"ne-p\"><span class=\"ne-text\">\u9ed8\u8ba4\u7684\u4e09\u4e2a\u53c2\u6570 \u7b2c\u4e00\u4e2a\u4e3a\u76d1\u542c\u5bf9\u8c61\uff0c\u7b2c\u4e8c\u4e2a\u4e3a\u76d1\u542c\u65b9\u6cd5\uff0c\u7b2c\u4e09\u4e2a\u4e3a\u4e8b\u4ef6\u65b9\u6cd5 \u9ed8\u8ba4\u4e3afalse \u5373\u4e8b\u4ef6\u5192\u6ce1 \uff0c\u5199true\u5373\u4e3a\u4e8b\u4ef6\u6355\u83b7<\/span><\/p>\n<h5 id=\"rhClc\"><span class=\"ez-toc-section\" id=\"%E2%AD%90_%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7\"><\/span><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\"> \u4e8b\u4ef6\u5192\u6ce1\u4e0e\u4e8b\u4ef6\u6355\u83b7<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ufdccfa26\" class=\"ne-p\"><span class=\"ne-text\">\u7531\u91cc\u5411\u5916\u4e3a\u4e8b\u4ef6\u5192\u6ce1\uff0c\u7531\u5916\u5411\u91cc\u4e3a\u4e8b\u4ef6\u6355\u83b7<\/span><\/p>\n<h3 id=\"lxfS2\"><span class=\"ez-toc-section\" id=\"13%E8%B7%AF%E7%94%B1\"><\/span><span class=\"ne-text\">13.\u8def\u7531<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h5 id=\"rFtmn\"><span class=\"ez-toc-section\" id=\"1%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%90%8E%E5%AE%89%E8%A3%85%E8%B7%AF%E7%94%B1\"><\/span><span class=\"ne-text\">1.\u521b\u5efa\u9879\u76ee\u540e\u5b89\u88c5\u8def\u7531<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ue6a3be54\" class=\"ne-p\"><span class=\"ne-text\">npm install vue-router@4<\/span><\/p>\n<h5 id=\"WTE0U\"><span class=\"ez-toc-section\" id=\"2%E9%85%8D%E7%BD%AE\"><\/span><span class=\"ne-text\">2.\u914d\u7f6e<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u2231c1b6\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5728src\u4e0b\u65b0\u5efa\u6587\u4ef6\u5939<\/span><span class=\"ne-text\">router<\/span><span class=\"ne-text\">\uff0crouter\u4e0b\u65b0\u5efa<\/span><span class=\"ne-text\">index.ts <\/span><span class=\"ne-text\"> \u8fdb\u884c\u914d\u7f6e<\/span><\/p>\n<p id=\"u04dd4252\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u5728<\/span><span class=\"ne-text\">index.ts<\/span><span class=\"ne-text\"> \u5f15\u5165<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><span class=\"ne-text\">\u5e76\u4e14<\/span><span class=\"ne-text\">\u629b\u51fa<\/span><span class=\"ne-text\"> \u5426\u5219\u65e0\u6cd5\u6302\u8f7d<\/span><\/p>\n<p id=\"udec0a57e\" class=\"ne-p\"><img decoding=\"async\" id=\"ud0c6ada8\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950345381-fec5bc2e-03eb-46ff-ae0e-b725ed84cbc7.png\" width=\"737.7778298962791\" \/><\/p>\n<p id=\"uecaca854\" class=\"ne-p\"><img decoding=\"async\" id=\"u20bf5d64\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950358627-d3463ad9-3b63-4ec4-8731-8b2ca262864e.png\" width=\"213.33334840374334\" \/><\/p>\n<p id=\"ube48593e\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u5728<\/span><span class=\"ne-text\">main.ts<\/span><span class=\"ne-text\">\u4e2d\u7528use\u8fdb\u884c\u6302\u8f7d<\/span><\/p>\n<p id=\"u8a250535\" class=\"ne-p\"><img decoding=\"async\" id=\"u57077386\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950080769-a4fa4314-b912-4d60-81b0-93c007b3fde7.png\" width=\"365.1852109827968\" \/><span class=\"ne-text\"> \u6216<\/span><img decoding=\"async\" id=\"u32184dcc\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950122671-78c2b739-81e5-482b-a9e9-35a976d91639.png\" width=\"290.37039088287287\" \/><\/p>\n<p id=\"ua58cb2c0\" class=\"ne-p\"><span class=\"ne-text\">\u2463.\u5728src\u4e0b\u65b0\u5efa\u6587\u4ef6\u5939<\/span><span class=\"ne-text\">views<\/span><span class=\"ne-text\">,\u5728views\u4e0b\u65b0\u5efa\u9875\u9762\u5199\u8def\u7531\u9875\u9762<\/span><\/p>\n<p id=\"u0ab68fed\" class=\"ne-p\"><img decoding=\"async\" id=\"u1625d653\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950958419-cc1fef1c-f8c9-4d43-9f77-c20c334cae95.png\" width=\"234.07409060966285\" \/><\/p>\n<p id=\"ua1bab2e3\" class=\"ne-p\"><span class=\"ne-text\">\u2464.\u5728<\/span><span class=\"ne-text\">index.ts<\/span><span class=\"ne-text\">\u4e2d\u5f15\u5165\u8def\u7531\u9875\u9762: <\/span><span class=\"ne-text\">1.\u5f15\u5165\u5730\u5740 2.\u5339\u914d\u8def\u7531<\/span><\/p>\n<p id=\"u5384337e\" class=\"ne-p\"><span class=\"ne-text\">\u5176\u4e2dhistory\u8868\u793a\u8def\u7531\u7c7b\u578b\uff08createWebHashHistory\u8868\u793a\u54c8\u5e0c\uff1bcreateWebHistory\u8868\u793ahistory\uff09<\/span><\/p>\n<p id=\"u6723a82f\" class=\"ne-p\"><span class=\"ne-text\">routes\u8868\u793a\u5f15\u5165\u7684\u5f53\u524d\u9879\u76ee\u5339\u914d\u7684\u8def\u7531(path\u8868\u793a\u8def\u5f84,component\u8868\u793a\u8be5\u9875\u9762\u7684\u540d\u5b57)<\/span><\/p>\n<p id=\"uf5ba5361\" class=\"ne-p\"><img decoding=\"async\" id=\"uad8df031\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950438953-d6892e1b-c57a-4320-8979-1cbe206201b0.png\" width=\"421.4815112560068\" \/><\/p>\n<p id=\"ud954c7df\" class=\"ne-p\"><span class=\"ne-text\">\u2465.\u5728<\/span><span class=\"ne-text\">app.vue<\/span><span class=\"ne-text\">\u4e2d\u663e\u793a RouterView\u4e3arouter\u7684\u5360\u4f4d\u7b26\uff0c\u5728template\u5199\u5165\u540e\u5728\u7f51\u9875\u4e2d\u5207\u6362\u7f51\u9875\u5730\u5740\u5373\u53ef\u5c55\u793a<\/span><\/p>\n<p id=\"u78ae8aea\" class=\"ne-p\"><img decoding=\"async\" id=\"u2396aa20\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950684859-d0784cdc-18de-46c8-af5a-f257fd10f339.png\" width=\"381.4815084303049\" \/><\/p>\n<p id=\"ufabbac2a\" class=\"ne-p\"><img decoding=\"async\" id=\"u9d3138ac\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756950724595-d2c6303b-70dc-46fa-a0d4-02312716e5f7.png\" width=\"240.00001695421128\" \/><\/p>\n<h5 id=\"hD6Bk\"><span class=\"ez-toc-section\" id=\"3%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1\"><\/span><span class=\"ne-text\">3.\u591a\u7ea7\u8def\u7531<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uead7b192\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u5165\u5b50\u9875\u9762\u540e \u76f4\u63a5\u5728\u7236\u8def\u7531\u4e0b\u52a0children<\/span><\/p>\n<p id=\"u81b99c76\" class=\"ne-p\"><span class=\"ne-text\">\u53ea\u8981\u662f\u591a\u7ea7\u8def\u7531 path\u5c31\u4e0d\u9700\u8981\u5199<\/span><span class=\"ne-text\">\/<\/span><\/p>\n<p id=\"u8cc48e14\" class=\"ne-p\"><span class=\"ne-text\">\u4f46\u662f\u5176\u4ed6\u64cd\u4f5c\u8fd8\u662f\u9700\u8981\u4ece\u7236\u8def\u7531\u5f00\u59cb\u5199 \u6bd4\u5982\u58f0\u660e\u5f0f\u5bfc\u822a to\u540e\u9762\u7684path<\/span><\/p>\n<p id=\"u892dd4b9\" class=\"ne-p\"><img decoding=\"async\" id=\"u388bb990\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756953473150-892a374f-abbc-4a53-a374-b17a7f836530.png\" width=\"280.00001977991315\" \/><\/p>\n<h5 id=\"Zr3qc\"><span class=\"ez-toc-section\" id=\"4%E7%BB%99router%E5%8A%A0ts%E7%B1%BB%E5%9E%8B\"><\/span><span class=\"ne-text\">4.\u7ed9router\u52a0ts\u7c7b\u578b<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ue196f388\" class=\"ne-p\"><span class=\"ne-text\">1.\u5f15\u5165RouteRecordRaw\u7c7b\u578b<\/span><\/p>\n<p id=\"u84f380c1\" class=\"ne-p\"><span class=\"ne-text\"> RouteRecordRaw\u7c7b\u578b \u662fvue-router\u81ea\u5e26\u7684\u7c7b\u578b \u5305\u62ec\u4e86path component children\u7b49\u7c7b\u578b<\/span><\/p>\n<p id=\"u2d596b11\" class=\"ne-p\"><img decoding=\"async\" id=\"JFeHw\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756954321106-2b736e76-a729-49db-b196-e25b3f10c659.png\" width=\"426.6666968074867\" \/><\/p>\n<p id=\"u16fb2843\" class=\"ne-p\"><span class=\"ne-text\">2.\u63d0\u51fa<\/span><span class=\"ne-text\">routes<\/span><span class=\"ne-text\"> \u91cd\u65b0\u5b9a\u4e49 \u518d\u5728router\u4e2d\u76f4\u63a5\u5f15\u7528<\/span><\/p>\n<p id=\"u83813b02\" class=\"ne-p\"><img decoding=\"async\" id=\"w4lqr\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756954359785-88b15304-763b-4421-8762-2b3df938131d.png\" width=\"375.5555820857565\" \/><\/p>\n<p id=\"udd12b438\" class=\"ne-p\"><span class=\"ne-text\">3.\u5c06RouteRecordRaw\u7c7b\u578b \u52a0\u5230<\/span><span class=\"ne-text\">routes<\/span><\/p>\n<p id=\"ue91296c5\" class=\"ne-p\"><img decoding=\"async\" id=\"aARwi\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756954463267-4483b581-b021-41bd-b3ba-cb66a77973eb.png\" width=\"440.0000310827207\" \/><\/p>\n<p id=\"u3503b0f2\" class=\"ne-p\"><span class=\"ne-text\">\u2b50<\/span><span class=\"ne-text\">\u6ce8\u610f<\/span><span class=\"ne-text\">\uff01<\/span><span class=\"ne-text\">\u662f\u7ed9router\u4e2d\u7684<\/span><span class=\"ne-text\">routes<\/span><span class=\"ne-text\">\u52a0RouteRecordRaw\u7c7b\u578b \u4e0d\u662frouter\u6574\u4f53<\/span><\/p>\n<h5 id=\"nybcO\"><span class=\"ez-toc-section\" id=\"5%E9%87%8D%E5%AE%9A%E5%90%91\"><\/span><span class=\"ne-text\">5.\u91cd\u5b9a\u5411<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ueb512de7\" class=\"ne-p\"><span class=\"ne-text\">\u91cd\u5b9a\u5411\u5c31\u662f\u8fdb\u5165\u4e00\u4e2a\u9875\u9762\u7684\u5730\u5740\u76f4\u63a5\u5b9a\u4f4d\u5230\u91cd\u5b9a\u5411\u7684\u9875\u9762<\/span><\/p>\n<p id=\"ubf89dfdf\" class=\"ne-p\"><span class=\"ne-text\">\u91cd\u5b9a\u5411\u4e5f\u662f\u901a\u8fc7 <\/span><span class=\"ne-text\">routes <\/span><span class=\"ne-text\">\u914d\u7f6e\u6765\u5b8c\u6210\uff0c\u4e0b\u9762\u4f8b\u5b50\u662f\u4ece \/ \u91cd\u5b9a\u5411\u5230 \/home\uff1a<\/span><\/p>\n<p id=\"u5409a7de\" class=\"ne-p\"><img decoding=\"async\" id=\"u82abd899\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756955228880-03ace8a5-de0f-430b-b6e1-02b0a975fe79.png\" width=\"391.1111387401961\" \/><\/p>\n<p id=\"u8e00386e\" class=\"ne-p\">\u00a0<\/p>\n<h5 id=\"ZguSu\"><span class=\"ez-toc-section\" id=\"6query_%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">6.query \u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ua5a3c382\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u76f4\u63a5\u5728RouterLink \u52a8\u6001\u7ed1\u5b9ato \u540e\u9762\u4f20\u53c2\u5185\u5bb9\u4e00\u5b9a\u8981\u52a0<\/span><span class=\"ne-text\">\u53cd\u5f15\u53f7&#8220;<\/span><span class=\"ne-text\">,\u540e\u9762\u5199xx:${yy.xx}\u7528&amp;\u5408\u5e76<\/span><\/p>\n<pre id=\"rJedY\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code> &lt;RouterLink\n:to=\"`\/list\/demo1?id=${item.id}&amp;user=${item.name}&amp;sex=${item.sex}`\" &gt;{{ item.name }}&lt;\/RouterLink&gt;<\/code><\/pre>\n<p id=\"u6f13ca3d\" class=\"ne-p\"><span class=\"ne-text\">\u7136\u540e\u5728\u8df3\u8f6c\u7684\u5b50\u8def\u7531\u5f15\u5165\u00a0useRoute \uff0c\u5bf9\u4f20\u5165\u7684\u6570\u7ec4\u89e3\u6784 toRefs(<\/span><span class=\"ne-text\">route.query<\/span><span class=\"ne-text\">) \u5c31\u662fuseRoute().query<\/span><\/p>\n<p id=\"u0ed3536e\" class=\"ne-p\"><img decoding=\"async\" id=\"u0533caea\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756958571882-f0b014b4-7496-43bc-ab60-9e7e9f67048a.png\" width=\"437.03706791044647\" \/><\/p>\n<p id=\"uaca5c440\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u76f4\u63a5\u5728RouterLink \u52a8\u6001\u7ed1\u5b9ato \u540e\u9762\u4f20\u53c2\u5185\u5bb9\u5199\u6210\u5bf9\u8c61<\/span><\/p>\n<pre id=\"ABfyo\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;RouterLink\n          :to=\"{\n            path: '\/list\/demo1',\n            query: {\n              id: item.id,\n              user: item.name,\n              sex: item.sex,\n            },\n          }\"\n          &gt;{{ item.name }}&lt;\/RouterLink&gt;<\/code><\/pre>\n<p id=\"u6c516880\" class=\"ne-p\"><span class=\"ne-text\">\u5176\u4ed6\u4e0d\u53d8 path\u4e5f\u53ef\u7528name<\/span><\/p>\n<h5 id=\"ZqJ3H\"><span class=\"ez-toc-section\" id=\"7params%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">7.params\u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ucd2f6a92\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u76f4\u63a5\u5728RouterLink \u52a8\u6001\u7ed1\u5b9ato \u540e\u9762\u4f20\u53c2\u5185\u5bb9\u76f4\u63a5\u5199{yy.xx}\u7528\/\u95f4\u9694<\/span><\/p>\n<pre id=\"FuKiB\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;RouterLink :to=\"`\/list\/demo1\/${item.id}\/${item.name}\/${item.sex}`\"&gt;{{\n          item.name\n        }}&lt;\/RouterLink&gt;<\/code><\/pre>\n<p id=\"uddf55420\" class=\"ne-p\"><span class=\"ne-text\">\u4e0e\u6b64\u540c\u65f6index.ts\u4e2d\u8df3\u8f6c\u7684\u5b50\u9875\u9762path\u8981\u968f\u4e4b\u66f4\u6539 \u4f20\u4ec0\u4e48\u52a0\u4ec0\u4e48<\/span><\/p>\n<p id=\"ue282a5b6\" class=\"ne-p\"><img decoding=\"async\" id=\"u669356d4\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756958881165-6f81236d-4c1a-43b5-8a21-a3d01f7fa1f9.png\" width=\"462.22225487477726\" \/><\/p>\n<p id=\"u425434a1\" class=\"ne-p\"><span class=\"ne-text\">\u7136\u540e\u5728\u8df3\u8f6c\u7684\u5b50\u8def\u7531\u5f15\u5165\u00a0useRoute \uff0c\u5bf9\u4f20\u5165\u7684\u6570\u7ec4\u89e3\u6784 <\/span><\/p>\n<p id=\"ue7cd7998\" class=\"ne-p\"><span class=\"ne-text\">toRefs(<\/span><span class=\"ne-text\">route.params<\/span><span class=\"ne-text\">)\u5c31\u662fuseRoute().params<\/span><img decoding=\"async\" id=\"ube25de0e\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756958920498-42346026-a3c6-4957-ae19-545d895a93aa.png\" width=\"516.2963327687817\" \/><\/p>\n<p id=\"uef703e25\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u76f4\u63a5\u5728RouterLink \u52a8\u6001\u7ed1\u5b9ato \u540e\u9762\u4f20\u53c2\u5185\u5bb9\u5199\u6210\u5bf9\u8c61\uff0c\u4f46\u4e0d\u53ef\u7528path \u53ea\u80fd\u7528<\/span><span class=\"ne-text\">name<\/span><\/p>\n<pre id=\"J38Md\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;RouterLink :to=\"{\n          name:'dier',\n          params:{\n            user:item.name,\n            id:item.id,\n            sex:item.sex\n          }\n        }\"&gt;{{ item.name }}&lt;\/RouterLink&gt;<\/code><\/pre>\n<h5 id=\"AGwcw\"><span class=\"ez-toc-section\" id=\"8%E5%A3%B0%E6%98%8E%E5%BC%8F%E5%AF%BC%E8%88%AA\"><\/span><span class=\"ne-text\">8.\u58f0\u660e\u5f0f\u5bfc\u822a<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ud2445acd\" class=\"ne-p\"><span class=\"ne-text\">\u5728\u7236\u8def\u7531\u9875\u9762 \u5f15\u5165<\/span><span class=\"ne-text\">RouterLink<\/span><span class=\"ne-text\">\u548cRouterViews<\/span><\/p>\n<p id=\"u954d1a42\" class=\"ne-p\"><span class=\"ne-text\">\u5728template\u76f4\u63a5\u4f7f\u7528RouterLink \u7528\u6765\u5c55\u793a\u8def\u7531\u754c\u9762 \u5176\u4e2dto\u5c5e\u6027\u8868\u793a\u5b9a\u4f4d<\/span><\/p>\n<p id=\"u40a9ee90\" class=\"ne-p\"><span class=\"ne-text\">\u7136\u540e\u4f7f\u7528RouterViews\u5360\u4f4d\u663e\u793a \u65e0\u8bba\u51e0\u4e2a\u5b50\u8def\u7531 \u53ea\u9700\u8981\u4e00\u4e2a\u5360\u4f4d<\/span><\/p>\n<p id=\"u0205d524\" class=\"ne-p\"><img decoding=\"async\" id=\"OL0J9\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756954753817-597cb1f1-d691-47e3-ad34-74ff73cb454c.png\" width=\"554.8148540083464\" \/><\/p>\n<h5 id=\"tgVzv\"><span class=\"ez-toc-section\" id=\"9%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA\"><\/span><span class=\"ne-text\">9.\u7f16\u7a0b\u5f0f\u5bfc\u822a<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u58dd44d5\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728\u7236\u9875\u9762 \u5f15\u7528useRouter<\/span><\/p>\n<p id=\"ue857ef35\" class=\"ne-p\"><img decoding=\"async\" id=\"u5eab781b\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756964874442-6db8a60c-6c32-4dea-8cf2-9b84d520271c.png\" width=\"517.0370735618502\" \/><\/p>\n<p id=\"u8d155fb8\" class=\"ne-p\"><span class=\"ne-text\">router.go(1)\uff0c\u662f\u524d\u4e00\u9875 -1\u662f\u540e\u4e00\u9875<\/span><\/p>\n<p id=\"uf4aef48a\" class=\"ne-p\"><span class=\"ne-text\">router.back\uff08\uff09\u56de\u9000\u4e00\u591c<\/span><\/p>\n<p id=\"udce024da\" class=\"ne-p\"><span class=\"ne-text\">router.forword\uff08\uff09\u5411\u524d\u4e00\u9875<\/span><\/p>\n<h5 id=\"tldjK\"><span class=\"ez-toc-section\" id=\"10%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD\"><\/span><span class=\"ne-text\">10.\u8def\u7531\u61d2\u52a0\u8f7d<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u5c36bba1\" class=\"ne-p\"><span class=\"ne-text\">\u5c31\u662f\u4e0d\u76f4\u63a5\u5f15\u5165 \u800c\u5728component\u4e2d\u5f15\u5165<\/span><\/p>\n<p id=\"u4b0c4f96\" class=\"ne-p\"><img decoding=\"async\" id=\"u999cdb0a\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756965024300-ad8df011-b501-48fd-8330-512c295c8e9f.png\" width=\"542.9630013192495\" \/><\/p>\n<h5 id=\"Iz3FO\"><span class=\"ez-toc-section\" id=\"11RouterLink\"><\/span><span class=\"ne-text\">11.RouterLink<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u19f2e4ae\" class=\"ne-p\"><span class=\"ne-text\">RouterLink\u7528\u6765\u663e\u793a\u9875\u9762<\/span><\/p>\n<p id=\"uab8642c6\" class=\"ne-p\"><span class=\"ne-text\">\u5728to \u524d\u9762\u52a0push\u8868\u793a\u53ef\u4ee5\u56de\u9000\u7684\u8def\u7531\u65b9\u5f0f<\/span><\/p>\n<p id=\"uce3c14ec\" class=\"ne-p\"><span class=\"ne-text\"> \u52a0replace \u8868\u793a\u4e0d\u80fd\u56de\u9000<\/span><\/p>\n<p id=\"u5115cd8f\" class=\"ne-p\"><img decoding=\"async\" id=\"udb751a22\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756965318733-19caf8a2-dbe1-49e9-964b-93ae4245a2d1.png\" width=\"451.11114297874894\" \/><span class=\"ne-text\">\u56de\u9000\uff1a<\/span><img decoding=\"async\" id=\"u30acd801\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756965331359-0cf9e3a3-7fdb-421f-82b0-3f4f7dd0ea75.png\" width=\"76.29630168606099\" \/><\/p>\n<h5 id=\"UxIz5\"><span class=\"ez-toc-section\" id=\"12%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98\"><\/span><span class=\"ne-text\">12.\u7ec4\u4ef6\u7f13\u5b58<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ubf4b60e0\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5728\u7236\u8def\u7531\u7684RouterViews\u4e2d \u5199\u5165<\/span><\/p>\n<pre id=\"UtcMe\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;RouterView v-slot=\"{Component}\"&gt;\n        &lt;KeepAlive&gt;\n          &lt;component :is=\"Component\" v-if=\"route.meta.KeepAlive\"&gt;&lt;\/component&gt;\n        &lt;\/KeepAlive&gt;\n          &lt;component :is=\"Component\" v-if=\"!route.meta.KeepAlive\"&gt;&lt;\/component&gt;\n      &lt;\/RouterView&gt;<\/code><\/pre>\n<p id=\"u9f132d6a\" class=\"ne-p\"><span class=\"ne-text\">v-slot=&#8221;{Component}&#8221;\u548c &lt;component :is=&#8221;Component&#8221; v-if=&#8221;!route.meta.KeepAlive&#8221;&gt;&lt;\/component&gt;\u662f\u7528\u63d2\u69fd\u7ed1\u5b9a\u7ec4\u4ef6\uff0c\u518d\u7528\u7ec4\u4ef6\u6807\u7b7e\u5c06\u5176\u5c55\u793a<\/span><\/p>\n<p id=\"u11d86a8b\" class=\"ne-p\"><span class=\"ne-text\">\u2461.<\/span><span class=\"ne-text\">KeepAlive<\/span><\/p>\n<p id=\"u811b16cd\" class=\"ne-p\"><span class=\"ne-text\">\u7528KeepAlive\u6807\u7b7e\u5305\u8d77\u6765\u7684\u90e8\u5206\u5c06\u7f13\u5b58 \u4e5f\u5c31\u662f\u4fdd\u7559\u7ec4\u4ef6\u72b6\u6001 \u5982\u9700\u90e8\u5206\u7f13\u5b58\uff1a<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"ucaa90867\" class=\"ne-p\"><span class=\"ne-text\">\u4f7f\u7528\uff1a<\/span><\/p>\n<p id=\"u626ce267\" class=\"ne-p\"><span class=\"ne-text\">1.\u5728index.ts\u4e2d\u5f15\u5165KeepAlive<\/span><\/p>\n<p id=\"u5c4edf88\" class=\"ne-p\"><img decoding=\"async\" id=\"u5598956d\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756968508850-ff71f184-0a23-48e4-b63a-1b977851b8f5.png\" width=\"312.5926146749295\" \/><\/p>\n<p id=\"u3df35223\" class=\"ne-p\"><span class=\"ne-text\">2.\u5728index.ts\u7684\u5b50\u8def\u7531\u4e2d\u52a0meta \u52a0\u5165KeepAlive\u5c5e\u6027 \u503c\u4e3atrue\u6216false<\/span><\/p>\n<p id=\"u0fd3432c\" class=\"ne-p\"><span class=\"ne-text\">\u5373\u53ef\u5229\u7528route.meta.KeepAlive\u8fdb\u884c\u5224\u65ad \u5982\u4e0a\u4ee3\u7801<\/span><\/p>\n<p id=\"u5d6fba18\" class=\"ne-p\"><img decoding=\"async\" id=\"u4dde0f98\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1756968642158-3df9e995-6d13-452e-b31b-cd9e50ef1014.png\" width=\"505.18522087275335\" \/><\/p>\n<h3 id=\"lhcu2\"><span class=\"ez-toc-section\" id=\"14%E7%BB%84%E4%BB%B6%E9%97%B4%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">14.\u7ec4\u4ef6\u95f4\u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"iA5LI\"><span class=\"ez-toc-section\" id=\"1props\"><\/span><span class=\"ne-text\">1.props<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ua6fe538b\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u7528\u52a8\u6001\u7ed1\u5b9a\u4f20\u53c2 \u7136\u540e\u5b50\u7ec4\u4ef6\u7528 defineProps \u63a5\u53d7\u4f7f\u7528\u5373\u53ef<\/span><\/p>\n<h4 id=\"sLz2j\"><span class=\"ez-toc-section\" id=\"2custom\"><\/span><span class=\"ne-text\">2.custom<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"udc0fc117\" class=\"ne-p\"><span class=\"ne-text\">\u5728\u7236\u7ec4\u4ef6\u4e2d\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u540d\u4f20\u7ed9\u5b50\u7ec4\u4ef6<\/span><\/p>\n<p id=\"u997fcf8a\" class=\"ne-p\"><span class=\"ne-text\">\u5b50\u7ec4\u4ef6\u7528 defineEmits \u63a5\u6536 \u65b9\u6cd5\uff1a<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"uca8ba315\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5b50\u7ec4\u4ef6\u5b9a\u4e49\u4e00\u4e2a\u53d8\u91cf\u63a5\u6536defineEmits\uff0c \u4e00\u822c\u4e3a emit <\/span><\/p>\n<p id=\"ufa90a655\" class=\"ne-p\"><span class=\"ne-text\">\u2461<\/span><span class=\"ne-text\">.\u5982\u5728\u7236\u7ec4\u4ef6\u4f20\u8fc7\u6765\u4e8b\u4ef6\u65f6\u5b9a\u4e49\u4e86\u7c7b\u578b\uff0c\u5219\u63a5\u6536\u65f6\u5c31\u4e0d\u8981\u5b9a\u4e49\u7c7b\u578b \u5426\u5219\u62a5\u9519<\/span><\/p>\n<p id=\"uc6a3da95\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u5728\u5b50\u7ec4\u4ef6\u63a5\u6536\u5b8c\u6210\u540e\u76f4\u63a5\u5728\u4f7f\u7528\u65f6\u7528 \u53d8\u91cf\u540d\uff08emit\uff09.\uff08\u63a5\u6536\u7684\u53c2\u6570(senfMoney)\uff0c\u4f20\u51fa\u7684\u53c2\u6570(part)\uff09<\/span><\/p>\n<pre id=\"ZsztY\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;template&gt;\n    &lt;button @click=\"emit('sendMoney',part)\"&gt;\u7ed9\u7236\u4eb2\u94b1&lt;\/button&gt;\n    &lt;button @click=\"emit('sendFlower',part1)\"&gt;\u7ed9\u7236\u4eb2\u82b1&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script lang='ts' setup&gt;\nimport { ref, defineEmits } from \"vue\";\nconst part = ref(50);\nconst part1 = ref(10);\nconst emit = defineEmits([\"sendMoney\",\"sendFlower\"]);<\/code><\/pre>\n<p id=\"u6fa036a8\" class=\"ne-p\"><span class=\"ne-text\">\u63a5\u6536\u591a\u4e2a\u53c2\u6570\u65f6\u7528\u6570\u7ec4<\/span><\/p>\n<h4 id=\"yLrM3\"><span class=\"ez-toc-section\" id=\"3refs_%E4%B8%8Eparent\"><\/span><span class=\"ne-text\">3.$refs \u4e0e$parent<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 id=\"zenmE\"><span class=\"ez-toc-section\" id=\"1refs_%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%8C%E6%97%B6%E6%8E%A7%E5%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E5%85%B1%E6%9C%89%E7%9A%84%E5%8F%98%E9%87%8F\"><\/span><span class=\"ne-text\">1.$refs \u7236\u7ec4\u4ef6\u540c\u65f6\u63a7\u5236\u5b50\u7ec4\u4ef6\u5171\u6709\u7684\u53d8\u91cf<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uffe27f0b\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5728\u7236\u7ec4\u4ef6\u4e2d\u7ed9\u60f3\u83b7\u53d6\u7684\u6240\u6709\u5b50\u7ec4\u4ef6\u7ed1\u5b9a\u4e0a ref \u7136\u540e\u5b9a\u4e49<\/span><\/p>\n<p id=\"u995f81eb\" class=\"ne-p\"><img decoding=\"async\" id=\"u8791b610\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757052584136-51af81d4-90d7-465d-8ba0-a70844c2ee50.png\" width=\"275.3333333333333\" \/><img decoding=\"async\" id=\"uac6c285c\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757052596775-a8bf735b-e490-40fc-b2f8-b2453cebd0d1.png\" width=\"192\" \/><\/p>\n<p id=\"u49ef985b\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u5728\u5b50\u7ec4\u4ef6\u4e2d\u5f00\u653e\u6743\u9650 \u7528 defineExpose<\/span><\/p>\n<p id=\"ub26fd570\" class=\"ne-p\"><img decoding=\"async\" id=\"u96c90a80\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757052554679-45312823-1428-4e3e-9636-c134a814f57c.png\" width=\"228.66666666666666\" \/><\/p>\n<p id=\"ufe009ec1\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u5728\u7236\u7ec4\u4ef6\u4e2d \u7ed1\u5b9a\u51fd\u6570\u540e\u9762\u52a0$refs<\/span><\/p>\n<p id=\"u2b8f232f\" class=\"ne-p\"><span class=\"ne-text\">&lt;button @click=&#8221;changeMoney($refs)&#8221;&gt;\u5077\u94b1&lt;\/button&gt;<\/span><\/p>\n<p id=\"ucc612ac3\" class=\"ne-p\"><span class=\"ne-text\">\u2463.\u5728\u7236\u7ec4\u4ef6\u4e2d\u7528 for in \u5faa\u73af\u63a7\u5236\u5b50\u7ec4\u4ef6\u4e2d\u5143\u7d20 (money \u5c31\u4e3a\u6240\u6709\u5b50\u7ec4\u4ef6\u90fd\u6709\u7684)<\/span><\/p>\n<p id=\"ucae8591d\" class=\"ne-p\"><img decoding=\"async\" id=\"uc94397e3\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757052611506-3e3598f0-a9bb-4a6f-8568-9fbe3b8d2108.png\" width=\"278.6666666666667\" \/><\/p>\n<h5 id=\"VUt77\"><span class=\"ez-toc-section\" id=\"for_in_%E5%BE%AA%E7%8E%AF\"><\/span><span class=\"ne-text\">for in \u5faa\u73af<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uff425b7b\" class=\"ne-p\"><span class=\"ne-text\">\u5728\u5bf9\u8c61\u4e2d\u5faa\u73af key \u4e3a\u5bf9\u8c61\u5c5e\u6027\u540d<\/span><\/p>\n<pre id=\"qehNn\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>const changeMoney=(val:any)=&gt;{\nfor(let key in val){\n    val[key].money -=100\n}\n}<\/code><\/pre>\n<h5 id=\"wXNoN\"><span class=\"ez-toc-section\" id=\"2parent\"><\/span><span class=\"ne-text\">2.$parent<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u2b93b349\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5728\u5b50\u7ec4\u4ef6 \u7ed1\u5b9a\u51fd\u6570 \u540e\u9762\u52a0$parent<\/span><\/p>\n<p id=\"uc0475427\" class=\"ne-p\"><img decoding=\"async\" id=\"ue57e7f1e\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757052996188-416bb3ab-e170-4a8f-9d65-21574862fda8.png\" width=\"474.6666666666667\" \/><\/p>\n<p id=\"u005b78c7\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u7236\u7ec4\u4ef6\u4e2d\u5f00\u653e\u6743\u9650 \u7528 defineExpose <\/span><\/p>\n<p id=\"ud485dd27\" class=\"ne-p\"><img decoding=\"async\" id=\"uc266e984\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757053014527-ce315b21-b2ed-4c0c-bf10-30e888e5bd15.png\" width=\"176.66666666666666\" \/><\/p>\n<p id=\"uefe4b4db\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u5b50\u7ec4\u4ef6\u51fd\u6570\u4e2d\u63a7\u5236\u7236\u7ec4\u4ef6\u7684\u5143\u7d20<\/span><\/p>\n<p id=\"uc5d9c639\" class=\"ne-p\"><img decoding=\"async\" id=\"u2507acbb\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757053030966-7e80bfee-3f70-4aa2-9098-ac6e398cf9d6.png\" width=\"334\" \/><\/p>\n<h4 id=\"hshLR\"><span class=\"ez-toc-section\" id=\"4mitt\"><\/span><span class=\"ne-text\">4.mitt <\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u03e0f523\" class=\"ne-p\"><span class=\"ne-text\">\u5b9e\u73b0\u968f\u610f\u4e24\u4e2a\u7ec4\u4ef6\u95f4\u4f20\u53c2<\/span><\/p>\n<h5 id=\"v8LN5\"><span class=\"ez-toc-section\" id=\"1%E5%AE%89%E8%A3%85_mitt_%EF%BC%9Anpm_install_mitt\"><\/span><span class=\"ne-text\">1.\u5b89\u88c5 mitt \uff1anpm install mitt<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uee5651e3\" class=\"ne-p\"><span class=\"ne-text\">\u5b89\u88c5\u5b8c\u540e src \u4e2d\u65b0\u5efa utils \u6587\u4ef6\u5939 \u518d\u65b0\u5efa mitt.ts\/js \u6587\u4ef6 \u5b9a\u4e49\u4e4b\u540e\u518d\u629b\u51fa<\/span><\/p>\n<p id=\"u0de6efc2\" class=\"ne-p\"><img decoding=\"async\" id=\"u5e43a17b\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757053050303-4e7bfbf3-20c5-4541-a0eb-0af6f5d6f7bd.png\" width=\"168\" \/><img decoding=\"async\" id=\"uf6fa20c2\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757053061472-b599020f-3458-4b89-982c-eb27ae54fa81.png\" width=\"239.33333333333334\" \/><\/p>\n<h5 id=\"tXtjE\"><span class=\"ez-toc-section\" id=\"2%E4%BD%BF%E7%94%A8_mitt_%E4%BC%A0%E5%8F%82\"><\/span><span class=\"ne-text\">2.\u4f7f\u7528 mitt \u4f20\u53c2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u72ea3013\" class=\"ne-p\"><span class=\"ne-text\">\u2460.\u5728\u60f3\u4f7f\u7528 mitt \u7684\u7ec4\u4ef6\u5f15\u5165<\/span><\/p>\n<p id=\"u572d5ca8\" class=\"ne-p\"><img decoding=\"async\" id=\"u4baac86d\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757053085909-524778cd-7086-455e-9d2f-da4fadda5df2.png\" width=\"333.3333333333333\" \/><\/p>\n<p id=\"u47f04bbb\" class=\"ne-p\"><span class=\"ne-text\">\u2461.\u4f20\u53c2\u65b9\u7ed1\u5b9a\u4e8b\u4ef6\u540e \u51fd\u6570\u5b9a\u4e49\u4e2d\u4f7f\u7528 emitter.emit \u8c03\u7528<\/span><\/p>\n<pre id=\"qlPKU\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>function sendMoney(){\n  emitter.emit('foo',money.value\/5)\n}<\/code><\/pre>\n<p id=\"ue7c94029\" class=\"ne-p\"><span class=\"ne-text\">\u2462.\u63a5\u53c2\u65b9\u4f7f\u7528 emitter.on \u76d1\u542c \u53ef\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\u7528 emitter.off \u53d6\u6d88\u76d1\u542c<\/span><\/p>\n<pre id=\"a1mIJ\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>emitter.on('foo', (val: number) =&gt; {\n  main.value = val\n})<\/code><\/pre>\n<h4 id=\"sb5Ak\"><span class=\"ez-toc-section\" id=\"5attrs\"><\/span><span class=\"ne-text\">5.attrs<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u6757fa3d\" class=\"ne-p\"><span class=\"ne-text\">\u7528\u4e8e\u7236\u5b50\u5b59\u4e09\u4ee3\u4e2d\u7236\u5b59\u4f20\u53c2<\/span><\/p>\n<p id=\"u8f5fd8d1\" class=\"ne-p\"><span class=\"ne-text\">\u53ea\u9700\u5728\u5b50\u9875\u9762\u4e2d\u5bf9\u5b59\u6807\u7b7e\u7ed1\u5b9av-bind=&#8221;$attrs&#8221;\u5373\u53ef\u50cf\u7236\u5b50\u4e4b\u95f4\u4e00\u6837\u6b63\u5e38\u4f20\u53c2<\/span><\/p>\n<p id=\"u9314a460\" class=\"ne-p\"><img decoding=\"async\" id=\"u869646a7\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757055962388-45fc1d90-00bb-4ae8-a653-f80d3e4251c4.png\" width=\"274.6666666666667\" \/><\/p>\n<p id=\"u58dead4b\" class=\"ne-p\"><span class=\"ne-text\">\u7236\u9875\u9762\u4e2d<\/span><\/p>\n<p id=\"u6e7f190f\" class=\"ne-p\"><img decoding=\"async\" id=\"uc5803cfb\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757056031264-6a99b99f-e859-4a11-b4fd-a40e5e2f2a0e.png\" width=\"387.3333333333333\" \/><\/p>\n<p id=\"uab576c3c\" class=\"ne-p\"><span class=\"ne-text\">\u5b59\u9875\u9762\u4e2d defineProps \u63a5\u6536<\/span><\/p>\n<pre id=\"JKMI7\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>defineProps&lt;{\n  my:number\n  getCar(val:number):void\n}&gt;()<\/code><\/pre>\n<h4 id=\"iT3xt\"><span class=\"ez-toc-section\" id=\"6provide_%E4%B8%8E_inject\"><\/span><span class=\"ne-text\">6.provide \u4e0e inject<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"ucee70db1\" class=\"ne-p\"><span class=\"ne-text\">provide\uff1a<\/span><span class=\"ne-text\"> \u63d0\u4f9b \u7531\u7236\u7ec4\u4ef6\u63d0\u4f9b \u5728\u7236\u7ec4\u4ef6\u4e2d\u5f15\u5165<\/span><\/p>\n<p id=\"u0e63557e\" class=\"ne-p\"><img decoding=\"async\" id=\"udef708db\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757056170904-e84be7d4-a668-43e4-89bb-7bf5fa0f09a0.png\" width=\"390\" \/><\/p>\n<p id=\"u957c5a76\" class=\"ne-p\"><span class=\"ne-text\">\u629b\u51fa \u7b2c\u4e00\u4e2a\u53c2\u6570 \u2460 \u4e3a\u540d\u5b57\uff08\u81ea\u5df1\u53d6\uff09\uff0c\u7b2c\u4e8c\u4e2a\u5f00\u59cb\u4e3a\u8981\u4f20\u9012\u7684\u53c2\u6570 \u53ef\u4ee5\u4f20\u9012\u4e0d\u540c\u540d\u5b57\u7684 provide \u540c\u65f6\u5b59\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u6309\u540d\u5b57\u63a5\u6536<\/span><\/p>\n<pre id=\"xafVT\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>provide('flower', {flower,getFlower});\nprovide('vase', {book});<\/code><\/pre>\n<p id=\"u0bd2e10a\" class=\"ne-p\"><span class=\"ne-text\">inject : <\/span><span class=\"ne-text\"> \u6ce8\u5165 \u7531\u5b59\u7ec4\u4ef6\u5f15\u5165<\/span><\/p>\n<p id=\"u458a4fe1\" class=\"ne-p\"><img decoding=\"async\" id=\"uec9d059a\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757056335612-95e3f88d-8ddf-4ef6-b6a0-bdb604484a20.png\" width=\"377.3333333333333\" \/><\/p>\n<p id=\"u317d71d4\" class=\"ne-p\"><span class=\"ne-text\">\u63a5\u6536 \u89e3\u6784 \u5728\u4f20\u8fc7\u6765\u7684\u540d\u5b57 \u2460 \u4e2d\u89e3\u6784 \u524d\u9762\u4e3a\u7ed3\u6784\u51fa\u6765\u7684\u4f20\u9012\u8fc7\u6765\u7684\u53c2\u6570 <\/span><\/p>\n<pre id=\"RbHsA\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>const { flower, getFlower } = inject&lt;any&gt;(\"flower\");\nconst {book}=inject&lt;any&gt;(\"vase\")<\/code><\/pre>\n<p id=\"ub0ba05dc\" class=\"ne-p\"><span class=\"ne-text\"> \u6ce8\u610f ts \u7c7b\u578b\u5728 inject \u540e\u9762\u5b9a\u4e49<\/span><\/p>\n<h3 id=\"fNbeq\"><span class=\"ez-toc-section\" id=\"15%E6%8F%92%E6%A7%BD\"><\/span><span class=\"ne-text\">15.\u63d2\u69fd<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h5 id=\"Sw3kp\"><span class=\"ez-toc-section\" id=\"1%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD\"><\/span><span class=\"ne-text\">1.\u9ed8\u8ba4\u63d2\u69fd<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u6b1f0f9c\" class=\"ne-p\"><span class=\"ne-text\">\u5728\u54ea\u653e\u63d2\u69fd \u5f15\u7528\u7684\u65f6\u5019\u5c31\u5728\u54ea\u51fa\u73b0<\/span><\/p>\n<pre id=\"LznKN\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;h1&gt;\u9ed8\u8ba4\u63d2\u69fd&lt;\/h1&gt;\n &lt;br&gt;&lt;br&gt;&lt;br&gt;\n    &lt;hr&gt;\n    &lt;Part2&gt;\u4f60\u597d&lt;\/Part2&gt;<\/code><\/pre>\n<pre id=\"mwVwg\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;h2&gt;Part2&lt;\/h2&gt;\n    &lt;slot&gt;\u6807\u9898&lt;\/slot&gt;\n    &lt;p&gt;\u54c8\u54c8\u54c8\u54c8&lt;\/p&gt;<\/code><\/pre>\n<p id=\"ud2952355\" class=\"ne-p\"><span class=\"ne-text\">\u4f60\u597d\u5c31\u4f1a\u51fa\u73b0\u5728\u6807\u9898\u4f4d\u7f6e\u8986\u76d6\u6807\u9898<\/span><\/p>\n<h5 id=\"a30U0\"><span class=\"ez-toc-section\" id=\"2%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD\"><\/span><span class=\"ne-text\">2.\u5177\u540d\u63d2\u69fd<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ud6db2124\" class=\"ne-p\"><span class=\"ne-text\">\u7ed9\u63d2\u69fd\u8d77\u540d\u5b57\u540e ,\u5982\u679c\u53ea\u5269\u4e00\u4e2a\u63d2\u69fd\u6ca1\u8d77\u540d\u5b57\uff0c\u5b83\u7684\u540d\u5b57\u5c31\u4e3a\u9ed8\u8ba4\u7684 default \u5728\u7236\u7ec4\u4ef6\u5f15\u7528\u65f6\u8981\u5728\u5b50\u7ec4\u4ef6\u6807\u7b7e\u5185\u7528 temlpete \u6807\u7b7e\u51e0\u4e2a\u63d2\u69fd\u5c31\u51e0\u4e2a temlpete \u6807\u7b7e<\/span><\/p>\n<p id=\"uddacc5ee\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728temlpete \u6807\u7b7e\u4e0a\u5f15\u7528\u540d\u5b57 \u65b9\u6cd5\u6709\u4e24\u79cd <\/span><span class=\"ne-text\">#\u540d\u5b57\u6216 v-slot:\u540d\u5b57<\/span><\/p>\n<pre id=\"RdZ3U\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;h1&gt;\u5177\u540d\u63d2\u69fd&lt;\/h1&gt;\n &lt;br \/&gt;&lt;br \/&gt;&lt;br \/&gt;\n    &lt;hr \/&gt;\n    &lt;Part2&gt;\n      &lt;template #s2&gt;\n      &lt;\/template&gt;\n      &lt;template #default&gt;\n      &lt;\/template&gt;\n      &lt;template v-slot:s1&gt;\n      &lt;\/template&gt;\n    &lt;\/Part2&gt;<\/code><\/pre>\n<h5 id=\"hQ4xv\"><span class=\"ez-toc-section\" id=\"3%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD\"><\/span><span class=\"ne-text\">3.\u4f5c\u7528\u57df\u63d2\u69fd<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u3bf37979\" class=\"ne-p\"><span class=\"ne-text\">\u4e0e\u5177\u540d\u63d2\u69fd\u7c7b\u4f3c \u4f46\u5f15\u7528\u65f6\u8981\u7528 v-slot\uff1a\u540d\u5b57=\u4f5c\u7528\u57df<\/span><\/p>\n<pre id=\"pMlDM\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;Part2&gt;\n      &lt;template v-slot:two=\"{list2}\"&gt;\n        &lt;ul&gt;\n          &lt;li v-for=\"(item,index) in list2\" :key=\"index\"&gt;\n            {{ item.name }}\n          &lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/template&gt;\n      &lt;template v-slot:one=\"{list1}\"&gt;\n        &lt;ul&gt;\n          &lt;li v-for=\"(item,index) in list1\" :key=\"index\"&gt;\n            {{ item.desc }}\n          &lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/template&gt;\n    &lt;\/Part2&gt;<\/code><\/pre>\n<pre id=\"zdHxU\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;div&gt;\n    &lt;h2&gt;Part2&lt;\/h2&gt;\n    &lt;slot :list1=\"list\" name=\"one\"&gt;&lt;\/slot&gt;\n    &lt;slot :list2=\"list\" name=\"two\"&gt;&lt;\/slot&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script lang='ts' setup&gt;\nimport { ref, reactive } from \"vue\";\nlet list = reactive([\n  {\n    name: \"\u5b59\u609f\u7a7a\",\n    desc: \"\u91d1\u7b8d\u68d2\",\n  },\n  {\n    name: \"\u732a\u516b\u6212\",\n    desc: \"\u4e5d\u9f7f\u9489\u8019\",\n  },\n]);<\/code><\/pre>\n<h3 id=\"fxSIL\"><span class=\"ez-toc-section\" id=\"16pinia\"><\/span><span class=\"ne-text\">16.pinia<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"g79r0\"><span class=\"ez-toc-section\" id=\"1%E5%AE%89%E8%A3%85_pinia\"><\/span><span class=\"ne-text\">1.\u5b89\u88c5 pinia<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p id=\"u78a0d386\" class=\"ne-p\"><span class=\"ne-text\">npm install pinia<\/span><\/p>\n<h4 id=\"dwUva\"><span class=\"ez-toc-section\" id=\"2%E9%85%8D%E7%BD%AE-2\"><\/span><span class=\"ne-text\">2.\u914d\u7f6e<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 id=\"oO7I8\"><span class=\"ez-toc-section\" id=\"1%E5%9C%A8_maints_%E4%B8%AD%E5%BC%95%E5%85%A5\"><\/span><span class=\"ne-text\">1.\u5728 main.ts \u4e2d\u5f15\u5165 <\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u131b8310\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u5165 createPinia<\/span><\/p>\n<p id=\"ud7d93137\" class=\"ne-p\"><span class=\"ne-text\">\u5b9a\u4e49createPinia\uff08\uff09<\/span><\/p>\n<p id=\"u718da6c1\" class=\"ne-p\"><span class=\"ne-text\">\u6302\u8f7d\u5230 app \u4e0a<\/span><\/p>\n<pre id=\"qQvvh\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>import{createPinia} from 'pinia'\n\/\/ createApp(App).mount('#app')\nconst app = createApp(App);\nconst pinia = createPinia();\napp.use(pinia);\napp.mount('#app');<\/code><\/pre>\n<h5 id=\"V3vFQ\"><span class=\"ez-toc-section\" id=\"2%E6%96%B0%E5%BB%BA_store_%E6%96%87%E4%BB%B6%E5%A4%B9\"><\/span><span class=\"ne-text\">2.\u65b0\u5efa store \u6587\u4ef6\u5939<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6 id=\"KDeOK\"><span class=\"ez-toc-section\" id=\"1%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E6%96%B0%E5%BB%BA_ts_%E6%96%87%E4%BB%B6\"><\/span><span class=\"ne-text\">1.\u6587\u4ef6\u5939\u4e2d\u65b0\u5efa ts \u6587\u4ef6 <\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"uad085242\" class=\"ne-p\"><span class=\"ne-text\">\u4e00\u822c\u547d\u540d\u4e0e\u540c\u6b64 ts \u6587\u4ef6\u7684\u7ec4\u4ef6\u540d\u4e00\u81f4<\/span><\/p>\n<h6 id=\"fyy2z\"><span class=\"ez-toc-section\" id=\"2%E5%9C%A8_ts_%E6%96%87%E4%BB%B6%E4%B8%AD%E5%BC%95%E5%85%A5_defineStore\"><\/span><span class=\"ne-text\">2.\u5728 ts \u6587\u4ef6\u4e2d\u5f15\u5165 defineStore<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"uefa80b43\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u5165\u540e \u629b\u51fa\u5b9a\u4e49\u5b57\u6bb5\uff0c\u5b57\u6bb5\u540d\u4e00\u822c\u4e3a useXxxStore <\/span><\/p>\n<p id=\"u346e4fcd\" class=\"ne-p\"><span class=\"ne-text\">defineStore \u51fd\u6570\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u540d\u5b57\uff0c\u540e\u9762\u4e3a state getter action<\/span><\/p>\n<pre id=\"nCtGy\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>import { defineStore } from \"pinia\";\nexport const useCountStore = defineStore('news', { })<\/code><\/pre>\n<h6 id=\"CDlyI\"><span class=\"ez-toc-section\" id=\"3%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%BC%95%E5%85%A5%E6%AD%A4_ts_%E6%96%87%E4%BB%B6\"><\/span><span class=\"ne-text\">3.\u5728\u7ec4\u4ef6\u4e2d\u5f15\u5165\u6b64 ts \u6587\u4ef6<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<pre id=\"pkX1X\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>import { useCountStore } from \"..\/store\/count\";<\/code><\/pre>\n<h5 id=\"gbf7Z\"><span class=\"ez-toc-section\" id=\"3%E6%9E%84%E6%88%90\"><\/span><span class=\"ne-text\">3.\u6784\u6210<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6 id=\"vm0rE\"><span class=\"ez-toc-section\" id=\"1state\"><\/span><span class=\"ne-text\">1.state<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"u51d0a4db\" class=\"ne-p\"><span class=\"ne-text\">state \u7c7b\u4f3c\u4e8e data \u65b9\u6cd5<\/span><\/p>\n<p id=\"u2e7eb3ab\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u5728\u91cc\u9762 return \u60f3\u5b58\u50a8\u7684\u503c<\/span><\/p>\n<pre id=\"mF2ij\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>state() {\n        return {\n            count: 100,\n            hello: 'hello'\n        }\n    },<\/code><\/pre>\n<h6 id=\"JqfY9\"><span class=\"ez-toc-section\" id=\"2getter\"><\/span><span class=\"ne-text\">2.getter<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"uf24edc7b\" class=\"ne-p\"><span class=\"ne-text\">getter \u7c7b\u4f3c computed \u8ba1\u7b97\u5c5e\u6027<\/span><\/p>\n<p id=\"uba1a5879\" class=\"ne-p\"><span class=\"ne-text\">\u53ef\u4ee5\u5199\u4e3a\u4e24\u79cd\u5f62\u5f0f \u53ef\u4ee5\u4f7f\u7528 this<\/span><\/p>\n<pre id=\"SjHUM\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>getters: {\n        bigCount: (state) =&gt; state.count * 10,\n        bigWord() {\n            return this.hello.toUpperCase()\n        }\n    },<\/code><\/pre>\n<h6 id=\"kf2uR\"><span class=\"ez-toc-section\" id=\"3action\"><\/span><span class=\"ne-text\">3.action<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"u5530c17b\" class=\"ne-p\"><span class=\"ne-text\">action \u7c7b\u4f3c\u4e0e methods \u76f4\u63a5\u5728\u91cc\u9762\u5199\u65b9\u6cd5 \u53ef\u4ee5\u7528 this<\/span><\/p>\n<pre id=\"hA97V\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>actions: {\n        changeBig(val: string) {\n            console.log(val, 'val')\n            return val.toUpperCase()\n        },\n        addNumber(val: number) {\n            this.count += val;\n        }\n    }<\/code><\/pre>\n<h5 id=\"VOPHs\"><span class=\"ez-toc-section\" id=\"4%E8%B0%83%E7%94%A8\"><\/span><span class=\"ne-text\">4.\u8c03\u7528<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6 id=\"KdvKd\"><span class=\"ez-toc-section\" id=\"1%E8%A7%A3%E6%9E%84\"><\/span><span class=\"ne-text\">1.\u89e3\u6784<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"u537e885f\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u5165 pinia \u81ea\u5e26\u7684\u7ed3\u6784\u65b9\u6cd5 storeTorefs<\/span><\/p>\n<p id=\"ub3c5f2b3\" class=\"ne-p\"><img decoding=\"async\" id=\"DHhAS\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757125332958-0f0a9bd0-af4b-4ac8-82f2-ef54c820ff4a.png\" width=\"316.6666666666667\" \/><\/p>\n<p id=\"u027b9f5f\" class=\"ne-p\"><span class=\"ne-text\">\u5f15\u5165 store \u6587\u4ef6\u540e\u81ea\u5b9a\u4e49\u5b57\u6bb5<\/span><\/p>\n<p id=\"uc564bd3c\" class=\"ne-p\"><img decoding=\"async\" id=\"u2368be78\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757125456854-2f239bab-0b60-4ccd-b371-0b21606c83f9.png\" width=\"393.3333333333333\" \/><\/p>\n<p id=\"u198229ce\" class=\"ne-p\"><span class=\"ne-text\">\u76f4\u63a5\u7528storeTorefs \u89e3\u6784\u5373\u53ef<\/span><\/p>\n<pre id=\"Uci1c\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>let { count, bigCount, bigWord, changeBig, addNumber } = storeToRefs(counter);<\/code><\/pre>\n<h6 id=\"SVZ1U\"><span class=\"ez-toc-section\" id=\"2%E4%BD%BF%E7%94%A8\"><\/span><span class=\"ne-text\">2.\u4f7f\u7528<\/span><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p id=\"u29fc532b\" class=\"ne-p\"><span class=\"ne-text\">\u5728 templete \u4e2d\u76f4\u63a5\u4f7f\u7528\u89e3\u6784\u540e\u7684\u540d\u5b57\u5373\u53ef<\/span><\/p>\n<p id=\"u41998e8b\" class=\"ne-p\"><span class=\"ne-text\">\u5728 script \u4e2d\u8981\u7528\u5b9a\u4e49\u597d\u7684\u5b57\u6bb5\u53bb\u8c03\u7528<\/span><\/p>\n<pre id=\"Luz3u\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;h3&gt;\u521d\u59cb\u503c:{{ count }},\u53d8\u5927:{{ bigCount }}&lt;\/h3&gt;\n    &lt;p&gt;\n\u6253\u62db\u547c:{{ hi }},\u8f6c\u5927\u5199:{{ bigWord }},\u8f6c\u5927\u5199{{ counter.changeBig(\"nihao\") }}\n    &lt;\/p&gt;<\/code><\/pre>\n<p id=\"u830fc7a4\" class=\"ne-p\"><span class=\"ne-text\">\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5728\u51fd\u6570\u4e2d\u7528\u5b9a\u4e49\u597d\u7684\u5b57\u6bb5\u53bb\u8c03\u7528<\/span><\/p>\n<pre id=\"ouct9\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>function handleAdd() {\n  console.log(num.value);\n  counter.addNumber(num.value)\n   counter.count += num.value;\n}<\/code><\/pre>\n<p id=\"u59066ca3\" class=\"ne-p\"><span class=\"ne-text\">4.$patch<\/span><\/p>\n<p id=\"ue3fff262\" class=\"ne-p\"><span class=\"ne-text\">\u53ef\u4ee5\u76f4\u63a5\u6df1\u5ea6\u63a5\u89e6 state \u4e2d\u53bb\u4fee\u6539\u5176\u4e2d\u7684\u6570\u636e<\/span><\/p>\n<pre id=\"gajJK\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>counter.$patch({\n    count: counter.count + num.value,\n  });<\/code><\/pre>\n<p id=\"u6e4c6d15\" class=\"ne-p\"><span class=\"ne-text\">\ud83d\udc46<\/span><span class=\"ne-text\">\u5c31\u53ef\u4ee5\u76f4\u63a5\u8bb2 state \u4e2d\u7684 count \u91cd\u65b0\u8d4b\u503c<\/span><\/p>\n<h3 id=\"GKWqn\"><span class=\"ez-toc-section\" id=\"17toRaw_%E4%B8%8E_markRaw\"><\/span><span class=\"ne-text\">17.toRaw \u4e0e markRaw<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u9e4459e0\" class=\"ne-p\"><span class=\"ne-text\">1.toRaw \u5c06\u54cd\u5e94\u5f0f\u7684\u5bf9\u8c61\u53d8\u6210\u539f\u59cb\u5bf9\u8c61<\/span><\/p>\n<p id=\"u2047ebb5\" class=\"ne-p\"><span class=\"ne-text\">2.markRaw \u5c06\u4e00\u4e2a\u5bf9\u8c61\u6807\u8bb0\u4e3a\u4e0d\u53ef\u88ab\u8f6c\u4e3a\u4ee3\u7406,\u8fd4\u56de\u8be5\u5bf9\u8c61\u672c\u8eab\u3002\uff08\u65e0\u8bba\u7528\u4ec0\u4e48\u5305 \u90fd\u662f\u539f\u59cb\u5bf9\u8c61\uff09<\/span><\/p>\n<h3 id=\"zo4q0\"><span class=\"ez-toc-section\" id=\"18shallowRef_%E4%B8%8E_shallowReactive\"><\/span><span class=\"ne-text\">18.shallowRef \u4e0e shallowReactive<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"ua2fb8bf4\" class=\"ne-p\"><span class=\"ne-text\">shallowRef \u4e0e shallowReactive \u5c31\u662f\u5c06\u6570\u636e\u53d8\u6210\u6d45\u5c42\u54cd\u5e94\u5f0f\u6570\u636e<\/span><\/p>\n<h5 id=\"i6IeO\"><span class=\"ez-toc-section\" id=\"1shallowRef\"><\/span><span class=\"ne-text\">1.shallowRef<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u7d683742\" class=\"ne-p\"><span class=\"ne-text\">shallowRef \u5b9a\u4e49\u57fa\u672c\u6570\u636e\u7c7b\u578b\u662f\u6d45\u5c42 \u4e0e ref \u5b9a\u4e49\u7684\u4e00\u6837\uff0c\u5b9a\u4e49\u5f15\u7528\u6570\u636e\u7c7b\u578b\u65f6\uff0c\u53ea\u6709\u6700\u5916\u5c42\u4e3a\u54cd\u5e94\u5f0f \u91cc\u9762\u7684\u6570\u636e\u90fd\u4e0d\u662f\u54cd\u5e94\u5f0f<\/span><\/p>\n<pre id=\"F3Ha3\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>let person1 = shallowRef({\n    name:'\u61d2\u7f8a\u7f8a',\n    age:3\n})<\/code><\/pre>\n<p id=\"u8b060044\" class=\"ne-p\"><span class=\"ne-text\">\ud83d\udc46<\/span><span class=\"ne-text\">\u53ea\u6709 person \u662f\u54cd\u5e94\u5f0f\u7684\u53ef\u4ee5\u66f4\u6539 \u91cc\u9762\u7684 name \u548c age \u90fd\u4e0d\u662f\u54cd\u5e94\u5f0f<\/span><\/p>\n<h5 id=\"kpdc0\"><span class=\"ez-toc-section\" id=\"2shallowReactive\"><\/span><span class=\"ne-text\">2.shallowReactive<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uffeecbc2\" class=\"ne-p\"><span class=\"ne-text\">shallowReactive \u5b9a\u4e49\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b \u4e5f\u662f\u8868\u5c42\u4e3a\u54cd\u5e94\u5f0f<\/span><\/p>\n<pre id=\"FASZ1\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>\nlet person2 = reactive({\n    name:'\u61d2\u7f8a\u7f8a',\n    age:3,\n    address:{\n        a1:\"\u9752\u9752\u8349\u539f\",\n        a2:\"\u94c1\u9505\"\n    }\n})<\/code><\/pre>\n<p id=\"u92db9d5c\" class=\"ne-p\"><span class=\"ne-text\">\ud83d\udc46<\/span><span class=\"ne-text\">person2 \u4e2d age name address \u90fd\u662f\u54cd\u5e94\u5f0f\uff0caddress \u91cc\u9762\u7684 a1,a2 \u90fd\u4e0d\u662f \u4e0d\u53ef\u66f4\u6539<\/span><\/p>\n<h3 id=\"eAIkp\"><span class=\"ez-toc-section\" id=\"19readonly_%E4%B8%8E_shallowReadonly\"><\/span><span class=\"ne-text\">19.readonly \u4e0e shallowReadonly<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u8b96186c\" class=\"ne-p\"><span class=\"ne-text\">readonly \u5c31\u662f\u5c06\u5b9a\u4e49\u7684\u7c7b\u578b\u53d8\u4e3a\u53ea\u8bfb \u4e0d\u53ef\u66f4\u6539<\/span><\/p>\n<p id=\"u0ce6ef10\" class=\"ne-p\"><span class=\"ne-text\">shallowReadonly \u53ea\u5c06\u6d45\u5c42\u7684\u53d8\u4e3a\u53ea\u8bfb \u91cc\u9762\u8fd8\u662f\u53ef\u4ee5\u66f4\u6539\u7684<\/span><\/p>\n<pre id=\"CeHc0\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>let person = reactive({\n    name:\"\u56fe\u56fe\",\n    age:3,\n    address:{\n        a1:\"1\",\n        a2:'2'\n    }\n})<\/code><\/pre>\n<p id=\"u7c724afb\" class=\"ne-p\"><span class=\"ne-text\">\ud83d\udc46<\/span><span class=\"ne-text\">a1,a2 \u8fd8\u662f\u53ef\u4ee5\u66f4\u6539<\/span><\/p>\n<h3 id=\"KbhHB\"><span class=\"ez-toc-section\" id=\"20Teleport\"><\/span><span class=\"ne-text\">20.Teleport<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u84309781\" class=\"ne-p\"><code class=\"ne-code\"><span class=\"ne-text\">&lt;Teleport&gt;<\/span><\/code><span class=\"ne-text\"> \u662f\u4e00\u4e2a\u5185\u7f6e\u7ec4\u4ef6\uff0c\u5b83\u53ef\u4ee5\u5c06\u4e00\u4e2a\u7ec4\u4ef6\u5185\u90e8\u7684\u4e00\u90e8\u5206\u6a21\u677f\u201c\u4f20\u9001\u201d\u5230\u8be5\u7ec4\u4ef6\u7684 DOM \u7ed3\u6784\u5916\u5c42\u7684\u4f4d\u7f6e\u53bb\u3002<\/span><\/p>\n<p id=\"u098d3a8e\" class=\"ne-p\"><span class=\"ne-text\">\u5c31\u662f\u53ef\u4ee5\u63a7\u5236\u8be5\u7ec4\u4ef6\u76f8\u5bf9\u4e8e\u54ea\u5c42 dom \u6807\u7b7e<\/span><\/p>\n<pre id=\"EfVpj\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;template&gt;\n &lt;div&gt;\n&lt;h1&gt;Teleport&lt;\/h1&gt;\n&lt;div class=\"box\"&gt;\n   &lt;Teleport to='body'&gt;\n    &lt;Demo&gt;&lt;\/Demo&gt; \n   &lt;\/Teleport&gt;&gt;\n&lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script lang='ts' setup&gt;\nimport { ref, reactive, Teleport} from 'vue';\nimport Demo from '.\/demo.vue'\n&lt;\/script&gt;\n&lt;style lang='scss' scoped&gt;\n.box{\n  width: 500px;\n  height: 500px;\n  background-color: rgb(18, 7, 234);\n  filter: saturate(200%);\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p id=\"u7fb3e44d\" class=\"ne-p\"><span class=\"ne-text\">\u6bd4\u5982<\/span><span class=\"ne-text\">\ud83d\udc46<\/span><span class=\"ne-text\">\u5f15\u7528\u7684 Dome \u7ec4\u4ef6\u662f\u4e00\u4e2a\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u5c45\u4e2d\u7684\u6b63\u65b9\u5f62\uff0c\u4f46\u4ed6\u5916\u5c42\u7684\u7ec4\u4ef6 filter: saturate(200%);\u5c5e\u6027 \u4f1a\u5bfc\u81f4Dome \u7ec4\u4ef6\u76f8\u5bf9\u4e8e\u4ed6\u5c45\u4e2d\uff0c\u5982\u679c\u5728Dome \u7ec4\u4ef6\u7ec4\u4ef6\u5916\u5957\u4e0aTeleport \u6807\u7b7e\u5373\u53ef\u6539\u53d8\u4ed6\u7684\u76f8\u5bf9\u4f4d\u7f6e to \u540e\u9762=\u7684\u8c01 \u5c31\u76f8\u5bf9\u4e8e\u8c01<\/span><\/p>\n<h3 id=\"cTqby\"><span class=\"ez-toc-section\" id=\"21Suspense\"><\/span><span class=\"ne-text\">21.Suspense<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"u9bf29c5d\" class=\"ne-p\"><span class=\"ne-text\">&lt;Suspense&gt; \u662f\u4e00\u4e2a\u5185\u7f6e\u7ec4\u4ef6\uff0c\u7528\u6765\u5728\u7ec4\u4ef6\u6811\u4e2d\u534f\u8c03\u5bf9<\/span><span class=\"ne-text\">\u5f02\u6b65\u4f9d\u8d56<\/span><span class=\"ne-text\">\u7684\u5904\u7406\u3002\u5b83\u8ba9\u6211\u4eec\u53ef\u4ee5\u5728\u7ec4\u4ef6\u6811\u4e0a\u5c42\u7b49\u5f85\u4e0b\u5c42\u7684\u591a\u4e2a\u5d4c\u5957\u5f02\u6b65\u4f9d\u8d56\u9879\u89e3\u6790\u5b8c\u6210\uff0c\u5e76\u53ef\u4ee5\u5728\u7b49\u5f85\u65f6\u6e32\u67d3\u4e00\u4e2a\u52a0\u8f7d\u72b6\u6001\u3002<\/span><\/p>\n<p id=\"ue4ec72eb\" class=\"ne-p\"><span class=\"ne-text\">\u4e5f\u5c31\u662f<\/span><span class=\"ne-text\">\u5f02\u6b65<\/span><span class=\"ne-text\">\u52a0\u8f7d\u7684\u6162\u7684\u65f6\u5019\u63a7\u5236\u663e\u793a\u7684\u4e1c\u897f <\/span><span class=\"ne-text\">\ud83d\udc47<\/span><span class=\"ne-text\">Loading<\/span><\/p>\n<p id=\"u5e98e2e3\" class=\"ne-p\"><img decoding=\"async\" id=\"ud9af920a\" class=\"ne-image\" title=\"\" src=\"https:\/\/cdn.nlark.com\/yuque\/0\/2025\/png\/60074048\/1757141875430-7d6c7d40-da88-4832-b0b3-503843bc78fe.png?x-oss-process=image%2Fcrop%2Cx_1025%2Cy_11%2Cw_888%2Ch_914\" width=\"237\" \/><\/p>\n<p id=\"u6e0c58f2\" class=\"ne-p\"><span class=\"ne-text\">\u60f3\u63a7\u5236\u54ea\u4e2a\u7ec4\u4ef6\u5c31\u5728\u5916\u9762\u5305\u4e0aSuspense \u5176\u81ea\u5e26 #fallback \u63d2\u69fd<\/span><\/p>\n<p id=\"u407d5b78\" class=\"ne-p\"><span class=\"ne-text\">\u6807\u7b7e\u5185\u663e\u793a\u63d0\u793a\u7684\u4fe1\u606f<\/span><\/p>\n<pre id=\"fv9zU\" class=\"ne-codeblock language-vue\" data-language=\"vue\"><code>&lt;div&gt;\n    &lt;h1&gt;Suspense&lt;\/h1&gt;\n    &lt;Suspense&gt;\n      &lt;Demo&gt;&lt;\/Demo&gt;\n      &lt;template #fallback&gt; Loading... &lt;\/template&gt;\n    &lt;\/Suspense&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n<h3 id=\"oQi51\"><span class=\"ez-toc-section\" id=\"22vant\"><\/span><span class=\"ne-text\">22.vant<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"ud73c1306\" class=\"ne-p\"><span class=\"ne-text\">\u5b98\u7f51<\/span><\/p>\n<p id=\"uf8ec196f\" class=\"ne-p\"><a class=\"ne-link\" href=\"https:\/\/vant.xzxo.cn\/#\/zh-CN\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/vant.xzxo.cn\/#\/zh-CN\"><span class=\"ne-text\">https:\/\/vant.xzxo.cn\/#\/zh-CN<\/span><\/a><\/p>\n<h3 id=\"HWdUP\"><span class=\"ez-toc-section\" id=\"23%EF%BC%9A%E9%85%8D%E6%9C%8D%E5%8A%A1\"><\/span><span class=\"ne-text\">23\uff1a\u914d\u670d\u52a1<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"fsHaE\"><span class=\"ez-toc-section\" id=\"%E6%96%B9%E6%B3%95_1\"><\/span><span class=\"ne-text\">\u65b9\u6cd5 1.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 id=\"AOv3x\"><span class=\"ez-toc-section\" id=\"1%E5%9C%A8_viteconfigvue_%E4%B8%AD%E9%85%8D%E6%9C%8D%E5%8A%A1\"><\/span><span class=\"ne-text\">1.\u5728 vite.config.vue \u4e2d\u914d\u670d\u52a1<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"uf5c6d9d3\" class=\"ne-p\"><span class=\"ne-text\">\u5728defineConfig \u91cc\u9762 \u5199 service<\/span><\/p>\n<h5 id=\"XafAt\"><span class=\"ez-toc-section\" id=\"2%E5%9C%A8server_%E4%B8%AD_%E7%94%A8_proxy_%E9%85%8D%E7%BD%AE\"><\/span><span class=\"ne-text\">2.\u5728server \u4e2d \u7528 proxy \u914d\u7f6e<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u9ce02702\" class=\"ne-p\"><span class=\"ne-text\">\u683c\u5f0f<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"uaedc27ac\" class=\"ne-p\"><span class=\"ne-text\">\/api\uff1a\u540d\u5b57<\/span><\/p>\n<p id=\"ub609d329\" class=\"ne-p\"><span class=\"ne-text\">target\uff1a\u6e90<\/span><\/p>\n<pre id=\"L3PRp\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>server: {\n    proxy: {\n      '\/api': {\n        target: '\u63a5\u53e3\u7f51\u5740',\n        changeOrigin: true,\n        rewrite: (path) =&gt; path.replace(\/^\\\/api\/, ''),\n      },\n    },\n  },<\/code><\/pre>\n<h4 id=\"iad6X\"><span class=\"ez-toc-section\" id=\"%E6%96%B9%E6%B3%95_2\"><\/span><span class=\"ne-text\">\u65b9\u6cd5 2<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 id=\"fTRnP\"><span class=\"ez-toc-section\" id=\"1%E5%9C%A8_src_%E6%96%B0%E5%BB%BA_utils_%E6%96%87%E4%BB%B6%E5%A4%B9_%E5%86%99_request_%E6%96%87%E4%BB%B6\"><\/span><span class=\"ne-text\">1.\u5728 src \u65b0\u5efa utils \u6587\u4ef6\u5939 \u5199 request \u6587\u4ef6<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ub2dbcb0e\" class=\"ne-p\"><span class=\"ne-text\">\u53c2\u8003 axios \u5b98\u7f51<\/span><\/p>\n<pre id=\"T3xgB\" class=\"ne-codeblock language-typescript\" data-language=\"typescript\"><code>const instance = axios.create({\n  baseURL: 'https:\/\/some-domain.com\/api\/',\n  timeout: 1000,\n  headers: {'X-Custom-Header': 'foobar'}\n});<\/code><\/pre>\n<p id=\"u2f72d42b\" class=\"ne-p\"><span class=\"ne-text\">baseURL \u540e\u9762\u5199 .evn.development \u6587\u4ef6\u4e2d \u5b9a\u4e49\u540d\u5b57 \u683c\u5f0f<\/span><span class=\"ne-text\">\ud83d\udc47<\/span><\/p>\n<p id=\"ub0374259\" class=\"ne-p\"><span class=\"ne-text\"> baseURL: &#8216;<\/span><a class=\"ne-link\" href=\"https:\/\/some-domain.com\/api\/'\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/some-domain.com\/api\/'\"><span class=\"ne-text\">https:\/\/some-domain.com\/api\/&#8217;<\/span><\/a><\/p>\n<h5 id=\"Uj8af\"><span class=\"ez-toc-section\" id=\"2%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%8B%E6%96%B0%E5%BB%BAevndevelopment\"><\/span><span class=\"ne-text\">2.\u5728\u9879\u76ee\u4e0b\u65b0\u5efa.evn.<\/span><span class=\"ne-text\">development<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"u51edb618\" class=\"ne-p\"><span class=\"ne-text\">\u5728.evn.development \u6587\u4ef6\u4e2d \u5b9a\u4e49\u540d\u5b57\u53ca\u5730\u5740<\/span><\/p>\n<h5 id=\"auQjV\"><span class=\"ez-toc-section\" id=\"3%E5%9C%A8_src_%E4%B8%AD%E6%96%B0%E5%BB%BA_api_%E6%96%87%E4%BB%B6%E5%A4%B9_%E5%9C%A8_xxxjs_%E5%86%99%E5%85%B7%E4%BD%93%E9%A1%B5%E9%9D%A2%E6%89%80%E9%9C%80%E7%9A%84%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95\"><\/span><span class=\"ne-text\">3.\u5728 src \u4e2d\u65b0\u5efa api \u6587\u4ef6\u5939 \u5728 xxx.js \u5199\u5177\u4f53\u9875\u9762\u6240\u9700\u7684\u8bf7\u6c42\u65b9\u6cd5<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p id=\"ueb256c9b\" class=\"ne-p\"><span class=\"ne-text\">\u5148\u5f15\u5165request \u4e2d\u629b\u51fa\u7684 axios \u540d from &#8216;..\/untils\/request&#8217;<\/span><\/p>\n<h5 id=\"HXT0q\"><span class=\"ez-toc-section\" id=\"4%E5%9C%A8%E5%85%B7%E4%BD%93%E9%A1%B5%E9%9D%A2%E5%BC%95%E5%85%A5_api_%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E8%AF%A5%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95\"><\/span><span class=\"ne-text\">4.\u5728\u5177\u4f53\u9875\u9762\u5f15\u5165 api \u6587\u4ef6\u5939\u4e0b\u8be5\u9875\u9762\u7684\u65b9\u6cd5<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4e00.\u4e86\u89e3vue3 Vue3 \u662f\u4e00\u5957\u6784\u5efa\u7528\u6237\u754c\u9762\u7684\u6e10\u8fdb\u5f0f\u6846\u67b6\uff0c\u7528\u6765\u6784\u5efa\u54cd\u5e94\u5f0f\u9875\u9762\u3002 Vue \u7684\u76ee\u6807\u662f\u901a\u8fc7\u5c3d\u53ef\u80fd\u7b80 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[19],"tags":[],"class_list":["post-1991","post","type-post","status-publish","format-standard","hentry","category--yxy"],"_links":{"self":[{"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/posts\/1991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1991"}],"version-history":[{"count":7,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/posts\/1991\/revisions"}],"predecessor-version":[{"id":2223,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=\/wp\/v2\/posts\/1991\/revisions\/2223"}],"wp:attachment":[{"href":"https:\/\/linuxjk.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxjk.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}