大家好,我是大帅子 ,今天给大家讲一下 watch 与 computed 的区别 , 今天就讲一下使用的区别, 更加仔细的原理区别,我在之前的文章就讲到过了, 当然今天还是会给大家提一下的
computed 计算属性
计算属性的应用场景主要就是购物车的全选,以及求和都可以在计算属性里面去做
简单的写法:
我们可以直接在里面写一个函数 , 我们使用的时候直接就放在差值表达式里面使用就好了,当然我们这个时候的值就是仅读取
computed : {
// 仅读取
函数() {}
}
完整写法:
我们这个时候就可以修改里面的值
computed : {
对象: {
get(){
},
set(val){
// 可以打印一下看一下是什么
}
}
}
computed: {
/* 计算属性(){} : 函数写法。 此时默认只有get,没有set
计算属性 : { get(){},set(val){} } : 对象写法。 有get和set
*/
fullName: {
//获取
get() {
return this.firstName + this.lastName
},
//设置
set(val) {
console.log(val)//修改后的数据
this.firstName = val[0] || ''
this.lastName = val.replace( val[0] , '' )
}
}
watch 侦听器
侦听器作用 : 监听某一个数据变化
简单写法:
有两个值,新值以及旧值
watch : {
username (newValue , oldValue) {
}
}
深度侦听作用 ： 侦听引用类型内部数据变化
完整的写法: 当data里面的要监听的值是一个对象的时候就需要用到这个方法
"要侦听的属性名": {
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {}
}
区别:
侦听器与计算属性区别
计算属性 : 监听多个属性 （只要计算属性内部的任何属性变化，都会执行函数）
侦听器 : 监听单个属性
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅 还需努力!大家一起进步!!!
