Vue--computed与watch的区别

深碍√TFBOYSˉ_ 2023-10-01 12:23 10阅读 0赞

原文网址：[Vue--computed与watch的区别\_IT利刃出鞘的博客-CSDN博客][Vue--computed_watch_IT_-CSDN]

### 简介 ###

**说明**

本文介绍Vue的computed与watch的区别。

**官网**

[计算属性和侦听器 — Vue.js][_ Vue.js]

[API — Vue.js][API _ Vue.js]

**computed与watch对比**

<table style="width:470.25pt;"> 
 <tbody> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>项</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>computed</strong></strong></p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>watch</strong></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>依赖的数量</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="text-align:left;">依赖的数据可以是1个，也可以是多个。</p> </td> 
   <td style="width:165pt;"> <p style="text-align:left;">依赖的数据是1个。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>使用场景</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="margin-left:.0001pt;text-align:left;">一个属性依赖于多个属性。</p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;">某个属性变动时进行一些操作。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>使用的格式</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="margin-left:.0001pt;text-align:left;">必须监听存在的属性(data、props、computed)</p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;">不能和data定义的变量相同</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>类型</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="margin-left:.0001pt;text-align:left;">是一个函数。</p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;">函数或者是对象。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>异步</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="text-align:left;">不支持异步。</p> <p style="text-align:left;">在computed里面操作异步无效。</p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;">支持异步</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>触发时机</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="margin-left:.0001pt;text-align:left;">初始化时就可被监听到并且计算</p> </td> 
   <td style="width:165pt;"> <p style="margin-left:.0001pt;text-align:left;">发生改变的时候才会触发</p> </td> 
  </tr> 
  <tr> 
   <td style="width:68.25pt;"> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>缓存</strong></strong></p> </td> 
   <td style="width:234pt;"> <p style="text-align:left;">支持缓存。</p> <p style="text-align:left;">依赖数据发生改变才重新计算。</p> </td> 
   <td style="width:165pt;"> <p style="text-align:left;">不支持缓存。</p> <p style="text-align:left;">每次都重新计算。</p> </td> 
  </tr> 
 </tbody> 
</table>

## computed ##

### 简介 ###

computed是一个函数，要有返回值。

函数的返回值就是属性的属性值。

默认走getter（必须有返回值）。

### 示例 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <input v-model.number="num1" type="number">+
        <input v-model.number="num2" type="number">=
        {
       { num3 }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data() {
        return {
          num1: 0,
          num2: 0
        }
      },
      computed: {
        num3() {
          return this.num1 + this.num2
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

路由（store/index.js）

import Vue from 'vue'
    import Router from 'vue-router'
    import Demo from "../views/Demo";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/demo',
          name: 'Demo',
          component: Demo,
        }
      ],
    })

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![4d4d2e4305f34e038ad5c86f41f28850.png][]

输入数字

![e508c794bd2f4d7d99beed8f8173d4b3.gif][]

## watch ##

### 简介 ###

watch可以是函数，也可以是对象。

**如果是函数**

监听的函数接收两个参数，第1个参数是新值；第2个参数是旧值。

**如果是对象**

有三个属性：handler、immediate、deep。

1.  handler
    
    1.  是监听的处理器。
    2.  跟函数写法基本一样。也是：第1个参数是新值；第2个参数是旧值。
2.  immediate
    
    1.  默认第一次绑定的时候不执行函数。即：默认为false。
    2.  如果想要绑定时就执行可设置immediate属性为true。
3.  deep
    
    1.  深度监听
    2.  如果监听一个对象，对象里的某个属性发生变化是触发不到函数的。
    3.  加上deep:true可以监听到对象里的属性。但是这样会为该对象中的所有属性都添加上该属性，任何属性发生变化都会触发函数。
    4.  若只监听某个属性，可采用"对象名.属性名"的字符串作为监听对象属性。
    5.  一维二维数组是不需要深度监听的，但是数组里面有对象也是需要深度监听的。

