{"id":3074,"date":"2020-09-22T15:56:41","date_gmt":"2020-09-22T07:56:41","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3074"},"modified":"2020-09-24T16:27:19","modified_gmt":"2020-09-24T08:27:19","slug":"vue3-0%e5%85%a8%e5%ae%b6%e6%a1%b6%e6%9c%80%e5%85%a8%e5%85%a5%e9%97%a8%e6%8c%87%e5%8d%97-%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba-14","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3074","title":{"rendered":"Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211; \u5feb\u901f\u642d\u5efa (1\/4)"},"content":{"rendered":"<h3>\u672c\u7cfb\u5217\u6587\u7ae0\u76ee\u5f55<\/h3>\n<ul>\n<li><a href=\"https:\/\/ai.zhousir.top\/archives\/3074\">Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211; \u5feb\u901f\u642d\u5efa (1\/4)<\/a><\/li>\n<li><a href=\"https:\/\/ai.zhousir.top\/archives\/3082\">Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211; vue3.0\u65b0\u7279\u6027 (2\/4)<\/a><\/li>\n<li><a href=\"https:\/\/ai.zhousir.top\/archives\/3086\">Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211; vue-router@4.x\u548cvuex@4.x (3\/4)<\/a><\/li>\n<li><a href=\"https:\/\/juejin.im\/post\/6867123749565497358\">Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211;<\/a> <a href=\"https:\/\/juejin.im\/post\/6867123749565497358\">3.x\u8ddf2.x\u7684\u5176\u4ed6\u5dee\u5f02<\/a> <a href=\"https:\/\/juejin.im\/post\/6867123749565497358\">(4\/4)<\/a><\/li>\n<\/ul>\n<h2>vue3.0\u516d\u5927\u4eae\u70b9<\/h2>\n<ul>\n<li><strong>Performance<\/strong>\uff1a\u901a\u8fc7<code>Proxy<\/code>\u5b9e\u73b0\u53cc\u5411\u54cd\u5e94\u5f0f\u7ed1\u5b9a\uff0c\u76f8\u6bd4<code>defineProperty<\/code>\u7684\u904d\u5386\u5c5e\u6027\u7684\u65b9\u5f0f\u6548\u7387\u66f4\u9ad8\uff0c\u6027\u80fd\u66f4\u597d\uff0c\u53e6\u5916<code>Virtual DOM<\/code>\u66f4\u65b0\u53eadiff\u52a8\u6001\u90e8\u5206\u3001\u4e8b\u4ef6\u7f13\u5b58\u7b49\uff0c\u4e5f\u5e26\u6765\u4e86\u6027\u80fd\u4e0a\u7684\u63d0\u5347<\/li>\n<li><strong>Tree-Shaking Support<\/strong>\uff1a\u76f8\u6bd42.x\u5bfc\u5165\u6574\u4e2aVue\u5bf9\u8c61\uff0c3.x\u652f\u6301\u6309\u9700\u5bfc\u5165\uff0c\u53ea\u6253\u5305\u9700\u8981\u7684\u4ee3\u7801<\/li>\n<li><strong>Composition API<\/strong>\uff1a\u7ec4\u5408\u5f0fAPI\uff0c\u9762\u5411\u51fd\u6570\u7f16\u7a0b<\/li>\n<li><strong>Fragment\u3001Teleport\u3001Suspense<\/strong>\uff1a\u201c\u788e\u7247\u201d\uff0c<code>Teleport<\/code>\u5373Protal\u4f20\u9001\u95e8\uff0c\u201c\u60ac\u5ff5\u201d\uff0c\u53c2\u8003\u4e86React\u7684\u8bbe\u8ba1<\/li>\n<li><strong>Better Typescript support<\/strong>\uff1a2.x\u8bbe\u8ba1\u4e4b\u521d\u6ca1\u6709\u8003\u8651\u5230\u7c7b\u578b\u63a8\u5bfc\uff0c\u5bfc\u81f4\u9002\u914dts\u6bd4\u8f83\u56f0\u96be\uff0c3.x\u79fb\u9664\u4e86this\u5bf9\u8c61\uff0c\u5229\u7528\u4e86\u5929\u7136\u5bf9\u7c7b\u578b\u53cb\u597d\u7684\u666e\u901a\u53d8\u91cf\u4e0e\u51fd\u6570\uff0c\u5bf9TypeScript\u652f\u6301\u66f4\u597d<\/li>\n<li><strong>Custom Render API<\/strong>\uff1a\u63d0\u4f9b\u4e86\u81ea\u5b9a\u4e49\u6e32\u67d3API<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>\u76ee\u524dvue3.0\u5df2\u7ecf\u8fdb\u5165\u6700\u7ec8\u6d4b\u8bd5\u7248Release Candidate\u9636\u6bb5\uff0c\u76f8\u4fe1\u6b63\u5f0f\u7248\u5f88\u5feb\u5c31\u53ef\u4ee5\u548c\u5927\u5bb6\u89c1\u9762\u3002<\/p>\n<p>RC\u9636\u6bb5\u610f\u5473\u7740API\u5df2\u7ecf\u6210\u719f\u7a33\u5b9a\uff0c\u8fd9\u4e2a\u9636\u6bb5\u53ea\u662f\u6539\u6539bug\uff0c\u6ca1\u6709\u5927\u95ee\u9898\u7684\u8bdd\u4e0d\u4f1a\u6709\u529f\u80fd\u53d8\u52a8\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155241.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3075\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155241.png\" alt=\"20200924155241\" width=\"787\" height=\"342\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>vue3.0\u4e3a\u4e86\u517c\u987e2.x\u7684\u5347\u7ea7\uff0c\u5c06\u652f\u63012.x\u7684\u5927\u90e8\u5206\u8bed\u6cd5\uff0c\u5305\u62ec\u73b0\u5728\u7684<code>data<\/code>\u3001<code>methods<\/code>\u3001<code>computed<\/code>\u3001<code>watch<\/code>\u3001<code>hooks<\/code>\u7b49\uff0c\u4f46\u5e76\u4e0d\u662f\u5168\u90e8\u517c\u5bb9\uff0c\u53e6\u5916\u8fd8\u5305\u542b\u4e00\u4e9b\u5176\u4ed6\u4fee\u6539\uff0c\u9700\u8981\u624b\u52a8\u4fee\u6539\u652f\u6301\uff0c\u6240\u4ee53.0\u5e76\u4e0d\u662f\u65e0\u7f1d\u5bf9\u63a52.x\uff0c\u53ea\u662f\u517c\u5bb9\u4e86\u5927\u90e8\u5206\uff0c\u51cf\u5c11\u5347\u7ea7\u6210\u672c\u3002<\/p>\n<p><strong>\u4ee5\u4e0b\u662f\u672c\u6587\u4f7f\u7528\u7684\u7248\u672c<\/strong><\/p>\n<pre><code>\"@vue\/cli\": \"^4.4.6\"\r\n\"vue\": \"^3.0.0-rc.9\"\r\n\"vue-router\": \"^4.0.0-beta.7\"\r\n\"vuex\": \"^4.0.0-beta.4\"\r\n\r\n<\/code><\/pre>\n<h2>\u4e00\u3001\u5feb\u901f\u642d\u5efavue3.0\u9879\u76ee<\/h2>\n<p>\u7ecf\u6398\u91d1\u7528\u6237 @Web\u9ed8\u9ed8 \u63d0\u9192\uff0c<a href=\"mailto:vue-cli@4.5.4\">vue-cli@4.5.4<\/a>\u5df2\u7ecf\u652f\u6301\u76f4\u63a5\u521b\u5efavue3.x\u9879\u76ee\u4e86\uff0c\u66f4\u65b0\u4e00\u4e0b\u6587\u6863\u3002<\/p>\n<p>\u7279\u610f\u53bbvue-cli\u7684github(<a href=\"https:\/\/github.com\/vuejs\/vue-cli\">github.com\/vuejs\/vue-c\u2026<\/a>)\u770b\u4e86\u4e0b\u53d1\u5e03\u8bb0\u5f55\uff0c\u53d1\u73b04.5.0\u5df2\u7ecf\u5f00\u59cb\u652f\u6301\u521b\u5efavue3.x\u9879\u76ee\u4e86\uff0c\u5e76\u4e14\u5df2\u7ecf\u652f\u6301TypeScript\u4e86\uff0c\u4f46\u662f\u4e3a\u4e86\u907f\u514d\u95ee\u9898\uff0c\u8fd8\u662f\u76f4\u63a5\u5347\u7ea7\u5230\u6700\u65b0\u7248\uff0c\u622a\u81f32020-09-05\u6700\u65b0\u7248\u672c\u662f4.5.4\u3002<\/p>\n<h3>1\u3001\u5b89\u88c5vue cli<\/h3>\n<pre><code>npm install -g @vue\/cli\r\n\r\n<\/code><\/pre>\n<p>\u4e4b\u524d\u5df2\u7ecf\u5b89\u88c5\u8fc7vue-cli\u7684\u8bdd\uff0c\u53ef\u4ee5\u5347\u7ea7\u5230\u6700\u65b0\u7248<\/p>\n<pre><code>npm update -g @vue\/cli \/\/ \u5347\u7ea7vue-cli\u5230\u6700\u65b0\u7248\r\nvue -V \/\/ \u67e5\u770bvue-cli\u7248\u672c\r\n\r\n<\/code><\/pre>\n<h3>2\u3001\u521b\u5efavue3.0\u9879\u76ee<\/h3>\n<pre><code>vue create vue3-test\r\n\u590d\u5236\u4ee3\u7801\r\n<\/code><\/pre>\n<p>\u9009\u62e9\u9884\u8bbe\u914d\u7f6e\uff0c\u8fd9\u91cc\u6211\u4eec\u9009\u62e9\u4eba\u5de5\u9009\u62e9\uff08Manually select features\uff09<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155312.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3076\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155312.png\" alt=\"20200924155312\" width=\"734\" height=\"243\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u9009\u62e9\u529f\u80fd\u914d\u7f6e\uff0c\u6839\u636e\u81ea\u5df1\u9700\u8981\u9009\u62e9\uff0c\u4e0d\u719f\u6089TypeScript\u7684\u540c\u5b66\u53ef\u4ee5\u4e0d\u9009TypeScript\uff0cUnit Testing\u4e5f\u53ef\u6839\u636e\u9700\u6c42\u9009\u62e9<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155326.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3077\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155326.png\" alt=\"20200924155326\" width=\"723\" height=\"364\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u4e0b\u4e00\u6b65\uff0c\u9009\u62e9 3.x (Preview)<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155341.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3078\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155341.png\" alt=\"20200924155341\" width=\"791\" height=\"114\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u4e0b\u9762\u8fd9\u4e9b\u81ea\u5df1\u6839\u636e\u9700\u6c42\u9009\u62e9\u5373\u53ef\uff0c\u8fd9\u91cc\u4e0d\u518d\u4ecb\u7ecd<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155359.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3079\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/09\/20200924155359.png\" alt=\"20200924155359\" width=\"793\" height=\"224\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u53ea\u97002\u6b65\uff0c\u5c31\u628avue3.x\u9879\u76ee\u642d\u5efa\u8d77\u6765\u4e86\uff0c\u4e0b\u9762\u5f00\u59cb\u770b\u770bvue3.x\u600e\u4e48\u4f7f\u7528\uff0c2.x\u600e\u4e48\u5347\u7ea7\u3002<\/p>\n<p>\u4f5c\u8005\uff1aj2ime<br \/>\n\u94fe\u63a5\uff1a<a class=\"url\" href=\"https:\/\/juejin.im\/post\/6867114456762679309\" target=\"_blank\">https:\/\/juejin.im\/post\/6867114456762679309<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u7cfb\u5217\u6587\u7ae0\u76ee\u5f55 Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165\u95e8\u6307\u5357 &#8211; \u5feb\u901f\u642d\u5efa (1\/4) Vue3.0\u5168\u5bb6\u6876\u6700\u5168\u5165 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3074"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3074"}],"version-history":[{"count":4,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3074\/revisions"}],"predecessor-version":[{"id":3089,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3074\/revisions\/3089"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}