【Vue】Vue中methods，computed（计算属性），watch（监听数据）的区别

素颜马尾好姑娘i 2022-03-12 15:28 237阅读 0赞

触发时机  
watch: 被 watch 的值变化的时候执行一个函数  
methods: getMessage() 出现在视图里的时候，或视图更新的时候调用 getMessage  
computed: 两个调试同时满足的时候：一、依赖的属性变化了 二、message 出现在视图里了或视图更新了

使用形式  
watch 的值需要用 data 承载，本身返回值没有用  
methods 的返回值可以直接展示在视图，但是要加括号  
computed 不能加括号

先看下面这段代码：

<div id="app">
      <button @click='value+=1'>+1</button>
      <button @click='value-=1'>-1</button>
      <div>
        {
       {value}} 
      </div>
     </div>
      <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              value: 1,
            }
          },
          methods: {
     
          }
        })
      </script>

我们想实现一个需求：当value大于5，就显示警告  
1， 用methods来实现：

<div id="app">
      <button @click='value+=1'>+1</button>
      <button @click='value-=1'>-1</button>
      <div>
        {
       {value}} {
       {getMessage()}}
      </div>
     </div>
      <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              value: 1,
            }
          },
          methods: {
           getMessage() {
             return this.value>5? '警告':''
           }
          }
        })
      </script>

2，用watch来实现：

<div id="app">
      <button @click='value+=1'>+1</button>
      <button @click='value-=1'>-1</button>
      <div>
        {
       {value}} {
       {message}}
      </div>
     </div>
      <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              value: 1,
              message: ''
            }
          },
          watch: {
            value() {
              if(this.value > 5) {
                this.message = '警告'
              }
            }
          },
          // methods: {
          //  getMessage() {
          //    return this.value>5? '警告':''
          //  }
          // }
        })
      </script>

3，用computed来实现：

<div id="app">
      <button @click='value+=1'>+1</button>
      <button @click='value-=1'>-1</button>
      <div>
        {
       {value}} {
       {message}}
      </div>
     </div>
      <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              value: 1,
            }
          },
          computed: {
            message() {
              return this.value>5 ? '警告': ''
            }
          },
          // watch: {
          //   value() {
          //     if(this.value > 5) {
          //       this.message = '警告'
          //     }
          //   }
          // },
          // methods: {
          //  getMessage() {
          //    return this.value>5? '警告':''
          //  }
          // }
        })
      </script>

##### 可以看到，三种方式都可以实现同一个需求。 #####

##### 不同点： #####

使用形式的不同：  
1，watch 的值需要用 data 承载，本身返回值没有用  
2，methods 的返回值可以直接展示在视图，但是要加括号  
3，computed 不能加括号  
触发时机的不同：  
1，watch: 被 watch 的值变化的时候执行一个函数  
2，methods: getMessage() 出现在视图里的时候，也可以在事件的回调里面使用  
3，computed：当其依赖的属性变化时就会自动执行

以下来自vue官网：  
1，三种两种方式的最终结果确实是完全相同的  
2，对于任何复杂逻辑，你都应当使用计算属性。因为计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。如果依赖的值没变，你访问message会立即返回之前计算的结果  
3，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。  
4，我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。  
5，什么时候使用watch？虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。