Vue 计算属性的 setter 与 getter 实现详解-Vue.js-PHP中文网

vue计算属性的getter负责读取并缓存派生值，setter负责接收新值并反向更新源数据；二者分工明确，仅当需双向绑定（如v-model）时才必须定义setter，否则默认只读。

vue 计算属性的 setter 与 getter 实现详解

Vue 计算属性的 getter 和 setter 不是并列功能，而是分工明确的一对机制：getter 负责“读”，setter 负责“写”。只有当计算属性需要被修改（比如双向绑定到表单输入）时，才必须显式定义 setter；否则默认只有 getter，且不可赋值。

getter 是怎么工作的

getter 在模板中读取计算属性时自动触发，例如 {{ fullName }} 就会调用 fullName 的 get 方法。它必须返回一个值，且内部依赖的数据（如 this.firstName、this.lastName）一旦变化，Vue 会自动重新执行 getter 并更新视图。

初次渲染时执行一次
所依赖的响应式数据更新后，自动重新求值
结果会被缓存，相同依赖下多次读取不重复执行

setter 什么时候需要写

当你希望用户修改计算属性（比如在 v-model="fullName" 中输入内容）并反向影响原始数据时，就必须提供 setter。它接收新值作为参数，由你决定如何拆解、分配给底层 data 字段。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

常见于全名/姓/名联动场景：输入“张三”，自动设 lastName=“张”，firstName=“三”
setter 内不能直接 return，但必须手动更新依赖项（如 this.lastName = parts[0]）
若只定义 getter，尝试赋值会触发 Vue 警告：“Computed property “xxx” was assigned to but it has no setter”

完整写法与注意事项

计算属性需以对象形式定义，显式写出 get 和 set：

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