vue中computer和watch的区别和使用
众所周知computer和watch都是用作监听某些变量使用的
也就是说当某一个数据发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
他们两个的左右除了监听数据以外还可以让代码变得简洁,没有过多地赘余混乱
有什么区别呢:
1.computed是计算属性,实际上和data对象里的数据属性是差不多的(使用上)。
2.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景:一个数据影响多个数据
2.computed擅长处理的场景:一个数据受多个数据影响
computer
一个数据被多个数据影响
computed: {
count() {
return (this.list[0].num + this.list[1].num) * this.c;
},
},
这里就相当于定义了一个名为count的变量
这个变量受 this.list[0].num this.list[1].num this.c 这三个变量的影响
只要这 三个变量其中一个变化 count这个变量也会变化
在页面中展示(和data里面定义的一样):
<p>count:{
{
count }}</p>
获取使用(和data里面定义的一样):
console.log(this.count);
使用场景:
- 购物车(常用)
- 等待大佬们的补充
watch
一个数据将多个数据影响
data() {
return {
a: 1,
shipStatusArr: {
name: 'zhangsanlisi',
age: 12
}
}
},
watch: {
a: function (newValue, oldVal) {
//更新后的值 更新前的值
console.log( newValue, oldVal )
},
//数组对象型 深度监听
shipStatusArr: {
handler(newValue, oldValue) {
console.log(newValue, oldValue)
},
deep: true // 深度监听
immediate: true
//进入组件的时候,第一次并不会执行watch,只有值发生改变才会执行 , 是因为immediate 默认 false
//当 immediate = true 的时候,进入组件会立即执行。并且可以监测到组件传递数据。回调将会在侦听开始之后被立即调用。
}
}
使用场景:
- 搜索
- 清空相关联的数据(当某个字段和某些字段有关联时,当第一个字段变化时让其他字段清空)
- 等待大佬们的补充
点个关注支持一下我吧