深入理解Vue 3：計算屬性與偵聽器的藝術

来源:https://www.cnblogs.com/Amd794/p/18222603
-Advertisement-
Play Games

title: 深入理解Vue 3：計算屬性與偵聽器的藝術 date: 2024/5/30 下午3:53:47 updated: 2024/5/30 下午3:53:47 categories: 前端開發 tags: Vue3 計算屬性 偵聽器 路由 模板 性能優化 實戰案例 前言 Vue 3的新特性簡 ...


title: 深入理解Vue 3：計算屬性與偵聽器的藝術
date: 2024/5/30 下午3:53:47
updated: 2024/5/30 下午3:53:47
categories:

  • 前端開發

tags:

  • Vue3
  • 計算屬性
  • 偵聽器
  • 路由
  • 模板
  • 性能優化
  • 實戰案例

image

前言

Vue 3的新特性簡介

Vue.js作為當今流行的前端框架之一，以其響應式數據綁定和組件化架構著稱。隨著技術的不斷演進，Vue
3帶來了許多令人期待的新特性，這些特性不僅使得Vue.js更加高效和靈活，也為開發者提供了更好的開發體驗。

  1. Composition API：Vue 3引入了Composition API，它是對原有Options API的補充，使得代碼更加模塊化和可復用。通過組合式API，開發者可以更方便地組織和重用邏輯。
  2. Teleport：Teleport是一個新的內置組件，它允許開發者將子組件的內容移動到DOM的另一部分，而不改變它們的邏輯位置。這對於處理跨頁面或跨區域的交互非常有用。
  3. Suspense：Suspense是Vue 3中的另一個新特性，它允許組件在等待非同步組件或數據時渲染一個占位符。這樣，開發者可以更優雅地處理非同步內容。
  4. Fragment：在Vue 2中，組件的模板必須有一個單一的根元素。Vue 3允許使用Fragment，即多個根元素，使得模板更加靈活。
  5. v-memo和v-model：v-memo是一個新的指令，用於緩存計算屬性的結果，以提高性能。v-model則得到了改進，支持更多類型的輸入，如覆選框和下拉菜單。
  6. 更快的渲染速度：Vue 3通過優化虛擬DOM的演算法，提供了更快的渲染速度，使得應用更加流暢。

計算屬性與偵聽器的重要性

在Vue 3中，計算屬性（computed）和偵聽器（watch）是處理響應式數據和邏輯的兩個重要特性。它們在應用中起著至關重要的作用，使得數據處理更加高效和簡潔。

  1. 計算屬性：計算屬性是基於其他響應式數據的計算結果。它們具有緩存特性，只有在依賴的數據發生變化時才會重新計算。這使得開發者能夠以聲明式的方式定義複雜的計算邏輯，而無需擔心不必要的計算。
  2. 偵聽器：偵聽器用於監聽響應式數據的變化。當數據發生變化時，偵聽器會執行回調函數，從而允許開發者對數據的變化做出響應。偵聽器在處理非同步操作和複雜的數據依賴時尤為有用。

第一章：Vue 3基礎

1. Vue 3的安裝與配置

Vue 3可以通過CDN或NPM安裝。以下是使用NPM安裝Vue 3的步驟：

  1. 創建一個新的項目文件夾，併進入該文件夾。
mkdir my-vue-app
cd my-vue-app
  1. 初始化項目，並安裝Vue 3。
npm init -y
npm install vue@next
  1. 安裝完成後，可以在項目中使用Vue 3。
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. Vue 3的基本語法

Vue 3的基本語法與Vue 2類似，包括模板語法、數據綁定、條件渲染和迴圈渲染等。以下是一些基本語法的示例：

  • 數據綁定：
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>
  • 條件渲染：
<template>
  <div>
    <p v-if="show">顯示內容</p>
    <p v-else>隱藏內容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
  • 迴圈渲染：
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

3. 組件與模板

組件是Vue 3最重要的構建塊，它允許開發者將應用分解為可重用的、獨立的部分。以下是創建和使用組件的基本步驟：

  • 創建組件：
// MyComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  }
}
</script>
  • 註冊組件：
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

createApp(App).component('my-component', MyComponent).mount('#app')
  • 使用組件：
<template>
  <div>
    <my-component title="Hello" content="World"></my-component>
  </div>
</template>

組件可以接受Props，並通過事件和插槽進行通信。組件還可以使用模板來定義其渲染結果，從而使得應用更加模塊化和可重用。在Vue
3中，組件的創建和使用與Vue 2類似，但是有一些細節上的改動。本章將詳細介紹組件的創建、註冊和使用方法，以及如何使用Props、事件和插槽進行通信。

第二章：計算屬性

1. 計算屬性的概念與作用

計算屬性（Computed
Properties）是Vue.js中一種特殊類型的響應式屬性，用於基於其他數據屬性的值來動態計算新的值。它們的主要作用是將數據處理邏輯從模板中分離出來，保持模板的簡潔，並確保性能優化，因為Vue會檢測依賴並僅在必要時重新計算。

2. 計算屬性的基本用法

計算屬性的定義通常在組件的data或methods對象中，但更推薦使用computed對象。例如：

export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  computed: {
    product() {
      return this.a * this.b;
    }
  }
}

在模板中，可以直接使用{{ product }}來顯示計算結果。

3. 計算屬性的高級用法

  • 多級計算：可以基於其他計算屬性來計算新的值。
computed: {
  product() {
    return this.a * this.b;
  },
  product3() {
    return this.product * this.c;
  }
}
  • 去除依賴：deep屬性可以用來控制是否深度檢測依賴，immediate屬性可以設置是否立即執行計算。
computed: {
  product3({ a, b, c }, { deep }) {
    return deep ? a * b * c : a * b + c;
  }
}

4. 緩存機制

Vue的計算屬性有一個內部緩存機制，如果計算結果沒有改變，Vue就不會再次執行計算函數。這對於計算密集型的屬性非常有用，避免了不必要的計算。

5. 依賴追蹤

Vue會自動追蹤計算屬性依賴的數據屬性變化，併在依賴變化時重新計算。這使得計算屬性總是反映出其依賴屬性的最新值。

6. 計算屬性的最佳實踐

  • 避免在計算屬性中執行昂貴的計算，儘可能在組件的methods中處理。
  • 儘量保持計算屬性的簡潔，只做必要的計算。
  • 使用deep屬性時要小心，因為它可能會導致不必要的重新渲染。

第三章：偵聽器

1. 偵聽器的概念與作用

偵聽器（Watcher）是Vue.js中的一個核心概念，它用於觀察和響應Vue實例上的數據變動。當被觀察的數據發生變化時，偵聽器會觸發相應的回調函數，從而允許開發者執行響應的操作。偵聽器對於處理數據變化響應和執行副作用（例如數據載入、表單驗證等）非常有用。

2. 偵聽器的基本用法

在Vue中，可以通過watch選項來創建偵聽器。基本用法如下：

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  }
}

在這個例子中，message屬性的任何變化都會觸發message偵聽器的回調函數，該函數會接收到新值和舊值作為參數。

3. 偵聽器的高級用法

  • 配置選項：Vue的偵聽器提供了幾個配置選項，如deep、immediate和flush，用於控制偵聽器的行為。
watch: {
  message(newVal, oldVal) {
    // ...
  },
  deep: true, // 深度偵聽
  immediate: true, // 立即執行
  flush: 'post' // 副作用在事件迴圈的“post”階段執行
}
  • 偵聽器對象：也可以向watch選項提供一個對象，其中包含了多個偵聽器配置：
watch: {
  // 監聽data中的message屬性
  message: {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true,
    immediate: true
  },
  // 監聽data中的age屬性，但只在變化後執行
  age: {
    handler(newVal, oldVal) {
      // ...
    },
    immediate: false
  }
}

4. 深度偵聽

當偵聽一個對象或數組時，預設情況下Vue只偵聽它們的頂級屬性變化。要啟用深度偵聽，需要在偵聽器的配置中設置deep: true。

