深入理解computed 、watch 、 methods的使用场景及其区别__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
computed、watch、methods是我们在Vue项目中经常使用的三个属性,今天我就来好好捋一捋他们其中的关系。
使用场景
computed
- 当依赖某些状态(data中的数据)发生变化时,优先选择使用computed
举个例子,总价 = 数量 * 价格,当数量和价格发生变化时都会影响总价,这时计算属性就派上用场了。
<div id="demo">
<div>
<button @click="addPrice">+</button>
<span>price:{{price}}</span>
<button @click="reducePrice">-</button>
</div>
<div>
<button @click="addAmount">+</button>
<span>amount:{{amount}}</span>
<button @click="reduceAmount">-</button>
</div>
<div>{{total}}</div>
</div>
var vm = new Vue({
el: '#demo',
data:{
price:10,
amount:20
},
computed:{
total(){
return this.price * this.amount
}
},
methods:{
addPrice(){
this.price++
},
reducePrice(){
this.price--
},
addAmount(){
this.amount++
},
reduceAmount(){
this.amount--
}
}
})
watch
- 用来解决beforeUpdate, updated两个钩子里修改状态导致死循环的问题,采用watch
- 监测可能异步改变值得时候
举个例子,当商品的数量减少是,商品的价格就会上升。
<div id="demo">
<div>
<span>price:{{price}}</span>
<button @click="reduceAmount">-</button>
</div>
</div>
var vm = new Vue({
el: '#demo',
data:{
price:10,
amount:20
},
watch:{
amount(){
this.price++
}
},
methods:{
reduceAmount(){
this.amount--
},
}
})
可能你会想,在这里使用计算属性依然能够实现,但有必要去增加一个多余的变量么。
methods
- 定义事件响应函数
- 定义组件公共处理函数
区别
computed 和 methods 区别
- 相同点
- 如果作为模板的数据显示,二者都能实现相应的功能,唯一不同的是methods定义的方法需要执行
- 不同点
- computed 会基于响应数据缓存,methods不会缓存
- diff之前先看data里的数据是否发生变化,如果没有变化computed的方法不会执行,但methods里的方法会执行
<div id="demo">
<div>{{reversedMessage}}</div>
<div>{{reversedMsg()}}</div>
<div>{{dataStr}}</div>
<button @click="change">change</button>
</div>
var vm = new Vue({
el: '#demo',
data:{
message: "hello",
dataStr: null
},
computed:{
reversedMessage (){
console.log("computed")
return this.message.split('').reverse().join('')
}
},
methods:{
reversedMsg(){
console.log("methods")
return this.message.split('').reverse().join('')
},
change(){
this.dataStr = new Date().getTime()
}
}
})
结果:computed只会打印一次,当点击change按钮,methods会再次打印,computed这不会在打印。
这里的dataStr必须放到页面中去,这样dataStr改变之后才会使页面重新渲染。
watch 和 computed 区别
- 相同点
- 如果做信息展示,二者可以实现同样的功能。不同的是watch可能需要监听更多的属性。在这个时候,我们优先选择computed 将第一个例子的JS代码改变一下,用watch来实现
var vm = new Vue({
el: '#demo',
data:{
price:10,
amount:20,
total:200
},
watch:{
price(newVal){
this.total = newVal * this.amount
},
amount(newVal){
this.total = newVal * this.price
}
},
methods:{
addPrice(){
this.price++
},
reducePrice(){
this.price--
},
addAmount(){
this.amount++
},
reduceAmount(){
this.amount--
}
}
})
谁更简洁是不是显而易见啦
- 不同点
- 当想在更新data数据后再次更新数据的时候,建议使用watch来监听data里数据的变化(这种情况不能使用updated生命周期钩子,否则回陷入死循环)
- 使用 watch 选项允许我们执行异步操作(访问一个API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。 大家可以看一下官网的这个例子
总结
熟能生巧,大家多多使用就一定能掌握好他们。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 前端布吉岛 原文链接:https://juejin.im/post/6844904153806798855