computed、watch，方法的区别和使用

梦里梦外; 2023-02-22 13:34 31阅读 0赞

*  最近在看的一篇文章中一个面试官问一个面试人员：你知道computed watch 和方法的区别吗？ 他说自己不怎么用computed 和 watch，一般都用方法，面试官表示很无奈，咱们这篇博客就主要介绍一下他们三者的区别：

1.  方法：页面数据每次重新渲染都会重新执行，性能消耗较大，除非不希望有缓存的时候使用
2.  computed: 是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化时才会返回内容
3.  watch: 监听到值的变化就会执行回调，在回调中可以进行一些较复杂的逻辑操作

### 方法 VS computed ： ###

理论上computed的所有实现都可以使用methods完全替换

我们就用官方给的例子：

<template>
      <div>
        <div>哈哈 欢迎来到小富的test1界面</div>
        <div>
          <input type="text" v-model="message">
          
          <p>计算值 {
       {ab()}}</p>
          
          <p>调用计算属性{
       {reversedMessage}}</p>
        </div>
     </div>
    </template>
    <script>
    export default {
      data () {
        return {
          message: '',
          number: ''
        }
      },
      computed: {
        reversedMessage () {
          console.log("使用了计算属性")
          return this.message.split('').reverse().join('') + this.number
        }
      },
      //方法
      methods: {
        ab () {
          console.log("使用了普通方法计算")
          return this.message.split('').reverse().join('') + this.number
        }
      }
    }
    </script>

![2020070320432027.png][]

通过上面的例子我们可以发现两者貌似一样，好像发现不了有什么区别，但是computed具备的缓存能力在这里并没有体现出来，**下面的例子就可以看到computed的优势了**：

**多次调用的时候方法就会执行多次，但是多次调用计算属性他不会执行，但是结束任然会返回，只有值改变的时候才会执行**

<template>
      <div>
        <div>哈哈 欢迎来到小富的test1界面</div>
        <div>
          <input type="text" v-model="message">
          <p>第一次使用方法调用"{
       { ab()}}"</p>
          <p>第二次使用计算属性调"{
       { reversedMessage }}"</p>
          <p>第二次调用计算属性 {
       {reversedMessage}}</p>
          <p>第二次使用方法调用{
       {ab()}}</p>
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          message: '',
          number: ''
        }
      },
      computed: {
        reversedMessage () {
          console.log("使用了计算属性")
          return this.message.split('').reverse().join('') + this.number
        }
      },
      //方法
      methods: {
        ab () {
          console.log("使用了普通方法计算")
          return this.message.split('').reverse().join('') + this.number
        }
      }
    }
    </script>

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

这就是 computed 缓存的优势。那么在哪些情况下更适合使用 computed ？

一般**使用简单的表达式对内容进行简单的转换**与**使用过滤器对内容进行简单的转换**用的比较多。

### computed VS watch ###

watch的特点：

**1.不支持缓存，数据改变，直接触发操作**

**2.支持异步**

**3.监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值、**

**4.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其操作**

例子：

<template>
      <div>
        <p>{
       { this.number }}</p>
      </div>
    </template>
    <script>
    export default {
      name: 'test1',
      data () {
        return {
          number: 1
        }
      },
      created () {
        setTimeout(() => {
          this.number = 300
        }, 2000)
      },
      watch: {
        number (newVal, oldVal) {
          console.log('number has changed: ', newVal)
        }
      }
    }
    </script>

结果：

过2s后在控制台中可以看到： number has changed: 300

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别

### 总结： ###

除非不希望缓存，一般都不会用方法

一般来说需要依赖别的属性来动态获得值的时候可以用computed

对于监听到值的变化需要做异步操作，或者开销较大的操，作时用watch

[2020070320432027.png]: https://img-blog.csdnimg.cn/2020070320432027.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200703205001553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70