watch: {
  someObject: {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

5. 立即執行的偵聽器

如果希望在組件掛載後立即執行偵聽器的回調函數，可以在配置中設置immediate: true。

watch: {
  someData: {
    handler(newVal, oldVal) {
      // ...
    },
    immediate: true
  }
}

6. 偵聽器的最佳實踐

  • 避免在偵聽器中進行複雜的計算或副作用，這可能會導致性能問題。
  • 儘量使用計算屬性而不是偵聽器來處理響應式數據的變化，因為計算屬性具有緩存機制，可以更高效。
  • 只有在確實需要響應數據變化時才使用偵聽器，不要濫用。
    AD：漫畫首頁

第四章：計算屬性與偵聽器的對比

1. 計算屬性與偵聽器的異同

  • 計算屬性和偵聽器都是Vue.js中用於處理數據變化的工具，它們之間的主要區別在於使用場景和實現原理。
  • 計算屬性是一個返回值的函數，它依賴於其他數據源，並且在數據變化時重新計算返回值。計算屬性具有緩存機制，只有在依賴數據發生變化時才會重新計算。
  • 偵聽器是一個監聽數據變化並執行特定操作的函數，它可以配置深度偵聽和立即執行。

2. 何時使用計算屬性

  • 當需要從其他數據源派生出一個新值時，可以使用計算屬性。
  • 當需要對數據進行格式化、過濾或排序時，可以使用計算屬性。
  • 當需要在模板中使用的數據是由其他數據計算而來時，可以使用計算屬性。

3. 何時使用偵聽器

  • 當需要在數據變化時執行特定操作，但不需要返回新值時，可以使用偵聽器。
  • 當需要監聽一個深度嵌套的對象或數組時，可以使用偵聽器。
  • 當需要在數據變化後執行非同步操作或執行複雜計算時，可以使用偵聽器。

4. 結合使用計算屬性與偵聽器

  • 在某些情況下，可能需要使用計算屬性和偵聽器來實現更複雜的功能。例如，當需要在數據變化時執行特定操作，同時需要在模板中使用新計算出的值時，可以使用計算屬性和偵聽器結合。
  • 在這種情況下，可以在偵聽器中執行特定操作，同時在計算屬性中返回新值。

總結：計算屬性和偵聽器是Vue.js中處理數據變化的重要工具，它們之間的選擇取決於具體的使用場景。通過合理使用計算屬性和偵聽器，可以提高應用的響應性和靈活性。

第五章：實戰案例分析

案例一：購物車計算總價

為了實現一個簡單的購物車功能，我們需要按照以下步驟進行：

  1. 定義商品數組：

    • 創建一個數組，用於存儲商品信息。每個商品對象應包含名稱、價格和數量等屬性。

  2. 定義計算屬性：

    • 創建一個計算屬性，用於計算購物車中所有商品的總價。這個計算屬性會遍歷商品數組，將每個商品的價格乘以其數量，並將所有結果相加。

  3. 定義添加商品方法：

    • 創建一個方法，用於向商品數組中添加新的商品。這個方法需要接收商品的名稱、價格和數量作為參數，並創建一個新的商品對象添加到數組中。

  4. 定義刪除商品方法：

    • 創建一個方法，用於從商品數組中刪除指定的商品。這個方法需要接收商品的名稱或索引作為參數，並從數組中移除相應的商品對象。

下麵是一個簡單的JavaScript示例代碼，展示瞭如何實現上述功能：

// 定義商品數組
let cart = [];

// 定義計算屬性
function calculateTotalPrice() {
    return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
}

// 定義添加商品方法
function addToCart(name, price, quantity) {
    cart.push({ name, price, quantity });
}

// 定義刪除商品方法
function removeFromCart(name) {
    cart = cart.filter(item => item.name !== name);
}

// 使用示例
addToCart('Apple', 1.0, 5);
addToCart('Banana', 0.5, 10);
console.log('Total Price:', calculateTotalPrice()); // 輸出總價
removeFromCart('Apple');
console.log('Total Price after removing Apple:', calculateTotalPrice()); // 輸出移除蘋果後的總價

這段代碼首先定義了一個空的商品數組cart，然後定義了計算總價、添加商品和刪除商品的方法。通過調用這些方法，可以實現購物車的基本功能。

案例二：表單驗證與狀態偵聽

為了實現表單驗證和狀態偵聽的功能，我們可以使用Vue.js框架來展示這個案例，因為Vue.js提供了響應式數據和事件偵聽的機制。以下是一個簡單的Vue.js示例代碼：

<template>
  <div>
    <input v-model="formData.inputValue" placeholder="請輸入內容">
    <button :disabled="!isValid">提交</button>
    <p v-if="formError">{{ formError }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        inputValue: '',
      },
      formError: null,
    };
  },
  computed: {
    isValid() {
      // 這裡可以添加更複雜的驗證邏輯
      return this.formData.inputValue.length >= 5; // 至少輸入5個字元才能提交
    }
  },
  methods: {
    submitForm() {
      if (this.isValid) {
        // 表單提交邏輯
        console.log('Form submitted with value:', this.formData.inputValue);
        // 提交成功後，可以清除錯誤信息
        this.formError = null;
      } else {
        // 如果表單無效，顯示錯誤信息
        this.formError = '輸入內容不能少於5個字元';
      }
    }
  },
  watch: {
    // 偵聽輸入框數據變化
    formData: {
      handler(newValue) {
        // 當formData發生變化時，執行某些操作
        if (newValue.inputValue.length < 5) {
          this.formError = '輸入內容不能少於5個字元';
        } else {
          this.formError = null;
        }
      },
      deep: true // 深度監聽
    }
  }
};
</script>