### 示例：函数写法 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <input v-model.number="num1" type="number">+
        <input v-model.number="num2" type="number">=
        {
       { num3 }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data() {
        return {
          num1: 0,
          num2: 0,
          num3: 0
        }
      },
      watch: {
        num1(newVal, oldVal) {
          console.log('num1=> oldVal: ' + oldVal);
          console.log('num1=> newVal: ' + newVal);
          this.num3 = this.num1 + this.num2
        },
        num2(newVal, oldVal) {
          console.log('num2=> oldVal: ' + oldVal);
          console.log('num2=> newVal: ' + newVal);
          this.num3 = this.num1 + this.num2
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

路由（store/index.js）

**测试**

测试1：访问

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![a5dd2a59898c4c3f9f4869a401279d27.png][]

测试2：修改属性的值

![6752268c880e445099138c214b04f513.gif][]

### 示例：对象写法 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <input v-model.number="num1" type="number">+
        <input v-model.number="num2" type="number">=
        {
       { num3 }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data() {
        return {
          num1: 0,
          num2: 0,
          num3: 0
        }
      },
      watch: {
        num1: {
          // 这里第一个参数是新值，第二个是老值。
          handler(newVal, oldVal) {
            console.log('num1=> oldVal: ' + oldVal);
            console.log('num1=> newVal: ' + newVal);
            this.num3 = this.num1 + this.num2;
          },
          immediate: true
        },
        num2: {
          // 这里第一个参数是新值，第二个是老值。
          handler(newVal, oldVal) {
            console.log('num2=> oldVal: ' + oldVal);
            console.log('num2=> newVal: ' + newVal);
            this.num3 = this.num1 + this.num2;
          }
        },
      },
    }
    </script>
    
    <style scoped>
    
    </style>

路由（router/index.js）

**测试**

测试1：访问

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![146ea8996e3940e39d27135aa355f66f.png][]

可以看到，如果设置了immediate为true，则一进去就会触发。

测试2：修改属性值

![a84810abb2994e88883a3b34cbd690a4.gif][]

### 示例：对象写法(监听部分属性) ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <input v-model.number="data1.num" type="number">+
        <input v-model.number="data2.num" type="number">=
        {
       { num3 }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data() {
        return {
          data1: {
            num: 0,
          },
          data2: {
            num: 0,
          },
          num3: 0
        }
      },
      watch: {
        'data1.num': {
          // 这里第一个参数是新值，第二个是老值。
          handler(newVal, oldVal) {
            this.num3 = this.data1.num + this.data2.num;
          },
          immediate: true
        },
        'data2.num': {
          // 这里第一个参数是新值，第二个是老值。
          handler(newVal, oldVal) {
            this.num3 = this.data1.num + this.data2.num;
          }
        },
      },
    }
    </script>
    
    <style scoped>
    
    </style>

路由（router/index.js）

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![035cb032691a47fab9cb4fba4751b6eb.gif][]

[Vue--computed_watch_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122401707
[_ Vue.js]: https://cn.vuejs.org/v2/guide/computed.html#%E5%9F%BA%E7%A1%80%E4%BE%8B%E5%AD%90
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#computed
[http_localhost_8080_demo]: http://localhost:8080/#/demo
[4d4d2e4305f34e038ad5c86f41f28850.png]: https://img-blog.csdnimg.cn/4d4d2e4305f34e038ad5c86f41f28850.png
[e508c794bd2f4d7d99beed8f8173d4b3.gif]: https://img-blog.csdnimg.cn/e508c794bd2f4d7d99beed8f8173d4b3.gif
[a5dd2a59898c4c3f9f4869a401279d27.png]: https://img-blog.csdnimg.cn/a5dd2a59898c4c3f9f4869a401279d27.png
[6752268c880e445099138c214b04f513.gif]: https://img-blog.csdnimg.cn/6752268c880e445099138c214b04f513.gif
[146ea8996e3940e39d27135aa355f66f.png]: https://img-blog.csdnimg.cn/146ea8996e3940e39d27135aa355f66f.png
[a84810abb2994e88883a3b34cbd690a4.gif]: https://img-blog.csdnimg.cn/a84810abb2994e88883a3b34cbd690a4.gif
[035cb032691a47fab9cb4fba4751b6eb.gif]: https://img-blog.csdnimg.cn/035cb032691a47fab9cb4fba4751b6eb.gif