前言

就在前段時間，vue官方發布了3.0.0-beta.1 版本，趁著五一假期有時間，就把之前的一個電商商城的專案，用最新的Composition API拿來改造一下！

??GitHub地址請訪問??：github.com/GitHubGanKa… GitHub issues GitHub forks GitHub stars

專案介紹

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://www.cnblogs.com/chengxuyuanaa/p/"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
~~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：

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來獲取，但是如果是在<template>模版中，直接訪問即可，不需要.value！

import { ref } from '@vue/composition-api'

setup() {
    const active = ref("");
    const timeData = https://www.cnblogs.com/chengxuyuanaa/p/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 =https://www.cnblogs.com/chengxuyuanaa/p/== 0; // true

state.list.push(ref(1));
// 不會自動展開, 須使用 `.value`
state.list[1].value =https://www.cnblogs.com/chengxuyuanaa/p/== 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=https://www.cnblogs.com/chengxuyuanaa/p/"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（這個屬性名你可以自己隨便叫什么），他的值就是這個陣列！

<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 = https://www.cnblogs.com/chengxuyuanaa/p/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=https://www.cnblogs.com/chengxuyuanaa/p/"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 = https://www.cnblogs.com/chengxuyuanaa/p/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 = https://www.cnblogs.com/chengxuyuanaa/p/val - 1
  }
})

plusOne.value = https://www.cnblogs.com/chengxuyuanaa/p/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 我們有一些常見的邏輯復用模式，但都或多或少存在一些問題：

這些模式包括：

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，同時我也會將其他的頁面慢慢完善起來！大家一起??加油！當官方正式發布版本之后，我們可以快速上手！另外我結合多年開發經驗整理出2020最新企業級實戰視頻教程包括 Vue3.0/Js/ES6/TS/React/node等，想學的可進扣扣裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69779.html

標籤：JavaScript

上一篇：Vue回應式系統如何操作運用？本文詳解

下一篇：Js--字串拼接/連接

用vue3.0.1如何搭建仿京東的電商H5專案呢？本文實戰教你

前言