Vue 3.0 beta\u53d1\u5e03\u4e86\u3002\u3002<\/p>\n
\u53ef\u4ee5\u4f7f\u7528beta\u7684\u6d4b\u8bd5\u9875\u9762<\/p>\n
vue-next-webpack-preview<\/a><\/p>\n \n Minimal webpack setup for Vue 3 (beta)\n<\/p><\/blockquote>\n This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.<\/p>\n Also note that if you are using VSCode, Vetur isn’t updated to take advantage of Vue 3’s typing yet so intellisense in Vue files may not be fully functional (especially in templates).<\/p>\n \u610f\u601d\u5c31\u662f\u8fd9\u4e2a\u9875\u9762\u662f\u7528\u4e8eVue 3.0 beta\u6d4b\u8bd5\u7528\u7684\u3002<\/p>\n \u4e5f\u53ef\u4ee5\u4f7f\u7528Vue Cli<\/a>\u5de5\u5177\u914d\u5408vue-cli-plugin-vue-next<\/a>\u4f7f\u7528:<\/p>\n \u7136\u540e\u6dfb\u52a0vue-cli-plugin-vue-next<\/em>\u63d2\u4ef6\uff1a<\/p>\n \u8fd9\u4e2a\u63d2\u4ef6\u5b89\u88c5\u4e86Vue 3.0 beta\u76f8\u5173\u4f9d\u8d56\u3002<\/p>\n API<\/strong>\u3001\u5c5e\u6027\u8ba1\u7b97<\/strong>\u3001\u5c5e\u6027\u76d1\u542c<\/strong>\u3001Router<\/strong>\u548c\u72b6\u6001\u7ba1\u7406<\/strong>\u90fd\u53c2\u8003composition-api<\/a>\uff0c\u4f7f\u7528\u548cReact Hooks<\/a>\u6709\u70b9\u50cf\uff1a<\/p>\n \u8868\u73b0\u4e3a\uff1a\u591a\u5c42\u7ea7DOM\uff0c\u6dfb\u52a0\u4efb\u4f55\u5c5e\u6027\u7f16\u8bd1\u5931\u8d25\uff1a<\/p>\n \u6682\u65f6\u4f7f\u7528v-html<\/em>\u89e3\u51b3\u3002<\/p>\n \u8868\u73b0\u4e3a\uff1a\u5f53\u53d8\u91cf\u8f83\u591a\u65f6\uff0c\u5f53\u9875\u9762\u8f83\u957f\u6216\u8f83\u5927\u65f6\uff0c\u9875\u9762\u6e32\u67d3\u4f1a\u6709\u8f83\u957f\u65f6\u95f4\u5c5e\u6027\u4f9d\u6b21\u66f4\u6539\uff0c\u5bfc\u81f4\u9875\u9762\u95ea\u70c1\u591a\u6b21\uff0c\u5e94\u8be5\u662f\u6027\u80fd\u6709\u95ee\u9898\u3002<\/p>\n \u8fd9\u4e2a\u5f88\u96be\u78b0\u5230\uff0c\u4f46\u7ecf\u8fc7\u6d4b\u8bd5\uff0c\u8868\u73b0\u4e3a\uff1a<\/p>\n \u4e0e\u5176\u4ed6\u63d2\u4ef6\u96c6\u6210\u540e\uff0c\u5b58\u5728\u5185\u5b58\u6cc4\u9732\u7684\u60c5\u51b5\u3002<\/p>\n \u8fd9\u4e2a\u5c31\u7531Vue\u5f00\u53d1\u8005\u6162\u6162\u586b\u5751\u5427\uff0c\u4f30\u8ba12021\u5e74\u524d\u4e0d\u53ef\u80fd\u628a\u6240\u6709\u95ee\u9898\u90fd\u4fee\u590d\uff0c\u8fd9\u4e4b\u524d\u6700\u597d\u4e0d\u8981\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\uff0c\u5bf9\u4e8eReact\u5f00\u53d1\u8005\uff0c\u7ec4\u5185\u5176\u4ed6\u4eba\u5b9e\u5728\u8ddf\u4e0d\u4e0a\u624d\u5728\u4e2d\u5927\u578b\u9879\u76ee\u4e2d\u4f7f\u7528Vue\u3002<\/p>\n code enjoy!\ud83e\udd29\ud83e\udd29\ud83e\udd29<\/p>\n \u4f5c\u8005\uff1aindeex<\/p>\n \u94fe\u63a5\uff1ahttps:\/\/indeex.cc<\/a><\/p>\n \u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n Vue 3.0 beta\u53d1\u5e03\u4e86\u3002\u3002 \u73af\u5883\u51c6\u5907 \u53ef\u4ee5\u4f7f\u7528beta\u7684\u6d4b\u8bd5\u9875\u9762 \u6d4b\u8bd5\u9875\u9762 vue-nextRead More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/183"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/183\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Vue Cli<\/h4>\n
npm install -g @vue\/cli\n\/\/ OR\nyarn global add @vue\/cli\n<\/code><\/pre>\nvue-cli-plugin-vue-next<\/h4>\n
vue add vue-next\n<\/code><\/pre>\n\u57fa\u672c\u4f7f\u7528<\/h3>\n
\/\/DOM....\n\/\/ <div>{{isIosDevice}}<\/div>\n\/\/ <div v-for=\"(item, index) in list\" :key=\"index\">{{item}}<\/div>\n\n\/\/script\nexport default {\n name: \"Test\",\n props: {},\n setup() {\n import { ref, getCurrentInstance } from \"vue\";\n\n \/\/...\n\n let isIosDevice = ref(false);\n let data = ref({});\n let list = ref([]);\n let state = ref({isIosDevice: false, data: {}, list: []});\n\n const { ctx } = getCurrentInstance();\n \/\/ console.log(ctx.$router);\n\n const handlerTouch = (e) => {\n \/\/do something...\n }\n\n const getServerData = (data) => {\n \/\/get server data...\n data.value = data;\n state.value.data = data;\n }\n\n return {\n isIosDevice,\n data,\n list,\n state,\n handlerTouch,\n getServerData\n }\n }\n}\n\n\/\/style scoped & global...\n<\/code><\/pre>\n\u95ee\u9898<\/h3>\n
Object\u5c5e\u6027\u7f16\u8bd1\u5931\u8d25<\/h4>\n
<div class=\"container\">\n <div class=\"level1\">\n <div class=\"level11\">\n <div class=\"level111\">\n <div class=\"level111\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"level2\">\n <div class=\"level22\">\n <div class=\"level222\">\n <div class=\"level2222\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/code><\/pre>\n\u6e32\u67d3\u95ea\u70c1<\/h4>\n
\u5185\u5b58\u6cc4\u9732<\/h4>\n
\n","protected":false},"excerpt":{"rendered":"