欢迎大家讨论学习
文章目录
前言
该篇介绍一下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计算属性内部有缓存机制,可复用,效率更高,调试更方便
有人可能会疑惑为什么这两个问题的第一条第一点不是完全一样的???
因为具体问题具体分析。当我拿到这个问题时,我已经将它们进行了对比,所以说在回答的时候,是相对比另一个来说的,是有针对性分析的,而不是再回答一些无关紧要的内容。