Vue 监听列表item渲染事件方法

Vue 提供了许多从简单的 v-on 指令到复杂的自定义事件的事件监听器，用于应对各种需要与用户交互或动态响应的场景。在 Vue 列表组件渲染中，我们经常需要监听列表 item 的渲染事件以执行一些自定义的操作，如何实现呢？本文将为大家介绍 Vue 监听列表 item 渲染事件的方法及应用。

理解 Vue 列表渲染过程

在介绍如何监听列表 item 渲染事件之前，我们需要先理解 Vue 列表渲染的过程。Vue 列表渲染最常见的方式是使用 v-for 指令，它绑定了数据和模板，将数据渲染为 DOM 元素，并将其添加到页面中，每个循环生成的元素被称为列表 item。但如果列表中的元素需要在每次渲染时执行回调函数等自定义操作，就要监听 item 渲染事件。

监听列表 item 渲染事件方法

Vue 提供的列表 item 渲染事件有两种实现方式：

1. 在 v-for 指令上监听渲染事件

在模板的 v-for 指令上添加 v-on 指令，使用 created 生命周期函数或 mounted 生命周期函数绑定渲染事件。created 生命钩子函数会在实例被创建时执行代码，这里我们会把 this.$nextTick() 当做事件来用，此时已经可以访问到了真实的 DOM 元素。mounted 钩子函数会在组件挂载后被执行。

例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" v-on:hook:created="handleItemCreated">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C']
    }
  },
  methods: {
    handleItemCreated() {
      console.log('列表 item 创建完成')
    }
  }
}
</script>

2. 在动态组件中监听渲染事件

动态组件是 Vue 的高级特性，可以动态地生成组件并插入到页面中。我们可以将列表 item 封装成一个组件，然后在动态组件中监听渲染事件。

<template>
  <div>
    <ul>
      <component :is="itemComponentName" v-for="(item, index) in list" :key="index" v-on:hook:mounted="handleItemMounted" :item-data="item"/>
    </ul>
  </div>
</template>

<script>
import ListItem from '@/components/ListItem.vue'

export default {
  data() {
    return {
      list: ['A', 'B', 'C'],
      itemComponentName: 'ListItem'
    }
  },
  components: {
    ListItem
  },
  methods: {
    handleItemMounted() {
      console.log('列表 item 创建完成')
    }
  }
}
</script>

在上面的代码中，我们将单个 item 封装成了组件 ListItem，然后使用动态组件实现循环。在 <component> 元素上绑定了 hook:mounted 事件，在完成渲染后调用 handleItemMounted 方法。

示例说明

我们创建一个简单的示例，在渲染列表 item 时随机生成颜色，并将其应用到 item 的背景中。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" v-on:hook:mounted="handleItemMounted(item, $event.target)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C']
    }
  },
  methods: {
    handleItemMounted(item, target) {
      let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16)
      target.style.backgroundColor = color
      console.log('列表 item ' + item + ' 的背景颜色为：' + color)
    }
  }
}
</script>

在这个示例中，我们在 v-for 指令上绑定 hook:mounted 事件，当渲染完成时会触发 handleItemMounted 方法，该方法接收当前 item 和事件对象，根据 Math.random() 标准库生成的随机数生成随机颜色，并将颜色应用到事件对象的 target.style.backgroundColor 中。

另外一个示例是实现一个复杂的选项列表，当每个列表项只显示缩略信息时，我们需要在用户点击时展示完整信息。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" v-on:click="handleItemClick(index, $event.target)">
        <span v-if="item.showDetail">{{ item.detail }}</span>
        <span v-else>{{ item.brief }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { brief: 'A', detail: 'Item A is ...', showDetail: false },
        { brief: 'B', detail: 'Item B is ...', showDetail: false },
        { brief: 'C', detail: 'Item C is ...', showDetail: false }
      ]
    }
  },
  methods: {
    handleItemClick(index, target) {
      this.list[index].showDetail = !this.list[index].showDetail
      if (this.list[index].showDetail) {
        target.style.backgroundColor = '#f0f0f0'
        console.log('展示列表项 ' + this.list[index].brief + ' 的完整信息')
      } else {
        target.style.backgroundColor = ''
        console.log('隐藏列表项 ' + this.list[index].brief + ' 的完整信息')
      }
    }
  }
}
</script>

在本示例中，我们在每个 li 元素上绑定了 click 事件，然后在 handleItemClick 方法中切换当前 item 的 showDetail 属性，根据 showDetail 属性的值切换展示缩略信息或完整信息，并修改事件对象的背景色。