在這個示例中，我們使用了Vue.js的v-model來創建雙向數據綁定，這樣輸入框的內容就會實時更新到formData.inputValue
。我們定義了一個計算屬性isValid來判斷輸入是否有效，只有當輸入框的內容滿足條件時，按鈕才可用。

同時，我們添加了一個submitForm方法來處理表單提交，並且在表單驗證失敗時顯示錯誤信息。我們還使用了一個watch
偵聽器來監聽formData的變化，這樣即使輸入框的內容是逐漸變化的，我們也能及時響應並更新按鈕狀態和錯誤信息。
AD：專業搜索引擎

這個案例展示了Vue.js在處理表單驗證和狀態偵聽方面的能力，通過響應式系統和事件機制，可以輕鬆實現動態表單處理。

案例三：動態路由與頁面渲染

為了實現動態路由和頁面渲染的功能，我們可以使用Vue Router，它是Vue.js官方的路由管理器。以下是一個簡單的Vue Router示例代碼：

// 1. 定義路由數組
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

// 2. 創建Vue Router實例
const router = new VueRouter({
  routes // 將路由數組傳遞給VueRouter
});

// 3. 定義動態路由匹配函數（這裡不需要，因為Vue Router會自動處理）

// 4. 定義鉤子函數，在路由切換時更新頁面標題
router.beforeEach((to, from, next) => {
  // 更新頁面標題
  document.title = to.meta.title || '預設標題';
  next();
});

// 在Vue實例中使用路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在這個示例中，我們首先定義了一個路由數組routes，其中包含了不同的路由路徑和對應的組件。然後，我們創建了一個Vue
Router實例，並將路由數組傳遞給它。

Vue Router會自動處理動態路由匹配，因此我們不需要額外定義一個動態路由匹配函數。

為了在路由切換時更新頁面標題，我們使用了Vue Router的全局前置守衛beforeEach。在這個鉤子函數中，我們根據當前路由對象to
的meta屬性中的title來更新頁面標題。如果meta屬性中沒有定義title，則使用預設標題。

第六章：性能優化

計算屬性與偵聽器的性能考量

