Vue.js 2 中告别 jQuery：使用 `watch` 属性轻松更新文本

2024-03-08 14:45:57

使用 Vue.js 2 的 watch 属性动态更新文本：告别 jQuery

在 Web 开发中，动态更新用户界面元素的文本是一个常见的任务。对于那些熟悉 jQuery 的开发者来说，手动操纵 DOM 元素已经成为常态。然而，使用 Vue.js 2，我们可以利用响应式系统，通过更简洁、高效的方式实现同样的目标。本文将详细介绍如何使用 watch 属性在 Vue.js 2 中动态更新 span 元素的文本，无需 jQuery。

问题陈述

我们需要更新一个 span 元素的文本，以显示不断变化的通知数量，而不使用 jQuery。

解决方案：使用 `watch` 属性

Vue.js 2 提供了 watch 属性，允许我们监听数据属性的变化，并在其更新时执行回调函数。我们可以利用这个属性来动态更新 span 元素的文本。

步骤指南

1. 定义 data() 函数：

data() {
  return {
    totalNotif: 0
  }
}

此函数定义了用于跟踪通知数量的 totalNotif 数据属性。

2. 使用 computed() 属性计算要更新的文本：

computed: {
  notifText() {
    return this.totalNotif > 0 ? this.totalNotif : ''
  }
}

此函数使用 computed 属性计算要显示的文本。当 totalNotif 为正时，它返回通知数量，否则返回空字符串。

3. 在模板中绑定计算的文本：

<template>
  ...
  <span v-if="totalNotif > 0" class="badge" id="total-notif" v-text="notifText"></span>
  ...
</template>

此模板使用 v-text 指令将 notifText 计算属性的文本绑定到 span 元素。

4. 在 methods() 函数中监听变化：

methods: {
  initialMount() {
    ...
    Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
      this.totalNotif += 1
    })
    ...
  }
}

此函数包含一个监听通知事件的 initialMount 方法。当收到通知时，totalNotif 数据属性会更新，触发 watch 回调。

5. 挂载组件时调用 initialMount() 方法：

mounted() {
  this.initialMount()
}

此函数在组件挂载时调用 initialMount 方法，从而在组件加载时开始监听通知。

优点

使用 Vue.js 2 的 watch 属性动态更新文本具有以下优点：

响应式系统： 无需手动操作 DOM，Vue.js 将自动更新文本。
简洁的代码： 与 jQuery 相比，代码更加简洁易读。
性能提升： 避免 jQuery 的 DOM 操作，从而提高性能。
可维护性： 代码可维护性更高，因为不需要与 jQuery 交互。

示例代码

以下是一个示例代码：

<template>
  ...
  <span v-if="totalNotif > 0" class="badge" id="total-notif" v-text="notifText"></span>
  ...
</template>

<script>
export default {
  data() {
    return {
      totalNotif: 0
    }
  },
  computed: {
    notifText() {
      return this.totalNotif > 0 ? this.totalNotif : ''
    }
  },
  methods: {
    initialMount() {
      ...
      Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
        this.totalNotif += 1
      })
      ...
    },
  },
  mounted() {
    this.initialMount()
  },
}
</script>