本文将介紹以下内容:

什麼是ref
如何使用ref
如何通路ref的值
什麼是let?
什麼是const?
let 和const 在Vue中有何差別？
let、const、var 有什麼差別？
什麼是reactive?
ref 、reactive 有什麼差別？
什麼是readonly?
什麼是computed?
什麼是watch?
watch、computed 有什麼差別？
v-model指令是用來做什麼的？
Vue中的動态元件是什麼？如何使用動态元件？
如何在Vue中進行異步操作？
Vue的響應式原理？
什麼是Vue的虛拟DOM（Virtual DOM）？

什麼是ref？

ref是Vue 3中用于建立響應式資料的函數。它接受一個初始值作為參數，并傳回一個包裝了該值的響應式引用。通過使用ref，你可以確定在資料發生變化時，相關的元件能夠自動更新。

如何使用ref？

首先，你需要從@vue/reactivity子產品中導入ref函數。然後，你可以使用ref将一個普通的JavaScript變量轉換為響應式引用

import { ref } from 'vue';

const count = ref(0);

如何通路ref的值？

ref傳回的是一個包含.value屬性的響應式對象。你可以通過通路.value來擷取或修改引用的值。例如：

console.log(count.value); // 擷取值
count.value = 1; // 修改值

什麼是let?

在Vue 3中，let是JavaScript中的關鍵字，用于聲明一個塊級作用域的變量。在Vue 3中，你可以使用let關鍵字來聲明變量，就像在标準的JavaScript中一樣。

在Vue 3的元件中，你可以使用let來聲明局部變量。這些變量将在元件的作用域内有效，并且不會影響到其他元件或全局作用域。

下面是一個示例，展示了在Vue 3元件中如何使用let關鍵字聲明變量：

export default {
  data() {
    let message = 'Hello, Vue 3!';

    return {
      message
    };
  },
  methods: {
    updateMessage() {
      let message = 'Updated message!';
      console.log(message); // 輸出: Updated message!
    }
  }
};

在上面的示例中，我們在data選項中使用let聲明了一個變量message，并将其綁定到元件的資料。在methods選項中的updateMessage方法中，我們使用了另一個具有相同名稱的let聲明的變量message，這個變量隻在方法的作用域内有效。

請注意，let在Vue 3中的用法與Vue 2中的data選項中的變量聲明方式不同。在Vue 2中，data選項中的變量需要以對象字面量的形式進行聲明，而在Vue 3中，你可以直接使用let關鍵字聲明變量。

這是關于在Vue 3中使用let關鍵字聲明變量的簡要解釋。你可以根據需要在元件中使用let來聲明局部變量。

什麼是const?

const是JavaScript中的關鍵字，用于聲明一個塊級作用域的常量。在Vue 3中，你可以使用const關鍵字來聲明常量，就像在标準的JavaScript中一樣。

使用const關鍵字聲明的常量在其作用域内是不可重新指派的，這意味着一旦常量被指派，就不能再改變其值。

以下是一個示例，展示了在Vue 3中如何使用const關鍵字聲明常量：

export default {
  data() {
    const PI = 3.14;

    return {
      PI
    };
  },
  methods: {
    calculateArea(radius) {
      const PI = 3.14159;
      const area = PI * radius * radius;
      console.log(area); // 輸出: 計算得到的圓面積
    }
  }
};

在上面的示例中，我們在data選項中使用const聲明了一個常量PI，并将其綁定到元件的資料。在methods選項中的calculateArea方法中，我們使用了另一個具有相同名稱的const聲明的常量PI，這個常量隻在方法的作用域内有效。無論在哪個作用域中，const聲明的常量值都不可更改。

通過使用const關鍵字，你可以明确表示某個值是不可變的，這有助于提高代碼的可讀性和可維護性，并避免意外的變量重寫。

這是關于在Vue 3中使用const關鍵字聲明常量的簡要解釋。你可以在元件中使用const來聲明常量，并確定它們在其作用域内不會被重新指派。

let 和const 在Vue中有何差別？

let和const是JavaScript中的關鍵字，用于聲明變量和常量。雖然在Vue 3中使用let和const與标準的JavaScript用法相同，但它們在使用時具有以下差別：

