vue3.0计算属性

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

在vue2.0中使用计算属性

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

在vue3.0中使用计算属性

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