vue3-jd-h5

我的项目介绍

vue3-jd-h5是一个电商 H5 页面前端我的项目，基于Vue 3.0.0 + Vant 3.0.0 实现，次要包含首页、分类页面、我的页面、购物车等，局部成果如下图。

<div style=”text-align:center”>








</div>

本地线下代码 vue2.6 在分支 demo 中，应用 mockjs 数据进行开发，效果图请点击这里

master 分支是线上生产环境代码，因为局部后盾接口曾经挂了????，可能无奈看到实际效果。

vue3 搭建步骤

1. 首先, 在本地抉择一个文件，将代码 clone 到本地：

git clone https://github.com/GitHubGanKai/vue-jd-h5.git 

1. 查看所有分支：

gankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a
  demo
  vue-next
  dev
  feature
  gh-pages
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/demo
  remotes/origin/vue-next
  remotes/origin/dev
  remotes/origin/feature
  remotes/origin/gh-pages
  remotes/origin/master

1. 切换到分支 vue-next 开始进行开发！
2. 在 IDEA 命令行中运行命令：npm install, 下载相干依赖;
3. 开发环境 在 IDEA 命令行中运行命令：npm run dev, 运行我的项目;
4. 在 IDEA 命令行中运行命令：npm run dll:build，打包我的项目，而后手机扫描上面二维码体验利用的成果。

<div style=”text-align:center”>

</div>

我的项目的初始化

如果你在安装包的时候速度比较慢，那是因为 NPM 服务器在国外，这里给大家举荐一个能够随时切换 NPM 镜像的工具 NRM，有时候，咱们开发的时候，为了放慢安装包的装置速度，咱们须要切换镜像源为国内的，然而，如果须要公布一些本人的组件到 NPM 的时候，又要来回切换回来，有了这个咱们就不便多了！应用 $ npm install -g nrm 全局装置，而后，能够应用nrm ls 查看所有镜像：

gankaideMacBook-Pro:~ gankai$ nrm ls

  npm -------- https://registry.npmjs.org/
* yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

如果须要应用淘宝镜像，执行：nrm use taobao 能够随时切换源，当然了还有一个 npm 包版本管理工具 nvm，次要是治理包版本的，如果有趣味的小伙伴，能够本人去理解一下。

装置

进入方才 clone 下来的我的项目根目录，装置相干依赖，体验 vue3 新个性。

npm装置：

npm install 

yarn装置：

yarn 

CDN

<script src="https://unpkg.com/vue@next"></script>

应用

在入口文件 main.js 中：

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

装置插件后，您就能够应用新的 Composition API 来开发组件了。

目前 vue 官网为 vue-cli 提供了一个插件 vue-cli-plugin-vue-next，你也能够间接在我的项目中间接增加最新的版本！

# in an existing Vue CLI project
vue add vue-next

<blockquote style=’background-color: #ffffcc;border-left: 4px solid #ffeb3b;padding:10px 20px 10px 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;’>

如果有想从零开始体验新版本的小伙伴能够采纳这种办法进行装置，因为咱们这个我的项目有依赖第三方库，如果全局装置，整个我的项目第三方 UI 库都无奈运行！所以咱们还是抉择采纳装置 @vue/composition-api 来进行体验，从而缓缓过渡到 vue3 最新版本

</blockquote>

Vue 3.0 Composition-API 根本个性体验

setup 函数

setup() 函数是 vue3 中专门为组件提供的新属性，相当于 2.x 版本中的 created 函数, 之前版本的组件逻辑选项，当初都对立放在这个函数中解决。它为咱们应用 vue3 的 Composition API 新个性提供了对立的入口,setup 函数会在绝对于 2.x 来说，会在 beforeCreate 之后、created 之前执行！具体能够参考如下：

新钩子

除了 2.x 生命周期等效项之外，Composition API 还提供了以下 debug hooks：

• onRenderTracked
• onRenderTriggered

两个钩子都收到 DebuggerEvent 相似于 onTrack 和onTrigger观察者的选项：

