技能二十一 结合代码来说明组合式API比起选项式API的好处？（有代码）

使用组合式API时，可以根据具体需求自由地组合和调用多个不同的API，以实现更加定制化和灵活的功能。下面是一个简单的代码示例，演示了如何使用组合式API来实现翻译和情感分析功能：

import requests

def translate(text, target_language):
    translation_api_url = 'https://api.openai.com/v1/translate'
    headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
    }
    data = {
        'text': text,
        'target_language': target_language
    }
    response = requests.post(translation_api_url, headers=headers, json=data)
    translation_result = response.json()
    return translation_result['translation']

def analyze_sentiment(text):
    sentiment_api_url = 'https://api.openai.com/v1/analyze_sentiment'
    headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
    }
    data = {
        'text': text
    }
    response = requests.post(sentiment_api_url, headers=headers, json=data)
    sentiment_result = response.json()
    return sentiment_result['score']

def compose_api(text, target_language):
    translation = translate(text, target_language)
    sentiment_score = analyze_sentiment(translation)
    return translation, sentiment_score

# 使用组合式API进行翻译和情感分析
text = "Hello, how are you?"
target_language = "fr"
translation, sentiment_score = compose_api(text, target_language)

print("Translation:", translation)
print("Sentiment Score:", sentiment_score)

**

通过组合式API，我们可以将翻译和情感分析的功能组合在一起，只需调用 compose_api 函数即可实现。这样的方式更加灵活，可以根据具体需求组合不同的API，实现更加复杂的功能。而选项式API则需要对每个功能单独调用对应的API，不能自由组合，因此相对来说灵活性较差。

技能二十二 能描述pi nia和vuex的区别

Piña和Vuex都是Vue.js的状态管理库，但它们在一些方面有一些区别：

1. 架构和模块化：Piña是一个基于Vue 3的状态管理库，利用了Vue 3的Composition API。它提供了基于类的模块化方式来定义状态和操作。而Vuex则是Vue 2的官方状态管理库，使用了基于对象的模块化方式。基于类的模块化在一些场景下更加直观和灵活。
2. 响应式系统：Piña使用了Vue 3的Proxy响应式实现，将状态和操作变为可观察的。这使得状态的变化能够自动触发视图更新。而Vuex使用了Vue 2的Object.defineProperty实现响应式，需要通过特定的方式来触发视图更新。
3. 插件和工具支持：Vuex拥有较为丰富的插件生态系统，提供了大量的第三方插件和工具，如vue-devtools和vuex-persistedstate。Piña在Vue 3生态系统较新时，插件支持相对较少，但随着生态系统的发展，预计会有更多的插件支持。
4. 性能和体积：由于Piña使用了Vue 3的新特性和优化，如树摇和编译时优化，它在性能和体积上可能更加出色。Vuex在Vue 2生态系统中经过了长期优化，也具有较高的性能表现。
5. 学习曲线：Vuex是Vue的官方状态管理库，在Vue社区中有广泛的应用和文档支持，因此对于Vue开发者来说，Vuex的学习曲线相对较平缓。Piña作为相对较新的库，可能需要更多的学习和适应的时间。

总的来说，Piña相对于Vuex在使用上更加现代化和灵活，对于Vue 3项目来说是一个可行的选择。然而，Vuex在Vue 2项目和生态系统中仍然处于主导地位，拥有更多的开发者社区和插件支持。因此，选择使用Piña还是Vuex，需要考虑具体项目需求、Vue版本和生态系统的因素。

技能二十三 掌握ｖ3中VModel和ｖ2的区别（有代码+能口述）

Vue 2中，v-model是一个语法糖，用于双向绑定表单输入元素和组件的数据。它在内部使用了value属性和input事件来实现双向绑定。

在Vue 3中，v-model的行为发生了一些改变。在组件上使用v-model时，不再是一个简单的语法糖，而是一种自定义指令的使用方式。你需要在组件上定义一个名为modelValue的prop，以及一个名为update:modelValue的事件，来处理双向绑定的逻辑。

下面是一个示例，演示了Vue 2和Vue 3中v-model的区别：

Vue 2示例:

<template>
  <div>
    <input v-model="message" placeholder="Enter message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

**

Vue 3示例:

<template>
  <div>
    <CustomInput v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

**

在Vue 3示例中，CustomInput是一个自定义组件，可以在其中使用v-model。在CustomInput组件中，需要定义一个名为modelValue的prop，以及一个名为update:modelValue的事件。这两个属性和事件将会在父组件中的v-model绑定中使用。

