Skip to content

Latest commit

 

History

History
656 lines (515 loc) · 22.2 KB

README-zh_CN.md

File metadata and controls

656 lines (515 loc) · 22.2 KB
Raw

vue3-jd-h5

Twitter GitHub issues GitHub forks GitHub stars

English| 简体中文

项目介绍

vue3-jd-h5是一个电商 H5 页面前端项目，基于Vue 3.0.0 + Vant 3.0.0 实现，主要包括首页、分类页面、我的页面、购物车等。

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

⚠️master 分支是线上生产环境代码，因为部分后台接口已经挂了 😫，可能无法看到实际效果。

📌 本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出 PR，或者 issue ；

🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以 clone 或者 fork 整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个 start！🙏

💥 2024 年 Vue3.x ,Vite5.x, Vant,TypeScript 最新版本更新分支：👉 vue3-vite-vant-ts

🎉 如果您乐意捐赠，我们也非常欢迎，可以通过以下渠道进行捐款：

2022-06-16.12.23.23.mov

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,打包项目,📱 手机扫描下面 👇 二维码进行查看！

项目的初始化

安装 node v16.20.2

进入刚才 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

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

Vue 3.0 Composition-API 基本特性体验

setup 函数

setup() 函数是 vue3 中专门为组件提供的新属性，相当于 2.x 版本中的created函数,之前版本的组件逻辑选项，现在都统一放在这个函数中处理。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口,setup 函数会在相对于 2.x 来说，会在 beforeCreate 之后、created 之前执行！具体可以参考如下：

vue2.x vue3
beforeCreate setup(替代)
created setup(替代)
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

新钩子

除了 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 class="slide_img" @click="handleClick(img.linkUrl)" :src="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
          class="slide_img"
          @click="handleClick(img.linkUrl)"
          :src="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 安装升级，但是只要是有依赖第三方生态库的地方，就有许多的坑。。。

Vue3.x 没有导出默认对象 export default，在第三方生态中，常用Vue.xxx()来进行依赖，现在这些语法需要重写，工作量可不小啊！

如果是新团队、小型的项目，可以尝试使用 vue3 进行尝试开发，慢慢过度，当 Vue3.x 正式 发布 后，而且周边生态跟上来了，就可以直接用 vue3 了！

在bilibili直播的时候，Evan You 也说了，目前 vue3 beta 版本，最重要的是提升稳定性，和对第三方工具库的支持，如果你是第三方库的作者，可以现在开始，熟悉熟悉源码了，我们开发者可以先读懂所有 API 的使用。