可重新指派：
let聲明的變量可以重新指派。你可以在同一作用域中多次為let變量配置設定不同的值。
const聲明的常量是不可重新指派的。一旦你為常量指派，就不能再更改其值。
作用域：
let和const都是塊級作用域變量。這意味着它們在聲明它們的代碼塊内有效，并且在該代碼塊之外不可通路。
在Vue 3元件中，使用let和const聲明的變量和常量隻在元件的作用域内有效，并且不會影響到其他元件或全局作用域。
聲明和初始化：
let和const都可以在聲明時進行初始化，也可以在稍後的代碼中指派。
let聲明的變量可以在聲明之前使用，但它們的值将為undefined。你可以在稍後的代碼中為其指派。
const聲明的常量必須在聲明時進行初始化，并且不能在稍後的代碼中指派。
變量類型推斷：
在使用let聲明變量時，變量的類型是可變的。你可以将其指派為任何類型的值。
在使用const聲明常量時，變量的類型是不可變的。一旦為常量指派，它的類型将被确定，并且不能将其指派為不同類型的值。

總結來說，在Vue 3中，let用于聲明可重新指派的變量，而const用于聲明不可重新指派的常量。它們都是塊級作用域的，并且在Vue 3元件中的使用方式與标準的JavaScript相同。根據需求，你可以選擇使用let或const來聲明适合的變量或常量。

let、const、var 有什麼差別？

在JavaScript中，有三種聲明變量的關鍵字：let、const和var。它們在作用域、可重新指派性和聲明提升等方面有一些差別。

let：
let關鍵字用于聲明一個塊級作用域的變量。
let聲明的變量具有塊級作用域，僅在聲明它的代碼塊内部可見。
let聲明的變量可以重新指派，允許在同一作用域内對其進行修改。
let不存在聲明提升，即變量隻能在聲明後使用。
const：
const關鍵字用于聲明一個塊級作用域的常量。
const聲明的常量具有塊級作用域，僅在聲明它的代碼塊内部可見。
const聲明的常量是不可重新指派的，一旦指派後不能再修改。
const也可以用于聲明一個不可變的引用類型，但它并不當機對象本身，隻是保證變量指向的位址不變。
var：
var關鍵字用于聲明一個函數作用域的變量。
var聲明的變量具有函數作用域，可在整個函數内部通路。
var聲明的變量可以重新指派，允許在同一函數内對其進行修改。
var存在變量提升，即變量可以在聲明之前使用。

在Vue 3中，推薦使用let和const關鍵字來聲明變量和常量，因為它們具有更明确的作用域和語義，更好地支援塊級作用域，并且能夠提供更嚴格的變量限制。相比之下，var由于存在變量提升和函數作用域的特性，可能會導緻意外的行為和作用域問題，是以在Vue 3中不推薦使用var。

綜上所述，let和const是在Vue 3中更推薦使用的變量和常量聲明方式，而var則存在一些不推薦使用的特性。

什麼是 reactive ？

reactive()是一個函數，用于建立一個對象的響應式代理。

當你使用reactive()函數将一個普通的JavaScript對象作為參數傳入時，它會傳回一個響應式代理對象。這個代理對象會跟蹤對象的變化，并在對象的屬性發生變化時觸發相關元件的更新。

通過使用reactive()建立的響應式代理對象，你可以直接通路和修改對象的屬性，就像操作普通的JavaScript對象一樣。當你修改代理對象的屬性時，相關的元件會在資料變化時進行更新。

下面是一個示例，展示了如何使用reactive()函數建立一個響應式代理對象：

import { reactive } from 'vue';

const user = reactive({ name: 'John', age: 25 });

console.log(user.name); // 通路代理對象的屬性

user.age++; // 修改代理對象的屬性

console.log(user.age); // 列印修改後的屬性值

在上面的示例中，我們使用reactive()函數建立了一個響應式代理對象user，其中包含name和age兩個屬性。我們可以通過通路user.name和user.age來通路代理對象的屬性，并且在修改user.age的值時，相關的元件将會進行更新。

reactive()函數是Vue 3中響應式系統的核心之一，它使得狀态管理和資料驅動的開發更加友善和高效。通過使用reactive()建立的響應式代理對象，你可以輕松地跟蹤對象的變化并在Vue元件中進行使用。

ref 、reactive 有什麼差別？

reactive()和ref()是Vue 3中用于建立響應式資料的兩個不同的函數，ref适用于基本類型值的響應式管理，而reactive适用于複雜對象的響應式代理。

它們在某些方面有所差別。