計算屬性：

  • 計算屬性是基於它們的依賴進行緩存的。只有在相關依賴發生改變時，它們才會重新計算。這意味著，如果一個計算屬性依賴的數據沒有變化，多次訪問該計算屬性將立即返回緩存的結果，而不是重新執行計算邏輯。
  • 性能優化：確保計算屬性的依賴儘可能少，這樣可以減少不必要的計算。

偵聽器：

  • 偵聽器（watch）用於觀察和響應Vue實例上的數據變動。當需要在數據變化時執行非同步或開銷較大的操作時，這是很有用的。
  • 性能優化：避免在偵聽器中執行複雜的計算或操作，因為偵聽器沒有緩存機制，每次數據變化都會觸發偵聽器。

避免不必要的計算與偵聽

  • 避免在模板中進行複雜計算：模板應該保持簡潔，避免在模板中進行複雜的邏輯運算，這些應該放在計算屬性中。
  • 合理使用偵聽器：只在必要時使用偵聽器，例如，當需要在數據變化時執行非同步操作或開銷較大的操作時。
  • 使用computed代替watch：如果一個操作可以被緩存，那麼應該優先使用計算屬性而不是偵聽器。

使用Vue Devtools進行性能分析

Vue Devtools是一個瀏覽器擴展，它允許開發者檢查Vue應用的狀態，包括組件樹、數據、事件和性能。

  • 性能面板：Vue Devtools提供了一個性能面板，可以用來分析組件的渲染時間和更新時間。
  • 時間線：通過時間線視圖，可以查看應用在運行時的性能表現，包括組件的渲染和更新。
  • 組件檢查：可以檢查特定組件的性能，查看其計算屬性和偵聽器的執行情況。

使用Vue Devtools進行性能分析的步驟通常包括：AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺

  1. 安裝並啟用Vue Devtools擴展。
  2. 在瀏覽器中打開Vue應用。
  3. 打開Vue Devtools，切換到性能面板。
  4. 分析組件的渲染和更新性能，識別性能瓶頸。
  5. 根據分析結果優化代碼，例如減少不必要的計算屬性或偵聽器。
    最後，我們將Vue Router實例註入到Vue應用中，併在根組件App中使用<router-view>來渲染匹配的組件。

這個案例展示瞭如何使用Vue Router來實現動態路由和頁面渲染，以及如何在路由切換時動態更新頁面標題。通過Vue
Router，我們可以輕鬆地管理複雜的應用路由，並提供流暢的用戶體驗。

第七章：常見問題與解決方案

計算屬性與偵聽器的常見錯誤

  1. 計算屬性錯誤：

    • 忘記在計算屬性中使用return語句。
    • 計算屬性依賴的數據變化時，沒有重新計算。
    • 在計算屬性中更改響應式數據，導致視圖更新異常。

  2. 偵聽器錯誤：

    • 偵聽器回調函數中使用this時，this的上下文不正確。
    • 偵聽器沒有正確地設置deep屬性，導致深層次對象變化不被監聽。
    • 在偵聽器回調中進行非同步操作時，可能忘記處理錯誤情況。

如何調試計算屬性與偵聽器

  1. 計算屬性調試：

    • 使用瀏覽器的開發者工具，檢查計算屬性是否在預期的時候被重新計算。
    • 在計算屬性的getter函數中添加調試日誌，查看依賴數據變化時是否被正確更新。
    • 使用Vue Devtools監控計算屬性的緩存情況。

  2. 偵聽器調試：

    • 同樣使用開發者工具的日誌功能，檢查偵聽器是否在數據變化時被觸發。
    • 在偵聽器的回調函數中添加調試日誌，確保非同步操作按預期執行。
    • Vue Devtools也可以幫助你監控和調試偵聽器。

