江苏省句容建设局网站北京广告公司
计算属性set方法没被执行的原因
在 Vue.js 中，computed 属性的 set 方法通常在计算属性的值被显式设置时执行。然而，在某些情况下，set 方法可能不会被执行。以下是这些情况的详细分析：
没有显式设置计算属性的值
只有在显式地给计算属性赋值时，set 方法才会被触发。如果只是读取计算属性的值，set 方法不会执行。
// 定义计算属性
computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {console.log('Set method called');const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];}}
}// 读取 fullName，不会触发 set 方法
console.log(this.fullName); // 输出 fullName 的值，但不会调用 set 方法// 显式设置(直接修改) fullName，会触发 set 方法
this.fullName = 'John Doe'; // 触发 set 方法
直接修改依赖的数据源
如果计算属性依赖的数据源被直接修改， set 方法不会被执行。
// 定义计算属性
computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {console.log('Set method called');const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];}}
}
// 直接修改依赖的数据源
this.firstName = 'Jane'; // 不会触发 fullName 的 set 方法
this.lastName = 'Smith'; // 不会触发 fullName 的 set 方法
在这种情况下，计算属性的 get 方法会被重新执行以反映数据的变化，但 set 方法不会被调用。
计算属性的 setter 逻辑没有正确实现
如果在定义计算属性时，set 方法的逻辑没有正确实现(可能代码编写错误等)，可能会导致 set 方法没有按预期执行，会让程序编写人员误认为没有执行。
// 错误的 setter 实现
computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {// 错误：虽然有执行，但是没有按照预期进行执行。会让程序编写人员误认为没有执行console.log('New value:', newValue);}}
}// 赋值时，set 方法被调用，但没有实际更新数据
this.fullName = 'Bob Brown'; // set 方法被调用，但 firstName 和 lastName 没有更新
在这种情况下，虽然 set 方法被调用，但由于没有正确更新依赖的数据源，计算属性的值可能不会按预期变化。
计算属性没有被使用
如果计算属性没有在模板或代码中被使用，Vue 不会跟踪其依赖关系，set 方法也不会被执行。
// 定义了一个计算属性，但没有在模板或代码中使用
computed: {unusedProperty: {get() {return this.someData;},set(newValue) {console.log('Set unusedProperty');this.someData = newValue;}}
}// 即使显式赋值，如果计算属性没有被使用，set 方法可能不会按预期执行
this.unusedProperty = 'New Value'; // set 方法被调用，但由于没有依赖跟踪，可能不会生效
总结
computed 属性的 set 方法在以下情况下不会被执行：
- 没有显式设置计算属性的值。
- 直接修改依赖的数据源，而不是通过计算属性的
set方法。 set方法的逻辑没有正确实现。- 计算属性没有在模板或代码中被使用。
要确保 set 方法正确执行，需要显式地给计算属性赋值，并确保其逻辑正确更新依赖的数据源。