前言
就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下!
GitHub地址请访问:github.com/GitHubGanKa…
项目介绍
vue-jd-h5
是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页、分类页面、我的页面、购物车等。
本地线下代码vue2.6在分支demo中,使用mockjs数据进行开发,效果图请点击这里
❌️master分支是线上生产环境代码,因为部分后台接口已经挂了,不建议使用!
本项目还有很多不足之处,如果有想为此做贡献的伙伴,也欢迎给我们提出PR或者issue ;
本项目是免费开源的,如果有伙伴想要在次基础上进行二次开发,可以clone或者fork整个仓库,如果能帮助到您,我将感到非常高兴,如果您觉得这个项目不错还请给个start!
除了本项目,我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等,想学的可进扣扣裙 519293536 免费获取,小白勿进哦!
搭建步骤
- 首先,选择一个文件,将代码clone到本地(需要先fork代码到你自己的仓库,别用我的这个链接):
git clone https://github.com/GitHubGanKai/vue-jd-h5.git
复制代码
- 查看所有分支:
gankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a
demo
demo_vue3
dev
feature
gh-pages
* master
remotes/origin/HEAD -> origin/master
remotes/origin/demo
remotes/origin/demo_vue3
remotes/origin/dev
remotes/origin/feature
remotes/origin/gh-pages
remotes/origin/master
复制代码
- 切换到分支demo_vue3开始进行开发!
项目的初始化
如果你在安装包的时候速度比较慢,那是因为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下来的项目根目录,安装@vue/composition-api
体验 vue3 新特性。
npm
安装:
npm install @vue/composition-api --save
复制代码
yarn
安装:
yarn add @vue/composition-api
复制代码
CDN
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js">script> 复制代码
通过全局变量 window.vueCompositionApi
来使用。
使用
在使用任何 @vue/composition-api
提供的能力前,必须先通过 Vue.use()
进行安装:
在入口文件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
新特性提供了统一的入口,具体声明周期相关勾子,可以参考如下:
vue2.x | vue3 |
---|---|
setup | |
setup | |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
ps:感谢评论区小伙伴提出的疑问:如果你的项目是在vue2.x的基础上,再安装Composition API
来开发的,那么, setup 函数,会在 beforeCreate 之后created 之前执行!如果你是直接通过vue add vue-next
安装最新的 vue3.0.x beta,那么setup会在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}`) }) 复制代码
- 因为
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) { // ⚠️注意,如果是通过vue add vue-next添加的这个地方需要结构出ctx 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
来获取,但是如果是在模版中,直接访问即可,不需要
.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,那么我们还可以这样!
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 // ⚠️特别注意一定要return 出去,要不然 mySwiper取不到值的! } } 复制代码
reactive
reactive()
函数接收一个普通对象,返回一个响应式的数据对象,等价于 vue 2.x
中的 Vue.observable()
函数,vue 3.x
中提供了 reactive()
函数,用来创建响应式的数据对象Observer
,ref
中我们一般存放的是基本类型数据,如果是引用类型的我们可以使用reactive
函数。
当reactive
函数中,接收的类型是一个Array
数组的时候,我们可以在这个Array
外面在用对象包裹一层,然后给对象添加一个属性比如:value
(这个属性名你可以自己随便叫什么),他的值就是这个数组!