{"id":15092,"date":"2024-04-24T22:09:42","date_gmt":"2024-04-24T14:09:42","guid":{"rendered":"https:\/\/blog.iyatt.com\/?p=15092"},"modified":"2024-05-11T13:22:22","modified_gmt":"2024-05-11T05:22:22","slug":"%e5%85%a5%e5%9d%91-vue3%ef%bc%88%e7%bc%96%e8%be%91%e4%b8%ad%ef%bc%89","status":"publish","type":"post","link":"https:\/\/blog.iyatt.com\/?p=15092","title":{"rendered":"Vue3 \u5b66\u4e60\u8bb0\u5f55"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">\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-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%89%8D%E8%A8%80\" >\u524d\u8a00<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%8E%AF%E5%A2%83\" >\u73af\u5883<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%BC%80%E5%A7%8B\" >\u5f00\u59cb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95\" >\u6a21\u677f\u8bed\u6cd5<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%96%87%E6%9C%AC%E6%8F%92%E5%80%BC\" >\u6587\u672c\u63d2\u503c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%8E%9F%E5%A7%8B_HTML\" >\u539f\u59cb HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A\" >\u5c5e\u6027\u7ed1\u5b9a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%B8%83%E5%B0%94%E5%9E%8B%E5%B1%9E%E6%80%A7\" >\u5e03\u5c14\u578b\u5c5e\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E4%B8%80%E6%AC%A1%E7%BB%91%E5%AE%9A%E5%A4%9A%E4%B8%AA%E5%B1%9E%E6%80%A7\" >\u4e00\u6b21\u7ed1\u5b9a\u591a\u4e2a\u5c5e\u6027<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93\" >\u6761\u4ef6\u6e32\u67d3<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#v-if_v-else\" >v-if v-else<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#v-else-if\" >v-else-if<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#template_%E5%A4%9A%E5%85%83%E7%B4%A0%E6%9D%A1%E4%BB%B6\" >template \u591a\u5143\u7d20\u6761\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#v-show\" >v-show<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93_v-for\" >\u5217\u8868\u6e32\u67d3 v-for<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%95%B0%E7%BB%84\" >\u6570\u7ec4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%AF%B9%E8%B1%A1\" >\u5bf9\u8c61<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE\" >\u54cd\u5e94\u5f0f\u6570\u636e<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E5%AF%B9%E8%B1%A1\" >ref \u5bf9\u8c61<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E4%BD%BF%E7%94%A8\" >ref \u4f7f\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#reactive_%E5%AF%B9%E8%B1%A1\" >reactive \u5bf9\u8c61<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#reactive_%E4%BD%BF%E7%94%A8\" >reactive \u4f7f\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E5%AE%9A%E4%B9%89%E9%9D%9E%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\" >ref \u5b9a\u4e49\u975e\u57fa\u672c\u6570\u636e\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E8%A7%A3%E6%9E%84\" >\u89e3\u6784<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7\" >\u8ba1\u7b97\u5c5e\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#watch_%E7%9B%91%E8%A7%86\" >watch \u76d1\u89c6<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B\" >ref \u5b9a\u4e49\u7684\u57fa\u672c\u7c7b\u578b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1\" >ref \u5b9a\u4e49\u7684\u5bf9\u8c61<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#reactive_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1\" >reactive \u5b9a\u4e49\u7684\u5bf9\u8c61<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7\" >\u5bf9\u8c61\u7684\u5c5e\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%9B%91%E8%A7%86%E5%A4%9A%E4%B8%AA%E6%95%B0%E6%8D%AE\" >\u76d1\u89c6\u591a\u4e2a\u6570\u636e<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#watchEffect_%E7%9B%91%E8%A7%86\" >watchEffect \u76d1\u89c6<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#TypeScript\" >TypeScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\" >\u751f\u547d\u5468\u671f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E8%B7%AF%E7%94%B1\" >\u8def\u7531<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E4%BD%93%E9%AA%8C\" >\u4f53\u9a8c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#RouterLink_to_%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95\" >RouterLink to \u5bf9\u8c61\u5199\u6cd5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E8%B7%AF%E5%BE%84\" >\u8def\u5f84<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%90%8D%E5%AD%97\" >\u540d\u5b57<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%8F%82%E6%95%B0\" >\u53c2\u6570<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#query_%E5%8F%82%E6%95%B0\" >query \u53c2\u6570<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#params_%E5%8F%82%E6%95%B0\" >params \u53c2\u6570<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#props\" >props<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%96%B9%E5%BC%8F%E4%B8%80_props_%E9%80%89%E9%A1%B9\" >\u65b9\u5f0f\u4e00 props \u9009\u9879<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%96%B9%E5%BC%8F%E4%BA%8C_props_%E5%87%BD%E6%95%B0\" >\u65b9\u5f0f\u4e8c props \u51fd\u6570<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%96%B9%E5%BC%8F%E4%B8%89_props_%E5%AF%B9%E8%B1%A1\" >\u65b9\u5f0f\u4e09 props \u5bf9\u8c61<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%B5%8F%E8%A7%88%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%EF%BC%9Apush_%E5%92%8C_replace_%E6%A8%A1%E5%BC%8F\" >\u6d4f\u89c8\u5386\u53f2\u8bb0\u5f55\uff1apush \u548c replace \u6a21\u5f0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA\" >\u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E9%87%8D%E5%AE%9A%E5%90%91\" >\u91cd\u5b9a\u5411<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-50\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1\" >\u7ec4\u4ef6\u901a\u4fe1<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-51\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#props_%E7%88%B6%E4%BC%A0%E5%AD%90\" >props \u7236\u4f20\u5b50<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-52\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E4%BA%8B%E4%BB%B6_%E5%AD%90%E4%BC%A0%E7%88%B6\" >\u4e8b\u4ef6 \u5b50\u4f20\u7236<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-53\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%8E%9F%E7%94%9F_DOM_%E4%BA%8B%E4%BB%B6\" >\u539f\u751f DOM \u4e8b\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-54\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6\" >\u81ea\u5b9a\u4e49\u4e8b\u4ef6<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-55\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#v-model_%E7%88%B6%E5%AD%90%E4%BA%92%E4%BC%A0\" >v-model \u7236\u5b50\u4e92\u4f20<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-56\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE\" >\u6536\u96c6\u8868\u5355\u6570\u636e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-57\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC\" >\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-58\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#defineExpose\" >defineExpose<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-59\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#ref_%E5%B1%9E%E6%80%A7\" >ref \u5c5e\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-60\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E7%88%B6%E7%BB%84%E4%BB%B6%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE\" >\u7236\u7ec4\u4ef6\u83b7\u53d6\u5b50\u7ec4\u4ef6\u6570\u636e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-61\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%AD%90%E7%BB%84%E4%BB%B6%E8%8E%B7%E5%8F%96%E7%88%B6%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE\" >\u5b50\u7ec4\u4ef6\u83b7\u53d6\u7236\u7ec4\u4ef6\u6570\u636e<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-62\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#provide_%E2%80%93_inject\" >provide &#8211; inject<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-63\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E6%8F%92%E6%A7%BD\" >\u63d2\u69fd<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-64\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD_%E7%88%B6%E4%BC%A0%E5%AD%90\" >\u9ed8\u8ba4\u63d2\u69fd \u7236\u4f20\u5b50<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-65\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD_%E7%88%B6%E4%BC%A0%E5%AD%90\" >\u5177\u540d\u63d2\u69fd \u7236\u4f20\u5b50<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-66\" href=\"https:\/\/blog.iyatt.com\/?p=15092\/#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD_%E5%AD%90%E4%BC%A0%E7%88%B6\" >\u4f5c\u7528\u57df\u63d2\u69fd \u5b50\u4f20\u7236<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E5%89%8D%E8%A8%80\"><\/span>\u524d\u8a00<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>2024.4.24<\/p>\n<p>\u6708\u4e2d\u7684\u65f6\u5019\u5927\u6982\u770b\u4e86\u4e0b <a href=\"https:\/\/blog.iyatt.com\/?p=14593\">Spring Boot<\/a>\uff0c\u611f\u89c9\u5e72\u4e0d\u4e86\u5565\uff0c\u63a5\u7740\u8fc7\u4e86\u4e0b <a href=\"https:\/\/blog.iyatt.com\/?p=14717\">Node.js \u57fa\u7840<\/a>\uff0c\u5bf9 js \u7684\u57fa\u7840\u8bed\u6cd5\u4e86\u89e3\u4e86\u70b9\uff0c\u518d\u51c6\u5907\u8fc7\u6e21\u5230\u524d\u7aef\uff0c\u4e86\u89e3\u4e00\u4e0b Vue\uff08Vue \u7684\u4f9d\u8d56\u6846\u67b6\u521b\u5efa\u90fd\u662f\u57fa\u4e8e Node.js \u6765\u5b8c\u6210\uff09\u3002<\/p>\n<p>Vue \u7684\u5b98\u65b9\u6587\u6863\u633a\u53cb\u597d\u7684\uff0c\u6709\u591a\u56fd\u8bed\u8a00\uff0c\u5305\u542b\u4e2d\u6587\u6587\u6863\uff1a<a href=\"https:\/\/cn.vuejs.org\/guide\/quick-start.html\">https:\/\/cn.vuejs.org\/guide\/quick-start.html<\/a><\/p>\n<p>.vue \u6587\u4ef6\u5176\u5b9e\u662f html + css + js \u7684\u6df7\u5408\uff0c\u4e09\u8005\u53ef\u4ee5\u5199\u5230\u540c\u4e00\u4e2a\u6587\u4ef6\u4e2d\u3002script \u6807\u7b7e\u5185\u5199 js\uff0ctemplate \u6807\u7b7e\u5185\u5199 html\uff0cstyle \u6807\u7b7e\u5185\u5199 css\u3002<\/p>\n<hr \/>\n<p>2024.4.30<\/p>\n<p>\u524d\u9762 Node.js \u641e\u4e86\u70b9\u57fa\u7840\uff0c\u5c31\u8f6c Vue \u73a9\u4e86\u4e00\u4e0b\uff0c\u7136\u540e\u53c8\u56de\u53bb\u6df1\u6316 Node.js\uff0c\u5df2\u7ecf\u5b9e\u8df5\u4e86\u4e00\u4e0b ejs \u6a21\u677f\u5f15\u64ce\u4f7f\u7528\uff08\u670d\u52a1\u5668\u6e32\u67d3\u524d\u7aef\uff09\u3001\u6570\u636e\u5e93\u8fde\u63a5\u3001RESTful API\uff0c\u4ee5\u53ca cookie \u548c session id \u7684\u8bbe\u7f6e\uff08\u7b80\u5355\u6a21\u62df\u767b\u5f55\u4fdd\u6301\uff09\u3002\u7528\u63a5\u53e3\u6d4b\u8bd5\u5de5\u5177\u7814\u7a76\u592a\u9ebb\u70e6\uff0c\u8981\u662f\u7528 ejs \u6e32\u67d3\u524d\u7aef\u66f4\u663e\u5f97\u9ebb\u70e6\uff0c\u8fd8\u662f\u5f97\u56de\u6765\u5b66\u4e60\u4e13\u7528\u7684\u524d\u7aef\u6846\u67b6\uff0c\u7ec4\u5408\u540e\u7aef\u63a5\u53e3\u4e00\u8d77\u73a9\u3002<br \/>\n\u6211\u662f\u5b9e\u8df5\u4e86\u4e00\u4e0b\u6a21\u677f\u8bed\u6cd5\u3001\u6761\u4ef6\u6e32\u67d3\u3001\u5217\u8868\u6e32\u67d3\u518d\u56de\u53bb\u6316 Node.js \u7684\uff0c\u5728 Node.js \u4e2d\u5b9e\u8df5 ejs \u6a21\u677f\u5f15\u64ce\u90e8\u5206\u5c31\u5f88\u5bb9\u6613\u8054\u60f3\u5230 Vue \u7684\u6a21\u677f\u8bed\u6cd5\u548c\u6e32\u67d3\u8fd9\u5957\uff0c\u975e\u5e38\u76f8\u4f3c\uff0c\u5728 Vue \u4e2d\u53ea\u662f\u7528\uff0c\u901a\u8fc7 ejs \u4f7f\u7528\u5c31\u5927\u6982\u80fd\u7406\u89e3 Vue \u8fd9\u5957\u6a21\u677f\u8bed\u6cd5\u548c\u6e32\u67d3\u7684\u5b9e\u73b0\u539f\u7406\u4e86\uff0c\u4e00\u4e0b\u901a\u900f\u4e86\u3002\u4e0d\u8fc7\u7528 ejs \u5f88\u591a\u4e1c\u897f\u8981\u4eb2\u81ea\u5199\uff0c\u800c Vue \u5219\u5df2\u7ecf\u5305\u88c5\u597d\u4e86\uff0c\u53ef\u4ee5\u8282\u7701\u4e0d\u5c11\u529f\u592b\u3002<\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E7%8E%AF%E5%A2%83\"><\/span>\u73af\u5883<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Node.js 20.12.2<br \/>\nVue 3.4.21<\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E5%BC%80%E5%A7%8B\"><\/span>\u5f00\u59cb<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>\u521b\u5efa\u9879\u76ee<\/p>\n<pre><code class=\"language-c\">npm create vue@latest<\/code><\/pre>\n<h1><span class=\"ez-toc-section\" id=\"%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95\"><\/span>\u6a21\u677f\u8bed\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714010262237.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 131px; --smush-placeholder-aspect-ratio: 131\/107;\" \/><\/p>\n<p>main.js<\/p>\n<pre><code class=\"language-js\">import { createApp } from &#039;vue&#039;\nimport App from &#039;.\/App.vue&#039; \/\/ \u5bfc\u5165\u540d\u79f0\u53ef\u4ee5\u968f\u610f\u547d\u540d\uff0c\u6bd4\u5982\u5199 import MyApp\uff0c\u540e\u9762\u5c31\u7528 MyApp \u5c31\u884c\n\ncreateApp(App).mount(&#039;#app&#039;)<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"%E6%96%87%E6%9C%AC%E6%8F%92%E5%80%BC\"><\/span>\u6587\u672c\u63d2\u503c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u76f8\u5f53\u4e8e\u53d6\u53d8\u91cf\u4e2d\u7684\u503c\uff0c\u4f7f\u7528\u53cc\u5927\u62ec\u53f7<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;h1&gt;\u6a21\u677f\u8bed\u6cd5&lt;\/h1&gt;\n  &lt;p&gt;msg: {{ msg }}&lt;\/p&gt;\n  &lt;p&gt;number: {{ number * 2 }}&lt;\/p&gt;\n  &lt;p&gt;ok: {{ ok ? &#039;yes&#039; : &#039;no&#039; }}&lt;\/p&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst msg = &#039;hello world&#039;\nconst number = 10\nconst ok = true\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714010642804.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 263px; --smush-placeholder-aspect-ratio: 263\/270;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E5%8E%9F%E5%A7%8B_HTML\"><\/span>\u539f\u59cb HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u76f8\u5f53\u4e8e\u5728\u53d8\u91cf\u4e2d\u4fdd\u5b58 html \u4ee3\u7801\uff0c\u5e76\u4e14\u53d6\u51fa\u6765\u6309\u7167 html \u89e3\u6790\uff0c\u4f7f\u7528 v-html \u6307\u4ee4<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;span v-html=&quot;homePage&quot;&gt;&lt;\/span&gt;\n  &lt;p v-html=&quot;blog&quot;&gt;&lt;\/p&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst homePage = &#039;&lt;a href=&quot;https:\/\/iyatt.com&quot;&gt;\u4e3b\u9875&lt;\/a&gt;&#039;\nconst blog = &#039;&lt;a href=&quot;https:\/\/blog.iyatt.com&quot;&gt;\u535a\u5ba2&lt;\/a&gt;&#039;\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714013677025.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 331px; --smush-placeholder-aspect-ratio: 331\/164;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A\"><\/span>\u5c5e\u6027\u7ed1\u5b9a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u76f8\u5f53\u4e8e\u5c5e\u6027\u53ef\u4ee5\u901a\u8fc7\u53d8\u91cf\u6307\u5b9a\uff0c\u4f7f\u7528 v-bind \u6307\u4ee4\u3002<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div v-bind:id=&quot;dynamicID1&quot;&gt;&lt;\/div&gt;\n  &lt;div :id=&quot;dynamicID2&quot;&gt;&lt;\/div&gt; &lt;!-- \u7b80\u5199 --&gt;\n\n  &lt;!-- 3.4 \u7248\u672c\u5f00\u59cb\u652f\u6301\n      \u5982\u679c\u5c5e\u6027\u540d\u79f0\u4e0e\u7ed1\u5b9a\u7684\u53d8\u91cf\u540d\u79f0\u76f8\u540c\u53ef\u4ee5\u7b80\u5199 --&gt;\n  &lt;div :id&gt;&lt;\/div&gt;\n  &lt;div v-bind:id&gt;&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst dynamicID1 = &#039;testID1&#039;;\nconst dynamicID2 = &#039;testID2&#039;;\nconst id = &#039;testID3&#039;;\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714490318283.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 235px; --smush-placeholder-aspect-ratio: 235\/156;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E5%B8%83%E5%B0%94%E5%9E%8B%E5%B1%9E%E6%80%A7\"><\/span>\u5e03\u5c14\u578b\u5c5e\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u5c5e\u6027\u503c\u4e3a\u7a7a\u6216\u672a\u5b9a\u4e49\u65f6\u4f1a\u81ea\u52a8\u53d6\u6d88\u5c5e\u6027<br \/>\nApp.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div :attribute1 :attribute2 :attribute3 :attribute4 :attribute5&gt;1&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst attribute1 = &#039;test&#039;;\nconst attribute2 = null;\nconst attribute3 = undefined;\nconst attribute4 = true;\nconst attribute5 = 10;\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714490291062.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 413px; --smush-placeholder-aspect-ratio: 413\/34;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E4%B8%80%E6%AC%A1%E7%BB%91%E5%AE%9A%E5%A4%9A%E4%B8%AA%E5%B1%9E%E6%80%A7\"><\/span>\u4e00\u6b21\u7ed1\u5b9a\u591a\u4e2a\u5c5e\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div v-bind=&quot;attributes&quot;&gt;\u6d4b\u8bd5&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst attributes = {\n    class: &#039;testClass&#039;,\n    id: &#039;testID&#039;\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714031322086.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 299px; --smush-placeholder-aspect-ratio: 299\/26;\" \/><\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93\"><\/span>\u6761\u4ef6\u6e32\u67d3<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"v-if_v-else\"><\/span>v-if v-else<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;button @click=&quot;status = !status&quot;&gt;\u5207\u6362&lt;\/button&gt;\n\n  &lt;h1 v-if=&quot;status&quot;&gt;\u73b0\u5728\u662f\u6253\u5f00\u72b6\u6001&lt;\/h1&gt;\n  &lt;h1 v-else&gt;Oh no \ud83d\ude22&lt;\/h1&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst status = ref(true); \/\/ \u4f7f\u7528 ref \u53ef\u4ee5\u52a8\u6001\u54cd\u5e94\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714042943448.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 293px; --smush-placeholder-aspect-ratio: 293\/175;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714042958225.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 308px; --smush-placeholder-aspect-ratio: 308\/176;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"v-else-if\"><\/span>v-else-if<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;div v-if=&quot;value === &#039;A&#039;&quot;&gt;AAA&lt;\/div&gt;\n  &lt;div v-else-if=&quot;value === &#039;B&#039;&quot;&gt;BBB&lt;\/div&gt;\n  &lt;div v-else-if=&quot;value === &#039;C&#039;&quot;&gt;CCC&lt;\/div&gt;\n  &lt;div v-else&gt;DDD&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst value = &quot;C&quot;;\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714043565716.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/95;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"template_%E5%A4%9A%E5%85%83%E7%B4%A0%E6%9D%A1%E4%BB%B6\"><\/span>template \u591a\u5143\u7d20\u6761\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u5c06\u591a\u4e2a\u5143\u7d20\u653e\u8fdb\u4e00\u4e2a\u5305\u88c5\u5668\u5143\u7d20\u91cc\uff0c\u4e00\u8d77\u63a5\u6536\u6761\u4ef6\u63a7\u5236<br \/>\nApp.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;button @click=&quot;status = !status&quot;&gt;\u5207\u6362&lt;\/button&gt;\n\n  &lt;template v-if=&quot;status&quot;&gt;\n      &lt;p&gt; on &lt;\/p&gt;\n      &lt;p&gt; \u4f60\u597d &lt;\/p&gt;\n  &lt;\/template&gt;\n  &lt;template v-else&gt;\n      &lt;p&gt; off &lt;\/p&gt;    \n      &lt;p&gt; \ud83d\udc15 &lt;\/p&gt;\n      &lt;p&gt; \ud83d\udc31 &lt;\/p&gt;\n  &lt;\/template&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst status = ref(true);\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714050372984.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 118px; --smush-placeholder-aspect-ratio: 118\/141;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714050381741.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 127px; --smush-placeholder-aspect-ratio: 127\/147;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"v-show\"><\/span>v-show<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>v-show \u4ec5\u5207\u6362 display \u5c5e\u6027<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;button @click=&quot;status = !status&quot;&gt;\u5207\u6362&lt;\/button&gt;\n  &lt;h1 v-show=&quot;status&quot;&gt;Hello&lt;\/h1&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst status = ref(true)\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714050817660.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 677px; --smush-placeholder-aspect-ratio: 677\/258;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714050855241.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 713px; --smush-placeholder-aspect-ratio: 713\/241;\" \/><\/p>\n<p>v-if \u548c v-show \u6bd4\u8f83\uff1a<a href=\"https:\/\/cn.vuejs.org\/guide\/essentials\/conditional.html#v-if-vs-v-show\">https:\/\/cn.vuejs.org\/guide\/essentials\/conditional.html#v-if-vs-v-show<\/a><\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93_v-for\"><\/span>\u5217\u8868\u6e32\u67d3 v-for<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"%E6%95%B0%E7%BB%84\"><\/span>\u6570\u7ec4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;li v-for=&quot;item in items&quot;&gt;\n      {{ item.msg }}\n  &lt;\/li&gt;\n\n  &lt;hr&gt;\n\n  &lt;!-- \u89e3\u6784 --&gt;\n  &lt;li v-for=&quot;{ msg } in items&quot;&gt;\n      {{ msg }}\n  &lt;\/li&gt;\n\n  &lt;hr&gt;\n\n  &lt;!-- \u6dfb\u52a0\u7d22\u5f15 --&gt;\n  &lt;li v-for=&quot;({ msg }, index) in items&quot;&gt;\n      {{ msg }} {{ index }}\n  &lt;\/li&gt;\n\n&lt;\/template&gt;\n\n&lt;!-- \u7ec4\u5408\u5f0f API --&gt;\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst items = ref([\n          { msg: &quot;\u7b2c\u4e00\u6761\u6d88\u606f&quot;},\n          { msg: &quot;\u7b2c\u4e8c\u6761\u6d88\u606f&quot;},\n          { msg: &quot;\u7b2c\u4e09\u6761\u6d88\u606f&quot;}\n      ]);\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714052810369.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 153px; --smush-placeholder-aspect-ratio: 153\/246;\" \/><\/p>\n<p>\u904d\u5386\u65f6\u7528\u7684 in \u53ef\u4ee5\u6362\u4e3a of\uff0c\u4e00\u6837\u7684\u6548\u679c<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E5%AF%B9%E8%B1%A1\"><\/span>\u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code class=\"language-html\">&lt;template&gt;\n  &lt;ul&gt;\n      &lt;li v-for=&quot;value in object&quot;&gt;\n          {{ value }}\n      &lt;\/li&gt;\n\n      &lt;hr&gt;\n\n      &lt;li v-for=&quot;(value, key) in object&quot;&gt;\n          {{ key }}: {{ value }}\n      &lt;\/li&gt;\n\n      &lt;hr&gt;\n\n      &lt;li v-for=&quot;(value, key, index) in object&quot;&gt;\n          {{ index }} {{ key }}: {{ value }}\n      &lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nconst object = {\n          title: &quot;How  to do lists in vue&quot;,\n          author: &quot;Jane Doe&quot;,\n          publishedAt: &quot;2016-04-10&quot;\n      };\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714055409270.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 268px; --smush-placeholder-aspect-ratio: 268\/240;\" \/><\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE\"><\/span>\u54cd\u5e94\u5f0f\u6570\u636e<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>\u76f4\u63a5\u5b9a\u4e49\u7684\u6570\u636e\u5728\u9875\u9762\u4e2d\u88ab\u4f7f\u7528\uff0c\u5982\u679c\u4e2d\u95f4\u4fee\u6539\u4e86\u6570\u636e\u503c\uff0c\u9875\u9762\u4e0a\u4f7f\u7528\u6570\u636e\u90e8\u5206\u4e0d\u4f1a\u66f4\u65b0\u4e3a\u6700\u65b0\u7684\u503c\u3002\u54cd\u5e94\u5f0f\u6570\u636e\u5219\u652f\u6301\u4f7f\u7528\u7684\u9875\u9762\u81ea\u52a8\u66f4\u65b0\u4e3a\u6700\u65b0\u7684\u503c\uff0c\u5b9a\u4e49\u54cd\u5e94\u5f0f\u6570\u636e\u4f7f\u7528 Vue \u4e2d\u7684 ref \u548c reactive\uff0c\u540e\u8005\u4e0d\u652f\u6301\u57fa\u672c\u6570\u636e\u7c7b\u578b\uff0c\u524d\u8005\u672c\u8eab\u53ea\u652f\u6301\u57fa\u672c\u7c7b\u578b\uff0c\u4f46\u53c8\u80fd\u95f4\u63a5\u5728\u5185\u90e8\u4f7f\u7528 reactive \u6765\u652f\u6301\u5bf9\u8c61\u7c7b\u578b\u3002\u4e00\u822c\u5efa\u8bae\u662f\u76f4\u63a5\u4f7f\u7528 ref\uff0c\u9664\u975e\u8868\u5355\u591a\u5c42\u7ea7\u6df1\u7684\u624d\u76f4\u63a5\u7528 reactive\u3002<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ref_%E5%AF%B9%E8%B1%A1\"><\/span>ref \u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst value1 = ref(&#039;hello&#039;)\nconst value2 = &#039;hello&#039;\n\nconsole.log(value1)\nconsole.log(value2)\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\u63a7\u5236\u53f0\u6253\u5370\u7684\u4fe1\u606f\uff0cvalue1 \u662f\u4e00\u4e2a RefImpl \u7684\u5bf9\u8c61\uff0c\u5176\u4e2d value \u5c5e\u6027\u4fdd\u5b58\u7740\u503c<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714726304400.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 683px; --smush-placeholder-aspect-ratio: 683\/477;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"ref_%E4%BD%BF%E7%94%A8\"><\/span>ref \u4f7f\u7528<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ref \u5bf9\u8c61\u7684 value \u5c5e\u6027\u4e2d\u5b58\u50a8\u7740\u53d8\u91cf\u503c\uff0c\u5728\u6a21\u677f\u8bed\u6cd5\u4e2d\u662f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u53d8\u91cf\u540d\uff0cVue \u4f1a\u81ea\u52a8\u53d6 .value\uff0c\u4f46\u662f\u5728 js \u90e8\u5206\u4f7f\u7528\u8fd8\u662f\u9700\u8981\u4f7f\u7528 .value \u6765\u64cd\u4f5c\u3002<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nlet num1 = ref(0)\nlet num2 = 0\n\n\/\/ \u5728\u65b9\u6cd5\u4e2d\uff0c\u9700\u8981\u624b\u52a8\u4f7f\u7528 .value\nfunction fun1() {\n    num1.value++\n    console.log(&#039;num1: &#039;, num1.value)\n}\n\nfunction fun2() {\n    num2++\n    console.log(&#039;num2: &#039;, num2)\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;!-- \u6a21\u677f\u8bed\u6cd5\u4e2d\u53ef\u4ee5\u81ea\u52a8\u53d6 .value --&gt;\n        {{ num1 }} \n        &lt;button @click=&quot;fun1&quot;&gt;num1++&lt;\/button&gt;\n    &lt;\/div&gt;\n\n    &lt;div&gt;\n        {{ num2 }}\n        &lt;button @click=&quot;fun2&quot;&gt;num2++&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u4e24\u4e2a\u6309\u626d\u5404\u81ea\u70b9\u51fb\u4e86\u4e09\u6b21\uff0cnum1 \u662f\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u9875\u9762\u5f15\u7528\u503c\u4e5f\u66f4\u65b0\u4e86\u3002num2 \u5219\u662f\u666e\u901a\u53d8\u91cf\uff0c\u9875\u9762\u4e0a\u6ca1\u6709\u66f4\u65b0\uff0c\u4f46\u662f\u4ece\u63a7\u5236\u53f0\u6253\u5370\u7684\u503c\u53ef\u4ee5\u770b\u5230\u5b9e\u9645\u662f\u4fee\u6539\u4e86\u7684\u3002<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714726670519.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 249px; --smush-placeholder-aspect-ratio: 249\/469;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"reactive_%E5%AF%B9%E8%B1%A1\"><\/span>reactive \u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-js\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive } from &#039;vue&#039;;\n\nlet value1 = reactive({\n    name: &#039;\u5c0f\u5f3a&#039;,\n    age: 18\n});\n\nlet value2 = reactive([\n    { name: &#039;\u5c0f\u660e&#039;, age: 18 },\n    { name: &#039;\u5c0f\u7ea2&#039;, age: 19 },\n    { name: &#039;\u5c0f\u5f3a&#039;, age: 20 }\n])\n\nconsole.log(value1);\nconsole.log(value2);\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u4ece\u63a7\u5236\u53f0\u6253\u5370\u7684\u4fe1\u606f\u53ef\u4ee5\u770b\u5230\u8fd4\u56de\u7684\u662f\u4e00\u4e2a Proxy \u5bf9\u8c61\uff08JS \u5185\u7f6e\uff09\uff0c\u5176\u4e2d\u7684 Target \u5b58\u50a8\u7740\u6570\u636e\u3002<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714728581891.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 364px; --smush-placeholder-aspect-ratio: 364\/721;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"reactive_%E4%BD%BF%E7%94%A8\"><\/span>reactive \u4f7f\u7528<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive } from &#039;vue&#039;;\n\nlet value1 = reactive({\n    commodity: &#039;\u6c7d\u8f66&#039;,\n    price: 10000\n});\n\nfunction add() {\n    value1.price += 1000;\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n&lt;div&gt;\n    {{ value1.commodity }} - {{ value1.price }}\n    &lt;button @click=&quot;add&quot;&gt;\u52a0\u4ef7&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714736581615.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 277px; --smush-placeholder-aspect-ratio: 277\/113;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714736593331.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 280px; --smush-placeholder-aspect-ratio: 280\/117;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"ref_%E5%AE%9A%E4%B9%89%E9%9D%9E%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B\"><\/span>ref \u5b9a\u4e49\u975e\u57fa\u672c\u6570\u636e\u7c7b\u578b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u4f7f\u7528 ref \u5b9a\u4e49\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u5728 js \u4e2d\u90fd\u9700\u8981\u901a\u8fc7 .value \u6765\u64cd\u4f5c\uff0c\u800c\u5728\u6a21\u677f\u8bed\u6cd5\u4e2d\u662f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u7684<br \/>\nApp.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nlet value1 = ref({\n    commodity: &#039;\u6c7d\u8f66&#039;,\n    price: 10000\n});\n\nconsole.log(value1);\n\nfunction add() {\n    value1.value.price += 1000;\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n&lt;div&gt;\n    {{ value1.commodity }} - {{ value1.price }}\n    &lt;button @click=&quot;add&quot;&gt;\u52a0\u4ef7 1000&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u4ece\u6253\u5370\u7684\u63a7\u5236\u53f0\u8f93\u51fa\u53ef\u4ee5\u770b\u5230\uff0cref \u5b9a\u4e49\u7684\u5bf9\u8c61\u503c\u4e5f\u662f\u5b58\u50a8\u5728 value \u5c5e\u6027\u4e2d\uff0c\u800c\u4e14 value \u5c5e\u6027\u503c\u662f\u4e00\u4e2a Proxy \u5bf9\u8c61\uff0c\u4e5f\u5c31\u662f\u8bf4\u5b9e\u9645\u5b9e\u73b0\u4e5f\u662f\u4f7f\u7528\u4e86 reactive \u6765\u5b8c\u6210<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714738212936.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 431px; --smush-placeholder-aspect-ratio: 431\/550;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E8%A7%A3%E6%9E%84\"><\/span>\u89e3\u6784<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive, toRef, toRefs } from &#039;vue&#039;;\n\nlet value1 = reactive({\n    commodity: &#039;\u6c7d\u8f66&#039;,\n    price: 10000\n});\n\nlet { commodity, price }= toRefs(value1); \/\/ \u89e3\u6784\u591a\u4e2a\u5c5e\u6027\nlet price1 = toRef(value1, &#039;price&#039;); \/\/ \u89e3\u6784\u5355\u4e2a\u5c5e\u6027\n\nfunction add() {\n    price1.value += 1000;\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n&lt;div&gt;\n    {{ value1.price }} {{ price }} {{ price1 }}\n    &lt;button @click=&quot;add&quot;&gt;\u52a0\u4ef7 1000&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u5982\u679c\u76f4\u63a5\u89e3\u6784\uff0c\u5f97\u5230\u7684\u65b0\u53d8\u91cf\u5176\u5b9e\u662f\u4e00\u4efd\u62f7\u8d1d\u7684\u6570\u636e\uff0c\u76f8\u5f53\u4e8e\u662f\u6df1\u62f7\u8d1d\u7684\u3002\u5bf9\u89e3\u6784\u7684\u53d8\u91cf\u4fee\u6539\uff0c\u4e0d\u4f1a\u4fee\u6539\u539f\u5bf9\u8c61\u3002\u800c\u4f7f\u7528 toRefs \u6216 toRef \u8fdb\u884c\u89e3\u6784\uff0c\u76f8\u5f53\u4e8e\u6d45\u62f7\u8d1d\uff0c\u62ff\u5230\u7684\u662f\u539f\u5bf9\u8c61\u7684\u5c5e\u6027\u5730\u5740\uff0c\u5bf9\u89e3\u6784\u53d8\u91cf\u4fee\u6539\uff0c\u539f\u5bf9\u8c61\u7684\u5c5e\u6027\u540c\u6b65\u4fee\u6539\u3002<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714743071605.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 271px; --smush-placeholder-aspect-ratio: 271\/131;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714743080690.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 287px; --smush-placeholder-aspect-ratio: 287\/138;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7\"><\/span>\u8ba1\u7b97\u5c5e\u6027<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { computed, ref } from &#039;vue&#039;;\n\nlet value1 = ref(1)\n\nlet result1 = computed(() =&gt; {\n    return value1.value ** 2\n})\n\nfunction addValue1() {\n    ++value1.value\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;input v-model=&quot;value1&quot; type=&quot;number&quot; \/&gt;\n    &lt;button @click=&quot;addValue1&quot;&gt;++value1&lt;\/button&gt;\n    {{ result1 }}\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u8ba1\u7b97\u5c5e\u6027\u50cf\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u53ef\u4ee5\u6267\u884c\u4e00\u4e9b\u6307\u5b9a\u64cd\u4f5c\uff0c\u4f46\u662f\u4e0e\u51fd\u6570\u4e0d\u540c\u3002\u8ba1\u7b97\u5c5e\u6027\u4f9d\u8d56\u7684\u53d8\u91cf\u53d1\u751f\u53d8\u5316\u7684\u65f6\u5019\uff0c\u4f1a\u81ea\u52a8\u8c03\u7528\u6267\u884c\uff0c\u800c\u4e14\u6709\u7f13\u5b58\uff0c\u5373\u4f7f\u591a\u6b21\u8bbf\u95ee\u8ba1\u7b97\u5c5e\u6027\uff0c\u53ea\u8981\u4f9d\u8d56\u7684\u53d8\u91cf\u6ca1\u6709\u4fee\u6539\u5c31\u4e0d\u4f1a\u91cd\u65b0\u6267\u884c\uff0c\u76f4\u63a5\u6cbf\u7528\u524d\u9762\u7684\u8ba1\u7b97\u7ed3\u679c\u3002<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714749560184.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 303px; --smush-placeholder-aspect-ratio: 303\/131;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"watch_%E7%9B%91%E8%A7%86\"><\/span>watch \u76d1\u89c6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>watch \u662f\u76d1\u89c6\u5730\u5740\u7684\u53d8\u5316\uff0c\u53d8\u91cf\u5f15\u7528\u5730\u5740\u53d8\u5316\u7684\u624d\u53ef\u4ee5\u76d1\u89c6\u5230\u3002<\/p>\n<p>\u5bf9\u5e94\u6587\u6863\u4e2d\u4fa6\u542c\u5668\u90e8\u5206\uff1a<a href=\"https:\/\/cn.vuejs.org\/guide\/essentials\/watchers.html\">https:\/\/cn.vuejs.org\/guide\/essentials\/watchers.html<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"ref_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B\"><\/span>ref \u5b9a\u4e49\u7684\u57fa\u672c\u7c7b\u578b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref, watch } from &#039;vue&#039;;\n\nlet value = ref(0)\n\nfunction add() {\n    ++value.value\n}\n\n\/\/ \u76d1\u89c6 value\n\/\/ \u53ef\u4ee5\u83b7\u53d6\u5230\u65b0\u503c\u548c\u65e7\u503c\nconst stopWatch = watch(value, (newValue, oldValue) =&gt; {\n    if (newValue &gt; 5) {\n        stopWatch() \/\/ watch \u7684\u8fd4\u56de\u503c\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u8c03\u7528\u5b83\u53ef\u4ee5\u505c\u6b62\u76d1\u89c6\n    }\n    console.log(`newValue: ${newValue}, oldValue: ${oldValue}`)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    {{ value }}\n    &lt;button @click=&quot;add&quot;&gt;add&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u5728\u503c\u5927\u4e8e 5 \u540e\u505c\u6b62\u76d1\u89c6\u4e86\uff0c\u63a7\u5236\u53f0\u4e5f\u4e0d\u518d\u6253\u5370\u4e86<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714752068020.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 346px; --smush-placeholder-aspect-ratio: 346\/481;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"ref_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1\"><\/span>ref \u5b9a\u4e49\u7684\u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref, watch } from &#039;vue&#039;;\n\nlet person = ref({\n    name: &#039;\u5f20\u4e09&#039;,\n    age: 18\n})\n\nfunction changeName() {\n    person.value.name += &#039;*&#039;\n}\n\nfunction changeAge() {\n    ++person.value.age\n}\n\nfunction changePerson() {\n    person.value = {\n        name: &#039;\u674e\u56db&#039;,\n        age: 20\n    }\n}\n\n\/\/ \/\/ \u60c5\u51b5\u4e00\n\/\/ \/\/ \u53ea\u76d1\u542c person \u5bf9\u8c61\u5730\u5740\u662f\u5426\u4fee\u6539\nwatch(person, (newVal, oldVal) =&gt; {\n    console.log(newVal, &#039; &#039;, oldVal)\n})\n\n\/\/ \/\/ \u60c5\u51b5\u4e8c\n\/\/ \/\/ \u6df1\u5ea6\u76d1\u542c\n\/\/ \/\/ \u53ef\u4ee5\u76d1\u542c\u5230 person \u5bf9\u8c61\u5185\u90e8\u5c5e\u6027\u7684\u53d8\u5316\n\/\/ \/\/ \u4f46\u662f\u5728\u5185\u90e8\u5c5e\u6027\u53d8\u5316\u7684\u65f6\u5019\u4f1a\u51fa\u73b0\u65b0\u65e7\u503c\u76f8\u540c\u7684\u60c5\u51b5\n\/\/ \/\/ \u8fd9\u662f\u56e0\u4e3a\u65b0\u65e7\u503c\u53d8\u5316\u5b9e\u9645\u53ea\u662f\u4fee\u6539\u4e86\u503c\uff0c\u5e76\u6ca1\u6709\u4fee\u6539\u5730\u5740\n\/\/ \/\/ \u76d1\u89c6\u53d1\u73b0\u53d8\u5316\u540e\u662f\u53bb\u65b0\u65e7\u503c\u7684\u5730\u5740\u53bb\u53d6\u503c\uff0c\u65b0\u65e7\u503c\u662f\u540c\u4e00\u4e2a\u5730\u5740\uff0c\u5b9e\u9645\u5c31\u662f\u90fd\u662f\u65b0\u503c\n\/\/ watch(person, (newVal, oldVal) =&gt; {\n\/\/     console.log(newVal, &#039; &#039;, oldVal)\n\/\/ }, {\n\/\/     deep: true\n\/\/ })\n\n\/\/ \/\/ \u60c5\u51b5\u4e09\n\/\/ \/\/ \u6df1\u5ea6\u76d1\u542c + \u7acb\u5373\u6267\u884c\n\/\/ \/\/ \u540c\u60c5\u51b5\u4e8c\n\/\/ \/\/ \u53ea\u662f\u7acb\u5373\u6267\u884c\uff0c\u5728\u9996\u6b21\u8d4b\u503c\u65f6\u5c31\u4f1a\u6267\u884c\u4e00\u6b21\n\/\/ watch(person, (newVal, oldVal) =&gt; {\n\/\/     console.log(newVal, &#039; &#039;, oldVal)\n\/\/ }, {\n\/\/     deep: true,\n\/\/     immediate: true\n\/\/ })\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u59d3\u540d\uff1a{{ person.name }}&lt;\/p&gt;\n        &lt;p&gt;\u5e74\u9f84\uff1a{{ person.age }}&lt;\/p&gt;\n        &lt;button @click=&quot;changeName&quot;&gt;\u4fee\u6539\u59d3\u540d&lt;\/button&gt;\n        &lt;button @click=&quot;changeAge&quot;&gt;\u4fee\u6539\u5e74\u9f84&lt;\/button&gt;\n        &lt;button @click=&quot;changePerson&quot;&gt;\u4fee\u6539\u6574\u4e2a\u5bf9\u8c61&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u60c5\u51b5\u4e00<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714753722834.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 475px; --smush-placeholder-aspect-ratio: 475\/383;\" \/><br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714753709568.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 601px; --smush-placeholder-aspect-ratio: 601\/347;\" \/><\/p>\n<p>\u60c5\u51b5\u4e8c<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714753677822.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 612px; --smush-placeholder-aspect-ratio: 612\/477;\" \/><\/p>\n<p>\u60c5\u51b5\u4e09<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714753642408.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 591px; --smush-placeholder-aspect-ratio: 591\/453;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"reactive_%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1\"><\/span>reactive \u5b9a\u4e49\u7684\u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive, watch } from &#039;vue&#039;;\n\nlet person = reactive({\n    name: &#039;\u5f20\u4e09&#039;,\n    age: 18\n})\n\nfunction changeName() {\n    person.name += &#039;*&#039;\n}\n\nfunction changeAge() {\n    ++person.age\n}\n\nfunction changePerson() {\n    person = Object.assign(person, {\n        name: &#039;\u674e\u56db&#039;,\n        age: 20\n    })\n}\n\n\/\/ \/\/ \u60c5\u51b5\u4e00\n\/\/ \/\/ \u9ed8\u8ba4\u6df1\u5ea6\u76d1\u89c6\uff0cperson \u5185\u5c5e\u6027\u53d8\u5316\u90fd\u80fd\u76d1\u6d4b\u5230\uff0c\u4e14\u65e0\u6cd5\u5173\u95ed\u6df1\u5ea6\u76d1\u89c6\n\/\/ \/\/ \u540c\u6837\u5b58\u5728\u65b0\u65e7\u503c\u76f8\u540c\u7684\u60c5\u51b5\uff0c\u56e0\u4e3a\u53d8\u5316\u53ea\u662f\u503c\u53d8\u5316\uff0c\u65b0\u65e7\u503c\u5b9e\u9645\u662f\u540c\u4e00\u5757\u5730\u5740\n\/\/ watch(person, (newVal, oldVal) =&gt; {\n\/\/     console.log(newVal, &#039; &#039;, oldVal)\n\/\/ })\n\n\/\/ \u60c5\u51b5\u4e8c\n\/\/ \u6df1\u5ea6\u76d1\u542c + \u7acb\u5373\u6267\u884c\n\/\/ \u540c\u60c5\u51b5\u4e00\n\/\/ \u53ea\u662f\u7acb\u5373\u6267\u884c\uff0c\u5728\u9996\u6b21\u8d4b\u503c\u65f6\u5c31\u4f1a\u6267\u884c\u4e00\u6b21\nwatch(person, (newVal, oldVal) =&gt; {\n    console.log(newVal, &#039; &#039;, oldVal)\n}, {\n    immediate: true\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u59d3\u540d\uff1a{{ person.name }}&lt;\/p&gt;\n        &lt;p&gt;\u5e74\u9f84\uff1a{{ person.age }}&lt;\/p&gt;\n        &lt;button @click=&quot;changeName&quot;&gt;\u4fee\u6539\u59d3\u540d&lt;\/button&gt;\n        &lt;button @click=&quot;changeAge&quot;&gt;\u4fee\u6539\u5e74\u9f84&lt;\/button&gt;\n        &lt;button @click=&quot;changePerson&quot;&gt;\u4fee\u6539\u6574\u4e2a\u5bf9\u8c61&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u60c5\u51b5\u4e00<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714754388461.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 614px; --smush-placeholder-aspect-ratio: 614\/425;\" \/><\/p>\n<p>\u60c5\u51b5\u4e8c<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714754566092.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 602px; --smush-placeholder-aspect-ratio: 602\/471;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7\"><\/span>\u5bf9\u8c61\u7684\u5c5e\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u76d1\u89c6\u7684\u4e00\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u5982\u679c\u8fd9\u4e2a\u5c5e\u6027\u662f\u57fa\u672c\u7c7b\u578b\uff0c\u5c31\u5fc5\u987b\u7528\u51fd\u6570\u5f62\u5f0f\uff0c\u5982\u679c\u5c5e\u6027\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u90a3\u4e48\u53ef\u4ee5\u76f4\u63a5\u76d1\u89c6\u4e5f\u80fd\u7528\u51fd\u6570\u5f62\u5f0f\uff0c\u5efa\u8bae\u662f\u7528\u51fd\u6570\u5f62\u5f0f\uff0c\u7528\u51fd\u6570\u548c\u4e0d\u54df\u4e2a\u51fd\u6570\u5f62\u5f0f\uff0c\u5728\u76d1\u542c\u5c5e\u6027\u7684\u5c5e\u6027\u548c\u5c5e\u6027\u5bf9\u8c61\u6574\u4f53\u4e0a\u7684\u73b0\u8c61\u6709\u533a\u522b\u3002<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive, watch } from &#039;vue&#039;;\n\nlet person = reactive({\n    name: &#039;\u5f20\u4e09&#039;,\n    cars: {\n        car1: &#039;\u5954\u9a70&#039;,\n        car2: &#039;\u5b9d\u9a6c&#039;\n    }\n})\n\nfunction changeName() {\n    person.name = &#039;\u674e\u56db&#039;\n}\n\nfunction changeCar1() {\n    person.cars.car1 = &#039;\u5965\u8fea&#039;\n}\n\nfunction changeCars() {\n    person.cars =  {\n        car1: &#039;\u7279\u65af\u62c9&#039;,\n        car2: &#039;\u4fdd\u65f6\u6377&#039;\n    }\n}\n\nwatch(() =&gt; person.name, (newVal, oldVal) =&gt; {\n    console.log(newVal, &#039; &#039; , oldVal)\n})\n\nwatch(() =&gt; person.cars, (newVal, oldVal) =&gt; {\n    console.log(newVal, &#039; &#039; , oldVal)\n}, {\n    deep: true \/\/ \u52a0\u4e0a\u8fd9\u4e2a\u624d\u80fd\u76d1\u89c6\u5230\u5c5e\u6027\u5bf9\u8c61\u5185\u7684\u53d8\u5316\u3002\u53ea\u6709\u76f4\u63a5\u76d1\u89c6 reactive \u5bf9\u8c61\u672c\u8eab\u7684\u65f6\u5019\u624d\u80fd\u9ed8\u8ba4\u6df1\u5ea6\u76d1\u89c6\u3002\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;button @click=&quot;changeName&quot;&gt;\u4fee\u6539name&lt;\/button&gt;\n    &lt;button @click=&quot;changeCar1&quot;&gt;\u4fee\u6539car1&lt;\/button&gt;\n    &lt;button @click=&quot;changeCars&quot;&gt;\u4fee\u6539cars&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714787371262.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 667px; --smush-placeholder-aspect-ratio: 667\/390;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E7%9B%91%E8%A7%86%E5%A4%9A%E4%B8%AA%E6%95%B0%E6%8D%AE\"><\/span>\u76d1\u89c6\u591a\u4e2a\u6570\u636e<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive, watch } from &#039;vue&#039;;\n\nlet person = reactive({\n    name: &#039;\u5f20\u4e09&#039;,\n    cars: {\n        car1: &#039;\u5954\u9a70&#039;,\n        car2: &#039;\u5b9d\u9a6c&#039;\n    }\n})\n\nfunction changeName() {\n    person.name = &#039;\u674e\u56db&#039;\n}\n\nfunction changeCar1() {\n    person.cars.car1 = &#039;\u5965\u8fea&#039;\n}\n\nfunction changeCars() {\n    person.cars =  {\n        car1: &#039;\u7279\u65af\u62c9&#039;,\n        car2: &#039;\u4fdd\u65f6\u6377&#039;\n    }\n}\n\n\/\/ \u901a\u8fc7\u6570\u7ec4\u53ef\u4ee5\u4e00\u6b21\u6027\u76d1\u89c6\u591a\u4e2a\nwatch([\n    () =&gt; person.name,\n    () =&gt; person.cars.car1,\n    () =&gt; person.cars\n], (newVal, oldVal) =&gt; {\n    console.log(newVal, &#039; &#039; , oldVal)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;button @click=&quot;changeName&quot;&gt;\u4fee\u6539name&lt;\/button&gt;\n    &lt;button @click=&quot;changeCar1&quot;&gt;\u4fee\u6539car1&lt;\/button&gt;\n    &lt;button @click=&quot;changeCars&quot;&gt;\u4fee\u6539cars&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714816652697.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 562px; --smush-placeholder-aspect-ratio: 562\/385;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"watchEffect_%E7%9B%91%E8%A7%86\"><\/span>watchEffect \u76d1\u89c6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u524d\u9762\u7684 watch \u76d1\u89c6\u9700\u8981\u6307\u5b9a\u76d1\u89c6\u53d8\u91cf\uff0c\u4f7f\u7528 watchEffect \u5219\u81ea\u52a8\u76d1\u89c6\u53d8\u91cf\uff0c\u53ea\u6709\u5728\u56de\u8c03\u51fd\u6570\u4e2d\u88ab\u4f7f\u7528\u7684\u53d8\u91cf\u624d\u4f1a\u88ab\u76d1\u89c6<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref, watchEffect } from &#039;vue&#039;;\n\nlet value1  = ref(0);\nlet value2 = ref({\n    a: 0\n})\n\nfunction increment1() {\n    value1.value++;\n}\n\nfunction increment2() {\n    value2.value.a++;\n}\n\nwatchEffect(() =&gt; {\n    if (value1.value === 1 || value2.value.a === 1)\n    {\n        value1.value = 10000;\n        value2.value.a = 10000;\n    }\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    {{ value1 }}\n    {{ value2.a }}\n    &lt;button @click=&quot;increment1&quot;&gt;+1&lt;\/button&gt;\n    &lt;button @click=&quot;increment2&quot;&gt;+a&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u4e24\u4e2a\u53d8\u91cf\u4efb\u610f\u4e00\u4e2a\u81ea\u589e\u5230 1 \u5c31\u4f1a\u90fd\u6539\u4e3a 10000<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714827597989.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 299px; --smush-placeholder-aspect-ratio: 299\/162;\" \/><\/p>\n<h1><span class=\"ez-toc-section\" id=\"TypeScript\"><\/span>TypeScript<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>2024.5.5<br \/>\n\u8fd9\u6bb5\u65f6\u95f4\u63a5\u89e6 Node.js \u548c Vue3 \u7684\u8fc7\u7a0b\u4e2d\uff0c\u7a0d\u5fae\u4e86\u89e3\u4e86\u4e0b TypeScrit\u3002\u6700\u76f4\u89c2\u7684\u6620\u50cf\u5c31\u662f\u5728 JavaScript \u57fa\u7840\u4e0a\u52a0\u4e86\u7c7b\u578b\uff0c\u5b9e\u9645\u6267\u884c\u7684\u65f6\u5019\u4f1a\u628a ts \u5148\u7f16\u8bd1\u4e3a js\u3002\u533a\u522b\u5c31\u5728\u7c7b\u578b\u4e0a\uff0c\u5bf9\u4e8e js \u8fd9\u79cd\u52a8\u6001\u7c7b\u578b\u7684\u8bed\u8a00\u6765\u8bf4\uff0c\u5f00\u53d1\u65f6 IDE \u7684\u8bed\u6cd5\u63d0\u793a\u5c31\u6bd4\u8f83\u70c2\u3002\u5728\u7528 Python \u7684\u65f6\u5019\u4e5f\u6709\u8fd9\u4e2a\u95ee\u9898\uff0c\u57fa\u672c\u7c7b\u578b\u4e00\u822c\u6ca1\u5565\u95ee\u9898\uff0c\u8981\u662f\u6765\u70b9\u7c7b\u5b9e\u4f8b\u548c\u5217\u8868\u6df7\u5408\uff0c\u8981\u7d22\u5f15\u6307\u5b9a\u4e0b\u6807\u7684\u65f6\u5019\uff0c\u4ee3\u7801\u8865\u5168\u5c31\u4f1a\u6446\u70c2\uff0c\u4e0d\u8fc7 Python \u53ef\u4ee5\u652f\u6301\u7c7b\u578b\u58f0\u660e\uff0c\u8fd9\u6837\u8bed\u6cd5\u63d0\u793a\u4e5f\u80fd\u5f88\u597d\u7684\u5de5\u4f5c\u3002ts \u611f\u89c9\u5c31\u662f\u5f25\u8865\u8fd9\u4e00\u70b9\uff0c\u53ef\u4ee5\u6dfb\u52a0\u7c7b\u578b\u58f0\u660e\uff0c\u8fd9\u6837 IDE \u53ef\u4ee5\u6839\u636e\u58f0\u660e\u7684\u7c7b\u578b\u6765\u63a8\u65ad\u5982\u4f55\u8fdb\u884c\u4ee3\u7801\u8865\u5168\u3002<\/p>\n<p>\u4e0b\u9762\u662f\u4f7f\u7528\u793a\u4f8b<br \/>\n\u6587\u4ef6\u7ed3\u6784<\/p>\n<pre><code class=\"language-bash\">src\n|\n|---types\n|    |\n|    |--- index.ts\n|\n|---App.vue<\/code><\/pre>\n<p>\u4e00\u822c\u5c06\u81ea\u5b9a\u4e49\u7684\u7c7b\u578b\u653e\u5728 types \u76ee\u5f55\u4e0b\uff0c\u5982\u679c\u6a21\u5757\u540d\u662f index.ts\uff0c\u5bfc\u5165\u7684\u65f6\u5019\u53ea\u9700\u8981\u6307\u5b9a\u6240\u5728\u6587\u4ef6\u5939\u540d\u5c31\u884c<\/p>\n<p>index.ts<\/p>\n<pre><code class=\"language-ts\">\/\/ \u5b9a\u4e49\u4e00\u4e2a\u63a5\u53e3\nexport interface Person {\n    name: string,\n    age: number,\n}\n\n\/\/ \u4e00\u4e2a\u6570\u7ec4\u7c7b\u578b\nexport type Persons = Person[]<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\n\/\/ \u5bfc\u5165\u7c7b\u578b\u9700\u8981\u52a0\u5173\u952e\u8bcd type\n\/\/ @ \u7b26\u53f7\u8868\u793a\u8def\u5f84 \/src\nimport type { Person, Persons } from &#039;@\/types&#039;;\n\n\/\/ \u901a\u8fc7\u5192\u53f7\u58f0\u660e\u7c7b\u578b\n\n\/\/ Person \u5bf9\u8c61\nconst p1: Person = {\n    name: &#039;John&#039;,\n    age: 30,\n}\n\n\/\/ Person \u5bf9\u8c61\u6570\u7ec4\nconst p2: Persons = [\n    { name: &#039;Alice&#039;, age: 25 },\n    { name: &#039;Bob&#039;, age: 35}\n]\n\n\/\/ \u6570\u5b57\u7c7b\u578b\nconst value: number = 1\n&lt;\/script&gt;<\/code><\/pre>\n<h1><span class=\"ez-toc-section\" id=\"%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\"><\/span>\u751f\u547d\u5468\u671f<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>\u751f\u547d\u5468\u671f\u94a9\u5b50\u53c2\u8003\uff1a<a href=\"https:\/\/cn.vuejs.org\/api\/composition-api-lifecycle.html\">https:\/\/cn.vuejs.org\/api\/composition-api-lifecycle.html<\/a><\/p>\n<p>\u56fe\u7247\u6765\u6e90\u4e8e\u5b98\u65b9\u6587\u6863\uff1a<a href=\"https:\/\/cn.vuejs.org\/guide\/essentials\/lifecycle.html\">https:\/\/cn.vuejs.org\/guide\/essentials\/lifecycle.html<\/a><br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714915840346.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1376px; --smush-placeholder-aspect-ratio: 1376\/1998;\" \/><\/p>\n<p>\u4e0b\u9762\u662f\u6f14\u793a\uff1a<br \/>\n\u6587\u4ef6\u7ed3\u6784<\/p>\n<pre><code class=\"language-bash\">src\n|\n|---components\n|    |\n|    |\n|    |---Child.Vue\n|\n|---App.vue<\/code><\/pre>\n<p>Child.Vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated, ref } from &#039;vue&#039;;\n\nlet count = ref(0);\n\nfunction increment() {\n    count.value++;\n}\n\nconsole.log(&#039;Child\u7ec4\u4ef6\u88ab\u521b\u5efa&#039;)\n\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\u6267\u884c\nonMounted(() =&gt; {\n    console.log(&#039;Child\u5df2\u6302\u8f7d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u66f4\u65b0\u540e\u6267\u884c\nonUpdated(() =&gt; {\n    console.log(&#039;Child\u5df2\u66f4\u65b0, \u5f53\u524d\u8ba1\u6570\uff1a&#039; + count.value)\n});\n\n\/\/ \u7ec4\u4ef6\u5378\u8f7d\u540e\u6267\u884c\nonUnmounted(() =&gt; {\n    console.log(&#039;Child\u5df2\u5378\u8f7d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u4e4b\u524d\u6267\u884c\nonBeforeMount(() =&gt; {\n    console.log(&#039;Child\u6302\u8f7d\u4e4b\u524d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u5373\u5c06\u66f4\u65b0\u524d\nonBeforeUpdate(() =&gt; {\n    console.log(&#039;Child\u5373\u5c06\u66f4\u65b0&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u88ab\u5378\u8f7d\u4e4b\u524d\nonBeforeUnmount(() =&gt; {\n    console.log(&#039;Child\u5373\u5c06\u5378\u8f7d&#039;)\n});\n\nonErrorCaptured((err, instance, info) =&gt; {\n    console.log(&#039;Child\u6355\u83b7\u5230\u9519\u8bef\uff1a&#039; + err)\n    console.log(&#039;\u7ec4\u4ef6\u5b9e\u4f8b\uff1a&#039; + instance)\n    console.log(&#039;\u9519\u8bef\u4fe1\u606f\uff1a&#039; + info)\n});\n&lt;\/script&gt;\n\n&lt;template&gt;\n    Child: {{ count }}\n    &lt;button @click=&quot;increment&quot;&gt;\u589e\u52a0&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport Child from &#039;@\/components\/Child.vue&#039;;\nimport { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated, ref } from &#039;vue&#039;;\n\nlet count = ref(0);\nlet isVisible = ref(true);\n\nfunction increment() {\n    count.value++;\n}\n\nfunction switchVisibility() {\n    isVisible.value = !isVisible.value;\n}\n\nconsole.log(&#039;App \u7ec4\u4ef6\u88ab\u521b\u5efa&#039;);\n\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\u6267\u884c\nonMounted(() =&gt; {\n    console.log(&#039;App \u5df2\u6302\u8f7d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u66f4\u65b0\u540e\u6267\u884c\nonUpdated(() =&gt; {\n    console.log(&#039;App \u5df2\u66f4\u65b0, \u5f53\u524d\u8ba1\u6570\uff1a&#039; + count.value)\n});\n\n\/\/ \u7ec4\u4ef6\u5378\u8f7d\u540e\u6267\u884c\nonUnmounted(() =&gt; {\n    console.log(&#039;App \u5df2\u5378\u8f7d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u4e4b\u524d\u6267\u884c\nonBeforeMount(() =&gt; {\n    console.log(&#039;App \u6302\u8f7d\u4e4b\u524d&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u5373\u5c06\u66f4\u65b0\u524d\nonBeforeUpdate(() =&gt; {\n    console.log(&#039;App \u5373\u5c06\u66f4\u65b0&#039;)\n});\n\n\/\/ \u7ec4\u4ef6\u88ab\u5378\u8f7d\u4e4b\u524d\nonBeforeUnmount(() =&gt; {\n    console.log(&#039;App \u5373\u5c06\u5378\u8f7d&#039;)\n});\n\n\/\/ \u6355\u83b7\u5b50\u7ec4\u4ef6\u7684\u9519\u8bef\nonErrorCaptured((err, instance, info) =&gt; {\n    console.log(&#039;App \u6355\u83b7\u5230\u9519\u8bef\uff1a&#039; + err)\n    console.log(&#039;\u7ec4\u4ef6\u5b9e\u4f8b\uff1a&#039; + instance)\n    console.log(&#039;\u9519\u8bef\u4fe1\u606f\uff1a&#039; + info)\n});\n&lt;\/script&gt;\n\n&lt;template&gt;\n    App: {{ count }}\n    &lt;button @click=&quot;increment&quot;&gt;\u589e\u52a0&lt;\/button&gt;\n    &lt;br&gt;\n    &lt;Child v-if=&quot;isVisible&quot;\/&gt;\n    &lt;button @click=&quot;switchVisibility&quot;&gt;\u5207\u6362\u53ef\u89c1\u6027&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u542f\u52a8\u540e<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714958365424.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 261px; --smush-placeholder-aspect-ratio: 261\/377;\" \/><\/p>\n<p>\u70b9\u51fb\u4e24\u6b21 App \u589e\u52a0<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714958399453.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 249px; --smush-placeholder-aspect-ratio: 249\/489;\" \/><\/p>\n<p>\u70b9\u51fb\u4e00\u6b21 Child \u589e\u52a0<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714958414671.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 245px; --smush-placeholder-aspect-ratio: 245\/520;\" \/><\/p>\n<p>\u70b9\u51fb\u4e00\u6b21\u5207\u6362\u53ef\u89c1\u6027<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714958428321.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/648;\" \/><\/p>\n<p>\u518d\u70b9\u4e00\u6b21\u5207\u6362\u53ef\u89c1\u6027<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1714958439997.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 280px; --smush-placeholder-aspect-ratio: 280\/777;\" \/><\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E8%B7%AF%E7%94%B1\"><\/span>\u8def\u7531<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>\u5728\u521b\u5efa\u9879\u76ee\u7684\u65f6\u5019\u9009\u5f15\u5165 Router<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715000364935.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 655px; --smush-placeholder-aspect-ratio: 655\/166;\" \/><br \/>\n\u6216\u8005\u540e\u671f\u5b89\u88c5<\/p>\n<pre><code class=\"language-bash\">npm i vue-router<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"%E4%BD%93%E9%AA%8C\"><\/span>\u4f53\u9a8c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u6587\u4ef6\u7ed3\u6784<\/p>\n<pre><code class=\"language-bash\">src\n|\n|---components\n|     Home.vue\n|     Hello.vue\n|     About.vue\n|\n|---router\n|     index.ts\n|\n| App.vue\n| main.ts<\/code><\/pre>\n<p>main.ts<\/p>\n<pre><code class=\"language-js\">&lt;template&gt;\n    &lt;div class=&quot;navigate&quot;&gt;\n        &lt;RouterLink to=&quot;\/home&quot; active-class=&quot;active&quot;&gt;\u9996\u9875&lt;\/RouterLink&gt;\n        &lt;RouterLink to=&quot;\/hello&quot; active-class=&quot;active&quot;&gt;\u4f60\u597d&lt;\/RouterLink&gt;\n        &lt;RouterLink to=&quot;\/about&quot; active-class=&quot;active&quot;&gt;\u5173\u4e8e&lt;\/RouterLink&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;routerView&quot;&gt;\n        &lt;RouterView \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.navigate&gt;* {\n    border: 1px solid black;\n    padding: 5px 10px;\n}\n\n.active {\n    background-color: lightblue;\n}\n\n.routerView {\n    border: 1px solid black;\n    margin-top: 10px;\n    padding: 10px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nimport Home from &#039;@\/components\/Home.vue&#039;\nimport Hello from &quot;@\/components\/Hello.vue&quot;;\nimport About from &quot;@\/components\/About.vue&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            path: &#039;\/home&#039;,\n            component: Home\n        },\n        {\n            path: &#039;\/hello&#039;,\n            component: Hello\n        },\n        {\n            path: &#039;\/about&#039;,\n            component: About\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<p>Home.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;Home&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>Hello.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;Hello&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>About.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;About&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715009772513.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 235px; --smush-placeholder-aspect-ratio: 235\/172;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715009783251.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 214px; --smush-placeholder-aspect-ratio: 214\/161;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715009792733.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 232px; --smush-placeholder-aspect-ratio: 232\/175;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"RouterLink_to_%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95\"><\/span>RouterLink to \u5bf9\u8c61\u5199\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%E8%B7%AF%E5%BE%84\"><\/span>\u8def\u5f84<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue \u4e2d template \u90e8\u5206<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;navigate&quot;&gt;\n        &lt;RouterLink :to=&quot;{ path: &#039;\/home&#039; }&quot; active-class=&quot;active&quot;&gt;\u9996\u9875&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ path: &#039;\/hello&#039; }&quot; active-class=&quot;active&quot;&gt;\u4f60\u597d&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ path: &#039;\/about&#039; }&quot; active-class=&quot;active&quot;&gt;\u5173\u4e8e&lt;\/RouterLink&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;routerView&quot;&gt;\n        &lt;RouterView \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"%E5%90%8D%E5%AD%97\"><\/span>\u540d\u5b57<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nimport Home from &#039;@\/components\/Home.vue&#039;\nimport Hello from &quot;@\/components\/Hello.vue&quot;;\nimport About from &quot;@\/components\/About.vue&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;homeRoute&#039;,\n            path: &#039;\/home&#039;,\n            component: Home\n        },\n        {\n            name: &#039;helloRoute&#039;,\n            path: &#039;\/hello&#039;,\n            component: Hello\n        },\n        {\n            name: &#039;aboutRoute&#039;,\n            path: &#039;\/about&#039;,\n            component: About\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<p>App.vue \u4e2d template \u90e8\u5206<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;navigate&quot;&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;homeRoute&#039; }&quot; active-class=&quot;active&quot;&gt;\u9996\u9875&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;helloRoute&#039; }&quot; active-class=&quot;active&quot;&gt;\u4f60\u597d&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;aboutRoute&#039; }&quot; active-class=&quot;active&quot;&gt;\u5173\u4e8e&lt;\/RouterLink&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;routerView&quot;&gt;\n        &lt;RouterView \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"%E5%8F%82%E6%95%B0\"><\/span>\u53c2\u6570<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u6587\u4ef6\u7ed3\u6784<\/p>\n<pre><code class=\"language-bash\">\nsrc\n\u2502  App.vue\n\u2502  main.ts\n|\n\u251c\u2500router\n\u2502      index.ts\n|\n\u2514\u2500views\n        About.vue\n        Detail.vue\n        Hello.vue\n        Home.vue<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"query_%E5%8F%82%E6%95%B0\"><\/span>query \u53c2\u6570<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>query \u901a\u8fc7\u952e\u503c\u4f20\u53c2<\/p>\n<pre><code class=\"language-bash\">url\/path?key1=value1&amp;key2=value2<\/code><\/pre>\n<p>Home.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;Home&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>About.vue<\/p>\n<pre><code class=\"language-bash\">&lt;template&gt;\n    &lt;h1&gt;About&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>Hello.vue<\/p>\n<pre><code class=\"language-bash\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst list = ref([\n    { id: 1, title: &#039;\u81ea\u6211\u4fee\u517b&#039;, content: &#039;\u5b66\u4f1a\u653e\u5f03&#039; },\n    { id: 2, title: &#039;\u4e3a\u4ec0\u4e48\u5b66\u4e60&#039;, content: &#039;\u4e0d\u5b66\u4e60\u5c31\u4f1a\u88ab\u6dd8\u6c70&#039; },\n    { id: 3, title: &#039;\u5b66\u4e60\u7684\u5173\u952e&#039;, content: &#039;\u7406\u8bba\u548c\u5b9e\u8df5\u7ed3\u5408&#039; }\n])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;sidebar&quot;&gt;\n            &lt;ul&gt;\n                &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;\n                    &lt;RouterLink :to=&quot;{\n                        name: &#039;detail&#039;,\n                        query: {\n                            id: item.id,\n                            title: item.title,\n                            content: item.content\n                        }\n                    }&quot;&gt;\n                        {{ item.title }}\n                    &lt;\/RouterLink&gt;\n                &lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;main&quot;&gt;\n            &lt;RouterView \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.container {\n    display: flex;\n}\n\n.sidebar {\n    flex: 1;\n    padding: 20px;\n}\n\n.main {\n    flex: 3;\n    padding: 20px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Detail.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { toRefs } from &#039;vue&#039;;\nimport { useRoute } from &#039;vue-router&#039;;\n\nlet { query } = toRefs(useRoute())\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;ul&gt;\n        &lt;li&gt;ID: {{ query.id }}&lt;\/li&gt;\n        &lt;li&gt;Title: {{ query.title }}&lt;\/li&gt;\n        &lt;li&gt;Content: {{ query.content }}&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;home&#039;,\n            path: &#039;\/home&#039;,\n            component: () =&gt; import(&#039;@\/views\/Home.vue&#039;)\n        },\n        {\n            name: &#039;hello&#039;,\n            path: &#039;\/hello&#039;,\n            component: () =&gt; import(&#039;@\/views\/Hello.vue&#039;),\n            children: [\n                {\n                    name: &#039;detail&#039;,\n                    path: &#039;\/detail&#039;,\n                    component: () =&gt; import(&#039;@\/views\/Detail.vue&#039;)\n                }\n            ]\n        },\n        {\n            name: &#039;about&#039;,\n            path: &#039;\/about&#039;,\n            component: () =&gt; import(&#039;@\/views\/About.vue&#039;)\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;navigate&quot;&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;home&#039; }&quot; active-class=&quot;active&quot;&gt;\u9996\u9875&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;hello&#039; }&quot; active-class=&quot;active&quot;&gt;\u4f60\u597d&lt;\/RouterLink&gt;\n        &lt;RouterLink :to=&quot;{ name: &#039;about&#039; }&quot; active-class=&quot;active&quot;&gt;\u5173\u4e8e&lt;\/RouterLink&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;routerView&quot;&gt;\n        &lt;RouterView \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.navigate&gt;* {\n    border: 1px solid black;\n    padding: 5px 10px;\n}\n\n.active {\n    background-color: lightblue;\n}\n\n.routerView {\n    border: 1px solid black;\n    margin-top: 10px;\n    padding: 10px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>main.ts<\/p>\n<pre><code class=\"language-js\">import { createApp } from &#039;vue&#039;\nimport App from &#039;.\/App.vue&#039;\nimport router from &#039;@\/router&#039;\n\nconst app = createApp(App)\n\napp.use(router)\napp.mount(&#039;#app&#039;)<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715138084777.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 896px; --smush-placeholder-aspect-ratio: 896\/264;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715138097464.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 957px; --smush-placeholder-aspect-ratio: 957\/273;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715138107886.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 939px; --smush-placeholder-aspect-ratio: 939\/263;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"params_%E5%8F%82%E6%95%B0\"><\/span>params \u53c2\u6570<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>params \u901a\u8fc7\u8def\u5f84\u4f20\u53c2<\/p>\n<pre><code class=\"language-bash\">url\/path\/value1\/value2<\/code><\/pre>\n<p>\u5728 query \u6e90\u7801\u57fa\u7840\u4e0a\u4fee\u6539\u8fc7\u7684\u6587\u4ef6<\/p>\n<p>Detail.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { toRefs } from &#039;vue&#039;;\nimport { useRoute } from &#039;vue-router&#039;;\n\nlet { params } = toRefs(useRoute())\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;ul&gt;\n        &lt;li&gt;ID: {{ params.id }}&lt;\/li&gt;\n        &lt;li&gt;Title: {{ params.title }}&lt;\/li&gt;\n        &lt;li&gt;Content: {{ params.content }}&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;home&#039;,\n            path: &#039;\/home&#039;,\n            component: () =&gt; import(&#039;@\/views\/Home.vue&#039;)\n        },\n        {\n            name: &#039;hello&#039;,\n            path: &#039;\/hello&#039;,\n            component: () =&gt; import(&#039;@\/views\/Hello.vue&#039;),\n            children: [\n                {\n                    name: &#039;detail&#039;,\n                    path: &#039;\/detail\/:id\/:title\/:content&#039;, \/\/ \u8def\u5f84\u52a0\u4e0a\u5360\u4f4d\u7b26\n                    component: () =&gt; import(&#039;@\/views\/Detail.vue&#039;)\n                }\n            ]\n        },\n        {\n            name: &#039;about&#039;,\n            path: &#039;\/about&#039;,\n            component: () =&gt; import(&#039;@\/views\/About.vue&#039;)\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<p>Hello.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst list = ref([\n    { id: 1, title: &#039;\u81ea\u6211\u4fee\u517b&#039;, content: &#039;\u5b66\u4f1a\u653e\u5f03&#039; },\n    { id: 2, title: &#039;\u4e3a\u4ec0\u4e48\u5b66\u4e60&#039;, content: &#039;\u4e0d\u5b66\u4e60\u5c31\u4f1a\u88ab\u6dd8\u6c70&#039; },\n    { id: 3, title: &#039;\u5b66\u4e60\u7684\u5173\u952e&#039;, content: &#039;\u7406\u8bba\u548c\u5b9e\u8df5\u7ed3\u5408&#039; }\n])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;sidebar&quot;&gt;\n            &lt;ul&gt;\n                &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;\n                    &lt;RouterLink :to=&quot;{\n                        name: &#039;detail&#039;,\n                        params: {\n                            id: item.id,\n                            title: item.title,\n                            content: item.content\n                        }\n                    }&quot;&gt;\n                        {{ item.title }}\n                    &lt;\/RouterLink&gt;\n                &lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;main&quot;&gt;\n            &lt;RouterView \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.container {\n    display: flex;\n}\n\n.sidebar {\n    flex: 1;\n    padding: 20px;\n}\n\n.main {\n    flex: 3;\n    padding: 20px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"props\"><\/span>props<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Detail.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\ndefineProps([&#039;id&#039;, &#039;title&#039;, &#039;content&#039;])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;ul&gt;\n        &lt;li&gt;ID: {{ id }}&lt;\/li&gt;\n        &lt;li&gt;Title: {{ title }}&lt;\/li&gt;\n        &lt;li&gt;Content: {{ content }}&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"%E6%96%B9%E5%BC%8F%E4%B8%80_props_%E9%80%89%E9%A1%B9\"><\/span>\u65b9\u5f0f\u4e00 props \u9009\u9879<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u53ea\u80fd\u7ed3\u5408 params \u4f20\u53c2<\/p>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;home&#039;,\n            path: &#039;\/home&#039;,\n            component: () =&gt; import(&#039;@\/views\/Home.vue&#039;)\n        },\n        {\n            name: &#039;hello&#039;,\n            path: &#039;\/hello&#039;,\n            component: () =&gt; import(&#039;@\/views\/Hello.vue&#039;),\n            children: [\n                {\n                    name: &#039;detail&#039;,\n                    path: &#039;\/detail\/:id\/:title\/:content&#039;,\n                    component: () =&gt; import(&#039;@\/views\/Detail.vue&#039;),\n                    props: true \/\/ params \u6240\u6709\u53c2\u6570\u4f20\u9012\n                }\n            ]\n        },\n        {\n            name: &#039;about&#039;,\n            path: &#039;\/about&#039;,\n            component: () =&gt; import(&#039;@\/views\/About.vue&#039;)\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"%E6%96%B9%E5%BC%8F%E4%BA%8C_props_%E5%87%BD%E6%95%B0\"><\/span>\u65b9\u5f0f\u4e8c props \u51fd\u6570<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u53ef\u4ee5\u4f7f\u7528 query \u6216 params \u4f20\u53c2\uff0c\u65b9\u5f0f\u4e09\u4e5f\u662f\uff0c\u8fd9\u91cc\u4e3e\u4f8b\u7528 query<\/p>\n<p>Hello.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst list = ref([\n    { id: 1, title: &#039;\u81ea\u6211\u4fee\u517b&#039;, content: &#039;\u5b66\u4f1a\u653e\u5f03&#039; },\n    { id: 2, title: &#039;\u4e3a\u4ec0\u4e48\u5b66\u4e60&#039;, content: &#039;\u4e0d\u5b66\u4e60\u5c31\u4f1a\u88ab\u6dd8\u6c70&#039; },\n    { id: 3, title: &#039;\u5b66\u4e60\u7684\u5173\u952e&#039;, content: &#039;\u7406\u8bba\u548c\u5b9e\u8df5\u7ed3\u5408&#039; }\n])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;sidebar&quot;&gt;\n            &lt;ul&gt;\n                &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;\n                    &lt;RouterLink :to=&quot;{\n                        name: &#039;detail&#039;,\n                        query: {\n                            id: item.id,\n                            title: item.title,\n                            content: item.content\n                        }\n                    }&quot;&gt;\n                        {{ item.title }}\n                    &lt;\/RouterLink&gt;\n                &lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;main&quot;&gt;\n            &lt;RouterView \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.container {\n    display: flex;\n}\n\n.sidebar {\n    flex: 1;\n    padding: 20px;\n}\n\n.main {\n    flex: 3;\n    padding: 20px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>index.ts<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;home&#039;,\n            path: &#039;\/home&#039;,\n            component: () =&gt; import(&#039;@\/views\/Home.vue&#039;)\n        },\n        {\n            name: &#039;hello&#039;,\n            path: &#039;\/hello&#039;,\n            component: () =&gt; import(&#039;@\/views\/Hello.vue&#039;),\n            children: [\n                {\n                    name: &#039;detail&#039;,\n                    path: &#039;\/detail&#039;,\n                    component: () =&gt; import(&#039;@\/views\/Detail.vue&#039;),\n                    props(route) { \/\/ \u51fd\u6570\u4f20\u9012\n                        return route.query\n                    }\n                }\n            ]\n        },\n        {\n            name: &#039;about&#039;,\n            path: &#039;\/about&#039;,\n            component: () =&gt; import(&#039;@\/views\/About.vue&#039;)\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"%E6%96%B9%E5%BC%8F%E4%B8%89_props_%E5%AF%B9%E8%B1%A1\"><\/span>\u65b9\u5f0f\u4e09 props \u5bf9\u8c61<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>index.js<\/p>\n<pre><code class=\"language-js\">import { createRouter, createWebHistory } from &quot;vue-router&quot;;\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            name: &#039;home&#039;,\n            path: &#039;\/home&#039;,\n            component: () =&gt; import(&#039;@\/views\/Home.vue&#039;)\n        },\n        {\n            name: &#039;hello&#039;,\n            path: &#039;\/hello&#039;,\n            component: () =&gt; import(&#039;@\/views\/Hello.vue&#039;),\n            children: [\n                {\n                    name: &#039;detail&#039;,\n                    path: &#039;\/detail&#039;,\n                    component: () =&gt; import(&#039;@\/views\/Detail.vue&#039;),\n                    props: (route) =&gt; route.query \/\/ \u4f20\u9012\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u91cc\u5199\u6210\u7bad\u5934\u8868\u8fbe\u5f0f\u662f\u4e3a\u4e86\u83b7\u53d6 query \u5bf9\u8c61\uff0c\u53ef\u4ee5\u76f4\u63a5\u5199\u4e00\u4e2a\u8981\u4f20\u9012\u7684\u5bf9\u8c61\n                }\n            ]\n        },\n        {\n            name: &#039;about&#039;,\n            path: &#039;\/about&#039;,\n            component: () =&gt; import(&#039;@\/views\/About.vue&#039;)\n        }\n    ]\n})\n\nexport default router<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"%E6%B5%8F%E8%A7%88%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%EF%BC%9Apush_%E5%92%8C_replace_%E6%A8%A1%E5%BC%8F\"><\/span>\u6d4f\u89c8\u5386\u53f2\u8bb0\u5f55\uff1apush \u548c replace \u6a21\u5f0f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u9ed8\u8ba4\u662f push \u6a21\u5f0f\uff0c\u5728\u9875\u9762\u5185\u8df3\u8f6c\u8def\u7531\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u8bb0\u5f55\u6bcf\u4e2a\u8def\u7531\u5730\u5740\uff0c\u53ef\u4ee5\u901a\u8fc7\u5386\u53f2\u8bb0\u5f55\u524d\u8fdb\u540e\u9000\u3002\u5982\u679c\u5728\u6307\u5b9a\u7684\u8def\u7531\u94fe\u63a5\u8bbe\u7f6e replace \u6a21\u5f0f\uff0c\u5219\u5728\u8be5\u8def\u7531\u8df3\u8f6c\u540e\u8986\u76d6\uff0c\u4e0d\u4f1a\u4fdd\u7559\u6bcf\u6b21\u7684\u6d4f\u89c8\u5668\u8def\u7531\u5730\u5740\u3002<br \/>\n\u7ed9\u5bfc\u822a\u6309\u626d\u8bbe\u7f6e replace \u5c5e\u6027\u540e\uff0c\u5728\u70b9\u51fb\u5bfc\u822a\u6309\u626d\u5207\u6362\u540e\u4e0d\u4f1a\u4fdd\u7559\u5386\u53f2\u8bb0\u5f55<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715143783892.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 754px; --smush-placeholder-aspect-ratio: 754\/320;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA\"><\/span>\u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u524d\u9762\u5b9e\u73b0\u8df3\u8f6c\u662f\u5728 template \u4e2d\u5199 RouterLink \u7ec4\u4ef6\uff0c\u4f46\u662f\u8981\u60f3\u5728 script \u4e2d\u901a\u8fc7\u4e00\u5b9a\u7684\u903b\u8f91\u63a7\u5236\u8df3\u8f6c\u5c31\u5f97\u4f7f\u7528\u53e6\u5916\u4e00\u5957\u3002<br \/>\n\u4e0b\u9762\u7684\u4f8b\u5b50\u8fdb\u884c\u91cd\u5199\uff0c\u5c06\u5bfc\u822a\u6309\u626d\u7531 RouterLink \u6362\u6210\u6309\u626d\uff0c\u901a\u8fc7\u70b9\u51fb\u4e8b\u4ef6\u63a7\u5236\u8df3\u8f6c\u5230\u5bf9\u5e94\u9875\u9762\uff0c\u53e6\u5916\u5728 \/home \u9875\u9762\u8bbe\u7f6e\u4e00\u4e2a\u5ef6\u8fdf\u6267\u884c\uff0c2s \u540e\u8df3\u8f6c\u5230 \/hello \u9875\u9762\u3002\u53e6\u5916\u53d6\u6d88 \/hello \u9875\u9762\u7684 RouterLink \u70b9\u51fb\u6807\u9898\u663e\u793a\u8be6\u60c5\uff0c\u6539\u4e3a\u6807\u9898\u524d\u663e\u793a\u6309\u626d\uff0c\u70b9\u51fb\u6309\u626d\u67e5\u770b\u8be6\u60c5\u3002<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { useRouter } from &#039;vue-router&#039;;\n\nlet router = useRouter()\n\nfunction navigateTo(name: string) {\n    router.push({ name: name }) \/\/ push \u6a21\u5f0f\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;!-- \u4f7f\u7528\u6309\u626d\u6765\u5bfc\u822a --&gt;\n    &lt;button @click=&quot;navigateTo(&#039;home&#039;)&quot;&gt;\u9996\u9875&lt;\/button&gt;\n    &lt;button @click=&quot;navigateTo(&#039;hello&#039;)&quot;&gt;\u4f60\u597d&lt;\/button&gt;\n    &lt;button @click=&quot;navigateTo(&#039;about&#039;)&quot;&gt;\u5173\u4e8e&lt;\/button&gt;\n    &lt;div class=&quot;routerView&quot;&gt;\n        &lt;RouterView \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.routerView {\n    border: 1px solid black;\n    margin-top: 10px;\n    padding: 10px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Home.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { onMounted } from &#039;vue&#039;;\nimport { useRouter } from &#039;vue-router&#039;;\n\nlet router = useRouter()\n\n\/\/ 2s \u540e\u8df3\u8f6c\u5230 hello \u9875\u9762\nonMounted(() =&gt; {\n    setTimeout(() =&gt; {\n        router.push(&#039;\/hello&#039;)\n    }, 2000)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;h1&gt;Home&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>Hello.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\nimport { useRouter } from &#039;vue-router&#039;;\n\ninterface ItemType {\n    id: number;\n    title: string;\n    content: string;\n}\n\nconst list = ref&lt;ItemType[]&gt;([\n    { id: 1, title: &#039;\u81ea\u6211\u4fee\u517b&#039;, content: &#039;\u5b66\u4f1a\u653e\u5f03&#039; },\n    { id: 2, title: &#039;\u4e3a\u4ec0\u4e48\u5b66\u4e60&#039;, content: &#039;\u4e0d\u5b66\u4e60\u5c31\u4f1a\u88ab\u6dd8\u6c70&#039; },\n    { id: 3, title: &#039;\u5b66\u4e60\u7684\u5173\u952e&#039;, content: &#039;\u7406\u8bba\u548c\u5b9e\u8df5\u7ed3\u5408&#039; }\n])\n\nlet router = useRouter()\n\nfunction getDetail(item: ItemType) {\n    router.push({\n        name: &#039;detail&#039;,\n        query: {\n            id: item.id,\n            title: item.title,\n            content: item.content\n        }\n    })\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;sidebar&quot;&gt;\n            &lt;ul&gt;\n                &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;\n                    &lt;button @click=&quot;getDetail(item)&quot;&gt;\u70b9\u51fb\u9605\u8bfb\u8be6\u60c5&lt;\/button&gt;\n                    {{ item.title }}\n                &lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;main&quot;&gt;\n            &lt;RouterView \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.container {\n    display: flex;\n}\n\n.sidebar {\n    flex: 1;\n    padding: 20px;\n}\n\n.main {\n    flex: 3;\n    padding: 20px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715147225539.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 333px; --smush-placeholder-aspect-ratio: 333\/256;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715147277091.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 882px; --smush-placeholder-aspect-ratio: 882\/261;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E9%87%8D%E5%AE%9A%E5%90%91\"><\/span>\u91cd\u5b9a\u5411<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u6bd4\u5982\u8bbf\u95ee \/ \u81ea\u52a8\u8df3\u8f6c\u5230 \/home<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715147754718.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 673px; --smush-placeholder-aspect-ratio: 673\/797;\" \/><\/p>\n<h1><span class=\"ez-toc-section\" id=\"%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1\"><\/span>\u7ec4\u4ef6\u901a\u4fe1<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"props_%E7%88%B6%E4%BC%A0%E5%AD%90\"><\/span>props \u7236\u4f20\u5b50<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u6587\u4ef6\u7ed3\u6784<\/p>\n<pre><code class=\"language-bash\">\u2514\u2500src\n    \u2502  App.vue\n    \u2502  main.ts\n    \u2502  \n    \u2514\u2500components\n            Child.vue<\/code><\/pre>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nconst props = defineProps([&#039;testProps1&#039;, &#039;testProps2&#039;])\nconsole.log(props.testProps1) \/\/ js \u4f7f\u7528\u9700\u8981\u901a\u8fc7 defineProps \u8fd4\u56de\u503c\nconsole.log(props.testProps2)\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;!-- template \u4e2d\u4f7f\u7528\u53ef\u4ee5\u76f4\u63a5\u7528 props \u540d\u5b57 --&gt;\n    &lt;p&gt;{{ testProps1 }}&lt;\/p&gt;\n    &lt;p&gt;{{ testProps2 }}&lt;\/p&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport Child from &#039;@\/components\/Child.vue&#039;;\n\nconst myString = &#039;123&#039;\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;!-- \u8c03\u7528\u5b50\u7ec4\u4ef6\u5e76\u4f20\u9012\u6570\u636e --&gt;\n    &lt;!-- \u5982\u679c\u8981\u53d6\u53d8\u91cf\u7684\u503c\uff0c\u5c5e\u6027\u9700\u8981\u52a0\u4e0a\u5192\u53f7 --&gt;\n    &lt;Child testProps1=&quot;\u4f60\u597d&quot; :testProps2=&quot;myString&quot; \/&gt; \n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715260441173.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 247px; --smush-placeholder-aspect-ratio: 247\/159;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/04\/image-1715260932292.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 399px; --smush-placeholder-aspect-ratio: 399\/185;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E4%BA%8B%E4%BB%B6_%E5%AD%90%E4%BC%A0%E7%88%B6\"><\/span>\u4e8b\u4ef6 \u5b50\u4f20\u7236<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%E5%8E%9F%E7%94%9F_DOM_%E4%BA%8B%E4%BB%B6\"><\/span>\u539f\u751f DOM \u4e8b\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nlet status = ref(&#039;&#039;)\n\nfunction handler1() {\n    status.value = &#039;\u6309\u626d 1 \u88ab\u70b9\u51fb&#039;\n}\n\nfunction handler2(event: any) {\n    status.value = &#039;\u6309\u626d 2 \u4e8b\u4ef6\uff0c\u7c7b\u578b\uff1a&#039; + event.type + &#039; \u76ee\u6807\uff1a&#039; + event.target.tagName\n}\n\nfunction handler3(p1: string, p2: string, event: any) {\n    status.value = &#039;\u6309\u626d 3 \u4e8b\u4ef6\uff0c\u7c7b\u578b\uff1a&#039; + event.type + &#039; \u76ee\u6807\uff1a&#039; + event.target.tagName + &#039; *** &#039; + p1 + &#039; &#039; + p2\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;p&gt;{{ status }}&lt;\/p&gt;\n    &lt;button @click=&quot;handler1&quot;&gt;\u6309\u626d 1&lt;\/button&gt;\n    &lt;button @click=&quot;handler2($event)&quot;&gt;\u6309\u626d 2&lt;\/button&gt;\n    &lt;button @click=&quot;handler3(&#039;\u6d4b\u8bd5\u53c2\u65701&#039;, &#039;\u6d4b\u8bd5\u53c2\u65702&#039;, $event)&quot;&gt;\u6309\u626d 3&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715265972279.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 241px; --smush-placeholder-aspect-ratio: 241\/100;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715265982324.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335\/86;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715265996996.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 528px; --smush-placeholder-aspect-ratio: 528\/104;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6\"><\/span>\u81ea\u5b9a\u4e49\u4e8b\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\n\n\/\/ \u5b9a\u4e49\u4e8b\u4ef6\n\/\/ click \u662f\u539f\u751f\u4e8b\u4ef6\uff0c\u53ef\u4ee5\u91cd\u5199\n\/\/ \u8fd4\u56de\u503c\u662f\u4e00\u4e2a\u7bad\u5934\u51fd\u6570\nlet emits = defineEmits([&#039;myEvent1&#039;, &#039;click&#039;])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;!-- \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u65f6\u95f4\u540d\uff0c\u540e\u9762\u7684\u662f\u53c2\u6570\uff0c\u53ef\u4ee5\u4f20\u7ed9\u7236\u7ec4\u4ef6 --&gt;\n    &lt;button @click=&quot;emits(&#039;myEvent1&#039;, &#039;\u81ea\u5b9a\u4e49\u4e8b\u4ef6&#039;, &#039;a1&#039;, &#039;a2&#039;, &#039;a3&#039;)&quot;&gt;\u89e6\u53d1\u81ea\u5b9a\u4e49\u4e8b\u4ef6&lt;\/button&gt;\n    &lt;hr&gt;\n    &lt;button @click=&quot;emits(&#039;click&#039;, &#039;\u91cd\u5199\u70b9\u51fb\u4e8b\u4ef6&#039;, &#039;b1&#039;)&quot;&gt;\u89e6\u53d1\u91cd\u5199\u7684\u70b9\u51fb\u4e8b\u4ef6&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport Child from &#039;.\/components\/Child.vue&#039;;\n\nfunction handler(...args: string[]) {\n    args.forEach((arg: string) =&gt; {\n        console.log(arg)\n    })\n    console.log(&#039;*&#039;.repeat(100))\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;Child @myEvent1=&quot;handler&quot; @click=&quot;handler&quot; \/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715270657229.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 264px; --smush-placeholder-aspect-ratio: 264\/628;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"v-model_%E7%88%B6%E5%AD%90%E4%BA%92%E4%BC%A0\"><\/span>v-model \u7236\u5b50\u4e92\u4f20<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE\"><\/span>\u6536\u96c6\u8868\u5355\u6570\u636e<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst info = ref(null)\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;p&gt;\u8f93\u5165\u7684\u5185\u5bb9\u662f\uff1a{{ info }}&lt;\/p&gt;\n    &lt;hr&gt;\n    &lt;input type=&quot;text&quot; v-model=&quot;info&quot; \/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715272444713.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 221px; --smush-placeholder-aspect-ratio: 221\/96;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC\"><\/span>\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u5728 Vue 3.4 \u7248\u672c\u5f00\u59cb\uff0c\u63d0\u4f9b\u4e86 defineModel \u6765\u5b9e\u73b0\u503c\u4f20\u9012\uff0c\u5e95\u5c42\u7528\u7684\u662f props \u548c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u5728 3.4 \u4ee5\u524d\u7684\u7248\u672c\u662f\u9700\u8981\u81ea\u5df1\u5199<\/p>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\nimport Child1 from &#039;.\/components\/Child1.vue&#039;;\nimport Child2 from &#039;.\/components\/Child2.vue&#039;;\n\nconst value1 = ref(0)\nconst value2 = ref(1)\nconst value3 = ref(1)\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        {{ value1 }}\n        &lt;!-- \u4f1a\u81ea\u52a8\u6dfb\u52a0 update:modelValue \u4e8b\u4ef6 --&gt;\n        &lt;Child1 v-model=&quot;value1&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        {{ value2 }} - {{ value3 }}\n        &lt;!-- \u4f1a\u81ea\u52a8\u6dfb\u52a0 update:value2 \u548c update:value3 \u4e8b\u4ef6 --&gt;\n        &lt;Child2 v-model:value2=&quot;value2&quot; v-model:value3=&quot;value3&quot; \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>Child1.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\n\/\/ \u9ed8\u8ba4 props \u540d\u4e3a modelValue\nconst [ modelValue ]= defineModel({\n    type: Number,\n    default: 0\n})\n\nconst emit = defineEmits([&#039;update:modelValue&#039;]) \/\/ \u5b9a\u4e49\u4e8b\u4ef6\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;button @click=&quot;emit(&#039;update:modelValue&#039;, modelValue + 1)&quot;&gt;\u6309\u626d1&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>Child2.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst [ value2 ]= defineModel(&#039;value2&#039;, {\n    type: Number,\n    default: 0\n})\n\nconst [ value3 ] = defineModel(&#039;value3&#039;, {\n    type: Number,\n    default: 0\n})\n\nconst emit = defineEmits([&#039;update:value2&#039;, &#039;update:value3&#039;])\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;button @click=&quot;emit(&#039;update:value2&#039;, value2 * 2)&quot;&gt;\u6309\u626d2&lt;\/button&gt;\n        &lt;button @click=&quot;emit(&#039;update:value3&#039;, value3 * 3)&quot;&gt;\u6309\u626d3&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715277143059.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 164px; --smush-placeholder-aspect-ratio: 164\/106;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"defineExpose\"><\/span>defineExpose<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"ref_%E5%B1%9E%E6%80%A7\"><\/span>ref \u5c5e\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;\u6211\u662f\u513f\u5b50&lt;\/h1&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { onMounted, ref } from &#039;vue&#039;;\nimport Child from &#039;.\/components\/Child.vue&#039;;\n\nconst child = ref(null)\nconst parent = ref(null)\n\nonMounted(() =&gt; {\n    console.log(child.value)\n    console.log(parent.value)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;h1 ref=&quot;parent&quot;&gt;\u6211\u662f\u7236\u4eb2&lt;\/h1&gt;\n    &lt;Child ref=&quot;child&quot; \/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u5728\u7ec4\u4ef6\u6216\u6807\u7b7e\u4e2d\u52a0\u4e0a ref \u5c5e\u6027\uff0c\u5e76\u58f0\u660e\u4e00\u4e2a ref \u7684\u540c\u540d\u53d8\u91cf\uff0c\u901a\u8fc7\u53d8\u91cf\u53ef\u4ee5\u83b7\u5f97\u7ec4\u4ef6\u6216 DOM \u5143\u7d20<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715348613001.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 280px; --smush-placeholder-aspect-ratio: 280\/421;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E7%88%B6%E7%BB%84%E4%BB%B6%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE\"><\/span>\u7236\u7ec4\u4ef6\u83b7\u53d6\u5b50\u7ec4\u4ef6\u6570\u636e<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst money = ref(0)\n\n\/\/ \u66b4\u9732\ndefineExpose({\n    money\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    \u5b69\u5b50\u4f59\u989d\uff1a{{ money }}\n&lt;\/template&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\nimport Child from &#039;.\/components\/Child.vue&#039;;\n\nconst money = ref(1000000)\nconst child = ref()\n\nfunction giveMoney() {\n    child.value.money += 100 \/\/ \u4fee\u6539\u5b50\u7ec4\u4ef6 money \u503c\n    money.value -= 100\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    \u7236\u4eb2\u4f59\u989d\uff1a{{ money }}\n    &lt;hr&gt;\n    &lt;Child ref=&quot;child&quot; \/&gt;\n    &lt;hr&gt;\n    &lt;button @click=&quot;giveMoney&quot;&gt;\u7ed9\u5b69\u5b50\u94b1&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>\u5728\u7236\u7ec4\u4ef6\u53ef\u4ee5\u83b7\u53d6\u5b50\u7ec4\u4ef6\u53d8\u91cf\uff0c\u4e14\u53ef\u4ee5\u4fee\u6539<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715351073098.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 212px; --smush-placeholder-aspect-ratio: 212\/127;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E5%AD%90%E7%BB%84%E4%BB%B6%E8%8E%B7%E5%8F%96%E7%88%B6%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE\"><\/span>\u5b50\u7ec4\u4ef6\u83b7\u53d6\u7236\u7ec4\u4ef6\u6570\u636e<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\n\nconst money = ref(0)\n\n\/\/ \u901a\u8fc7 $parent \u8bbf\u95ee\u7236\u7ec4\u4ef6\nfunction receiveMoney($parent: any) {\n    $parent.money -= 100\n    money.value += 100\n}\n\n&lt;\/script&gt;\n\n&lt;template&gt;\n    \u5b69\u5b50\u4f59\u989d\uff1a{{ money }}\n    &lt;hr&gt;\n    &lt;button @click=&quot;receiveMoney($parent)&quot;&gt;\u6536\u5230\u94b1&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;;\nimport Child from &#039;.\/components\/Child.vue&#039;;\n\nconst money = ref(1000000)\n\n\/\/ \u66b4\u9732\ndefineExpose({\n    money\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    \u7236\u4eb2\u4f59\u989d\uff1a{{ money }}\n    &lt;hr&gt;\n    &lt;Child ref=&quot;child&quot; \/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"provide_%E2%80%93_inject\"><\/span>provide &#8211; inject<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u4f7f\u7528 provide \u548c inject \u53ef\u4ee5\u5728\u7236\u5b50\u4ee5\u53ca\u9694\u4ee3\u7ec4\u4ef6\u4e4b\u95f4\u4f20\u9012\u6570\u636e<\/p>\n<p>\u4e0b\u9762\u7684\u4f8b\u5b50\uff0c\u201c\u7237\u7237\u201d\u6709\u4e00\u8f86\u8f66\uff0c\u201c\u5b59\u5b50\u201d\u53ef\u4ee5\u83b7\u53d6\u201c\u7237\u7237\u201d\u7684\u8f66\u4ee5\u53ca\u4fee\u6539<\/p>\n<p>Me.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { inject, type Ref } from &#039;vue&#039;;\n\n\/\/ \u6ce8\u5165\nconst grandfatherCar = inject&lt;any&gt;(&#039;grandfatherCar&#039;)\n\nfunction changeGrandfatherCar() {\n    grandfatherCar.value = &#039;\u5b9d\u9a6c&#039;\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;me&quot;&gt;\n        \u6211\u770b\u5230\u7237\u7237\u7684\u6c7d\u8f66\u662f {{ grandfatherCar }}\n        &lt;button @click=&quot;changeGrandfatherCar&quot;&gt;\u6539\u53d8\u7237\u7237\u7684\u6c7d\u8f66&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.me {\n    width: 190px;\n    height: 100px;\n    background-color: gray;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Father.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport Me from &#039;.\/Me.vue&#039;\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;father&quot;&gt;\n        \u7238\u7238\n        &lt;Me \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.father {\n    width: 200px;\n    height: 200px;\n    background-color: orchid;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;script setup lang=&quot;ts&quot;&gt;\nimport { provide, ref } from &#039;vue&#039;;\nimport Father from &#039;.\/components\/Father.vue&#039;;\n\nconst car = ref(&#039;\u5954\u9a70&#039;)\n\n\/\/ \u63d0\u4f9b\nprovide(&#039;grandfatherCar&#039;, car)\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div class=&quot;grandfather&quot;&gt;\n        \u7237\u7237\u7684\u6c7d\u8f66\u662f {{ car }}\n        &lt;Father \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.grandfather {\n    width: 300px;\n    height: 300px;\n    background-color: pink;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715354884592.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 361px; --smush-placeholder-aspect-ratio: 361\/321;\" \/><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715354902013.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 365px; --smush-placeholder-aspect-ratio: 365\/313;\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E6%8F%92%E6%A7%BD\"><\/span>\u63d2\u69fd<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD_%E7%88%B6%E4%BC%A0%E5%AD%90\"><\/span>\u9ed8\u8ba4\u63d2\u69fd \u7236\u4f20\u5b50<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;child&quot;&gt;\n        \u6211\u662f\u5b50\u7ec4\u4ef6\n        &lt;br&gt;\n        &lt;!-- \u7528 slot \u63a5\u53d7\u7236\u7ec4\u4ef6\u7ed9\u8fc7\u6765\u7684\u5185\u5bb9 --&gt;\n        \u7236\u7ec4\u4ef6\u4f20\u7ed9\u6211\u7684\u5185\u5bb9\uff1a&lt;slot&gt;&lt;\/slot&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.child {\n    width: 290px;\n    height: 200px;\n    background-color: pink;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;main&quot;&gt;\n        \u6211\u662f\u7236\u7ec4\u4ef6\n        &lt;!-- \u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684\u5185\u5bb9 --&gt;\n        &lt;Child&gt;Hello world&lt;\/Child&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup langg=&quot;ts&quot;&gt;\n    import Child from &#039;.\/components\/Child.vue&#039;;\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n    .main {\n        width: 300px;\n        height: 250px;\n        background-color: aqua;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715388392412.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 329px; --smush-placeholder-aspect-ratio: 329\/270;\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD_%E7%88%B6%E4%BC%A0%E5%AD%90\"><\/span>\u5177\u540d\u63d2\u69fd \u7236\u4f20\u5b50<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;child&quot;&gt;\n        \u6211\u662f\u5b50\u7ec4\u4ef6\n        &lt;br&gt;\n        &lt;div class=&quot;slot&quot;&gt;\n            &lt;!-- \u591a\u4e2a\u63d2\u69fd\u53ef\u4ee5\u7528 name \u6dfb\u52a0\u540d\u5b57 --&gt;\n            &lt;slot name=&quot;testSlot1&quot;&gt;&lt;\/slot&gt;\n            &lt;br&gt;\n            &lt;slot name=&quot;testSlot2&quot;&gt;&lt;\/slot&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;style scoped&gt;\n.child {\n    width: 290px;\n    height: 200px;\n    background-color: pink;\n}\n\n.slot {\n    width: 280px;\n    height: 150px;\n    background-color: skyblue;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;main&quot;&gt;\n        \u6211\u662f\u7236\u7ec4\u4ef6\n        &lt;Child&gt;\n            &lt;!-- \u901a\u8fc7\u4e95\u53f7\u52a0\u540d\u5b57\u4f20\u7ed9\u6307\u5b9a\u63d2\u69fd --&gt;\n            &lt;template #testSlot1&gt;\n                \u63d2\u5165\u7b2c\u4e00\u4e2a\u63d2\u69fd\u7684\u5185\u5bb9\n            &lt;\/template&gt;\n            &lt;template #testSlot2&gt;\n                \u63d2\u5165\u7b2c\u4e8c\u4e2a\u63d2\u69fd\u7684\u5185\u5bb9\n            &lt;\/template&gt;\n        &lt;\/Child&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup langg=&quot;ts&quot;&gt;\n    import Child from &#039;.\/components\/Child.vue&#039;;\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n    .main {\n        width: 300px;\n        height: 250px;\n        background-color: aqua;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD_%E5%AD%90%E4%BC%A0%E7%88%B6\"><\/span>\u4f5c\u7528\u57df\u63d2\u69fd \u5b50\u4f20\u7236<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u76f4\u89c2\u4f53\u73b0\u662f\u5b50\u4f20\u7ed9\u4e86\u7236\uff0c\u5b9e\u9645\u662f\u7236\u5b9a\u4e49\u4e00\u5957\u683c\u5f0f\uff0c\u5e76\u628a\u8fd9\u5957\u683c\u5f0f\u4ea4\u7ed9\u5b50\u7ec4\u4ef6\u7528\u4e8e\u5448\u73b0\u6570\u636e<\/p>\n<p>Child.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div class=&quot;child&quot;&gt;\n        \u6211\u662f\u5b50\u7ec4\u4ef6\n        &lt;br&gt;\n        &lt;div class=&quot;slot&quot;&gt;\n            \u7236\u7ec4\u4ef6\u7ec4\u7ec7\u683c\u5f0f\uff0c\u5b50\u7ec4\u4ef6\u63d0\u4f9b\u6570\u636e\n            &lt;ul&gt;\n                &lt;li v-for=&quot;(item, index) in chidlData&quot; :key=&quot;item.id&quot;&gt;\n                    &lt;!-- \u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e --&gt;\n                    &lt;slot :row=&quot;item&quot;&gt;&lt;\/slot&gt;\n                &lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst chidlData = ref([\n    {\n        id: 1,\n        name: &#039;\u5f20\u4e09&#039;,\n        age: 18\n    },\n    {\n        id: 2,\n        name: &#039;\u674e\u56db&#039;,\n        age: 20\n    },\n    {\n        id: 3,\n        name: &#039;\u738b\u4e94&#039;,\n        age: 22\n    }\n])\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n.child {\n    width: 590px;\n    height: 200px;\n    background-color: pink;\n}\n\n.slot {\n    width: 580px;\n    height: 150px;\n    background-color: skyblue;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<p>App.vue<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;div&gt;\n        &lt;Child&gt;\n            &lt;!-- \u63a5\u53d7\u6765\u81ea\u5b50\u7ec4\u4ef6\u7684\u6570\u636e --&gt;\n            &lt;template v-slot=&quot;dataFromChild&quot;&gt;\n                id: {{ dataFromChild.row.id }} - name: {{ dataFromChild.row.name }} - age: {{ dataFromChild.row.age }}\n            &lt;\/template&gt;\n        &lt;\/Child&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup langg=&quot;ts&quot;&gt;\nimport Child from &#039;.\/components\/Child.vue&#039;;\n&lt;\/script&gt;<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2024\/05\/image-1715401762410.png\" alt=\"file\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 621px; --smush-placeholder-aspect-ratio: 621\/227;\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 2024.4.24 \u6708\u4e2d\u7684\u65f6\u5019\u5927\u6982\u770b\u4e86\u4e0b Spring Boot\uff0c\u611f\u89c9\u5e72\u4e0d\u4e86\u5565\uff0c\u63a5\u7740\u8fc7\u4e86\u4e0b Node.j [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[1,579],"tags":[],"class_list":["post-15092","post","type-post","status-publish","format-standard","hentry","category-all","category-vue3"],"modified_by":"IYATT-yx","_links":{"self":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts\/15092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15092"}],"version-history":[{"count":0,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts\/15092\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}