小白最近比較閑，於是整理了一些日常使用的VUE組件

1.VUE中給Dom元素動態添加樣式 VUE中，給 Dom 元素動態添加樣式。比如判斷通過頁面傳遞過來的值和env文件中配置的值是否一致，來動態添加元素的類，同時類的樣式在 Style 中已經寫好。此時動態類名需要在 Dom 元素載入完成前添加上，否則樣式可能添加不上。這種情況下可以在 com ...

1.VUE中給Dom元素動態添加樣式

VUE中，給 Dom 元素動態添加樣式。
比如判斷通過頁面傳遞過來的值和env文件中配置的值是否一致，來動態添加元素的類，同時類的樣式在 Style 中已經寫好。
此時動態類名需要在 Dom 元素載入完成前添加上，否則樣式可能添加不上。
這種情況下可以在 computed 中調用 process.env 中的屬性用於做判斷，為 Dom 元素動態添加類。
這樣添加的類在 Dom 元素載入完成前就添加上了，樣式可以起效。

2.VUE中使用Debugger

在VUE中使用 debugger 可以在調試模式下，方便的打斷點，起到良好的測試效果。

3.infinite 觸底載入

在jquery-weui.js庫中包含infinite組件，這個組件在我們使用weui開發手機端分頁時，使用起來非常方便。

在另外一個輕量級的 JavaScript 庫中也包含 infinite 組件 -- Zepto.WeUI.js

Zepto簡介

Zepto.WeUI.js 是基於 Zepto.js 和 WeUI 的一個插件庫，用於擴展 WeUI 組件的功能並提供更多常用的 UI 組件和交互效果。它提供了一系列易於使用的輕量級組件，使開發者可以快速構建具有WeUI 風格的移動端網頁應用。
Zepto.js 是一個輕量級的 JavaScript 庫，被設計為和 jQuery 相容的替代品，主要用於移動設備上的開發。它提供了許多類似於 jQuery 的功能和 API，但是文件體積更小且專註於移動端的特性和性能優化。
Zepto.WeUI.js 擴展了 WeUI，為開發者提供了更多實用的功能和組件，如下拉刷新、無限滾動、圖片輪播等。它以 Zepto.js 作為基礎，提供了一種便捷的方式來使用 WeUI 的特性和樣式。

Zepto中Infinite的使用

1. 引入依賴文件

<!-- 引入 WeUI 樣式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/weui/2.2.0/style/weui.min.css">
    
<!-- 引入 Zepto.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

<!-- 引入 Zepto.WeUI.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/zepto.weui/1.2.0/zepto.weui.min.js"></script>

2. 創建基本的 HTML 結構

<div class="infinite-container">
  <div class="infinite-item">內容 1</div>
  <div class="infinite-item">內容 2</div>
  <!-- 更多內容 -->
  <div class="infinite-loading">載入中...</div>
</div>

3. 初始化 infinite 組件

$(function() {
  $(".infinite-container").infinite();
});

4. 處理滾動觸底事件

$(function() {
  $(".infinite-container").infinite().on("infinite", function() {
    var loading = $(".infinite-loading");
    loading.show(); // 顯示載入狀態提示

    // 非同步載入更多內容
    // 這裡可以使用 AJAX 請求或其他非同步方法來獲取數據
    setTimeout(function() {
      var newItem = $("<div></div>").addClass("infinite-item").text("更多內容");
      $(".infinite-container").append(newItem);
      loading.hide(); // 隱藏載入狀態提示
      $(".infinite-container").infinite(); // 重新初始化 infinite 組件
    }, 2000); // 模擬延遲載入2秒
  });
});

5. 在配合VUE使用時，使用方式更加簡便

1. 首先在你的VUE項目中引入依賴文件

2. 在 mounted 中將 infinite元素和 infinite組件綁定

$('.infinite').infinite().on('infinite', () => {
   // 滾動時執行的方法
})

3. 在 watch 中實時監聽頁面滾動情況

watch: {
    meetEnd() {
	  if (this.meetEnd) {
		//off方法用於移除已綁定的無限滾動載入事件。它可以幫助你臨時關閉無限滾動載入功能，而不需要完全銷毀 infinite 組件。
		//$('.infinite').infinite().destroy() 完全銷毀 infinite 組件
        $('.infinite').infinite().off('infinite')		
      } else {
        $('.infinite').infinite().on('infinite', () => {
            //滾動時執行的方法
        })
      }
   }
}

4.Vue 中使用動態組件（Dynamic Components）

在Vue中使用動態組件可以讓你根據不同的條件或用戶操作，動態載入不同的組件。下麵是一個簡單示例