export default {onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

依赖注入

provide和 inject 启用相似于 2.x provide/inject选项的依赖项注入。两者都只能在 setup() 以后流动实例期间调用。

import {provide, inject} from '@vue/composition-api'

const ThemeSymbol = Symbol()

const Ancestor = {setup() {provide(ThemeSymbol, 'dark')
  }
}

const Descendent = {setup() {const theme = inject(ThemeSymbol, 'light' /* optional default value */)
    return {theme}
  }
}

inject承受可选的默认值作为第二个参数。如果未提供默认值，并且在 Provide 上下文中找不到该属性，则 inject 返回undefined。

注入响应式数据

为了放弃提供的值和注入的值之间的响应式，能够应用ref

// 在父组建中
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)

// 组件中
const theme = inject(ThemeSymbol, ref('light'))
watchEffect(() => {console.log(`theme set to: ${theme.value}`)
})

1. 因为 setup 函数接管 2 个形参，第一个是 initProps，即父组建传送过去的值！，第二个形参是一个 上下文对象

setupContext，这个对象的次要属性有：

attrs: Object    // 等同 vue 2.x 中的 this.$attrs
emit: ƒ ()       // 等同 this.$emit()
isServer: false   // 是否是服务端渲染
listeners: Object   // 等同 vue2.x 中的 this.$listeners
parent: VueComponent  // 等同 vue2.x 中的 this.$parent
refs: Object  // 等同 vue2.x 中的 this.$refs
root: Vue  // 这个 root 是咱们在 main.js 中，应用 newVue()的时候，返回的全局惟一的实例对象，留神别和单文件组建中的 this 混同了
slots: {}   // 等同 vue2.x 中的 this.$slots
ssrContext:{}    // 服务端渲染相干

留神 ：在 setup() 函数中无法访问到 this 的，不论这个 this 指的是全局的的 vue 对象(即：在 main.js 中应用 new 生成的那个全局的 vue 实例对象)，还是指单文件组建的对象。

然而，如果咱们想要拜访以后组件的实例对象，那该怎么办呢？咱们能够引入 getCurrentInstance 这个 api, 返回值就是以后组建的实例！

import {computed, getCurrentInstance} from "@vue/composition-api";
export default {
  name: "svg-icon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {type: String}
  },
  setup(initProps,setupContext) {const { ctx} = getCurrentInstance();
    const iconName = computed(() => {return `#icon-${initProps.iconClass}`;
    });
    const svgClass = computed(() => {if (initProps.className) {return "svg-icon" + initProps.className;} else {return "svg-icon";}
    });
    return {
      iconName,
      svgClass
    };
  }
};
</script>

Ref 主动开展（unwrap）

ref() 函数用来依据给定的值创立一个 响应式 的数据对象 ，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，如果咱们在setup 函数中，想要拜访的对象的值，能够通过 .value 来获取，然而如果是在 <template> 模版中，间接拜访即可，不须要.value！

import {ref} from '@vue/composition-api'

setup() {const active = ref("");
    const timeData = ref(36000000);
    console.log('输入 ===>',timeData.value)
    return {
       active,
       timeData
    }
}

<template>
  <p> 活动状态：{{active}}</p>
  <p> 流动工夫：{{timeData}}</p>
</template>

⚠️留神：不要将 Array 放入 ref 中，数组索引属性无奈进行主动开展，也 不要 应用 Array 直接存取 ref 对象:

const state = reactive({list: [ref(0)],
});
// 不会主动开展, 须应用 `.value`
state.list[0].value === 0; // true

state.list.push(ref(1));
// 不会主动开展, 须应用 `.value`
state.list[1].value === 1; // true

当咱们须要操作 DOM 的时候，比方咱们在我的项目中应用 swiper 须要获取 DOM, 那么咱们还能够这样????！

  <div class="swiper-cls">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index">
          ![](img.imgUrl)
        </swiper-slide>
      </swiper>
   </div>

而后在 setup 函数中定义一个 const mySwiper = ref(null);，之前在 vue2.x 中，咱们是通过this.$refs.mySwiper 来获取 DOM 对象的，当初也能够应用 ref 函数代替，返回的 mySwiper 要和 template 中绑定的 ref 雷同！

import {ref, onMounted} from "@vue/composition-api";
setup(props, { attrs, slots, parent, root, emit, refs}) {const mySwiper = ref(null);
  onMounted(() => {
    // 通过 mySwiper.value 即可获取到 DOM 对象！// 同时也能够应用 vue2.x 中的 refs.mySwiper，他其实 mySwiper.value 是同一个 DOM 对象！mySwiper.value.swiper.slideTo(3, 1000, false);
  });
  return {mySwiper}
}

