ref函數和reactive函數常用于響應式編程框架中，例如Vue.js和React。

ref函數的實際應用：

在Vue.js中，可以使用ref函數創建響應式的數據。例如，可以使用ref函數來創建一個響應式的計數器變量，并在模板中使用它的值和修改它的方法。
ref函數還可以用于將普通變量轉換為響應式變量。例如，可以使用ref函數將一個普通的JavaScript對象轉換為響應式對象，并在模板或組件中使用它。

reactive函數的實際應用：

在Vue.js中，reactive函數可以用于創建一個響應式的數據模型。例如，可以使用reactive函數創建一個包含多個響應式屬性的對象，并在組件中使用它們。
reactive函數還可以用于創建一個具有響應式行為的計算屬性。例如，在Vue.js中，可以使用reactive函數創建一個計算屬性，該屬性會根據依賴項的變化而自動更新其值。
需要注意的是，ref函數和reactive函數的具體用法和語法可能會根據所使用的編程框架而有所不同。因此，在實際應用中，可以參考相關框架的文檔和示例來了解它們在特定框架中的具體用法和最佳實踐。

ref函數和reactive函數在代碼中的實際應用可以有如下示例：

ref函數的實際應用

import { ref } from 'vue';

// 在函數中使用ref函數定義一個響應式數據
function incrementCounter() {
  const counter = ref(0);

  // 在事件處理函數中修改響應式數據
  function handleClick() {
    counter.value += 1;
  }

  return {
    counter,
    handleClick
  };
}

export default {
  setup() {
    const { counter, handleClick } = incrementCounter();

    return {
      counter,
      handleClick
    };
  }
}

在上述代碼示例中，通過在函數中使用ref函數，我們創建了一個響應式的計數器變量。在點擊事件的處理函數中，我們通過修改counter.value來改變計數器的值。該計數器變量可以在模板中進行展示，并且會自動更新。

示例2：reactive函數的實際應用

import { reactive, computed } from 'vue';

// 在函數中使用reactive函數創建一個響應式數據模型
function createDataModel() {
  const data = reactive({
    firstName: 'John',
    lastName: 'Doe',
    fullName: computed(() => data.firstName + ' ' + data.lastName)
  });

  // 在函數中修改響應式數據
  function updateName(newFirstName, newLastName) {
    data.firstName = newFirstName;
    data.lastName = newLastName;
  }

  return {
    data,
    updateName
  };
}

export default {
  setup() {
    const { data, updateName } = createDataModel();

    return {
      data,
      updateName
    };
  }
}

在上述代碼示例中，通過在函數中使用reactive函數，我們創建了一個包含多個響應式屬性的數據模型。其中，fullName是通過計算屬性computed函數來實現的，它會根據firstName和lastName的變化而自動更新。我們還可以在函數中定義一個用于修改數據的方法updateName，可以通過調用該方法來修改數據模型中的屬性。數據模型的屬性可以在模板中進行展示，并且會自動更新。

需要注意的是，上述示例代碼是基于Vue.js的示例。在其他的響應式編程框架中，ref函數和reactive函數的具體用法和語法可能會有所不同。因此，在實際應用中，可以根據具體框架的文檔和示例來了解相關函數的用法和最佳實踐。