CustomInput示例:

<template>
  <div>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" placeholder="Enter message">
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String
  }
}
</script>

**

上述CustomInput组件中，:value="modelValue"将父组件中的message值传递给输入框的value属性，@input="$emit('update:modelValue', $event.target.value)"通过触发update:modelValue事件，将输入框的值传递回父组件。

通过这种方式，Vue 3中的v-model提供了更灵活的控制方式，允许开发者更全面地定义组件的双向绑定行为。

技能二十四 开发并上传npm包

开发并上传一个NPM包，按照以下步骤进行操作：

1. 初始化项目：在本地创建一个新的文件夹作为项目的根目录，然后在该目录下执行以下命令来初始化项目：

   npm init
   

   **

   这将创建一个package.json文件，其中包含项目的元数据和依赖项。

2. 编写代码：在项目目录下创建你的库，并编写相应的代码逻辑。确保代码可用并经过充分测试。

3. 配置包：根据你的库的需求，在项目的根目录下创建一个.npmrc文件，用于配置NPM包发布时的设置（可选）。

4. 配置依赖项：如果你的库依赖其他的第三方库或包，可以将它们添加到package.json的dependencies或devDependencies中。使用以下命令来安装这些依赖项：

   npm install <package-name>
   

   **

5. 编写文档：编写关于如何使用和贡献你的库的文档，并添加到项目中。这可以帮助其他开发者更好地了解你的包和如何使用它。

6. 版本控制：通过在package.json中适当地更新version字段，管理你的包的版本号。确保在每次发布新版本之前都适当地增加版本号。

7. 登录NPM：首先，你需要在NPM官方网站上注册一个账号。然后，在终端中运行以下命令以登录NPM：

   npm login
   

   **

8. 发布包：使用以下命令将你的包发布到NPM仓库：

   npm publish
   

   **

   注意：在首次发布之前，你的包的名称必须是唯一的。

9. 更新包：如果你对已发布的包进行了更改，并希望将更改后的版本发布到NPM上，请确保先更新version字段，然后再运行npm publish命令。

以上是一个简单的步骤指南来开发和上传一个NPM包。确保你了解NPM的相应规范和最佳实践，并在发布前仔细检查你的包以确保其质量和功能。

技能二十五 了解vite和webpack的工作原理(能口述)

Vite和Webpack都是常用的前端构建工具，它们的工作原理略有不同：

Vite的工作原理：

1. 开发阶段：Vite使用ES模块（ESM）作为开发的基础模块系统。当你启动Vite开发服务器时，它会将你的源代码在浏览器中运行，并通过原生的浏览器的HTTP/2服务器推送（server push）功能，将模块以及依赖的资源一次性推送到浏览器，而无需额外的构建过程。
2. 缓存：Vite还会在本地缓存模块，避免重复的网络请求。
3. 即时编译：当你修改源代码时，Vite会在浏览器中实时进行模块的编译，只编译修改的模块及其直接依赖，而不需要重新编译整个项目。
4. HMR：Vite使用独立的Fast Refresh HMR（Hot Module Replacement）机制，以较快的速度在浏览器中更新并重新加载只有变化部分的模块，提供了更快的开发体验。

Webpack的工作原理：

1. 配置：Webpack通过一个配置文件定义了项目的构建规则和需要使用的插件。
2. 入口点：Webpack会根据指定的入口点（entry point）来构建整个项目的依赖图。它会从入口点开始递归解析模块的依赖关系。
3. 加载器：在构建过程中，Webpack根据模块文件的类型（如JavaScript、CSS、图片等）使用相应的加载器（loader）对模块进行处理和转换。加载器能够将非JavaScript文件转换为JavaScript模块，或者将其他类型的资源打包到可用的输出文件中。
4. 插件：Webpack还可以使用各种插件进行额外的功能扩展，例如代码压缩、文件合并、静态资源的处理等。
5. 代码分割和打包：Webpack在构建过程中可以根据配置对代码进行分割，将文件分割为更小的块，以便实现按需加载和优化加载性能。
6. 输出：最后，在构建过程结束时，Webpack会根据配置生成一个或多个输出文件，包括JavaScript、CSS和其他静态资源。这些文件可以用于在生产环境中部署和运行。

