computed计算属性与watch监听

一时失言乱红尘 2022-12-28 07:22 196阅读 0赞

座右铭：越努力越幸运，越运动越健康。  
热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人

--------------------

### 文章目录 ###

*  computed计算属性
 *   *  1：用来监控自己定义的变量，该变量不在data中声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
     *  2：比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
     *  3：模板中通过 \{ \{ totalMarks \}\} 进行展示computed变化值
     *  4：Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
 *  watch监听
 *   *  监听某一个值，当被监听的值发生变化时，执行对应的操作
 *  俩者区别：
 *   *  计算属性computed
     *  watch监听

--------------------

# computed计算属性 #

## 1：用来监控自己定义的变量，该变量不在data中声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； ##

## 2：比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 ##

## 3：模板中通过 \{ \{ totalMarks \}\} 进行展示computed变化值 ##

## 4：Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。 ##

![在这里插入图片描述][20201215184256232.png]

# watch监听 #

## 监听某一个值，当被监听的值发生变化时，执行对应的操作 ##

watch:{ 
          num:function(newVaule,oldVaule){ 
            console.log(newVaule,oldVaule)
          },
          // num(newVaule,oldVaule){ 
          // console.log(newVaule,oldVaule)
          // },
          //注意 对象的属性用用一下的监听
          // 'obj.id'(newVaule,oldVaule){ 
          // console.log(newVaule,oldVaule)
          // }
          obj:{ 
            //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
            handler(curVal,oldVal){   //handler默认的执行函数
              console.log(curVal,oldVal)
            },
            deep:true  //对象内部的属性监听，也叫深度监听
          }
      }

# 俩者区别： #

（注意：  
计算属性computed与methods的区别  
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，而methods的不会被缓存，只要触发方法就算再次触发了）

## 计算属性computed ##

计算结果并返回，只有当被计算的值发生改变时才会触发  
(即：**计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算**)

## watch监听 ##

监听某一个值，当被监听的值发生变化时，执行对应的操作  
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)

[20201215184256232.png]: /images/20221120/1ca637f52a7c414d99d9176702fbfd0b.png