{"id":155,"date":"2022-05-05T10:57:46","date_gmt":"2022-05-05T02:57:46","guid":{"rendered":"http:\/\/usei.cn\/?p=155"},"modified":"2022-05-28T18:05:02","modified_gmt":"2022-05-28T10:05:02","slug":"vue2-%e4%bd%bf%e7%94%a8-vue-composition-api","status":"publish","type":"post","link":"https:\/\/usei.cn\/index.php\/2022\/05\/05\/vue2-%e4%bd%bf%e7%94%a8-vue-composition-api\/","title":{"rendered":"Vue2 \u4f7f\u7528 @vue\/composition-api"},"content":{"rendered":"\n<p>\u5728\u5b66\u4e60\u4e86<code>vue3<\/code>\u4e00\u4e9b\u7279\u6027\u4e4b\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u7b80\u5355\u7684\u4f7f\u7528\u8fd9\u4e9b\u7279\u6027\u3002\u73b0\u6709\u9879\u76ee\u5982\u4f55\u5e73\u6ed1\u8fc7\u6e21\u5230vue3\uff0c\u65b9\u4fbf\u540e\u671f\u5347\u7ea7\u5230Vue3\uff0c\u5bf9\u4e8e\u4ee5\u524d\u7528<code>vue2.x<\/code>\u5199\u7684\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u5f15\u5165<code>composition-api<\/code>\uff0c\u4f7f\u7528<code>vue3<\/code>\u4e2d\u7684\u65b0\u7279\u6027\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b89\u88c5<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --save @vue\/composition-api<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5168\u5c40\u5f15\u5165<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import Vue from 'vue'\nimport VueCompositionApi from '@vue\/composition-api'\n\nVue.use(VueCompositionApi)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u751f\u547d\u5468\u671f\u7684\u53d8\u5316<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>beforeCreate -&gt; \u4f7f\u7528 setup()\ncreated -&gt; \u4f7f\u7528 setup()\nbeforeMount -&gt; onBeforeMount\nmounted -&gt; onMounted\nbeforeUpdate -&gt; onBeforeUpdate\nupdated -&gt; onUpdated\nbeforeDestroy -&gt; onBeforeUnmount\ndestroyed -&gt; onUnmounted\nerrorCaptured -&gt; onErrorCaptured<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u9875\u9762\u5b9e\u4f8b<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { reactive, toRefs, onMounted, ref } from '@vue\/composition-api'\nimport api from '@\/api\/schemeRange' \/\/ \u548c\u6570\u636e\u4ea4\u4e92\u76f8\u5173\u5199\u5728api \u65b9\u4fbf\u590d\u7528\n\nexport default {\n\n  setup(props, { root }) {\n    const scheme_options = reactive(&#91;\n      { label: '\u6838\u9178\u68c0\u6d4b', value: 1 },\n      { label: '\u6838\u9178\u6df7\u91c7', value: 2 }\n    ])\n    \/\/ ----------------------------------------\u5217\u8868\u76f8\u5173-----------------\n    const listData = reactive({\n      list: &#91;],\n      count: 0,\n      scheme_id: 1,\n      listLoading: false\n    })\n    \/\/ \u52a0\u8f7d\u6570\u636e\n    const LoadList = () => {\n      listData.listLoading = true\n      api.GetRanges(listData.scheme_id).then(res => {\n        listData.list = res.data.list\n        listData.count = res.data.count\n        listData.listLoading = false\n      }).catch(() => {\n        listData.listLoading = false\n      })\n    }\n    \n    onMounted(() => {\n      LoadList()\n    })\n    \/\/ \u66b4\u9732\u7ed9\u6a21\u677f\u7684\u6570\u636e\n    return {\n      scheme_options,\n      ...toRefs(listData), \/\/ \u5c55\u5f00\n      LoadList\n    }\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u5b66\u4e60\u4e86vue3\u4e00\u4e9b\u7279\u6027\u4e4b\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u7b80\u5355\u7684\u4f7f\u7528\u8fd9\u4e9b\u7279\u6027\u3002\u73b0\u6709\u9879\u76ee\u5982\u4f55\u5e73\u6ed1\u8fc7\u6e21\u5230vue3\uff0c\u65b9\u4fbf\u540e\u671f\u5347\u7ea7 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8],"tags":[],"class_list":["post-155","post","type-post","status-publish","format-standard","hentry","category-vue","category-frontend"],"_links":{"self":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=155"}],"version-history":[{"count":5,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/155\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/155\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}