Vue举例解析Vue中computed与method的区别

Posted 2023-02-05

1、computed里面定义reversedMessage方法

computed里面定义的reversedMessage方法依赖于data()里面的message变量，当message发生改变时，依赖于message的reversedMessage也会更新。如果message没有变化，执行reversedMessage方法时就会直接取缓存中的值，不会再次执行，我们通过打印时间戳​​console.log(Date.now())​​来看一下实际的效果

<template>
  <div id="app">
    <!-- 执行三次reversedMessage方法 -->
    <p>Computed reversed message: " reversedMessage "</p>
    <p>Computed reversed message: " reversedMessage "</p>
    <p>Computed reversed message: " reversedMessage "</p>
  </div>
</template>

<script>
export default 
  name: App,
  data()
    return 
      message: Hello
    
  ,
  computed: 
    reversedMessage: function () 
      console.log(Date.now())
      return this.message.split().reverse().join()
    
  

</script>

页面打印结果：

控制台打印结果：

我们可以看出控制台只打印出一条时间戳信息，我们虽然执行了三次reversedMessage方法，但是因为message没有变化，所以只会真正执行一次reversedMessage方法。

2、methods里面定义reversedMessage方法

methods里面定义reversedMessage方法不依赖于data()中定义的message变量，所以不管message变量是否变化，reversedMessage方法都会重新执行。

<template>
  <div id="app">
    <!-- 执行三次reversedMessage方法 -->
    <p>Reversed message: " reversedMessage() "</p>
    <p>Reversed message: " reversedMessage() "</p>
    <p>Reversed message: " reversedMessage() "</p>
  </div>
</template>

<script>
export default 
  name: App,
  data()
    return 
      message: Hello
    
  ,
  methods: 
    reversedMessage: function () 
      console.log(Date.now())
      return this.message.split().reverse().join()
    
  

</script>

页面打印结果：

控制台打印结果：

我们可以看出控制台打印出了3条时间戳信息，因为执行了三次reversedMessage方法，虽然message没有变化，但是methods里面定义的reversedMessage方法不依赖于message的变化。

引用Vue文档
​​​https://cn.vuejs.org/v2/guide/computed.html​​