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

首页

前端开发

热心网友

转载

2026-04-23

Vue计算属性如何设置Setter？掌握组件数据双向绑定的高级技巧

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

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

提到Vue的计算属性，多数开发者首先想到的是“只读”的派生数据。确实，它默认仅提供getter方法。然而你可能不了解，为其添加一个setter函数，就能使其具备“可写”能力，从而在数据被修改时触发预设的自定义处理逻辑——这正是实现组件数据双向拦截与精细化控制的核心技术。

计算属性setter的本质是什么？

计算属性本质上是一个基于响应式依赖自动更新的派生值，常用于数据拼接、格式转换等场景。而setter的作用，是在外部尝试向该计算属性赋值时，为你提供一个“逻辑拦截入口”，让你能够执行特定的业务操作，而非直接修改计算属性本身。它并不改变Vue底层的响应式机制，而是为你创造了介入数据流转过程的机会。

需要特别注意的关键点：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) 方法则负责拦截赋值操作。当执行 this.fullName = ‘张三’ 时，它会接收到传入的新值，随后你可以将其解析并更新到对应的原始响应式数据（firstName 与 lastName）中。
通过这种方式，在模板中直接使用 v-model=“fullName” 即可实现“视图层的双向绑定”，而实际的数据写入与处理逻辑完全由开发者自定义控制。

Vue 3组合式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 }
  }
}