总体而言，Vite利用了浏览器原生的模块系统和HTTP/2推送功能，以及即时编译和独立的HMR机制，使得开发过程更加高效和快速。而Webpack通过配置、加载器和插件的组合来构建项目的依赖图，并生成最终的输出文件。两者在不同的应用场景和项目需求中都有自己的优势，选择合适的工具取决于具体的项目要求和开发团队的偏好。

技能二十六 能写一个vite插件

简单的示例，展示了如何编写一个基础的Vite插件：

// vite-plugin-example.js

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // 在这里可以对每个模块的代码进行转换
      if (id.endsWith('.js')) {
        code = code.replace(/console.log(/g, 'console.warn(');
      }
      return code;
    },
    configureServer(server) {
      // 在这里可以访问到Vite的服务器实例，并执行自定义逻辑
      server.middlewares.use((req, res, next) => {
        // 在每个请求上执行中间件逻辑
        console.log(`[${req.method}] ${req.url}`);
        next();
      });
    }
  };
}

**

以上是一个名为myPlugin的Vite插件，它包含了两个钩子：transform和configureServer。

transform钩子用于在每个模块的代码转换过程中执行自定义逻辑。在示例中，它查找所有以.js结尾的模块，并将其中的console.log语句替换为console.warn语句。

configureServer钩子用于访问Vite的服务器实例，并执行一些自定义的服务器逻辑。在示例中，它向服务器添加了一个中间件，在每个请求上打印请求的方法和URL。

要在你的Vite项目中使用这个插件，在项目的根目录下创建一个vite.config.js文件，并将插件添加到其中：

// vite.config.js
import myPlugin from './vite-plugin-example.js';

export default {
  plugins: [myPlugin()]
};

**

在这个示例中，myPlugin插件被添加到了Vite的配置选项中的plugins数组中。

这只是一个简单的示例，真实的插件可能包含更多的功能和复杂的逻辑。通过创建自定义的插件，你可以扩展Vite的功能，并根据项目的需求自定义构建和开发过程。

技能二十七 能说出常用的5+webpack loader

当使用Webpack作为构建工具时，以下是常用的5个Webpack加载器（loader）：

1. Babel-loader：Babel-loader允许Webpack使用Babel转译器来处理JavaScript代码，使我们能够在现代浏览器中使用ES6+特性。它将ES6+代码转换为可以在目标环境中运行的ES5代码。
2. CSS-loader：CSS-loader允许Webpack处理CSS文件，并解析CSS中的@import和url()语句。它将CSS文件转换为一个JavaScript模块，使得我们可以在项目中以模块化的方式导入CSS样式。
3. style-loader：Style-loader将CSS模块从JavaScript模块中提取出来，并通过在HTML文档中创建<style>标签动态地将样式注入页面。它用于将经过处理的CSS样式应用到文档中。
4. File-loader：File-loader帮助Webpack处理文件资源，例如图片、字体等。它将这些文件复制到输出目录，并返回文件的URL，用于在应用中引用这些文件。
5. MiniCssExtractPlugin（用于生产环境）：MiniCssExtractPlugin是一个将CSS提取为独立文件的插件，适用于生产环境。与style-loader不同，MiniCssExtractPlugin将CSS文件单独输出，而不是将样式插入到HTML中的<style>标签中。

这些是常用的加载器，但Webpack有一个丰富的生态系统，还有许多其他加载器可供选择，用于处理各种不同类型的资源。例如，sass-loader用于编译Sass或Scss文件，url-loader用于处理文件并将其转换为DataURL等等。你可以根据项目的需求，在Webpack配置中选择合适的加载器。

技能二十八 能说出常用的5+webpack plugin

当使用Webpack作为构建工具时，以下是常用的5个Webpack插件（plugin）：

1. HtmlWebpackPlugin：HtmlWebpackPlugin用于生成HTML文件，并自动将Webpack生成的各个包（chunks）插入到生成的HTML文件中。它还支持模板功能，可以自定义HTML模板，并根据模板生成最终的HTML文件。
2. CleanWebpackPlugin：CleanWebpackPlugin用于在每次构建之前清理输出目录，以删除旧的文件。它可以确保每次构建都从一个干净的状态开始，防止旧文件的残留或冗余。
3. MiniCssExtractPlugin：MiniCssExtractPlugin用于将CSS提取为独立的文件，并对其进行压缩和优化。它可以将CSS文件单独输出，而不是将样式插入到HTML中的<style>标签中。
4. DefinePlugin：DefinePlugin用于在构建过程中定义全局常量。它允许我们在代码中使用这些常量，例如在开发和生产环境之间切换配置参数，或者注入特定环境的API密钥等。
5. UglifyJsPlugin（用于生产环境）：UglifyJsPlugin是一个JS代码压缩插件，可以减小生成的包的文件大小。它可以删除未使用的代码、压缩代码，并进行其他优化，以提高应用的加载速度。

