【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景
文章目录
- 前言
- Vue 监听器 $watch
- 定义及作用
- 示例
- 使用场景
- Vue 计算属性 computed
- 定义及作用
- 示例
- 使用场景
- Vue 方法 methods
- 定义及作用
- 示例
- 使用场景
- 总结
前言
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 都有自己的适用场景，可以根据具体需求进行选择和使用。