聊聊vue值改变触发事件

PHPz 原创: 2023-04-26 14:51:39 1762浏览

在Vue中，数据驱动是核心思想，因此当我们通过修改组件的数据时，需要及时更新视图，以实现前端页面动态展示的效果。而Vue提供了一种非常方便的机制，让数据改变时自动触发相应事件，这通常称为监听器。

在此，我们将介绍Vue中值改变时触发事件的相关知识点，帮助读者更好地理解并应用Vue的相关功能。

监听数据变化的方式

Vue提供了多种监听数据变化的方式，其中包括computed、watch、methods等。下面我们将分别介绍这几种方式的使用方法和特点。

1.1 computed

computed是Vue中一个非常重要的属性，在组件中定义computed属性后，Vue会在组件渲染时自动计算属性的值，并且会在属性值发生改变时自动更新视图。

下面是一个computed的示例：

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在这个示例中，当firstName或lastName的值发生变化时，Vue会重新计算fullName的值，并更新对应的视图。

1.2 watch

watch是另一种监听数据变化的方式，主要用于监听某个值的变化，并在变化时执行特定的逻辑。与computed不同的是，watch需要单独定义，如下所示：

watch: {
  firstName: function (newValue, oldValue) {
    console.log('firstName changed from ' + oldValue + ' to ' + newValue)
  }
}

在这个示例中，当firstName的值发生变化时，Vue会自动执行watch中定义的逻辑，并输出相应的日志信息。

1.3 methods

methods是一个用于定义组件操作的方法的属性，在调用方法时可以直接修改组件数据，并触发相应的视图更新。这种方式虽然实用性较差，但在一些特殊场景中也是非常方便的。

下面是一个methods属性的示例：

methods: {
  changeName: function () {
    this.firstName = 'NewName'
  }
}

在这个示例中，当调用changeName方法时，Vue会自动修改firstName的值，并触发视图更新。

值改变触发事件的应用场景

在实际开发中，我们常常需要在数据变化时触发一些相应的事件来实现业务需求，例如实时搜索等。下面我们将结合具体的场景，介绍如何使用前文中介绍的监听数据变化的方式来实现值改变触发事件。

2.1 实时搜索

在实际开发中，我们通常需要在输入框中实现实时搜索的功能。假设我们有一个用户列表页面，需要在用户输入关键字后，实时搜索相应的用户列表。下面是一种基于watch实现实时搜索的示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" />
    <ul>
      <li v-for="user in filteredUsers">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        keyword: '',
        users: [
          {name: 'Tom'},
          {name: 'Jerry'},
          {name: 'Alice'},
          {name: 'Bob'}
        ]
      }
    },
    computed: {
      filteredUsers: function () {
        return this.users.filter(user => user.name.indexOf(this.keyword) !== -1)
      }
    },
  }
</script>

在这个示例中，我们通过watch监听keyword属性的变化，并在变化时重新计算filteredUsers属性，从而实现实时搜索的功能。这种方式可以非常方便地应用到实际的前端开发中。

2.2 表单验证

在开发表单页面时，我们经常需要对用户输入的内容进行验证，并给出相应的提示信息。下面是一个基于computed实现表单验证的示例代码：

<template>
  <div>
    <input type="text" v-model="username" />
    <div v-if="isValidUsername">{{username}} is valid</div>
    <div v-else>{{username}} is invalid</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: ''
      }
    },
    computed: {
      isValidUsername: function () {
        return this.username.length >= 6
      }
    },
  }
</script>

在这个示例中，我们通过computed计算isValidUsername属性的值，并在值变化时更新相应的视图。这种方式可以通过简单的代码实现表单验证，并为用户提供友好的提示信息。