这些是常用的插件，但Webpack拥有一个庞大的插件生态系统，还有许多其他插件可供选择，用于处理不同的需求。例如，ExtractTextWebpackPlugin可以将CSS提取为单独的文件，CompressionWebpackPlugin可以对资源进行Gzip压缩等等。根据你的具体需求，你可以在Webpack配置中选择适合的插件来增强和定制你的构建流程。

技能二十九 能列出10+git命令

使用Git作为版本控制工具时，以下是10个常用的Git命令：

1. git init：初始化一个新的Git仓库。
2. git clone [url]：克隆一个远程Git仓库到本地。
3. git add [file]：将文件添加到暂存区，准备提交。
4. git commit -m "[message]"：提交暂存区的文件到本地仓库，并添加注释说明。
5. git status：查看工作区和暂存区的状态，显示文件的变更情况。
6. git pull：从远程仓库拉取最新的变更到本地分支。
7. git push：将本地分支的变更推送到远程仓库。
8. git branch：查看本地分支的列表。
9. git checkout [branch]：切换到指定的分支。
10. git merge [branch]：将指定分支的变更合并到当前分支。
11. git remote add origin [url]：将远程仓库的URL添加为本地仓库的远程别名。
12. git log：查看提交历史记录。
13. git reset [commit]：撤销提交，并将HEAD指向指定的提交。
14. git stash：将当前工作目录中的修改保存到贮藏（stash）中。
15. git checkout -- [file]：撤销对文件的修改，恢复到上次提交的状态。
16. git diff：显示当前工作区与暂存区之间的差异。

这只是一小部分Git命令，Git拥有更多的功能和命令。根据你的具体需求和流程，你可能会使用更多不同的Git命令。可以通过运行git --help命令来查看完整的Git命令列表和命令的详细说明。

技能三十 写代码实现货币格式化

货币格式化可以通过使用内置的JavaScript函数toLocaleString()来实现。以下是一些示例代码，展示了如何使用toLocaleString()函数格式化货币：

1. 格式化为带有货币符号的字符串：

const amount = 12345.67;
const formattedAmount = amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
console.log(formattedAmount); // 输出: $12,345.67

**

2. 格式化为不同的货币符号和语言：

const amount = 9876.54;
const formattedAmount = amount.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
console.log(formattedAmount); // 输出: 9.876,54 €

**

3. 自定义格式化选项，如小数位数和分组分隔符：

const amount = 54321.987654;
const formattedAmount = amount.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 4, useGrouping: true });
console.log(formattedAmount); // 输出: $54,321.9877

**

在这些示例中，toLocaleString()函数接受两个参数：区域设置（Locale）和选项对象。区域设置表示使用的语言和地区，用于决定货币符号、小数点符号和分组分隔符等。选项对象用于配置格式化的具体选项，如货币符号、小数位数和分组分隔符等。

你可以根据需要调整toLocaleString()中的参数，以满足你的具体需求。请注意，toLocaleString()函数在各种JavaScript环境中的行为可能会有所不同，请根据自己的环境和需求进行测试和调整。

技能三十一 自己封装防抖和节流函数

需要防抖和节流函数时，你可以封装以下JavaScript函数：

1. 防抖函数（Debounce）：在某个事件连续触发时，只执行最后一次触发的操作。

