开发文档
Vue2
computed

computed

和methods区别

computed和methods在某些时候可以转换：

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName+" "+this.lastName;
    }
  }
};
</script>

效果上等同于

<template>
  <div>
    <p>{{ fullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  methods: {
    fullName() {
      return this.firstName+" "+this.lastName;
    }
  }
};
</script>

但是computed是用来声明计算属性的，因此computed运行，另外还有以下区别

  • methods不一定需要返回值，但是computed一定有返回值
  • methods一般是用于执行操作的时候使用，比如点击操作，钩子函数调用等等，而computed一般直接用在dom内容上
methodsv-on