vue3 lodash

// 引入 Vue 3 和 lodash
import { createApp } from 'vue';
import _ from 'lodash';

// 创建一个简单的 Vue 组件
const App = {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      filteredItems: []
    };
  },
  created() {
    // 使用 lodash 的 filter 方法来过滤数组
    this.filteredItems = _.filter(this.items, item => item % 2 === 0);
  },
  template: `
    <div>
      <h1>Vue 3 + Lodash 示例</h1>
      <p>原始数组: {{ items }}</p>
      <p>过滤后的数组 (偶数): {{ filteredItems }}</p>
    </div>
  `
};

// 创建 Vue 应用并挂载到 DOM
const app = createApp(App);
app.mount('#app');

解释说明

1. 引入依赖：

   • createApp 是 Vue 3 中创建应用实例的方法。
   • lodash 是一个实用工具库，提供了许多便捷的函数来处理数组、对象等。

2. 创建组件：

   • data 函数返回组件的状态，包含 items 和 filteredItems 两个属性。
   • created 生命周期钩子在组件实例创建完成后调用，使用 lodash 的 _.filter 方法过滤出偶数，并将结果赋值给 filteredItems。

3. 模板：

   • 模板中展示了原始数组和过滤后的数组。

4. 挂载应用：

   • 使用 createApp 创建应用实例，并通过 mount 方法将其挂载到页面上的 #app 元素。