function debounce(fn, delay) {
  let timerId;
  
  return function(...args) {
    clearTimeout(timerId);
    
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

**

使用示例：

function handleInputChange() {
  // 处理输入框变化的逻辑
}

const debounceInputChange = debounce(handleInputChange, 500);
inputElement.addEventListener('input', debounceInputChange);

**

2. 节流函数（Throttle）：在某个事件频繁触发时，控制函数的执行频率。

function throttle(fn, delay) {
  let lastTime = 0;
  
  return function(...args) {
    const currentTime = Date.now();
    
    if (currentTime - lastTime > delay) {
      fn.apply(this, args);
      lastTime = currentTime;
    }
  };
}

**

使用示例：

function handleScroll() {
  // 处理滚动事件的逻辑
}

const throttleScroll = throttle(handleScroll, 200);
window.addEventListener('scroll', throttleScroll);

**

这些封装的函数可以有效控制事件触发的频率，防止不必要的多次执行，提高页面性能和用户体验。请根据自己的需求调整防抖和节流函数的延迟时间，并将需要执行的操作作为参数传递给它们。

技能三十二 能写一段导致内存泄漏的代码

当编写JavaScript代码时，一些常见的导致内存泄漏的情况包括未正确清理引用、事件绑定未解绑或闭包引用等。以下是一个导致内存泄漏的示例代码：

function leakMemory() {
  const element = document.getElementById('leakButton');
  
  element.addEventListener('click', function handleClick() {
    // 处理点击事件的逻辑
    console.log('Button clicked');
  });
}

leakMemory();

**

在上述示例中，每次调用leakMemory()函数时，都会创建一个匿名函数handleClick并将其绑定到leakButton元素的点击事件上。尽管该函数在每次调用后被执行完毕，但是由于事件处理函数仍然保持对该函数的引用，导致匿名函数无法被垃圾回收。

为了避免内存泄漏，我们需要在不使用时解绑事件处理函数。以下是对示例代码进行修正的版本，以防止内存泄漏：

function fixMemoryLeak() {
  const element = document.getElementById('leakButton');
  
  function handleClick() {
    // 处理点击事件的逻辑
    console.log('Button clicked');
  }
  
  element.addEventListener('click', handleClick);
  
  // 在不需要时解绑事件处理函数
  function cleanup() {
    element.removeEventListener('click', handleClick);
  }
  
  // 在适当的时机调用cleanup函数，比如在页面卸载或组件销毁之前
}

fixMemoryLeak();

**

通过将事件处理函数命名并显式地调用removeEventListener()来解绑事件，可以防止内存泄漏。在适当的时候手动解绑事件处理函数是一种良好的实践，以确保不再需要时释放内存。

技能三十三 封装一个支持下标为负数的数组

要封装一个支持负数索引的数组，可以创建一个自定义的NegativeIndexArray类，并在该类中封装数组相关的功能。下面是一个示例：

class NegativeIndexArray {
  constructor(...items) {
    this.array = [...items];
  }

  get length() {
    return this.array.length;
  }

  checkIndex(index) {
    if (typeof index !== 'number') {
      throw new TypeError('Index must be a number');
    }

    // 处理负数索引
    if (index < 0) {
      index = this.array.length + index;
    }

    if (index < 0 || index >= this.array.length) {
      throw new RangeError('Index out of range');
    }

    return index;
  }

  getItem(index) {
    return this.array[this.checkIndex(index)];
  }

  setItem(index, value) {
    this.array[this.checkIndex(index)] = value;
  }

  push(...items) {
    this.array.push(...items);
    return this.array.length;
  }

  pop() {
    return this.array.pop();
  }

  // 还可以添加其他数组操作方法，如 splice、slice、forEach 等
}

// 使用示例
const arr = new NegativeIndexArray(1, 2, 3, 4, 5);
console.log(arr.getItem(0));    // 输出: 1
console.log(arr.getItem(-1));   // 输出: 5
arr.setItem(0, 10);
console.log(arr.getItem(0));    // 输出: 10
arr.push(6, 7, 8);
console.log(arr.length);        // 输出: 8
console.log(arr.pop());         // 输出: 8
console.log(arr.length);        // 输出: 7

**

在NegativeIndexArray类中，我们使用一个内部数组array来存储数据，并通过自定义的方法来操作该数组。checkIndex()方法用于验证索引的有效性，处理负数索引并确保索引在有效范围内。getItem()和setItem()方法用于获取和设置指定索引位置的元素。我们还可以根据需要添加其他数组操作方法。

请注意，上述示例代码仅为演示目的，并未处理所有可能的情况和错误检查。实际应用中，可能需要根据具体需求对类进行进一步完善和扩展。

技能三十四 能写出array-to-tree的代码

array-to-tree算法用于将一个扁平的数组转换为树形结构。下面是一个示例代码：

function arrayToTree(array) {
  const map = {};
  const tree = [];

  // 创建映射表，以便通过id快速查找节点
  array.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });

  // 构建树结构
  for (const item of array) {
    const node = map[item.id];

    if (item.parentId) {
      const parent = map[item.parentId];
      if (parent) {
        parent.children.push(node);
      }
    } else {
      tree.push(node);
    }
  }

  return tree;
}

