Vue.js 观察者

Vue.js 中的Watcher是一项特殊功能，它允许人们观察组件并在组件的值发生变化时执行指定的操作。这是一种更通用的方式来观察和响应 Vue 实例中的数据变化。观察者在用于执行异步操作时最有用。

注意：观察者一次只能更改一个属性。如果必须更改多个组件值，则可以使用计算属性。

句法：

watch: {
   // We can add our functions here
}

可以使用以下示例演示Vue.js观察程序：

示例：我们将首先创建一个不使用任何 Watcher 的简单 Vue.js 应用程序。该程序的功能是在单击按钮时更改组件的值（将输入值乘以 2）。

HTML

  

    Vue.js Watchers
  
    
    

  

    
        GeeksforGeeks
    
  
    
        Vue.js | Watchers
    
  
    
    
        Enter any Value :
            
        
        Input number x 2 :
            
                {{result}}
            
        
  
        
        
            Click Me
        
    
      
    
  
        // Creating instance
        new Vue({
            el: '#ex',
            data: {
  
                // Setting values for fields
                value1: '',
                result: 0
            },
            methods: {
  
                // Creating function 
                // for button click
                multiply: function () {
                    this.result = this.value1 * 2;
                }
            }
        });
    

  

输出：
结果值在按钮单击时发生变化

在上面的例子中，结果值的值 仅在单击按钮时更改。我们现在将使用watch来注意输入组件的变化并自动更新结果值。我们将定义watch并在其中编写所需的函数，如下所示：

Javascript

watch: {
    // Creating function
    // for input component
    value1: function(val) {
        this.value1 = val;
        this.result = 2 * val;
      },
      
    // Creating function
    // for result component
    result: function(val) {
        this.result = val;
    }
}

Watcher 现在查找输入值的变化。每当输入值改变时，里面的函数就会自动执行（将输入值乘以 2），结果的值会自动改变。我们不必专门分配任何事件并等待值更改。我们将在前面的代码中添加上述更改，并删除按钮及其功能。

使用观察者的示例：

HTML

  

    Vue.js Watchers
  
    
    

  

    
        GeeksforGeeks
    
  
    
        Vue.js | Watchers
    
  
    
    
        Enter any Value :
            
        
        Input number x 2 :
            
                {{result}}
            
        
    
      
    
        // Creating instance
        new Vue({
            el: '#ex',
            data: {
                // Setting values for fields
                value1: '',
                result: 0
            },
            // Creating a Watcher
            watch: {
  
                // Creating function for
                // input component
                value1: function (val) {
                    this.value1 = val;
                    this.result = 2 * val;
                },
  
                // Creating function for
                // result component
                result: function (val) {
                    this.result = val;
                }
            }
        });
    

  

输出：
当输入值改变时，结果值会自动改变。