使用方式：
ref函數用于建立一個包裝了基本類型值的響應式引用對象。你可以通過.value屬性通路和修改其值。
reactive函數用于建立一個對象的響應式代理。你可以直接通路和修改對象的屬性，無需使用.value。
适用場景：
ref适用于包裝基本類型值，如數字、字元串等。它常用于單個值的響應式管理，特别是在模闆中使用。
reactive适用于建立複雜對象的響應式代理。它常用于管理包含多個屬性的對象，或者在JavaScript代碼中進行資料操作和計算。
更新觸發：
當使用ref的引用對象的值發生變化時，相關的元件将會進行更新。
當使用reactive建立的對象的屬性發生變化時，相關元件也會在資料變化時進行更新。

import { ref, reactive } from 'vue';

// 使用ref
const count = ref(0); // 建立一個響應式引用對象
console.log(count.value); // 通路引用對象的值

count.value++; // 修改引用對象的值

// 使用reactive
const user = reactive({ name: 'John', age: 25 }); // 建立一個響應式代理對象
console.log(user.name); // 通路代理對象的屬性

user.age++; // 修改代理對象的屬性

總結來說，ref适用于基本類型值的響應式管理，而reactive适用于複雜對象的響應式代理。你可以根據資料的類型和用途選擇合适的函數來建立響應式資料。

什麼是readonly?

readonly()是一個函數，用于建立一個隻讀的響應式代理。readonly()提供了一種友善的方式來建立隻讀的響應式資料，以保護資料的完整性和不可變性。它對于共享資料或需要防止資料被修改的場景非常有用。

當你使用readonly()函數将一個普通的JavaScript對象作為參數傳入時，它會傳回一個隻讀的響應式代理對象。這個隻讀代理對象不允許修改其屬性的值，但仍然能夠跟蹤對象的變化并在資料變化時觸發相關元件的更新。

通過使用readonly()建立的隻讀響應式代理對象，你可以直接通路對象的屬性，但無法對其進行修改。這對于共享資料或保護敏感資料的通路非常有用。

下面是一個示例，展示了如何使用readonly()函數建立一個隻讀的響應式代理對象：

import { reactive, readonly } from 'vue';

const user = reactive({ name: 'John', age: 25 });
const readonlyUser = readonly(user);

console.log(readonlyUser.name); // 通路隻讀代理對象的屬性

readonlyUser.age++; // 嘗試修改隻讀代理對象的屬性（不會生效）

console.log(readonlyUser.age); // 列印隻讀代理對象的屬性值（未被修改）

在上面的示例中，我們使用reactive()函數建立了一個響應式代理對象user，然後使用readonly()函數建立了一個隻讀的響應式代理對象readonlyUser。我們可以通過通路readonlyUser.name來通路隻讀代理對象的屬性，但是嘗試修改readonlyUser.age的值是無效的。

什麼是computed？

computed() 是一個函數，用于建立計算屬性。

計算屬性是一種派生出的響應式資料，其值根據其他響應式資料計算而來。使用computed()函數可以友善地定義計算屬性，并在其依賴的響應式資料發生變化時自動更新。

使用computed()函數時，你需要傳入一個具有get方法的函數作為參數。在該函數内部，你可以通路和處理其他響應式資料，并傳回計算後的結果。

下面是一個示例，展示了如何使用computed()函數建立計算屬性：

import { reactive, computed } from 'vue';

const user = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

const fullName = computed(() => {
  return `${user.firstName} ${user.lastName}`;
});

console.log(fullName.value); // 通路計算屬性的值

user.firstName = 'Jane'; // 修改依賴的響應式資料

console.log(fullName.value); // 列印更新後的計算屬性值

在上面的示例中，我們使用reactive()函數建立了一個具有firstName和lastName屬性的響應式對象user。然後，我們使用computed()函數建立了一個計算屬性fullName，它通過拼接user.firstName和user.lastName的值得出完整的姓名。通過通路fullName.value可以擷取計算屬性的值。

當user.firstName或user.lastName的值發生變化時，fullName會自動更新，并可以通過fullName.value通路最新的計算結果。

計算屬性可以簡化代碼，避免重複計算，以及使資料的派生和依賴關系更加清晰。你可以在Vue 3中使用computed()函數來定義和使用計算屬性。

什麼是watch？

watch()是一個函數，用于監視資料的變化并執行相應的操作。

使用watch()函數，你可以指定一個響應式資料或一個計算屬性作為要監視的源，以及一個回調函數作為響應的操作。當監視的源資料發生變化時，回調函數将被觸發執行。

