vue3 最长递增子序列

### 实现最长递增子序列算法

在 Vue 3 项目中实现最长递增子序列（LIS）算法可以按照如下方式进行。此算法不仅有助于理解 Vue 3 的内部工作原理，还可以应用于各种实际场景。

#### 函数定义与逻辑解析

为了计算给定数组中的最长递增子序列，通常采用动态规划的方法来解决问题。以下是具体的 JavaScript 实现：

function lengthOfLIS(nums) {
    if (nums.length === 0) return [];
    
    let dp = Array.from({length: nums.length}, () => 1);
    let prevIndex = Array.from({length: nums.length}, () => -1);

    for (let i = 1; i < nums.length; i++) {
        for (let j = 0; j < i; j++) {
            if (nums[i] > nums[j] && dp[i] < dp[j] + 1) {
                dp[i] = dp[j] + 1;
                prevIndex[i] = j;
            }
        }
    }

    // 找到dp数组的最大值及其索引
    let maxLen = Math.max(...dp);
    let index = dp.indexOf(maxLen);

    // 构建最长递增子序列
    let lis = [];
    while(index !== -1){
        lis.unshift(nums[index]);
        index = prevIndex[index];
    }

    return lis;
}

这段代码实现了寻找输入整数列表 `nums` 中的最长严格递增子序列的功能[^5]。通过构建两个辅助数组 `dp` 和 `prevIndex` 来记录到达当前位置时可能形成的 LIS 长度以及前驱节点的位置，从而可以在最后回溯得到完整的 LIS 序列。

#### 将其实现在 Vue 组件内

如果希望将上述功能集成到 Vue 3 单文件组件(SFC)，则可以通过组合式 API 或选项式 API 完成。这里展示基于 Composition API 的做法：

<template>
  <div>
    <h2>Longest Increasing Subsequence</h2>
    <input v-model="inputNumbers" placeholder="Enter numbers separated by commas"/>
    <button @click="calculate">Calculate LIS</button>
    <p>LIS Result: {{ lisResult }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputNumbers = ref('');
const lisResult = ref([]);

// 复用之前的函数
function calculate() {
    try{
        const numArray = inputNumbers.value.split(',').map(Number).filter(n=>!isNaN(n));
        lisResult.value = lengthOfLIS(numArray);
    } catch(error){
        console.error('Invalid Input');
    }
}

// 导入前面定义好的方法
defineExpose({
    lengthOfLIS,
});
</script>

在这个例子中，用户可以从界面上输入一系列数值并点击按钮触发计算过程；随后页面会显示对应的最长递增子序列结果[^4]。