当前位置：首页 > VUE

vue实现计算

2026-03-27 14:43:27VUE

Vue 实现计算的方法

在Vue中实现计算功能通常可以通过计算属性（computed）和方法（methods）来完成。以下是具体实现方式：

计算属性（Computed）

计算属性是基于它们的响应式依赖进行缓存的，只有在依赖发生改变时才会重新计算。

<template>
  <div>
    <p>原始数值: {{ num1 }}</p>
    <p>计算后的数值: {{ computedNum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10
    }
  },
  computed: {
    computedNum() {
      return this.num1 * 2;
    }
  }
}
</script>

方法（Methods）

方法不会缓存结果，每次调用都会执行函数。

<template>
  <div>
    <p>原始数值: {{ num1 }}</p>
    <p>计算后的数值: {{ calculateNum() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10
    }
  },
  methods: {
    calculateNum() {
      return this.num1 * 2;
    }
  }
}
</script>

监听器（Watch）

监听器用于观察和响应数据的变化，适用于需要在数据变化时执行异步或开销较大的操作。

<template>
  <div>
    <p>原始数值: {{ num1 }}</p>
    <p>计算后的数值: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      result: 0
    }
  },
  watch: {
    num1(newVal) {
      this.result = newVal * 2;
    }
  }
}
</script>

计算属性的Setter

计算属性默认只有getter，但也可以提供setter。

vue实现计算

<template>
  <div>
    <p>原始数值: {{ num1 }}</p>
    <p>计算后的数值: {{ computedNum }}</p>
    <button @click="computedNum = 30">设置计算值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10
    }
  },
  computed: {
    computedNum: {
      get() {
        return this.num1 * 2;
      },
      set(newVal) {
        this.num1 = newVal / 2;
      }
    }
  }
}
</script>