Vue中computed和methods的区别

区别

computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是
computed计算复杂的逻辑使用

例子

1. 下面的代码h3写了三行, 但是computed中的comName方法只是执行一次, 除非相应的数据发生改变(点击修改按钮, comName方法再次执行了一次); 2. 下面的h4标签写了三行, methods中的methodName方法执行三次; 所以复杂耗时的东西写到computed中

<template>
    <div class="container">
    	<h3>{{ comName }}</h3> 
		<h3>{{ comName }}</h3>
		<h3>{{ comName }}</h3>
		<h4>{{ methodName() }}</h4>
		<h4>{{ methodName() }}</h4>
		<h4>{{ methodName() }}</h4>            
		<button @click="updateNameClick">修改</button>
    </div>
<template>
import Footer from '@/components/footer.vue'
export default {
  name: 'consult',
  data () {
    return {
        testName: '张三丰'
    }
  },
  computed: {
      comName () {
        console.log('计算属性, 依赖于缓存, 只有testName发生变化才会再次执行')
        return '计算name=' + this.testName;
      }
  },
  methods: {
  	 methodName() {
          console.log('方法名字, 调用一次执行一次')
          return '方法name=' + this.testName;
      },
     updateNameClick () {
          this.testName = '逍遥王';
      },
  }