前言

Vue.js 是一款流行的 JavaScript 框架                ，它提供了一种响应式的数据绑定机制 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，使得数据的变化能够自动更新到视图上  
  
  
  
  
  
  
  
。

在 Vue.js 中















，有三种常用的响应式数据变化的方式
  
  
  
  
  
  
  
  ，分别是监听器 $watch  
  
  
  
  
  
  
  
、计算属性 computed 和方法 methods 
  
  
  
  
  
  
  
 。本文将分别介绍这三种方式的区别 
  
  
  
  
  
  
  
 、示例以及适用场景


 


 


 


 


 


 


 


 。

Vue 监听器 $watch

定义及作用

Vue 监听器 $watch 是一种用于在数据发生变化时执行自定义逻辑的方法 
 
 
 
 
 
 
 
。可以使用 $watch 函数在 Vue 实例中定义一个监听器 
  
  
  
  
  
  
  
 ，用于监视某个数据的变化并在变化时执行相应的代码  
   
   
   
   
   
   
   
 。

示例

下面是一个使用 $watch 函数来监听 msg 变量的示例：

new Vue({ data: { msg: hello world }, watch: { msg: function(newValue, oldValue) { console.log(`msg 从 ${oldValue} 变成了 ${newValue}`) } } })

使用场景

监听数据变化并在变化时执行特定操作； 需要手动控制监听器的添加和移除； 数据变化后需要执行异步操作

 

 

 

 

 

 

 

 。

Vue 计算属性 computed

定义及作用

Vue 计算属性 computed 是一种用于在模板中动态计算数据的方法
 

 

 

 

 

 

 

 
。计算属性会根据依赖的数据进行缓存 


 


 


 


 


 


 


 


，只有当依赖的数据发生变化时才会重新计算                。

示例

下面是一个计算属性 fullName 的示例
 
 
 
 
 
 
 
 ，它会根据 firstName 和 lastName 计算出完整的姓名：

new Vue({ data: { firstName: John, lastName: Doe }, computed: { fullName: function() { return `${this.firstName}${this.lastName}` } } })

在模板中使用计算属性 fullName：

<p>{{ fullName }}</p>

使用场景

需要根据多个数据计算出一个新值；

需要在模板中动态计算数据；

需要对计算结果进行缓存
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 。

Vue 方法 methods

定义及作用

Vue 方法 methods 是一种在 Vue 实例中定义方法的方式  
   
   
   
   
   
   
   
 ，可以在模板中使用事件来调用方法















。

示例

下面是一个在 methods 中定义的 greet 方法的示例：

new Vue({ data: { name: John }, methods: { greet: function() { alert(`Hello, ${this.name}!`) } } })

在模板中使用 greet 方法：

<button @click="greet">Say Hello</button>

使用场景

处理用户事件（如点击事件


 


 


 


 


 


 


 


 、输入事件等）； 在模板中执行一些逻辑； 需要接受参数并返回结果                        。

总结

综上所述 

 

 

 

 

 

 

 

，Vue 监听器 $watch 
 
 
 
 
 
 
 
、计算属性 computed 和方法 methods 都有自己的适用场景

 

 

 

 

 

 

 

 ，可以根据具体需求进行选择和使用
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。

写在最后

✨ 原创不易                ，希望各位大佬多多支持























。 👍 点赞 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，你的认可是我创作的动力                。 ⭐️ 收藏















，感谢你对本文的喜欢
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  。 ✏️ 评论                        ，你的反馈是我进步的财富















。