**

使用示例：

const flatArray = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 2', parentId: 1 },
  { id: 3, name: 'Node 3', parentId: 1 },
  { id: 4, name: 'Node 4', parentId: 2 },
  { id: 5, name: 'Node 5', parentId: 2 },
];

const tree = arrayToTree(flatArray);
console.log(JSON.stringify(tree, null, 2));

**

在上述示例中，arrayToTree()函数接受一个扁平的数组作为输入，并返回转换后的树形结构。首先，我们创建一个映射表map，其中以节点的id作为键，节点对象作为值。然后，我们遍历数组，在遍历过程中构建树结构。如果节点具有父级（通过parentId指定），则将其添加到对应父节点的children数组中，否则将其添加到tree数组中。最后，返回根节点组成的tree数组。

输出的tree示例（格式化）：

[
  {
    "id": 1,
    "name": "Node 1",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "Node 2",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "Node 4",
            "parentId": 2,
            "children": []
          },
          {
            "id": 5,
            "name": "Node 5",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "Node 3",
        "parentId": 1,
        "children": []
      }
    ]
  }
]

**

上述示例代码中假设节点对象具有id、name和parentId等属性，你可以根据实际情况进行调整。请确保输入的扁平数组的节点id和parentId的值正确对应，并且parentId指向的节点已在数组中定义。

技能三十五 能用v3+ts实现todos(不带pinia)

使用Vue 3和TypeScript来实现todos应用时，你可以遵循以下步骤：

1. 安装Vue、Vue Router和Vue Composition API的依赖：

npm install vue@next vue-router@next @vue/composition-api

**

2. 创建一个名为Todo的组件：

<template>
  <div>
    <h2>Todos</h2>
    <input v-model="newTodo" @keydown.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
        <button @click="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from '@vue/composition-api';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const todos = ref<Todo[]>([
  { id: 1, text: 'Todo 1', completed: false },
  { id: 2, text: 'Todo 2', completed: true },
]);

const newTodo = ref('');

function addTodo() {
  if (newTodo.value.trim() === '') return;
  todos.value.push({ id: todos.value.length + 1, text: newTodo.value, completed: false });
  newTodo.value = '';
}

function deleteTodo(id: number) {
  const index = todos.value.findIndex(todo => todo.id === id);
  if (index !== -1) {
    todos.value.splice(index, 1);
  }
}

const completedTodos = computed(() => todos.value.filter(todo => todo.completed));
const activeTodos = computed(() => todos.value.filter(todo => !todo.completed));
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

**

3. 创建路由器并配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Todo from './components/Todo.vue';

