vue3.0计算属性

vue3.0的计算属性和vue2.0的计算属性基本是一样的

在vue2.0中使用计算属性

  computed: {
    getName() {
      const { name, age} = this.info
      return name+ age
    }
  },

在vue3.0中使用计算属性

<template>
  <div class="home">
    <h1>{{ name }}</h1>
  </div>
</template>
<script>
import { computed, reactive } from 'vue'

export default {
  setup() {
    const info = reactive({
      name: '哈哈嘻',
      age: 18
    })

    const name = computed(() => info.name + info.age)

    return {
      name
    }
  }
}
</script>

computed创建只读计算属性

给 computed() 传入一个函数，可以得到一个只读的计算属性:

const count = ref(1)

// 创建一个计算属性，使其值比 count 大 1
const bigCount = computed(() => count.value + 1)

console.log(bigCount.value) // 输出 2
bigCount.value++ // error 不可写

computed创建可读可写计算属性:

const count = ref(1)

// 创建一个 computed 计算属性，传入一个对象
const bigCount = computed({
    // 取值函数
    get: () => (count.value + 1),
    // 赋值函数
    set: val => {
      count.value = val - 1
    }
})

// 给计算属性赋值的操作，会触发 set 函数
bigCount.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 8