【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: Vue 监听器 $watch、计算属性 computed 和方法 methods 都是 Vue 中响应式数据变化的方式,但它们在实现和使用上有一些区别。

前言

yyx.jpeg

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 都有自己的适用场景,可以根据具体需求进行选择和使用。


✍创作不易,求关注😄,点赞👍,收藏⭐️

相关文章
|
5天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
19 0
|
4天前
|
JavaScript 前端开发 算法
Vue3与Vue2:对比分析与迁移指南
Vue3与Vue2:对比分析与迁移指南
|
4天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
4天前
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
|
5天前
|
JavaScript 前端开发
vue2升级到vue3的一些使用注意事项记录(四)
vue2升级到vue3的一些使用注意事项记录(四)
17 0
|
5天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable执行监听器的升级修改
ruoyi-nbcio-plus基于vue3的flowable执行监听器的升级修改
|
5天前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
|
5天前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
8 0
|
5天前
|
缓存 JavaScript 开发者
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
11 0
|
5天前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
7 0