前言
就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下!
GitHub地址请访问:https://github.com/GitHubGanKai/vue3-jd-h5
项目介绍
vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页、分类页面、我的页面、购物车等。
本地线下代码vue2.6在分支demo中,使用mockjs数据进行开发,效果图请点击"htmlcode">
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开始进行开发!
项目的初始化
"_blank" href="https://www.npmjs.com/package/nrm">"htmlcode">
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,主要是管理包版本的,如果有兴趣的小伙伴,可以自己去了解一下,这里就不啰嗦了"htmlcode">
npm install @vue/composition-api --save
yarn安装:
yarn add @vue/composition-api
CDN
<script src="/UploadFiles/2021-04-02/vue-composition-api.umd.js">通过全局变量 window.vueCompositionApi 来使用。
使用
在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装:
在入口文件main.js中:
import Vue from 'vue'; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);安装插件后,您就可以使用新的Composition API 来开发组件了。
"_blank" href="https://github.com/vuejs/vue-cli-plugin-vue-next">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 beforeCreatesetup(替代)createdsetup(替代) beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted errorCaptured onErrorCapturedps:感谢评论区小伙伴提出的疑问:如果你的项目是在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: "htmlcode">import { computed, getCurrentInstance } from "@vue/composition-api"; export default { name: "svg-icon", props: { iconClass: { type: String, required: true }, className: { type: String } }, setup(initProps,setupContext) { // "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>"htmlcode">
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,那么我们还可以这样"htmlcode">
<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="/UploadFiles/2021-04-02/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(这个属性名你可以自己随便叫什么),他的值就是这个数组!
<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="/UploadFiles/2021-04-02/img.imgUrl">isRef
isRef() 用来判断某个值是否为 ref() 创建出来的对象;当需要展开某个可能为 ref() 创建出来的值的时候,可以使用isRef来判断!
import { isRef } from '@vue/composition-api' setup(){ const headerActive = ref(false); // 在setup函数中,如果是响应式的对象,在访问属性的时候,一定要加上.value来访问! const unwrapped = isRef(headerActive) "htmlcode">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) // 0watch
watch(source, cb, options"htmlcode">
// 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 我们有一些常见的逻辑复用模式,但都或多或少存在一些问题:
这些模式包括:
- 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 安装升级,但是只要是有依赖第三方生态库的地方,就有许多的坑。。。
Vue3.x 没有导出默认对象 export default,在第三方生态中,常用Vue.xxx()来进行依赖,现在这些语法需要重写,工作量可不小啊!
如果是新团队、小型的项目,可以尝试使用vue3进行尝试开发,慢慢过度,当 Vue3.x 正式 发布 后,而且周边生态跟上来了,就可以直接用vue3了!
在bilibili直播的时候,Evan You也说了,目前vue3 beta版本,最重要的是提升稳定性,和对第三方工具库的支持,如果你是第三方库的作者,可以现在开始,熟悉熟悉源码了,我们开发者可以先读懂所有API的使用。
抱歉
⚠️本项目当前只修改了src/views/home/index.vue和src/views/classify/index.vue这两个文件,但是,其他的修改也都一样,如果有兴趣的小伙伴可以自己fork过去,将其他页面也用Composition API再写一遍,自己练练手!熟悉一下新API,同时我也会将其他的页面慢慢完善起来!大家一起⛽️加油!当官方正式发布版本之后,我们可以快速上手!希望和大家江湖再见!
圆月山庄资源网 Design By www.vgjia.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]