Let's talk about vue value change trigger events

In Vue, data-driven is the core idea, so when we modify the data of the component, we need to update the view in time to achieve the effect of dynamic display of the front-end page. Vue provides a very convenient mechanism to automatically trigger corresponding events when data changes, which is usually called a listener.

Here, we will introduce the relevant knowledge points about events triggered when the value in Vue changes, to help readers better understand and apply the related functions of Vue.

1. Ways to monitor data changes

Vue provides a variety of ways to monitor data changes, including computed, watch, methods, etc. Below we will introduce the usage and characteristics of these methods respectively.

1.1 computed

computed is a very important attribute in Vue. After defining the computed attribute in the component, Vue will automatically calculate the value of the attribute when the component is rendered, and will occur when the attribute value Automatically update the view when it changes.

The following is a computed example:

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

In this example, when the value of firstName or lastName changes, Vue will recalculate the value of fullName and update the corresponding view.

1.2 watch

watch is another way to monitor data changes. It is mainly used to monitor changes in a certain value and execute specific logic when it changes. Different from computed, watch needs to be defined separately, as shown below:

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

In this example, when the value of firstName changes, Vue will automatically execute the logic defined in watch and output the corresponding log. information.

1.3 methods

methods is an attribute used to define methods for component operations. When calling a method, you can directly modify component data and trigger corresponding view updates. Although this method is less practical, it is also very convenient in some special scenarios.

The following is an example of the methods attribute:

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

In this example, when the changeName method is called, Vue will automatically modify the value of firstName and trigger a view update.

2. Application scenarios for events triggered by value changes

In actual development, we often need to trigger some corresponding events when data changes to achieve business needs, such as real-time search wait. Below we will combine specific scenarios to introduce how to use the method of monitoring data changes introduced in the previous article to implement value change triggering events.

2.1 Real-time search

In actual development, we usually need to implement the real-time search function in the input box. Suppose we have a user list page and need to search the corresponding user list in real time after the user enters a keyword. The following is a sample code to implement real-time search based on 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>

In this example, we use watch to monitor changes in the keyword attribute and recalculate the filteredUsers attribute when it changes, thereby realizing the real-time search function. This method can be very easily applied to actual front-end development.

2.2 Form verification

When developing form pages, we often need to verify the content entered by the user and give corresponding prompt information. The following is a sample code that implements form validation based on 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>

In this example, we calculate the value of the isValidUsername attribute through computed and update the corresponding view when the value changes. This method can implement form validation through simple code and provide users with friendly prompts.

3. Summary

Triggering events when the value changes is one of the very important features of the Vue framework. By monitoring data changes, we can easily realize the dynamic display of the front-end page. and interact. In practical applications, we need to choose the appropriate monitoring method according to specific scenarios, and optimize the code implementation based on the characteristics of the components. At the same time, we also need to pay attention to the performance impact of listeners to avoid performance problems caused by excessive use of listeners.

The above is the detailed content of Let's talk about vue value change trigger events. For more information, please follow other related articles on the PHP Chinese website!