Home > Article > Web Front-end > Detailed explanation of Vue.watch function and how to implement data monitoring

Detailed explanation of Vue.watch function and how to implement data monitoring

王林Original: 2023-07-25 08:57:141138browse

Detailed explanation of the Vue.watch function and how to implement data monitoring

As a popular JavaScript framework, Vue.js provides various convenient functions to help us build interactive front-end applications. One of the very important functions is data monitoring, that is, when the data changes, we can perform specific operations. The Vue.watch function is a method used to implement data monitoring.

The definition of the Vue.watch function is as follows:

vm.$watch(expOrFn, callback, [options])

Among them, vm represents the Vue instance, expOrFn represents the property or a function that needs to be monitored, and callback represents the callback function when the monitoring property changes. options represents some additional configuration options.

The use of the Vue.watch function can be divided into two situations: monitoring a property and monitoring a function.

Listen to a property
To illustrate with a simple example, we create a Vue instance, define a property name in data, and then use the watch function to listen for changes in name.

<body>
 <div id="app">
     <p>{{ name }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             name: 'John'
         },
         watch: {
             name: function(newName, oldName) {
                 console.log('name变为：' + newName);
             }
         }
     });
     vm.name = 'Tom';  // 控制台输出：name变为：Tom
 </script>
</body>

In this example, when the name attribute changes, the watch function will be triggered, passing in two parameters: the new value and the old value. Print the new name value in the console.

Listen to a function
In addition to monitoring changes in properties, we can also monitor changes in functions. In the following example, we define a function getFullName in data and use the watch function to monitor changes in getFullName.

<body>
 <div id="app">
     <p>{{ getFullName() }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             firstName: 'John',
             lastName: 'Doe'
         },
         methods: {
             getFullName: function() {
                 return this.firstName + ' ' + this.lastName;
             }
         },
         watch: {
             getFullName: function(newVal, oldVal) {
                 console.log('getFullName变为：' + newVal);
             }
         }
     });
     vm.lastName = 'Smith';  // 控制台输出：getFullName变为：John Smith
 </script>
</body>

In this example, the watch function will be triggered when the dependent properties inside the getFullName function change.

In addition to the above examples, the Vue.watch function has some additional configuration options, such as deep and immediate. The deep option is used to deeply monitor nested objects, and the immediate option indicates whether to trigger the callback function immediately.

Through the Vue.watch function, we can easily monitor data and perform related operations when the data changes. This is very helpful for building complex interactive front-end applications.

Summary: The Vue.watch function is a method used to implement data monitoring in the Vue.js framework. Through this function, we can monitor changes in properties or functions and perform related operations when changes occur. Using this function, you can easily monitor and process data, providing a convenient way to build interactive front-end applications.

The above is the detailed content of Detailed explanation of Vue.watch function and how to implement data monitoring. For more information, please follow other related articles on the PHP Chinese website!

JavaScript vue.js 回调函数 JS 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Steps and considerations for customizing components using the Vue.extend functionNext article：Steps and considerations for customizing components using the Vue.extend function

See more

Detailed explanation of Vue.watch function and how to implement data monitoring

Related articles