computed属性可通过对象语法声明getter和setter实现双向绑定；需用{ get() {}, set(value) {} }格式，setter中更新依赖数据以同步源响应式变量。

Vue.js 的 computed 属性默认只提供 getter，但通过显式声明 getter 和 setter，可以实现对计算属性的双向拦截——既响应数据变化，也能被赋值并反向影响源数据。

计算属性如何声明 setter

当 computed 选项是一个对象而非函数时，可分别定义 get 和 set 方法。setter 接收一个参数（即被赋的新值），常用于解析、校验或反向更新原始响应式数据。

• 必须使用对象语法：{ get() {}, set(value) {} }
• setter 中不能直接修改 getter 依赖的响应式变量以外的数据，否则可能破坏响应链
• 若仅需读取，用函数语法更简洁；需双向操作时才用对象语法

典型应用场景：表单联动与格式化输入

例如将用户输入的「全名」字符串拆解为 firstName 和 lastName，同时允许通过修改 fullName 计算属性来批量更新两者：

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`
    },
    set(value) {
      const parts = value.trim().split(/\s+/)
      this.firstName = parts[0] || ''
      this.lastName = parts[1] || ''
    }
  }
}

这样在模板中绑定 v-model="fullName" 就能实现输入框与两个字段的双向同步。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

注意事项与常见陷阱

setter 不会自动触发视图更新，它只负责写入逻辑；后续依赖该计算属性的 DOM 或其他响应式依赖，仍由 Vue 的响应系统自动更新。

• 避免在 setter 中执行异步操作（如 API 调用），因 v-model 赋值是同步的，异步结果无法及时反馈到视图
• 不要在 setter 中再次读取当前计算属性（如 this.fullName），会造成无限循环
• Vue 3 中 Composition API 同样支持：用 computed({ get, set }) 创建可写的 ref

Vue 3 中的等效写法（Composition API）

在 setup() 中使用 computed 函数传入配置对象：

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

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

该写法与 Options API 行为一致，且类型推导更友好。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！