vue3-jd-h5
项目介绍
vue3-jd-h5
是一个电商H5页面前端项目,基于Vue 3.0.0 + Vant 3.0.0 实现,主要包括首页、分类页面、我的页面、购物车等,部分效果如下图。
![](http://img.e-com-net.com/image/info9/73ac1fe859c64dc2a86bb16ef3a474b7.jpg)
本地线下代码vue2.6在分支demo中,使用mockjs数据进行开发,效果图请点击这里
master分支是线上生产环境代码,因为部分后台接口已经挂了,可能无法看到实际效果。
vue3搭建步骤
- 首先,在本地选择一个文件,将代码clone到本地:
git clone https://github.com/GitHubGanKai/vue-jd-h5.git
- 查看所有分支:
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
- 切换到分支vue-next开始进行开发!
- 在 IDEA 命令行中运行命令:npm install,下载相关依赖;
- 开发环境 在 IDEA 命令行中运行命令:
npm run dev
,运行项目; - 在 IDEA 命令行中运行命令:
npm run dll:build
,打包项目,然后手机扫描下面二维码体验应用的效果。
![](http://img.e-com-net.com/image/info9/502ebed910ce4330a63240f8bf525928.png)
项目的初始化
如果你在安装包的时候速度比较慢,那是因为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
使用
在入口文件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 |
---|---|
setup(替代) | |
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}`)
})
- 因为
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
};
}
};
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
}
}
活动状态:{{active}}
活动时间:{{timeData}}
⚠️注意:不要将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,那么我们还可以这样!
![](img.imgUrl)
然后在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
(这个属性名你可以自己随便叫什么),他的值就是这个数组!
那么在template
模版中我们想要访问这个数组的时候就是需要使用.value
的形式来获取这个数组的值。
![](img.imgUrl)
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模板中直接这样使用这个对象上的所有属性!
}
}
点击添加按钮,小球飞入购物车动画:
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?)
该watch
API与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 中清除无效的异步任务
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 我们有一些常见的逻辑复用模式,但都或多或少存在一些问题:
这些模式包括:
- Mixins
- 高阶组件 (Higher-order Components, aka HOCs)
- Renderless Components (基于 scoped slots / 作用域插槽封装逻辑的组件)
总体来说,以上这些模式存在以下问题:
- 模版中的数据来源不清晰。举例来说,当一个组件中使用了多个 mixin 的时候,光看模版会很难分清一个属性到底是来自哪一个 mixin。HOC 也有类似的问题。
- 命名空间冲突。由不同开发者开发的 mixin 无法保证不会正好用到一样的属性或是方法名。HOC 在注入的 props 中也存在类似问题。
- 性能。HOC 和 Renderless Components 都需要额外的组件实例嵌套来封装逻辑,导致无谓的性能开销。
vue3中,新增 Composition API
。而且新的API
兼容 Vue2.x
,只需要在项目中,单独引入 @vue/composition-api
这个包就可以,就能够解决我们目前 以上大部分问题。同时,如果我直接升级到 Vue3.x
,我要做的事情会更多,只要当前项目中使用到的第三方ui库,都需要重新改造,以及升级后的诸多坑要填!刚开始的时候,我就是直接在当前脚手架的基础上 vue add vue-next
安装升级,但是只要是有依赖第三方生态库的地方,就有许多的坑。。。