首页 > 网页制作 >Vue计算属性怎么写 Setter？教你如何实现组件数据的双向拦截

Vue计算属性怎么写 Setter？教你如何实现组件数据的双向拦截

来源：互联网 2026-04-22 19:56:03

Vue计算属性如何编写Setter？实现组件数据双向拦截的方法提到Vue的计算属性，多数开发者首先想到的是“只读”的派生数据。确实，它默认仅提供getter。但你可能不了解，为其添加一个setter，即可使其变为“可写”属性，从而在数据被修改时触发预设的自定义逻辑——这正是实现数据双向拦截与精细化

Vue计算属性如何编写Setter？实现组件数据双向拦截的方法

提到Vue的计算属性，多数开发者首先想到的是“只读”的派生数据。确实，它默认仅提供getter。但你可能不了解，为其添加一个setter，即可使其变为“可写”属性，从而在数据被修改时触发预设的自定义逻辑——这正是实现数据双向拦截与精细化控制的关键步骤。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

计算属性的setter是什么？

计算属性本质上是一个基于响应式依赖自动更新的派生值，例如拼接姓名、格式化日期等。而setter的作用，是在外部试图为该计算属性赋值时，提供一个“拦截入口”，允许执行指定的操作，而非直接改写属性值。它并不改变底层数据的响应性机制，而是为开发者提供了一个介入数据流的机会。

需要注意的关键点是：get与set必须成对声明，缺一不可，否则会导致错误。此外，在setter内部应避免直接给计算属性自身赋值，以免引发无限循环。

基础写法：以对象形式声明getter与setter

在Options API的 computed 选项中，可使用对象语法进行定义：

立即学习“前端免费学习笔记（深入）”；

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      const parts = newValue.split(' ');
      this.firstName = parts[0] || '';
      this.lastName = parts[1] || '';
    }
  }
}

get() 负责定义读取时的行为，例如返回拼接后的全名。
set(newValue) 则负责拦截赋值操作。当执行 vm.fullName = ‘张三’ 时，它会接收到新值，随后可将其拆解并写入原始的响应式数据（firstName 与 lastName）中。
通过这种方式，在模板中直接使用 v-model=“fullName” 即可实现“表面上的双向绑定”，而实际的数据写入逻辑完全由开发者控制。

Vue 3 Composition API中的写法

在Composition API的 setup() 中，可通过 computed() 函数传入一个包含getter和setter的对象：

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('李')
    const lastName = ref('四')

    const fullName = computed({
      get() {
        return firstName.value + ' ' + lastName.value
      },
      set(newValue) {
        const parts = newValue.split(' ')
        firstName.value = parts[0] || ''
        lastName.value = parts[1] || ''
      }
    })

    return { fullName }
  }
}