{"id":633,"date":"2024-08-03T19:20:46","date_gmt":"2024-08-03T11:20:46","guid":{"rendered":"https:\/\/fugary.com\/?p=633"},"modified":"2024-08-03T19:20:46","modified_gmt":"2024-08-03T11:20:46","slug":"vue3%e7%bb%84%e4%bb%b6%e5%90%8d%e7%a7%b0%e9%87%8d%e5%ae%9a%e4%b9%89","status":"publish","type":"post","link":"https:\/\/fugary.com\/?p=633","title":{"rendered":"Vue3\u7ec4\u4ef6\u540d\u79f0\u91cd\u5b9a\u4e49"},"content":{"rendered":"

Vue2<\/code>\u5347\u7ea7Vue3<\/code>\u4e4b\u540e\uff0c\u53ef\u80fd\u4f1a\u53d1\u73b0\u4e00\u4e2a\u95ee\u9898\uff0c\u4ee5\u524dVue2<\/code>\u4e2d\u7ecf\u5e38\u4f7f\u7528\u7684\u7ec4\u4ef6\u540d\u79f0\u4e0d\u89c1\u4e86\uff0c\u5176\u5b9eVue3<\/code>\u9ed8\u8ba4\u7528\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u7ec4\u4ef6\u540d\uff0c\u4e5f\u662f\u5c31\u662f\u8bf4\uff1a<\/p>\n

MyComp.vue<\/code>\u6587\u4ef6\u7ec4\u4ef6\u7684\u540d\u5b57\u5c31\u662fMyComp<\/code>\uff0c\u5982\u4f55\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u540d\u79f0\u5462\uff1f<\/p>\n

\u5b9a\u4e49\u7ec4\u4ef6\u540d<\/h3>\n

Vue3<\/code>\u4e5f\u53ef\u4ee5\u652f\u6301\u7c7b\u4f3c\u9009\u9879\u5f0fAPI\u90a3\u6837\u7684\u683c\u5f0f\uff0c\u53ef\u4ee5\u548c\u4ee5\u524d\u4e00\u6837\u5b9a\u4e49\u7ec4\u4ef6\u540d\uff0c\u4e5f\u53ef\u4ee5\u7528\u7ec4\u5408\u5f0f\u8bed\u6cd5\u5b9a\u4e49<\/p>\n

setup\u51fd\u6570<\/h4>\n

\u76f4\u63a5\u7528name<\/code>\u5c5e\u6027\u6765\u5b9a\u4e49\u7ec4\u4ef6\u540d\u79f0<\/p>\n

<script>\nimport { ref } from 'vue'\nexport default {\n  name: 'MyCompName',\n  setup() {\n    const count = ref(0)\n    return { count }\n  }\n}\n<\/script><\/code><\/pre>\n
setup\u8bed\u6cd5\u7cd6<\/h4>\n
setup<\/code>\u8bed\u6cd5\u7cd6\u6a21\u5f0f\u4e0b\uff0c\u53ef\u4ee5\u7528defineOptions<\/code>\u6765\u5b9a\u4e49\u7ec4\u4ef6\u540d\u79f0<\/p>\n
<script setup>\n   defineOptions({\n    name:'MyCompName1'\n   })\n<\/script><\/code><\/pre>\n
\u52a8\u6001\u5b9a\u4e49\u7ec4\u4ef6\u540d<\/h3>\n
\u65e0\u8bba\u600e\u4e48\u5b9a\u4e49\u7ec4\u4ef6\u540d\u79f0\uff0c\u4e00\u4e2a\u7ec4\u4ef6\u53ea\u6709\u4e00\u4e2a\u540d\u79f0\uff0c\u6709\u65f6\u5019\u6211\u4eec\u53ef\u80fd\u9700\u8981\u5728\u4e0d\u540c\u7684\u4f7f\u7528\u573a\u666f\u4f7f\u7528\u540c\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u4f46\u662f\u8981\u4f7f\u7528\u4e0d\u540c\u7684\u540d\u5b57\uff0c\u901a\u5e38\u6211\u4eec\u7684\u505a\u6cd5\u662f\u65b0\u5efa\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\uff0c\u628a\u7ec4\u4ef6\u5305\u4e00\u5c42\uff0c\u8fd9\u6837\u65b0\u7684\u7ec4\u4ef6\u5c31\u662f\u65b0\u7684\u540d\u79f0\u4e86\u3002<\/p>\n
\u5c5e\u6027\u4f1a\u81ea\u52a8\u201c\u900f\u4f20\u201d\u5230\u6839\u7ec4\u4ef6\u4e0a\uff0c\u4e0d\u4f1a\u5f71\u54cdprops<\/code>\u4f20\u9012<\/strong><\/p>\n
\u7ec4\u4ef6\u5305\u88c5<\/h4>\n
<script setup>\n   import MyComp from '@\/views\/MyComp.vue'\n   \/\/ \u53ef\u4ee5\u4e0d\u5b9a\u4e49\uff0c\u6587\u4ef6\u540d\u5c31\u662f\u65b0\u7ec4\u4ef6\u540d\n   defineOptions({\n    name:'MyCompNewName'\n   })\n<\/script>\n<template>\n    <MyComp \/>\n<\/template><\/code><\/pre>\n
keepalive\u7ec4\u4ef6\u7f13\u5b58<\/h4>\n
\u5728\u5e73\u65f6\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u53ef\u80fd\u4f1a\u7528keepalive<\/code>\u7ec4\u4ef6\u6765\u7f13\u5b58\u8def\u7531\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u9700\u8981\u91cd\u7528\u7684\u9875\u9762\u90fd\u5305\u6210\u65b0\u7ec4\u4ef6\u4e0d\u592a\u73b0\u5b9e\uff0c\u56e0\u6b64\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u52a8\u6001\u7684\u65b9\u5f0f\u6765\u521b\u5efa\u65b0\u7ec4\u4ef6\uff0c\u5e76\u4f7f\u7528\u65b0\u7684\u540d\u79f0\uff1a<\/p>\n
export function createNewComponent (name, component) {\n  return defineComponent({\n    name,\n    setup () {\n      const oldComponent = isFunction(component) ? defineAsyncComponent(component) : component\n      return () => h(oldComponent)\n    }\n  })\n}<\/code><\/pre>\n
\u4f7f\u7528\u65b9\u5f0f\u5982\u4e0b\uff0c\u53ef\u4ee5\u5b9a\u4e49\u51fa\u65b0\u7684\u7ec4\u4ef6\uff0c\u5e76\u4f7f\u7528\u65b0\u7684\u540d\u5b57\uff1a<\/p>\n
\/\/ \u5728\u8def\u7531\u914d\u7f6e\u4e2d\nexport default [{\n    path: 'path1',\n    name: 'MyCompName1',\n    component: createNewComponent('MyCompName1', () => import('@\/views\/MyComp.vue'))\n}, {\n    path: 'path2',\n    name: 'MyCompName2',\n    component: createNewComponent('MyCompName2', () => import('@\/views\/MyComp.vue'))\n}]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Vue2\u5347\u7ea7Vue3\u4e4b\u540e\uff0c\u53ef\u80fd\u4f1a\u53d1\u73b0\u4e00\u4e2a\u95ee\u9898\uff0c\u4ee5\u524dVue2\u4e2d\u7ecf\u5e38\u4f7f\u7528\u7684\u7ec4\u4ef6\u540d\u79f0\u4e0d\u89c1\u4e86\uff0c\u5176\u5b9eVue3\u9ed8\u8ba4\u7528\u6587\u4ef6\u540d […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[143,150,157],"_links":{"self":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/633"}],"collection":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=633"}],"version-history":[{"count":1,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/633\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/633\/revisions\/634"}],"wp:attachment":[{"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}