计算属性的getter负责读取逻辑并必须返回值，依赖响应式数据以实现缓存与更新；setter为可选赋值拦截器，用于反向解析或同步字段，需声明为对象形式且不可读取自身。
Vue 计算属性的 getters 和 setters 是一对配套机制，用来控制计算属性的读取与赋值行为。它不是简单的函数调用，而是一套响应式封装：getter 负责“怎么读”，setter 负责“怎么写”，二者共同构成可双向操作的计算属性。
getter 是必须的读取逻辑
每次模板中使用 {{ fullName }} 或 JS 中访问 this.fullName，都会触发 getter 函数。它必须返回一个值，且内部应只依赖响应式数据（如 data、ref、reactive 中的字段），这样才能被 Vue 正确追踪依赖、实现缓存和自动更新。
- 在 Options API 中，简写的
fullName() { return ... }实际就是 getter 的语法糖 - 在 Composition API 中，
computed(() => ...)创建的是只读计算属性，本质只有 getter - getter 不应有副作用（比如发请求、改 state），否则会破坏响应式预期
setter 是可选的赋值拦截器
当执行 this.fullName = '王小明' 这类赋值操作时，如果计算属性配置了 setter，就会跳过默认报错，转而执行你定义的逻辑——常用于反向解析、格式校验或同步多个字段。
- 必须把计算属性声明为对象形式：
{ get() {}, set(newValue) {} } - setter 参数名任意（习惯叫
newValue），但函数体内只能修改原始响应式数据，不能读取当前计算属性（如this.fullName），否则引发无限循环 - Vue 2 用
Object.defineProperty实现劫持；Vue 3 改用Proxy，但语义一致
Options API 与 Composition API 写法对比
两种写法核心逻辑一致，只是语法位置和响应式 API 不同：
-
Options API（Vue 2 / Vue 3）：
computed: { fullName: { get() { return this.lastName + this.firstName; }, set(val) { const [last, first] = val.split(' '); this.lastName = last || ''; this.firstName = first || ''; } } } -
Composition API（Vue 3）：
const firstName = ref(''); const lastName = ref('');<br>const fullName = computed({ get() { return `${firstName.value} ${lastName.value}`; }, set(val) { const [f, l] = val.trim().split(/\s+/); firstName.value = f || ''; lastName.value = l || ''; } });
注意：Composition 中需通过.value访问和赋值 ref 值
常见误区与注意事项
写 setter 容易踩坑，关键点要盯住：
- 命名别带
set或get前缀（如setFullName），计算属性名应是名词（fullName），方法名由 Vue 内部约定 - 不要在 setter 里读取自身计算属性，例如
set(val) { console.log(this.fullName); ... }—— 触发 getter → 依赖收集 → 可能再次触发 setter - 计算属性本身不可直接赋值（除非有 setter），否则 Vue 会静默忽略或报错（取决于版本）
- 缓存只对 getter 生效：只要依赖项没变，多次读取不会重复执行 getter；setter 不参与缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