社區中的常見問題與解答

  1. 計算屬性與偵聽器的選擇：

    • 社區中經常討論的問題是，何時應該使用計算屬性，何時應該使用偵聽器。
    • 一般建議是，如果數據變化需要同步計算，且結果需要被覆用，使用計算屬性。如果數據變化需要執行非同步操作或深層次的數據監聽，使用偵聽器。

  2. 性能優化：

    • 社區中關於性能優化的討論非常活躍，因為性能對於大型應用至關重要。
    • 常見的優化建議包括避免不必要的計算和偵聽，合理使用計算屬性和偵聽器，以及使用Vue Devtools進行性能分析。

  3. 複雜邏輯的處理：

    • 在處理複雜邏輯時，社區通常建議將邏輯提取到方法中，而不是直接在模板或計算屬性中實現。
    • 對於需要多次讀取的結果，使用計算屬性；對於一次性讀取的結果，使用方法。

附錄

Vue 3官方文檔參考

相關資源與社區鏈接


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vue插槽與作用域插槽
    title: Vue插槽與作用域插槽 date: 2024/6/1 下午9:07:52 updated: 2024/6/1 下午9:07:52 categories: 前端開發 tags: VueSlot ScopeSlot 組件通信 Vue2/3插槽 作用域API 動態插槽 插槽優化 第1章：插槽 ...
  • 如何實現兩欄佈局，右側自適應？三欄佈局中間自適應呢？
    一、背景 在日常佈局中，無論是兩欄佈局還是三欄佈局，使用的頻率都非常高 兩欄佈局 兩欄佈局實現效果就是將頁面分割成左右寬度不等的兩列，寬度較小的列設置為固定寬度，剩餘寬度由另一列撐滿， 比如 Ant Design 文檔，藍色區域為主要內容佈局容器，側邊欄為次要內容佈局容器 這裡稱寬度較小的列父元素為 ...
  • XML Web 服務技術解析：WSDL 與 SOAP 原理、應用案例一覽
    XML Web服務是基於WSDL、SOAP、RDF和RSS等標準的網路應用程式組件技術。WSDL描述服務介面和消息格式，SOAP用於結構化信息交換，RDF描述網路資源，RSS則用於發佈網站更新。Web服務特點是自包含、自描述，基於開放協議，可重用且能連接現有軟體。WSDL文檔包含`types`、`m... ...
  • vue3組件通信與props
    title: vue3組件通信與props date: 2024/5/31 下午9:00:57 updated: 2024/5/31 下午9:00:57 categories: 前端開發 tags: Vue3組件 Props詳解 生命周期 數據通信 模板語法 Composition API 單向數據 ...
  • 說說你對單例模式的理解？如何實現？
    一、是什麼 單例模式（Singleton Pattern）：創建型模式，提供了一種創建對象的最佳方式，這種模式涉及到一個單一的類，該類負責創建自己的對象，同時確保只有單個對象被創建 在應用程式運行期間，單例模式只會在全局作用域下創建一次實例對象，讓所有需要調用的地方都共用這一單例對象，如下圖所示： ...
  • 詳解 JS 中的事件迴圈、巨集/微任務、Primise對象、定時器函數，以及其在工作中的應用和註意事項
    為什麼會突然想到寫這麼一個大雜燴的博文呢，必須要從筆者幾年前的一次面試說起。當時的我年輕氣盛，在簡歷上放了自己的博客地址，而面試官應該是翻了我的博客，好幾道面試題都是圍繞著我的博文來提問。其中一個問題，直接使得空氣靜止了五分鐘，也是自從那次面試，我告訴自己，工作實戰中總結的經驗，一定要知其然知其所以... ...
  • vue3毫秒級時間戳轉換
    目錄前端平臺搭建(Vue2.6,App:HBulderX)創建Vue2.6項目下載相應插件方便開發路由配置對連接後端進行一些配置(main.js文件)導入ElementUI組件組件 | Element同步與非同步axios非同步請求框架 前端平臺搭建(Vue2.6,App:HBulderX) 創建Vue ...
  • 說說 Javascript 數字精度丟失的問題，如何解決？
    一、場景復現 一個經典的面試題 0.1 + 0.2 0.3 // false 為什麼是false呢? 先看下麵這個比喻 比如一個數 1÷3=0.33333333...... 3會一直無限迴圈，數學可以表示，但是電腦要存儲，方便下次取出來再使用，但0.333333...... 這個數無限迴圈，再大的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類