Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
作者：菜鸟小牟
前言
该篇介绍一下Vue中的methods、computed和watch的使用和区别`
提示：以下是本篇文章正文内容，下面案例可供参考
一、methods属性
介绍：
1.methods中的函数(方法)也是暴露到Vue实例对象(vm)上
2.作用：处理业务逻辑
1.无参的函数
关键代码如下（示例）：
<div id="App">
<h1>n的值为:{{ n }}</h1>
<button @click="add">按钮</button>
<!-- add 也可以写成 add() -->
</div>
-----------------------------------------------------
data: {
n: 1
},
methods: {
add(e){
// console.log(e) 这里的第一个形参e 是事件对象
this.n++
}
}, 2.有参的函数
关键代码如下（示例）：
<div id="App">
<h1>n的值为:{{ n }}</h1>
<button @click="add(5)">点我加5</button>
<button @click="add(10)">点我加10</button>
</div>
------------------------------------------------------
data: {
n: 1
},
methods: {
add(x){
// 但这种情况下，我们拿不到 事件对象e 了
// 但是，在模板传参的过程中，我们可以通过$event将事件对象传入
this.n += x
}
},提示：如果想详细了解$event的使用，请移步到我的另一篇文章
二、computed属性
介绍：
1.computed中的属性是基于现有数据(响应式依赖)计算出来的新属性，也是暴露在Vue实例对象(vm)上
2.计算属性有两种写法：函数式(常用的)；对象式
3.原理：底层借助了Object.defineProperty提供的getter和setter
1.函数式
默认写法：可读不可改(有getter无setter)
代码如下（示例）：
data: {
firstName: '张',
lastName: '三',
}
--------------------------------------------------------
computed: {
// 简写 函数式(只读不可写，默认写法) 只有getter 无setter
fullName() {
return this.firstName + this.lastName
}
}2.对象式
完整写法：可读可改(有getter有setter)
代码如下（示例）：
data: {
firstName: '张',
lastName: '三',
}
------------------------------------------------------------
computed: {
// 完整写法 对象式(可读可改) 有getter和setter
fullName:{
get(){
return this.firstName + this.lastName
},
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}注意： 1.一般情况下采取函数式写法 2.如果计算属性要被手动修改，那必须采取对象式写set函数去响应修改，且set中要引起计算时依赖的数据发生改变(这样可实现数据双向绑定)
三、watch属性
介绍：
1.监视数据变化，然后执行一些业务逻辑或异步操作
2.监听属性有3个配置项：①immediate ②deep ③handler函数
3.监听属性有两种写法：对象式(完整写法)；函数式(简写)
1.对象式
完整写法
watch: {
// 完整写法 对象式
lastName:{
immediate: true, // 初始化时，先调用一次handler函数
deep: true, // 深度监听，可监听多层对象
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
}
}2.函数式
简写：当不需要①②配置项时可简写
watch: {
// 简写 函数式 当不需要 immediate: true,deep: true,时
lastName(newValue, oldValue){
console.log(newValue, oldValue)
}
}注意： 需要根据具体情况具体分析采取哪种方式
四 、区别
提示：这也是比较常见的面试题
给大家一个小tip：在我们回答面试题时，思维逻辑一定要清晰，而不是想到啥答啥
拿这个问题举例：我们可以从两个角度出发回答问题(具体问题具体分析角度)
1.本职工作(主要应用场景)
2.当二者能实现同一功能时，谁更有优势
1.计算属性和方法
（1）本职工作不同：
① 计算属性是基于现有数据(响应式依赖)计算出来的新属性，它本质也还是一个属性,和data里的数据应用场景一样，主要应用在模板，一些业务逻辑中数据的处理。
② 方法的主要应用是处理一些业务逻辑
（2）当二者能实现同一功能时，应该采用computed
因为computed计算属性内部有缓存机制，可复用，效率更高，调试更方便
2.computed计算属性和watch监听属性
（1）本职工作不同：
①computed计算属性本质还是一个属性，当我们有一些数据需要随着其它数据(响应式依赖)变动而变动时，此时使用computed
②当数据变化时，我们需要执行一些业务逻辑或异步操作，此时使用watch
（2）当二者能实现同一功能时，应该采用computed
因为computed计算属性内部有缓存机制，可复用，效率更高，调试更方便
有人可能会疑惑为什么这两个问题的第一条第一点不是完全一样的？？？
因为具体问题具体分析。当我拿到这个问题时，我已经将它们进行了对比，所以说在回答的时候，是相对比另一个来说的，是有针对性分析的，而不是再回答一些无关紧要的内容。
到此这篇关于Vue中的methods、computed计算属性和watch监听属性的使用和区别的文章就介绍到这了,更多相关Vue计算属性和watch监听属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！