watch()函數接受兩個參數：監視的源資料和回調函數。回調函數接受兩個參數：新值和舊值。你可以在回調函數中執行任何邏輯，例如更新其他響應式資料、觸發方法或進行異步操作等。

下面是一個示例，展示了如何使用watch()函數監視響應式資料的變化：

import { reactive, watch } from 'vue';

const user = reactive({
  name: 'John',
  age: 25
});

watch(() => user.name, (newName, oldName) => {
  console.log(`Name changed from ${oldName} to ${newName}`);
});

user.name = 'Jane'; // 觸發監視，列印

在上面的示例中，我們使用reactive()函數建立了一個具有name和age屬性的響應式對象user。然後，我們使用watch()函數來監視user.name的變化，并在每次變化時觸發回調函數。回調函數接收新值和舊值作為參數，并在控制台列印名稱的變化。

當我們修改user.name的值時，watch()函數會檢測到變化并調用回調函數。在這個例子中，我們修改了user.name的值為'Jane'，觸發了監視并列印了名稱的變化。

除了監視響應式資料的變化，watch()函數還可以監視計算屬性、多個源資料、異步操作等。你可以根據需要在Vue 3中使用watch()函數來實作資料的監視和相應的邏輯操作。

watch、computed 有什麼差別？

watch和computed是用于響應式資料的兩個不同的功能。

watch:
watch函數用于監視響應式資料的變化，并執行相應的操作。
通過watch函數，你可以指定一個響應式資料、計算屬性或多個響應式資料作為監視的源，并提供一個回調函數來定義監視的行為。
當監視的源資料發生變化時，回調函數将被觸發執行，并可以通路新值和舊值。
watch函數适用于需要自定義的、針對特定資料變化的響應邏輯，可以處理複雜的監視需求。
computed:
computed函數用于建立計算屬性，它是一種派生的響應式資料。
通過computed函數，你可以定義一個依賴于其他響應式資料的計算屬性，并在其依賴資料發生變化時自動更新。
計算屬性是基于已有的響應式資料進行計算得出的結果，它具有緩存機制，隻在其依賴的資料發生變化時才重新計算值。
computed函數适用于對已有的響應式資料進行計算、派生或處理，并自動跟蹤其依賴資料的變化。

示例：

import { reactive, computed, watch } from 'vue';

const user = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

// 計算屬性
const fullName = computed(() => {
  return `${user.firstName} ${user.lastName}`;
});

// 監視計算屬性的變化
watch(() => fullName.value, (newVal, oldVal) => {
  console.log(`Full name changed from ${oldVal} to ${newVal}`);
});

user.firstName = 'Jane'; // 觸發計算屬性和監視的更新

在上面的示例中，我們使用reactive()函數建立了一個具有firstName和lastName屬性的響應式對象user。然後，我們使用computed()函數建立了一個計算屬性fullName，它通過拼接user.firstName和user.lastName的值得出完整的姓名。接着，我們使用watch()函數監視fullName的變化，并在變化時觸發回調函數。

當我們修改user.firstName的值時，computed會重新計算fullName的值，并觸發watch的回調函數，列印姓名的變化。

綜上所述，watch用于自定義監視響應式資料的變化和相應的操作，而computed用于建立依賴其他響應式資料的派生屬性。它們在用途和應用場景上有所不同，可以根據具體需求選擇使用。

v-model指令是用來做什麼的？

v-model指令用于在表單元素群組件之間建立雙向綁定。

通過v-model指令，可以将表單元素的值與Vue執行個體中的資料進行雙向綁定。這意味着當表單元素的值發生變化時，綁定的資料也會随之更新；反之，當綁定的資料發生變化時，表單元素的值也會更新。

v-model指令在不同的表單元素上具有不同的行為，例如輸入框、複選框、單選框等。它簡化了處理表單資料的過程，減少了手動監聽和更新資料的代碼量。

以下是一些示例，展示了v-model指令的用法：

文本輸入框：

<input type="text" v-model="message">

在這個示例中，v-model指令将文本輸入框的值與Vue執行個體中的message屬性進行雙向綁定。

複選框：

<input type="checkbox" v-model="isChecked">

這個示例中，v-model指令将複選框的選中狀态與Vue執行個體中的isChecked屬性進行雙向綁定。

單選框：

<input type="radio" value="option1" v-model="selectedOption">
<input type="radio" value="option2" v-model="selectedOption">

在這個示例中，v-model指令将一組單選框中被選中的選項的值與Vue執行個體中的selectedOption屬性進行雙向綁定。

