利用Vue3實(shí)現(xiàn)拖拽定制化首頁功能

更新時(shí)間：2022年05月07日 11:04:17 作者：王大傻

vue3正式版已經(jīng)發(fā)布大半年了,咱也得緊跟時(shí)代潮流,vue3帶來的很多改變,下面這篇文章主要給大家介紹了關(guān)于利用Vue3實(shí)現(xiàn)拖拽定制化首頁功能的相關(guān)資料,需要的朋友可以參考下

前期準(zhǔn)備

Vue3
Ts
VueDragable （4版本以上）
期望拖拽組件組件可以按需加載導(dǎo)入

開始

首先呢，我們先看下VueDragable的文檔效果

文檔的效果是這種基于列表的一個(gè)拖拽排序，那么回歸到我們期望我們是想通過動(dòng)態(tài)引入組件來進(jìn)行拖拽排序，那么在完成拖拽定制化之前，首先要講的是動(dòng)態(tài)組件，在使用Vue2時(shí)候相信我們不陌生我們可以通過Component is來動(dòng)態(tài)引入，如：

<template>
  <div class="component-box">
     <component :is="xxx""/>          
  </div>
</template>
<script>
import xxx from 'xxx.vue'
export default{
    data(){
        return{

        }
    },
    components:{
        xxx
    }
}
</script>

其中is的值就是我們?cè)赾omponents中注冊(cè)的組件，這樣就能完成動(dòng)態(tài)組件的注入，那么在Vue3中呢？尤其是在setup語法糖使用時(shí)候我們這樣做就會(huì)導(dǎo)致無法識(shí)別組件，這是因?yàn)閟etup語法糖中我們可以直接引入組件后使用，并不需要通過在components中注冊(cè)（默認(rèn)幫我們完成了），那么我們真實(shí)的業(yè)務(wù)場(chǎng)景其實(shí)后臺(tái)返給我們的數(shù)據(jù)是這個(gè)格式的：

因此，我們的動(dòng)態(tài)組件也需要做調(diào)整：

<div class="component-box" v-for="element in xxx">
  <component :is="element.name" :key="element.name"/>
</div>

這時(shí)候我們的is綁定就并非一個(gè)組件的實(shí)例了，其實(shí)是一個(gè)字符串，如此一來，就會(huì)產(chǎn)生錯(cuò)誤并且導(dǎo)致頁面無法正常加載我們的組件，那么該怎么辦呢？大傻在網(wǎng)上做了調(diào)研，有三種方法:

方法一

通過Vue3的defineAsyncComponent方法去完成動(dòng)態(tài)加載組件，使其成為一個(gè)實(shí)例對(duì)象。

import { defineAsyncComponent, ref } from 'vue'
// 需要加載的組件集合
const components = ref(new Map<string, any>())
components.value.set(
  'test1',
  defineAsyncComponent(() => import('./test1.vue'))
)
components.value.set(
  'test2',
  defineAsyncComponent(() => import('./test2.vue'))
)

這樣我們?cè)谌≈禃r(shí)候可以通過get方法傳入具體字符串拿到對(duì)應(yīng)的組件

方法二

這個(gè)則是通過shallowRef 或者 markRaw 來進(jìn)行代理，shallowRef是淺層代理，只去代理一層，而markRaw則是標(biāo)記該屬性永遠(yuǎn)不為響應(yīng)式

import { shallowRef, ref } from 'vue'
  import test1 from './test1.vue'
  import test2 from './test2.vue'
 
  //這里用ref的話，vue給出警告Vue接收到一個(gè)組件，該組件被制成響應(yīng)對(duì)象。這可能會(huì)導(dǎo)致不必要的性能開銷，應(yīng)該通過將組件標(biāo)記為“markRaw”或使用“shallowRef”而不是“ref”來避免。
  
  // 如果使用 markRaw 那么currentComp將不永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象。 所以得使用 shallowRef
  let currentComp = shallowRef(test1)  
 currentComp.value
  // 切換組件
  const changeComp = () => {
    if(currentComp.value == test1) {
      currentComp.value = test2
    }else {
      currentComp.value = test1
    }
  }

這種方法可行，但是不能傳入字符串進(jìn)行動(dòng)態(tài)引入

方案三

雙script標(biāo)簽完美解決

<script lang="ts">
import {
  Test1,
  Test2,
} from './components/DragComponents'

export default {
  components: {
    Test1,
    Test2,
  }
}
</script>
<script setup lang="ts">
const componentList = reactive([
  {
    name: 'Test1',
    title: '測(cè)試1',
    id: '1'
  },
  {
    name: 'Test2',
    title: '測(cè)試2',
    id: '2'
  }
])
</script>

這樣我們可以直接去拿到后臺(tái)數(shù)據(jù)進(jìn)行處理。