[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","GitHubGanKai","page",1,"limit",20,"total","id","39896","avatar_url","https://avatars2.githubusercontent.com/u/37830362?v=4","githubUsername","create_at","2020-05-17 10:06:08.639","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":16,"_47":48,"_25":49,"_50":51},"43201","author_id","tab","share","content","## 前言\r\n\r\n就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把之前的一个电商商城的项目，用最新的[Composition API](https://vue-composition-api-rfc.netlify.com/)拿来改造一下！\r\n\r\n👉GitHub地址请访问🔗：[https://github.com/GitHubGanKai/vue-jd-h5](https://github.com/GitHubGanKai/vue-jd-h5)\t\r\n\r\n## 项目介绍\r\n\r\n`vue-jd-h5`是一个电商H5页面前端项目，基于**Vue 3.0.0-beta.1** + Vant 实现，主要包括首页、分类页面、我的页面、购物车等。\r\n\r\n📖本地线下代码**vue2.6**在分支demo中，使用**mockjs**数据进行开发，效果图请点击🔗这里\r\n\r\n❌️**master**分支是线上生产环境代码，因为部分后台接口已经挂了😫，不建议使用！\r\n\r\n📌 本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR或者issue ；\r\n\r\n🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！🙏\r\n\r\n## 搭建步骤\r\n\r\n1. 首先,选择一个文件，将代码clone到本地（需要先fork代码到你自己的仓库，别用我的这个链接）：\r\n\r\n```bash\r\ngit clone https://github.com/GitHubGanKai/vue-jd-h5.git \r\n```\r\n\r\n2. 查看所有分支：\r\n\r\n```bash\r\ngankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a\r\n demo\r\n demo_vue3\r\n dev\r\n feature\r\n gh-pages\r\n* master\r\n remotes/origin/HEAD -> origin/master\r\n remotes/origin/demo\r\n remotes/origin/demo_vue3\r\n remotes/origin/dev\r\n remotes/origin/feature\r\n remotes/origin/gh-pages\r\n remotes/origin/master\r\n```\r\n\r\n3. 切换到分支**demo_vue3**开始进行开发！\r\n\r\n## 项目的初始化\r\n\r\n💡如果你在安装包的时候速度比较慢，那是因为NPM服务器在国外，这里给大家推荐一个可以随时切换NPM镜像的工具👉[NRM](https://www.npmjs.com/package/nrm)，我们开发的时候，为了加快依赖包的安装速度，我们需要切换镜像源为国内的，但是，如果需要发布一些自己的组件到NPM的时候，又要来回切换回来，有了这个我们就方便多了！使用`$ npm install -g nrm`全局安装，然后，可以使用`nrm ls` 查看所有镜像：\r\n\r\n```bash\r\ngankaideMacBook-Pro:~ gankai$ nrm ls\r\n\r\n npm -------- https://registry.npmjs.org/\r\n* yarn ------- https://registry.yarnpkg.com/\r\n cnpm ------- http://r.cnpmjs.org/\r\n taobao ----- https://registry.npm.taobao.org/\r\n nj --------- https://registry.nodejitsu.com/\r\n npmMirror -- https://skimdb.npmjs.com/registry/\r\n edunpm ----- http://registry.enpmjs.org/\r\n```\r\n\r\n如果需要使用淘宝镜像，执行： `nrm use taobao` 可以随时切换镜像源，当然了还有一个npm包版本管理工具[nvm](https://github.com/nvm-sh/nvm)，主要是管理包版本的，如果有兴趣的小伙伴，可以自己去了解一下，这里就不啰嗦了😊！\r\n\r\n### 安装\r\n\r\n进入刚才clone下来的项目根目录，安装`@vue/composition-api` 体验 vue3 新特性。\r\n\r\n`npm`安装：\r\n\r\n```javascript\r\nnpm install @vue/composition-api --save\r\n```\r\n\r\n`yarn`安装：\r\n\r\n```javascript\r\nyarn add @vue/composition-api\r\n```\r\n\r\n**CDN**\r\n\r\n```html\r\n\r\n```\r\n\r\n通过全局变量 `window.vueCompositionApi` 来使用。\r\n\r\n### 使用\r\n\r\n在使用任何 `@vue/composition-api` 提供的能力前，必须先通过 `Vue.use()` 进行安装:\r\n\r\n在入口文件`main.js`中：\r\n\r\n```javascript\r\nimport Vue from 'vue';\r\nimport VueCompositionApi from '@vue/composition-api';\r\n\r\nVue.use(VueCompositionApi);\r\n```\r\n\r\n安装插件后，您就可以使用新的 [Composition API](https://vue-composition-api-rfc.netlify.com/) 来开发组件了开心。\r\n\r\n⚠️目前vue官方为vue-cli提供了一个插件[vue-cli-plugin-vue-next](https://github.com/vuejs/vue-cli-plugin-vue-next)，你也可以直接在项目中直接添加最新的版本！\r\n\r\n```bash\r\n# in an existing Vue CLI project\r\nvue add vue-next\r\n```\r\n\r\n

\r\n\r\n如果有想从零开始体验新版本的小伙伴可以采用这种方法进行安装，由于我们这个项目有依赖第三方库，如果全局安装，整个项目第三方UI库都无法运行！所以我们还是选择采用安装`@vue/composition-api`来进行体验，从而慢慢过渡到vue3最新版本。\r\n\r\n

\r\n\r\n## Vue 3.0 Composition-API基本特性\r\n\r\n### setup函数\r\n\r\n`setup()` 函数是 `vue3` 中专门为组件提供的新属性，相当于`2.x`版本中的`created`函数,之前版本的组件逻辑选项，现在都统一放在这个函数中处理。它为我们使用 `vue3 `的 `Composition API` 新特性提供了统一的入口,具体声明周期相关勾子，可以参考如下：\r\n\r\n| vue2.x | vue3 |\r\n| :--------------: | :-------------: |\r\n| ~~beforeCreate~~ | setup |\r\n| ~~created~~ | setup |\r\n| beforeMount | onBeforeMount |\r\n| mounted | onMounted |\r\n| beforeUpdate | onBeforeUpdate |\r\n| updated | onUpdated |\r\n| beforeDestroy | onBeforeUnmount |\r\n| destroyed | onUnmounted |\r\n| errorCaptured | onErrorCaptured |\r\n\r\n\r\nps：感谢评论区小伙伴提出的疑问：如果你的项目是在vue2.x的基础上，再安装`Composition API` 来开发的，那么，\r\n**setup** 函数，会在 **beforeCreate** 之后**created** 之前执行！如果你是直接通过`vue add vue-next`安装最新的 vue3.0.x beta,那么**setup**会在**beforeCreate**和**created**之前执行!\r\n\r\n### 新钩子\r\n\r\n除了2.x生命周期等效项之外，Composition API还提供了以下debug hooks：\r\n\r\n- `onRenderTracked`\r\n- `onRenderTriggered`\r\n\r\n两个钩子都收到`DebuggerEvent`类似于`onTrack`和`onTrigger`观察者的选项：\r\n\r\n```javascript\r\nexport default {\r\n onRenderTriggered(e) {\r\n debugger\r\n // inspect which dependency is causing the component to re-render\r\n }\r\n}\r\n```\r\n\r\n\r\n### 依赖注入\r\n\r\n`provide`和`inject`启用类似于2.x `provide/inject`选项的依赖项注入。两者都只能在`setup()`当前活动实例期间调用。\r\n\r\n```javascript\r\nimport { provide, inject } from '@vue/composition-api'\r\n\r\nconst ThemeSymbol = Symbol()\r\n\r\nconst Ancestor = {\r\n setup() {\r\n provide(ThemeSymbol, 'dark')\r\n }\r\n}\r\n\r\nconst Descendent = {\r\n setup() {\r\n const theme = inject(ThemeSymbol, 'light' /* optional default value */)\r\n return {\r\n theme\r\n }\r\n }\r\n}\r\n```\r\n\r\n`inject`接受可选的默认值作为第二个参数。如果未提供默认值，并且在Provide上下文中找不到该属性，则`inject`返回`undefined`。\r\n\r\n\r\n\r\n**注入响应式数据**\r\n\r\n\r\n为了保持提供的值和注入的值之间的响应式，可以使用`ref`\r\n\r\n```javascript\r\n// 在父组建中\r\nconst themeRef = ref('dark')\r\nprovide(ThemeSymbol, themeRef)\r\n\r\n// 组件中\r\nconst theme = inject(ThemeSymbol, ref('light'))\r\nwatchEffect(() => {\r\n console.log(`theme set to: ${theme.value}`)\r\n})\r\n```\r\n\r\n\r\n1. 因为`setup`函数接收2个形参，第一个是`initProps`，即父组建传送过来的值！，第二个形参是一个**上下文对象** \r\n\r\n`setupContext`，这个对象的主要属性有：\r\n\r\n```javascript\r\nattrs: Object // 等同 vue 2.x中的 this.$attrs\r\nemit: ƒ () // 等同 this.$emit()\r\nisServer: false // 是否是服务端渲染\r\nlisteners: Object // 等同 vue2.x中的this.$listeners\r\nparent: VueComponent // 等同 vue2.x中的this.$parent\r\nrefs: Object // 等同 vue2.x中的this.$refs\r\nroot: Vue // 这个root是我们在main.js中，使用newVue()的时候，返回的全局唯一的实例对象，注意别和单文件组建中的this混淆了\r\nslots: {} // 等同 vue2.x中的this.$slots\r\nssrContext:{}\t// 服务端渲染相关\r\n```\r\n\r\n⚠️**注意**：在 `setup()` 函数中无法访问到 `this`的，不管这个`this`指的是全局的的vue对象(即：在main.js 中使用new生成的那个全局的vue实例对象)，还是指单文件组建的对象。\r\n\r\n但是，如果我们想要访问当前组件的实例对象，那该怎么办呢？我们可以引入`getCurrentInstance`这个api,返回值就是当前组建的实例！\r\n\r\n```javascript\r\nimport { computed, getCurrentInstance } from \"@vue/composition-api\";\r\nexport default {\r\n name: \"svg-icon\",\r\n props: {\r\n iconClass: {\r\n type: String,\r\n required: true\r\n },\r\n className: {\r\n type: String\r\n }\r\n },\r\n setup(initProps,setupContext) { \r\n // ⚠️注意，如果是通过vue add vue-next添加的这个地方需要结构出ctx\r\n const ctx = getCurrentInstance();\r\n const iconName = computed(() => {\r\n return `#icon-${initProps.iconClass}`;\r\n });\r\n const svgClass = computed(() => {\r\n if (initProps.className) {\r\n return \"svg-icon \" + initProps.className;\r\n } else {\r\n return \"svg-icon\";\r\n }\r\n });\r\n return {\r\n iconName,\r\n svgClass\r\n };\r\n }\r\n};\r\n\r\n\r\n```\r\n\r\n### Ref自动展开（unwrap）\r\n\r\n`ref()` 函数用来根据给定的值创建一个**响应式**的**数据对象**，`ref()` 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 `.value` 属性，如果我们在`setup`函数中，想要访问的对象的值，可以通过`.value`来获取，但是如果是在`