溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue3.0.1beta怎么搭建仿京東的電商H5項目，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
vue-jd-h6是一個電商H5頁面前端項目，基于Vue 3.0.0-beta.1 + Vant 實現，主要包括首頁、分類頁面、我的頁面、購物車等。
本地線下代碼vue2.6在分支demo中，使用mockjs數據進行開發，效果圖請點擊�這里
master分支是線上生產環境代碼，因為部分后臺接口已經掛了�，不建議使用！
本項目還有很多不足之處，如果有想為此做貢獻的伙伴，也歡迎給我們提出PR，或者issue ；
本項目是免費開源的，如果有伙伴想要在次基礎上進行二次開發，可以clone或者fork整個倉庫，如果能幫助到您，我將感到非常高興，如果您覺得這個項目不錯還請給個start！�
首先,選擇一個文件，將代碼clone到本地：
git clone https://github.com/GitHubGanKai/vue-jd-h6.git
查看所有分支：
gankaideMacBook-Pro:vue-jd-h6 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
<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最新版本
setup函數
setup() 函數是 vue3 中專門為組件提供的新屬性，相當于2.x版本中的created函數,之前版本的組件邏輯選項，現在都統一放在這個函數中處理。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口,具體聲明周期相關勾子，可以參考如下：
| vue2.x | vue3 |
|---|---|
| beforeCreate | setup(替代) |
| created | 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：
兩個鉤子都收到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來獲取，但是如果是在<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) // 0watch
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 我們有一些常見的邏輯復用模式，但都或多或少存在一些問題：
這些模式包括：
總體來說，以上這些模式存在以下問題：
vue3中，新增 Composition API。而且新的API兼容 Vue2.x，只需要在項目中，單獨引入 @vue/composition-api 這個包就可以，就能夠解決我們目前 以上大部分問題。同時，如果我直接升級到 Vue3.x，我要做的事情會更多，只要當前項目中使用到的第三方ui庫，都需要重新改造，以及升級后的諸多坑要填！剛開始的時候，我就是直接在當前腳手架的基礎上 vue add vue-next 安裝升級，但是只要是有依賴第三方生態庫的地方，就有許多的坑。。。
Vue3.x 沒有導出默認對象 export default，在第三方生態中，常用Vue.xxx()來進行依賴，現在這些語法需要重寫，工作量可不小啊！
看完上述內容，是不是對vue3.0.1beta怎么搭建仿京東的電商H5項目有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
