Vue中 computed 和 watch 的区别

computed 和 watch 在 Vue 项目中可以说是非常常见，这两个方法看似都能实现对数据的监听，那么两者之间有什么区别呢？

computed 计算属性

---

计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值，这个新值只会根据已知值的变化而变化。通俗来讲就是：这个属性依赖其他属性，由其他属性计算而来。 得出使用 computed 的常用场景为：

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed。

先来看一看 computed 最常用的场景栗子：

<p>姓名：{{ fullName }}</p>
<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName
    }
  }
};
</script>

在 computed 属性对象中定义计算属性的方法，和取 data 对象里的数据属性一样以属性访问的形式调用，即在页面中使用 {{ 方法名 }} 来显示计算的结果。

如上栗子中我们在 computed 中使用了 fullName 方法，如果此时我们在 data 中也声明一个属性 fullName，会报错 Duplicated key 'fullName'。因为 data 中的 fullName 属性和 computed 中的 fullName 方法存在重复。如下栗子：

// 错误用法
data() {
  return {
    firstName: '张',
    lastName: '三',
    fullName: '张三'
  }
},
computed: {
  fullName() {
    return this.firstName + this.lastName
  }
}

在 Vue 的官方文档中，还特意强调了 computed 的一个重要特点，就是它具有缓存功能，我们先来看个栗子：

<p>姓名：{{ fullName }}</p>
<p>姓名：{{ fullName }}</p>
<p>姓名：{{ fullName }}</p>
<p>姓名：{{ fullName }}</p>
<p>姓名：{{ fullName }}</p>
<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      console.log('computed') // 控制台只打印了一次
      return this.firstName + this.lastName
    }
  }
};
</script>

我们在页面上多次显示 fullName ，实际上这个方法只执行了一次，所以此处又可得出结论：computed 中的内部方法在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果。只有依赖型数据发生改变，computed 才会重新计算。

在 computed 中，所有的属性都有一个 get() 和一个 set()，默认一般走 get() ，但是如果我们直接修改 fullName 时，则会调用 set() 方法。我们将上述代码使用 get() 和 set() 进行拆分，得到如下栗子：

<p>姓名：{{ fullName }}</p>
<button @click="handleClick">更改姓名</button>
<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName
      },
      set(val) {
        console.log(val) // 李四
      }
    }
  }
  methods: {
    handleClick() {
      this.fullName = '李四'
    }
  }
};
</script>

同时 computed 中不支持异步，当computed内有异步操作时会报错，这里用 setTimeout 演示栗子如下：

computed: {
  fullName() {
    setTimeout(() => { // 报错
      return this.firstName + this.lastName
    }, 30)
  }
}

所以综上总结 computed 的一些特点如下：

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步，当 computed 内有异步操作时无效
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed
• 如果 computed 属性属性值是函数，那么默认会走 get() ；函数的返回值就是属性的属性值；在 computed 中的，属性都有一个 get() 和一个 set()，当数据变化时，调用 set()。

watch 监听属性

---

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化，或某些特定数据的变化，然后执行某些具体的业务逻辑和操作。当属性变化时，回调函数自动调用，在函数内部进行计算。其可以监听的数据来源：data，props，computed 内的数据。

监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是先新值再旧值，如果只写一个参数，那就是最新属性值。

在使用时选择 watch 还是 computed，还有一个参考点就是官网说的：当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。所以 watch 一定是支持异步的。

watch 默认的是浅监听，(浅监听指只能监听到基础类型的值变化情况)，无法进行深度监听(深度监听指比如引用类型的值变化就无法正确监听)。直接看个栗子吧：

<div>
  <input type="text" v-model="name" />
  <input type="text" v-model="info.city" />
  <button @click="handleClickName">更改姓名</button>
  <button @click="handleClickInfo">更改信息</button>