通過使用v-model指令，你可以輕松地實作表單元素和Vue執行個體資料之間的雙向綁定，簡化了表單資料的處理過程。

Vue中的動态元件是什麼？如何使用動态元件？

動态元件（Dynamic Components）是一種用于根據不同條件或資料動态地切換和渲染元件的機制。

動态元件允許你在同一個位置渲染不同的元件，而無需手動地添加或删除元件。它使得根據不同的上下文或使用者互動，可以動态地選擇要顯示的元件。

要使用動态元件，你可以使用<component>标簽并使用特定的屬性來動态指定要渲染的元件。常用的屬性包括：

is屬性：通過is屬性指定要渲染的元件，可以是一個元件的名稱或一個元件的引用。

<component :is="componentName"></component>

在這個示例中，componentName是一個動态變量，它的值決定了要渲染的元件。

v-bind屬性：使用v-bind指令動态綁定一個元件執行個體或元件選項對象。

<component v-bind="componentOptions"></component>

在這個示例中，componentOptions是一個動态變量，它包含了元件的選項對象。

動态元件的使用可以根據不同的需求和場景而有所不同。你可以根據條件、使用者互動、路由切換等動态地決定要渲染的元件。

下面是一個示例，展示了如何使用動态元件根據使用者選擇來渲染不同的元件：

<template>
  <div>
    <button @click="changeComponent('ComponentA')">Show Component A</button>
    <button @click="changeComponent('ComponentB')">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

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

在這個示例中，根據使用者的點選選擇，我們動态地将currentComponent屬性設定為不同的元件執行個體。然後，通過<component>标簽的:is屬性将目前選擇的元件渲染到頁面上。

通過使用動态元件，你可以根據條件或使用者互動動态地切換和渲染元件，使得你的應用更加靈活和可擴充。

如何在Vue中進行異步操作？

在Vue中進行異步操作通常涉及到網絡請求、定時器、Promise等場景。以下是幾種常見的處理異步操作的方式：

使用async/await：在Vue元件的方法中，你可以使用async關鍵字聲明一個異步函數，并在需要的地方使用await關鍵字等待異步操作的完成。

async fetchData() {
  try {
    const response = await axios.get('/api/data');
    this.data = response.data;
  } catch (error) {
    console.error(error);
  }
}

在上面的例子中，fetchData方法使用async/await來等待異步請求的結果，并将結果指派給元件的data屬性。

使用Promise：你可以在Vue元件中使用Promise來處理異步操作，通過then和catch方法來處理異步操作的成功和失敗。

fetchData() {
  axios.get('/api/data')
    .then(response => {
      this.data = response.data;
    })
    .catch(error => {
      console.error(error);
    });
}

在上面的例子中，fetchData方法使用axios.get傳回的Promise來處理異步請求，通過then方法擷取請求成功的結果，并将結果指派給元件的data屬性。通過catch方法處理請求失敗的情況。

使用Vue.nextTick：在某些情況下，Vue的響應式系統可能會延遲更新DOM。如果你需要在DOM更新後執行一些異步操作，可以使用Vue.nextTick方法。

updated() {
  this.$nextTick(() => {
    // 執行異步操作
  });
}

在上面的例子中，updated生命周期鈎子中使用Vue.nextTick方法，確定在DOM更新後執行異步操作。

無論你選擇使用哪種方式，都需要根據具體情況選擇适合的方式處理異步操作。在Vue中，你可以結合使用async/await、Promise和Vue提供的工具方法來處理異步操作，并在合适的時機更新元件的資料。

Vue的響應式原理?

Vue的響應式原理是指Vue如何追蹤和響應資料的變化，以便自動更新相關的視圖。

Vue的響應式原理基于以下幾個關鍵概念：

依賴追蹤（Dependency Tracking）：當Vue初始化時，它會周遊元件的資料對象（data）中的所有屬性，并使用JavaScript的Object.defineProperty方法為每個屬性添加getter和setter函數。在getter函數中，Vue會收集目前元件渲染過程中通路了哪些屬性（依賴）；在setter函數中，Vue會通知相關的觀察者（Watchers）進行更新。
觀察者模式（Observer Pattern）： Vue中的觀察者模式用于訂閱和通知資料變化。Vue将每個元件執行個體作為觀察者，當響應式資料發生變化時，觀察者會接收到通知并執行相應的更新操作。
響應式對象（Reactive Objects）：在Vue中，使用Vue.observable或reactive函數将一個普通對象轉換為響應式對象。響應式對象的屬性在通路和修改時會自動追蹤依賴并觸發更新。
虛拟DOM（Virtual DOM）： Vue使用虛拟DOM來跟蹤和管理視圖的狀态。當響應式資料發生變化時，Vue會重新渲染虛拟DOM并與之前的虛拟DOM進行比較，找出變化的部分，然後隻更新這些變化的部分，以提高性能。
批量更新（Batch Updates）：為了提高性能和減少不必要的DOM操作，Vue會将多個資料的變化合并為一個批量更新操作。當多個資料變化發生時，Vue會将這些變化收集起來，并在下一個事件循環中進行一次性的更新，以減少不必要的重繪和布局。