<template>
  <div>
    <button @click="loadComponent('ComponentA')">載入組件A</button>
    <button @click="loadComponent('ComponentB')">載入組件B</button>

    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";

export default {
  data() {
    return {
      currentComponent: null
    };
  },
  methods: {
    loadComponent(componentName) {
      if (componentName === 'ComponentA') {
        this.currentComponent = ComponentA;
      } else if (componentName === 'ComponentB') {
        this.currentComponent = ComponentB;
      }
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

5.Vue中 ... 的用法

在Vue中，...可能是展開運算符（Spread Operator）也可能是對象的擴展運算符（Object Spread Operator）。

下麵先介紹展開運算符的使用方式

//1.展開數組
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 展開 arr1 數組，並添加新的元素
console.log(arr2); // 輸出：[1, 2, 3, 4, 5]
//2.合併數組
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [...arr1, ...arr2]; // 合併 arr1 和 arr2 數組
console.log(arr3); // 輸出：[1, 2, 3, 4, 5]
//3.複製數組
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 複製 arr1 數組
console.log(arr2); // 輸出：[1, 2, 3]
//4.展開對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1, city: 'New York' }; // 展開 obj1 對象，並添加新屬性
console.log(obj2); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }
//5.合併對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { city: 'New York' };
const obj3 = { ...obj1, ...obj2 }; // 合併 obj1 和 obj2 對象
console.log(obj3); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }
//6.展開函數調用
function foo(a, b, c) {
  console.log(a, b, c);
}

const arr = [1, 2, 3];
foo(...arr); // 將數組展開作為參數傳遞給函數

然後介紹一下，小白特別困惑的對象的擴展運算符，它主要用於對象的屬性合併和複製。

//1.合併組件的計算屬性
<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    //這個例子中，我們使用對象的擴展運算符將 mapGetters 返回的對象屬性合併到組件的 computed 計算屬性中。這樣，我們可以通過在組件中使用
    // this.prop1 和 this.prop2 來訪問對應的計算屬性
    ...mapGetters({
      prop1: "module1/getProp1",
      prop2: "module2/getProp2"
    })
  }
};
</script>

//2.合併組件的方法
<script>
export default {
  methods: {
    //在這個例子中，我們使用對象的擴展運算符將 mapActions 返回的對象屬性合併到組件的 methods 中。
    //這樣，我們就可以直接在組件中使用 this.action1 和 this.action2 來調用對應的方法。
    ...mapActions([
      "module1/action1",
      "module2/action2"
    ])
  }
};
</script>

//3.合併組件的樣式對象
<template>
  <div :style="computedStyles"></div>
</template>
//在這個例子中，我們使用對象的擴展運算符將 baseStyles 對象和 additionalStyles 對象合併為一個新的對象，
//並將其作為 :style 綁定的值。這樣，組件的樣式將包含來自兩個對象的屬性。
<script>
export default {
  data() {
    return {
      baseStyles: { backgroundColor: "red", color: "white" },
      additionalStyles: { fontSize: "16px", fontWeight: "bold" }
    };
  },
  computed: {
    computedStyles() {
      return { ...this.baseStyles, ...this.additionalStyles };
    }
  }
};
</script>

最後，小白髮現對象的擴展運算符和展開運算符在處理對象的時候是有相似性的，於是小白研究了它們之間的相同點和不同點

1. 相同點：對象的擴展運算符和展開運算符都可以用於展開對象

2. 不同點：

1. 對象的擴展運算符只能用於展開對象，它會將一個對象中的所有屬性展開到另一個對象中，並創建一個新的對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1 };
console.log(obj2); // 輸出：{ name: 'Alice', age: 20 }

2. 展開運算符可以用於展開數組和對象，可以在新的數組、對象或函數調用中使用，比如合併數組、複製數據、合併對象等。
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // 輸出：[1, 2, 3, 4, 5]

const obj1 = { name: 'Alice', age: 20 };
const obj2 = { city: 'New York' };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }

3. 展開運算符可以在數組和函數調用中使用
function foo(a, b, c) {
  console.log(a, b, c);
}

const arr = [1, 2, 3];
foo(...arr); // 將數組展開作為參數傳遞給函數

const obj = { name: 'Alice', age: 20 };
const newObj = { ...obj }; // 只能用於對象的展開

以上就是對象的擴展運算符和展開運算符的相同點和不同點，經過整理小白搞清楚瞭如何使用這些好用的組件。小白還會繼續努力學習編碼，爭取掌握更多好用又有效率的組件，拜讀更多優秀的代碼！