const routes = [
  {
    path: '/',
    component: Todo,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

**

4. 创建并挂载Vue应用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

**

5. 创建一个入口文件main.ts，以启动应用：

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';

createApp(App).use(router).mount('#app');

**

6. 创建一个HTML文件（例如index.html），并在其中添加一个id为app的根DOM节点：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todos</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/main.js"></script>
</body>
</html>

**

这样，你就完成了基于Vue 3和TypeScript的todos应用。运行应用时，你将能够添加、删除和完成待办事项。注意，上述代码使用Vue Composition API来管理状态和行为，以及Vue Router来处理路由。如果需要，你可以进一步优化和拓展这个例子，以适应你的实际需求。

技能三十六 能用原生小程序实现todos

使用原生小程序实现todos应用时，你可以遵循以下步骤：

1. 创建一个名为todos的目录，并在该目录下创建以下文件：

todos
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── new-todo
│       ├── new-todo.js
│       ├── new-todo.json
│       ├── new-todo.wxml
│       └── new-todo.wxss
└── utils
    └── util.js

**

2. 在app.json中配置页面路由：

{
  "pages": [
    "pages/index/index",
    "pages/new-todo/new-todo"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Todos",
    "enablePullDownRefresh": false
  }
}

**

3. 在index.wxml中创建todos列表的模板：

<template name="todos">
  <view wx:for="{{ todos }}" wx:for-index="index" wx:key="id" class="todo-item">
    <checkbox checked="{{ item.completed }}" bindchange="toggleTodo" data-index="{{ index }}"></checkbox>
    <text class="todo-text {{ item.completed ? 'completed' : '' }}">{{ item.text }}</text>
    <button bindtap="deleteTodo" data-index="{{ index }}">Delete</button>
  </view>
</template>

<view class="container">
  <view class="header">
    <input class="new-todo" bindinput="inputChange" bindconfirm="addTodo" value="{{ newTodo }}" placeholder="Add a new todo" />
  </view>
  <template is="todos" data="{{ todos }}"></template>
</view>

**

4. 在index.js中处理状态和行为逻辑：

const util = require('../../utils/util.js');

Page({
  data: {
    todos: [],
    newTodo: '',
  },

  onLoad() {
    const todos = util.getTodos();
    this.setData({ todos });
  },

  inputChange(e) {
    this.setData({ newTodo: e.detail.value });
  },

  addTodo() {
    const { todos, newTodo } = this.data;
    if (newTodo.trim() === '') return;
    const todo = { id: Date.now(), text: newTodo, completed: false };
    todos.push(todo);
    this.setData({ todos, newTodo: '' });
    util.saveTodos(todos);
  },

  toggleTodo(e) {
    const { todos } = this.data;
    const index = e.currentTarget.dataset.index;
    todos[index].completed = !todos[index].completed;
    this.setData({ todos });
    util.saveTodos(todos);
  },

  deleteTodo(e) {
    const { todos } = this.data;
    const index = e.currentTarget.dataset.index;
    todos.splice(index, 1);
    this.setData({ todos });
    util.saveTodos(todos);
  },
});

**

5. 在util.js中创建工具函数用于持久化数据：

const STORAGE_KEY = 'todos';

function getTodos() {
  const todos = wx.getStorageSync(STORAGE_KEY);
  return todos ? JSON.parse(todos) : [];
}

function saveTodos(todos) {
  wx.setStorageSync(STORAGE_KEY, JSON.stringify(todos));
}

module.exports = {
  getTodos,
  saveTodos,
};

**

6. 运行小程序：

现在，你可以通过微信开发者工具将todos项目导入，并运行小程序。你将能够添加、删除和完成待办事项。

请注意，上述代码中使用了wx:for指令来循环展示待办事项，并通过bindchange和bindtap将事件与相应的处理函数绑定。util.js中的工具函数用于获取和保存todos数据，以实现数据的持久化。你可以根据需要对样式进行修改和优化，以及进一步拓展和完善功能。

技能三十七 如何覆盖ele组件的样式

覆盖Element UI（Ele）组件的样式，你可以使用以下几种方法：

1. 使用全局样式表（Global CSS）：创建一个全局的 CSS 文件，并在 HTML 文件中引入。在 CSS 文件中，使用更具体的选择器来覆盖 Element UI 组件的样式。例如：

/* main.css */

/* 修改某个组件的样式 */
.el-button {
  background-color: red;
  color: white;
}

/* 修改某个组件内部元素的样式 */
.el-button .el-icon {
  font-size: 20px;
}

**

在 HTML 文件中引入该全局 CSS 文件：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- Element UI 组件 -->
    <el-button>按钮</el-button>
  </body>
</html>

**

2. 使用作用域样式表（Scoped CSS）覆盖样式：对于需要在组件级别中覆盖样式的情况，可以使用作用域样式表。在 Vue 单文件组件中，可以使用 scoped 特性使样式仅在当前组件中生效：

<template>
  <div>
    <!-- Element UI 组件 -->
    <el-button class="my-button">按钮</el-button>
  </div>
</template>

<style scoped>
/* 修改 Element UI 组件样式 */
.my-button {
  background-color: red;
  color: white;
}
</style>

**

注意，使用 Scoped CSS 时只对当前组件内的 Element UI 组件生效，不会影响其他组件。

3. 通过样式穿透（Deep Selector）覆盖样式：如果在使用全局样式或作用域样式表时无法覆盖 Element UI 组件的某些样式，可以使用 /deep/ 或 ::v-deep 选择器来穿透组件的作用域，以达到覆盖样式的目的。例如：

<template>
  <div>
    <!-- Element UI 组件 -->
    <el-button class="my-button">按钮</el-button>
  </div>
</template>

<style scoped>
/* 通过样式穿透修改 Element UI 组件样式 */
.my-button /deep/ .el-button {
  background-color: red;
  color: white;
}
</style>

**

以上是几种常见的覆盖 Element UI 组件样式的方法。你可以根据具体的需求和场景选择合适的方法来修改和定制组件的样式。记住，在修改 Element UI 组件样式时，最好使用更具体的选择器，以确保所修改的样式只应用于目标组件。

技能三十八 按模块组织路由文件&api文件&store模块

当组织你的路由文件、API文件和存储模块时，你可以按照以下的模块化方式进行组织：

1. 路由文件：

   • 创建一个单独的文件夹用于存放路由相关的文件，例如routes或者router。
   • 在该文件夹下创建一个主路由文件，比如index.js，用于导出所有的路由配置。
   • 根据不同的逻辑功能，创建多个路由文件，例如userRoutes.js、productRoutes.js等。
   • 在每个路由文件中，定义该功能下的路由路径和处理函数，使用框架或库提供的路由方法进行路由配置。

2. API文件：

   • 创建一个单独的文件夹用于存放API相关的文件，例如api。
   • 在该文件夹下创建多个文件，每个文件对应一个模块或实体，比如userApi.js、productApi.js等。
   • 在每个API文件中，定义与该模块或实体相关的API请求方法，可以包括GET、POST、PUT、DELETE等操作。

3. Store模块：

   • 如果你在使用前端框架（如Vue.js或React），可以按照框架的规范来组织store模块。
   • 创建一个单独的文件夹用于存放store模块相关的文件，例如store或者redux。
   • 在该文件夹下创建主store文件，比如index.js，用于导出所有的store配置和模块。
   • 根据不同的逻辑功能，创建多个store模块文件，例如userModule.js、productModule.js等。
   • 在每个store模块文件中，定义该功能下的state、mutations、actions和getters等内容，用于管理和操作相关的数据状态。

通过按模块组织路由文件、API文件和store模块，可以使代码结构更清晰，易于维护和扩展。当需要添加新的功能或实体时，只需在相应的模块中进行修改，而不需要修改整个代码文件。此外，可以使用模块化管理工具（如webpack、babel等）进行打包和编译，以提高代码的性能和可读性。

技能三十九 会在新项目中对axios进行二次封装

对Axios进行二次封装非常常见，可以根据项目需求和团队约定来定义通用的请求配置、拦截器、错误处理等，以下是一个示例：

1. 创建一个新的文件，比如api.js，用于封装Axios：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 设置基本的API地址
  timeout: 10000, // 设置请求超时时间
});

