computed

在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

• 在前面的Options API中，我们是使用computed选项来完成的；
• 在Composition API中，我们可以在setup 函数中使用 computed 方法来编写一个计算属性；

如何使用computed呢？

• 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
• 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象；
• 总之，computed函数会返回一个ref对象

案例：computed函数接收一个getter函数作为参数

App.vue

<template>
  <div>
    <h1>{{fullName}}</h1>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script>
  import {ref, computed} from 'vue'
  export default {
    setup() {
      let firstName = ref('kobe')
      let lastName = ref('brand')

      //computed函数返回一个ref对象
      // 用法1:传入一个getter函数
      let fullName = computed(() => firstName.value + ' ' + lastName.value)
      const changeName = () => {
        firstName.value = 'coder'
      }

      return {
        fullName,
        changeName
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

修改firstName.value的值，fullName.value的值也会发生改变，页面的数据也会响应式更新

案例：computed函数接收一个具有 get 和 set 的对象作为参数

<template>
  <div>
    <h1>{{fullName}}</h1>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script>
  import {ref, computed} from 'vue'
  export default {
    setup() {
      let firstName = ref('kobe')
      let lastName = ref('brand')

      // 用法2:传入一个对象
      let fullName = computed({
        get: () => firstName.value + ' ' + lastName.value,
        set: (newVal) => {
          const names = newVal.split(' ')
          firstName.value = names[0]
          lastName.value = names[1]
        }
      })
      const changeName = () => {
        fullName.value = 'coder why'
      }

      return {
        fullName,
        changeName
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

此文档主要内容来源于王红元老师的vue3+ts视频教程