实战 vue2/vue3 computed 基础用法和携带参数动态用法

Vue2 computed带参数

一般情况下，我们在Vue中使用computed计算属性是无法直接进行传参的。

方法：如果有传参数的需求可以通过闭包函数（也叫匿名函数）来实现。

<p>{{computedTitle}}</p>
<p>{{getFileScore(666)}}</p>

  computed:{
    computedTitle(){
      return '查看'
    },
    getFileScore(){
      return value => {
        return value+'分数'
      }
    }
  },

Vue3 computed带参数

computedMessage 是一个计算属性，它接受一个参数 msg

<template>
  <div>
    <p>计算结果: {{ computedMessage(message) }}</p>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
    const message = ref('Hello, Vue 3!');
    // 计算属性，接受一个参数
    const computedMessage = computed((msg) => {
      return `动态参数: ${msg}`;
    });
  }
};
</script>