// 请求拦截器
api.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加请求头、处理请求参数等
    return config;
  },
  error => {
    // 对请求错误做些什么，例如发送错误日志等
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  response => {
    // 对响应数据做些什么，例如处理通用的响应格式等
    return response.data;
  },
  error => {
    // 对响应错误做些什么，例如统一处理错误提示等
    return Promise.reject(error);
  }
);

export default api;

**

2. 在需要发送请求的地方使用封装好的Axios：

import api from './api';

api.get('/users')
  .then(response => {
    // 处理成功响应数据
    console.log(response);
  })
  .catch(error => {
    // 处理错误响应或请求错误
    console.error(error);
  });

**

通过以上的二次封装，你可以通过配置api.js文件中的baseURL、timeout等属性来统一管理API地址和请求超时时间。拦截器可以用于在请求发送前后进行一些通用的处理，例如添加请求头、处理响应数据格式、统一处理错误等。这样可以简化各个模块中发送请求的代码，并提高代码的可维护性和复用性。

技能四十 能画图说明从登录到进入主页的整个环节-画图

当从登录到进入主页的整个环节，可以使用以下流程图来进行说明：

+------------------+     +----------------------+     +------------------+
|                  |     |                      |     |                  |
|     用户登录     | --> |     发送登录请求     | --> |     后端验证     |
|                  |     |                      |     |                  |
+------------------+     +----------------------+     +------------------+
                                                       |
                                                       |
                                                       v
                                                 
                                                +------------------+
                                                |                  |
                                                |   验证通过      |
                                                |                  |
                                                +------------------+
                                                       |
                                                       |
                                                       v
                                     
                                 +--------------------------+
                                 |                          |
                                 |   跳转到主页             |
                                 |                          |
                                 +--------------------------+

**

解释：

1. 用户在前端页面进行登录操作。
2. 前端将登录请求发送给后端进行验证。
3. 后端进行登录验证，检查用户名和密码是否正确。
4. 如果验证通过，后端返回验证通过的信息。
5. 前端接收到验证通过的信息，跳转到主页。
6. 用户成功进入主页。

这个流程图描述了从用户登录开始，到后端验证通过，最终用户进入主页的整个过程。这涉及到前后端的交互，包括发送请求、验证处理和页面跳转等步骤。