Vue3使用computed计算属性方式总结

最新推荐文章于 2025-04-24 22:47:03 发布

原创最新推荐文章于 2025-04-24 22:47:03 发布

· 524 阅读

0 ·

版权

文章标签：

#vue.js #前端 #javascript

计算属性：需要对数据进行二次运算才使用，里面的值不变调用的话就使用缓存，除非里面依赖的数据项发生改变才会调用函数进行再次运算，依赖项可以有多个

直接对原始值进行二次计算

<template>
	<h2>计算属性</h2>
    <div style="margin-bottom: 10px;">
      <span>初始值{{ count }}</span> |
      <span>双倍添加: {{ doubleCount }}</span>
      <div>
        <el-button @click="count++">+1</el-button>
      </div>
    </div>
</template>
<script setup>
const count = ref(1)
const doubleCount = computed(() => {
  return count.value * 2
})
</script>

接收外部的值，传值计算

<template>
 	<h2>计算属性传值</h2>
	<div>
        <div v-for="item in users" :key="item.id" class="info">
            <span>姓名：{{ item.username }}</span>
            <span>存款：{{ item.deposit }}</span>
            <span>贷款：{{ item.loans }}</span>
            <span class="active">账户余额：{{ accountBalance(item) }}</span>
        </div>
    </div>
</template>
<script setup>
// 模拟后端返回的数据
const users = ref([
  {
    username: '张三',
    deposit: 300000,
    loans: 2000000,
    id: 1
  },
  {
    username: '李四',
    deposit: 80000,
    loans: 100000,
    id: 2
  },
  {
    username: '王五',
    deposit: 600000,
    loans: 0,
    id: 3
  }
])
const accountBalance = computed(() => {
  return function(item) {
    const {deposit, loans} = item
    const account = deposit - loans
    return '￥\n' + account
  }
})
</script>

grtter/setting

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

<script setup>
import { ref, computed } from 'vue'
const fristName = ref('Hello')
const lastName = ref('World')
const fullName = computed({
  get() {
    return fristName.value + ' ' + lastName.value
  },
  set(value) {
    const names = value.split(' ')
    fristName.value = names[0]
    lastName.value = names[1]
  }
})
setInterval(() => {
  fullName.value = 'Hello Tom'
}, 3000)
</script>

<style lang="scss" scoped></style>

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要改变其他状态、在 getter 中做异步请求或者更改 DOM！