reactive

reactive() 函数接管一个一般对象，返回一个响应式的数据对象，等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创立响应式的数据对象 Observer，ref 中咱们个别寄存的是 根本类型数据 ，如果是援用类型的咱们能够应用reactive 函数。

当 reactive 函数中，接管的类型是一个 Array 数组的时候，咱们能够在这个 Array 里面在用对象包裹一层，而后给对象增加一个属性比方：value（这个属性名你能够本人轻易叫什么），他的值就是这个数组！

<script>
// 应用相干 aip 之前必须先引入
import {ref, reactive} from "@vue/composition-api";
export default {
  name: "home",
  setup(props, { attrs, slots, parent, root, emit, refs}) {const active = ref("");
    const timeData = ref(36000000);
    // 将 tabImgs 数组中每个对象都变成响应式的对象 
    const tabImgs = reactive({value: []
    });
    const ball = reactive({
      show: false,
      el: ""
    });
    return {
      active,
      timeData,
      tabImgs,
      ...toRefs(ball),
    };
  }
};
</script>

那么在 template 模版中咱们想要拜访这个数组的时候就是须要应用 .value 的模式来获取这个数组的值。

<template>
    <div class="swiper-cls">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index">
          ![](img.imgUrl)
        </swiper-slide>
      </swiper>
    </div>
</template>

isRef

isRef() 用来判断某个值是否为 ref() 创立进去的对象；当须要开展某个可能为 ref() 创立进去的值的时候，能够应用 isRef 来判断！

import {isRef} from '@vue/composition-api'

setup(){const headerActive = ref(false);
  // 在 setup 函数中，如果是响应式的对象，在拜访属性的时候，肯定要加上.value 来拜访！const unwrapped = isRef(headerActive) ? headerActive.value : headerActive
  return {}}

toRefs

toRefs函数会将 响应式对象 转换为 一般对象，其中返回的对象上的每个属性都是指向原始对象中相应属性的ref，将一个对象上的所有属性转换成响应式的时候，将会十分有用！