通過以上的機制和原理，Vue能夠實作資料驅動的視圖更新。當響應式資料發生變化時，Vue能夠自動更新相關的元件視圖，保持視圖和資料的同步。這使得開發者可以專注于資料的變化和互動邏輯，而無需手動操作DOM來更新視圖。

什麼是Vue的虛拟DOM（Virtual DOM）？

Vue的虛拟DOM（Virtual DOM）是一種輕量級的、記憶體中的表示層級結構的JavaScript對象。它是對真實DOM的一種抽象，用于提高性能和效率。

虛拟DOM在Vue中起到了以下幾個作用：

提高性能：虛拟DOM通過在記憶體中維護一份完整的DOM樹，實作了對真實DOM的抽象。當資料發生變化時，Vue會先更新虛拟DOM，然後通過算法進行虛拟DOM的比較，找出變化的部分，最後隻對這部分進行實際的DOM操作。這種優化能夠減少對真實DOM的直接操作次數，提高性能。
跨平台能力：虛拟DOM可以将Vue的響應式能力擴充到多種平台。Vue可以通過不同的渲染器将虛拟DOM轉換為特定平台的實際DOM操作，例如浏覽器環境下的DOM操作、移動端的原生DOM操作等。這使得Vue可以在不同的平台上運作，并且保持相同的開發模型和資料驅動的思維方式。
簡化DOM操作：使用虛拟DOM可以讓開發者專注于資料的變化和互動邏輯，而無需直接操作真實DOM。Vue通過提供一組基于模闆的文法和指令，以及自動的虛拟DOM更新機制，将視圖和資料的關聯封裝起來，簡化了開發過程。

總之，Vue的虛拟DOM是對真實DOM的一種抽象，通過在記憶體中維護一份完整的DOM樹，并通過算法進行比較和更新，實作了高效的DOM操作和跨平台能力。它是Vue在實作資料驅動視圖的基礎上，提高性能和開發效率的重要技術之一。

Vue3項目實踐-第四篇（常用概念整理 part 1）

本文将介紹以下内容:

什麼是ref？

如何使用ref？

如何通路ref的值？

什麼是let?

什麼是const?

let 和const 在Vue中有何差別？

let、const、var 有什麼差別？

什麼是 reactive ？

ref 、reactive 有什麼差別？

什麼是readonly?

什麼是computed？

什麼是watch？

watch、computed 有什麼差別？

v-model指令是用來做什麼的？

Vue中的動态元件是什麼？如何使用動态元件？

如何在Vue中進行異步操作？

Vue的響應式原理?

什麼是Vue的虛拟DOM（Virtual DOM）？

繼續閱讀

JDK導入安全證書失敗異常問題解決

Vue3項目實踐-第三篇（vue-router 應用篇 2）

Vue3項目實踐-第三篇（vue-router 傳參及接受參數方式）

Vue3項目實踐-第三篇（vue-router 常見問題）

Vue3項目實踐-第二篇（狀态管理-Vuex 基礎概念）

Vue3項目實踐-第四篇（項目配置與安裝）

hbase熱點問題(資料傾斜)解決方案---rowkey散列和預分區設計

微服務網關（四）tcp代理子產品微服務網關（四）tcp代理子產品補充

Vue3項目實踐-第四篇（常用概念整理 part 2）

Vue3項目實踐-第五篇（登入頁-基礎篇）

Vue3項目實踐-第五篇（Axios）

賽郵科普 | 短信平台常用概念與名詞釋義

Vue3項目實踐-第五篇（改造登入頁-Axios模拟請求資料）

森林“療愈”人類人類如何“治愈”森林？ —— 恒生中國“藍碳+綠碳”生态修複項目實踐觀察

認識緩存之伺服器緩存（Nginx）

關于多線程(程序）任務的思考