</div>
<script>
export default {
  data() {
    return {
      name: '哪吒',
      info: {
        city: '北京'
      }
    }
  },
  watch: {
    name(newVal, oldVal) {
      // 值类型，可正常拿到
      console.log('watch name', newVal, oldVal) // 姜子牙，哪吒
    },
    info(newVal, oldVal) {
       // 引用类型，拿不到
      console.log('watch info', newVal, oldVal) // 控制台无输出结果
    },
    info: {
      handler(newVal, oldVal) {
        console.log('watch info', newVal, oldVal)
      },
      deep: true // 深度监听
    }
  },
  methods: {
    handleClickName() {
      this.name = '姜子牙'
    },
    handleClickInfo() {
      this.info.city = '上海'
    }
  }
}
</script>

官方告诉我们使用 watch 监听复杂数据类型就需要用到深度监听 deep。

• deep：为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

我们针对上述代码使用 deep 进行重写：

watch: {
  info: {
    handler(newVal, oldVal) {
      console.log('watch info', newVal, oldVal) // {__ob__: Observer}
    },
    deep: true // 深度监听
  }
}

得到打印结果如下：

watch 深度监听.png
好吧！并没有得到我们的预期，打印出来的 newVal 和 oldVal 值是一样的，所以深度监听虽然可以监听到对象的变化，但是无法监听到对象里面哪个具体属性的变化。这是因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。 vm.$watch 深度监听

若果要监听对象的单个属性的变化，有两种方法：

• 直接监听对象的属性

watch: {
  'info.city'(newVal, oldVal) {
    console.log('watch info', newVal, oldVal) // watch info 上海 北京
  }
}

• 与 computed 属性配合使用，computed 返回想要监听的属性值，watch 用来监听

computed: {
  changeCity() {
    return this.info.city
  }
},
watch: {
  changeCity(newVal, oldVal) {
    console.log('watch info', newVal, oldVal) // watch info 上海 北京
  }
}

上面的代码都是我们定义了一个按钮，通过按钮手动修改值来触发值的变化进而使用 watch 进行监听，那么我们能不能在页面初始化的时候就直接使用 watch 呢？认识 handler 方法和 immediate 属性。

<p>姓名：{{ fullName }}</p> // 张三
<script>
  data() {
    return {
      firstName: '张',
      lastName: '三',
      fullName: ''
    }
  },
  watch: {
    fullName: {
      handler() {
        this.fullName = this.firstName + this.lastName
      },
      immediate: true // 设置为 true，理解执行 handle 方法
    }
  }
</script>

在 computed 中我们知道每一个属性其实都有 get() 和 set()，在 watch 中每一个属性其实都有 handle() 和 imediate 属性(默认为 false)。watch 的特点是最初绑定的时候是不会执行的，而 immediate:true 代表如果在 wacth 里声明了，那么就会立即先去执行里面的 handler 方法。并且如果我们在 computed 中如果定义了 fullName 那么在 data 里就不能重复定义 fullName，而 watch 则不受影响。

日常开发中，我们还可以使用 watch 来监听路由的变化，如下栗子：

watch: {
  '$route'(to,from){
    console.log(to);   //to表示去往的界面
    console.log(from); //from表示来自于哪个界面
    if(to.path=="/shop/detail"){
      console.log("商品详情");
    }
  }
},

总结：

watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在 watch 中，是可以做一些复杂的操作的，而 computed 中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。

两者常用应用场景区分：

computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理 watch 和 methods 无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

watch：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作；一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

两者主要的区别：

---

computed

• 初始化显示或者相关的 data、props 等属性数据发生变化的时候调用
• computed 不支持异步；
• 计算属性不在 data 中，它是基于 data 或 props 中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化；
• 在 computed 属性对象中定义计算属性的方法，和取 data 对象里的数据属性一样，以属性访问的形式调用，但是 computed 中定义的属性名称不能和 data 中的属性名称重合；
• 如果 computed 属性值是函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值；
• computed 属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed 才会重新计算；
• 在 computed 中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch

• 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体；
• 可以监听的数据来源：data，props，computed 内的数据；
• watch 支持异步；
• 不支持缓存，监听的数据改变，直接会触发相应的操作；
• 监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。

如果文中有不对的地方或者理解有误的地方欢迎大家提出并指正。每一天都要相对前一天进步一点，加油！！！