import {reactive,toRefs} from '@vue/composition-api'
setup(){
  // ball 是一个 Observer
  const ball = reactive({
    show: false,
    el: ""
  });
  // ballToRefs 就是一个一般的 Object，然而 ballToRefs 外面的所有属性都是响应式的（RefImpl）const ballToRefs  = toRefs(ball)
  // ref 和原始属性是“链接的”ball.show = true
  console.log(ballToRefs.show) // true
  ballToRefs.show.value = false
  console.log(ballToRefs.show) // false
  return {...ballToRefs    // 将 ballToRefs 对象开展，咱们就能够间接在 template 模板中间接这样应用这个对象上的所有属性！}
}

点击增加按钮，小球飞入购物车动画：

<template>  
  <div class="ballWrap">
      <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
        <!-- 能够间接应用 show-->
        <div class="ball" v-if="show">
          <li class="inner">
            <span class="cubeic-add" @click="addToCart($event,item)">
              <svg-icon class="add-icon" icon-class="add"></svg-icon>
            </span>
          </li>
        </div>
      </transition>
   </div>
</template>

computed

computed函数的第一个参数，能够接管一个函数，或者是一个对象！如果是函数默认是 getter 函数，并为 getter 返回的值返回一个只读的 ref 对象。

import {computed} from '@vue/composition-api'

const count = ref(1)
// computed 接管一个函数作为入参
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 谬误，plusOne 是只读的！

或者也能够是个对象，能够应用具备 get 和set性能的对象来创立可写 ref 对象。

const count = ref(1)
// computed 接管一个对象作为入参
const plusOne = computed({get: () => count.value + 1,
  set: val => {count.value = val - 1}
})

plusOne.value = 1
console.log(count.value) // 0

watch

watch(source, cb, options?)

该 watchAPI 与 2.x this.$watch（以及相应的watch 选项）齐全等效。

察看繁多起源

观察者数据源能够是返回值的 getter 函数，也能够间接是 ref：

// watching a getter 函数
const state = reactive({count: 0})
watch(() => state.count, // 返回值的 getter 函数
  (count, prevCount,onCleanup) => {/* ... */}
)

// directly watching a ref
const count = ref(0)
watch(
  count, // 也能够间接是 ref
  (count, prevCount,onCleanup) => {/* ... */})

watch 多个起源

观察者还能够应用数组同时监督多个源：

const me = reactive({age: 24, name: 'gk'})
// reactive 类型的
watch([() => me.age, () => me.name], // 监听 reactive 多个数据源，能够传入一个数组类型，返回 getter 函数
  ([age, name], [oldAge, oldName]) => {console.log(age) // 新的 age 值
    console.log(name) // 新的 name 值
    console.log(oldAge) // 旧的 age 值
    console.log(oldName) // 新的 name 值
  },
  // options
  {lazy: true // 默认 在 watch 被创立的时候执行回调函数中的代码，如果 lazy 为 true，怎创立的时候，不执行！}
)

setInterval(() => {
  me.age++
  me.name = 'oldMe'
}, 7000000)

// ref 类型的
const work = ref('web')
const addres = ref('sz')
watch([work,address],  // 监听多个 ref 数据源
  ([work, addres], [oldwork, oldaddres]) => {//......},
  {lazy: true}
)

watch和组件的生命周期绑定，当组件卸载后，watch 也将主动进行。在其余状况下，它返回进行句柄，能够调用该句柄以显式进行察看程序：

// watch 返回一个函数句柄，咱们能够决定该 watch 的进行和开始！const stopWatch = watch([work,address],  // 监听多个 ref 数据源
  ([work, addres], [oldwork, oldaddres]) => {//......},
  {lazy: true}
)

// 调用进行函数，革除对 work 和 address 的监督
stopWatch()

在 watch 中革除有效的异步工作

<div class="search-con">
  <svg-icon class="search-icon" icon-class="search"></svg-icon>
  <input v-focus placeholder="搜寻、关键词" v-model="searchText" />
</div>

setup(props, { attrs, slots, parent, root, emit, refs}){
  const CancelToken = root.$http.CancelToken 
  const source = CancelToken.source() 
  // 定义响应式数据 searchText
  const searchText = ref('')

  // 向后盾发送异步申请
  const getSearchResult = searchText => {root.$http.post("http://test.happymmall.com/search",{text:searchText}, {cancelToken: source.token}).then(res => {// .....});
  return source.cancel
}

// 定义 watch 监听
watch(
  searchText,
  (searchText, oldSearchText, onCleanup) => {
    // 发送 axios 申请，并失去勾销 axios 申请的 cancel 函数
    const cancel = getSearchResult(searchText)

    // 若 watch 监听被反复执行了，则会先革除上次未实现的异步申请
    onCleanup(cancel)
  },
  // watch 刚被创立的时候不执行
  {lazy: true}
)

  return {searchText}
}

最初

vue3 新增 Composition API。新的 API 兼容 Vue2.x，只须要在我的项目中独自引入 @vue/composition-api 这个包就可能解决咱们目前 Vue2.x 中存在的个别难题。比方：如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。基于 Vue 2.x 目前的 API 咱们有一些常见的逻辑复用模式，但都或多或少存在一些问题：

这些模式包含：

1. Mixins
2. 高阶组件 (Higher-order Components, aka HOCs)
3. Renderless Components (基于 scoped slots / 作用域插槽封装逻辑的组件）

总体来说，以上这些模式存在以下问题：

1. 模版中的数据起源不清晰。举例来说，当一个组件中应用了多个 mixin 的时候，光看模版会很难分清一个属性到底是来自哪一个 mixin。HOC 也有相似的问题。
2. 命名空间抵触。由不同开发者开发的 mixin 无奈保障不会正好用到一样的属性或是办法名。HOC 在注入的 props 中也存在相似问题。
3. 性能。HOC 和 Renderless Components 都须要额定的组件实例嵌套来封装逻辑，导致无谓的性能开销。

vue3 中，新增 Composition API。而且新的 API 兼容 Vue2.x，只须要在我的项目中，独自引入 @vue/composition-api 这个包就能够，就可能解决咱们目前 以上大部分问题。同时，如果我间接降级到 Vue3.x，我要做的事件会更多，只有以后我的项目中应用到的第三方 ui 库，都须要从新革新，以及降级后的诸多坑要填！刚开始的时候，我就是间接在以后脚手架的根底上 vue add vue-next 装置降级，然而只有是有依赖第三方生态库的中央，就有许多的坑。。。

我的项目源码：https://github.com/GitHubGanKai/vue3-jd-h5