vue3中的计算属性

最新推荐文章于 2025-11-23 23:58:26 发布

原创最新推荐文章于 2025-11-23 23:58:26 发布 · 918 阅读

0 ·

CC 4.0 BY-SA版权

vue3 专栏收录该内容

8 篇文章

订阅专栏

本文探讨Vue3中计算属性的使用，包括通过getter函数创建的不可变响应式ref对象，以及利用get和set方法创建可写的ref对象，深入理解其工作原理。

使用getter函数，返回值是一个不变的响应式ref对象

<template>
  <div>
    姓：<input type="text" v-model="firstName"/>
    名：<input type="text" v-model="lastName"/>
    姓名：<input type="text" v-model="name"/>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, ref} from 'vue';
export default defineComponent({
  setup () {
    let firstName = ref<string>('')
    let lastName = ref<string>('')
    let name =  computed (() => {
      return firstName.value + lastName.value
    })

    return {
      firstName,
      lastName,
      name
    }
  }
})
</script>
<style scoped>
</style>

使用get和set函数的对象来创建可写的ref对象

<template>
  <div>
    姓：<input type="text" v-model="firstName"/>
    名：<input type="text" v-model="lastName"/>
    姓名：<input type="text" v-model="name"/>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, ref} from 'vue';
export default defineComponent({
  setup () {
    let firstName = ref<string>('')
    let lastName = ref<string>('')
    let name =  computed ({
      get: () => {
        return firstName.value + lastName.value
      },
      // 直接改变name的值会触发set函数
      set: () => {
        console.log('1111')
      }
    })

    return {
      firstName,
      lastName,
      name
    }
  }
})
</script>
<style scoped>
</style>