(vue computed set) Vue Computed中get和set的用法及Computed与watch的区别
Vue.js 中的计算属性（Computed）通常用于基于组件状态的派生获得一个新的值。计算属性默认只有 getter 函数，但你也可以提供一个 setter 函数。
计算属性的 get 和 set：
Getter 是一个计算属性的默认方法，用于声明如何计算和返回一个值。每当依赖的响应式属性变化时，getter 会重新计算。
Setter 是可选的，用于指定当你尝试设置计算属性时如何更新其他的响应式属性。
示例代码：
<template>
<div>
<input v-model="fullName">
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName;
},
// setter
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1] || '';
}
}
}
}
</script>在这个例子中，fullName 是一个计算属性，包含了一个 getter 和一个 setter。当 input 发生变化时，fullName 的 setter 会被调用，进而更新 firstName 和 lastName。
计算属性（Computed）与侦听属性（Watch）的区别：
- 计算属性 是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新计算。适用于复杂逻辑的场景。
- 侦听属性（Watcher） 更适合于响应数据的变化去执行异步操作或较大开销的操作，当需要在数据变化时执行副作用时使用。
解决、使用、或实现的流程：
- 确定使用场景：如果你需要根据状态生成新的值并且这个值需要缓存，你应该使用计算属性。如果你需要在某个数据变化时执行操作（如发送请求、长时间运算等），则可能需要使用 watch。
- 编写计算属性的代码：在你的 Vue 实例的
computed选项中添加一个新的计算属性。如果这个属性需要被设置，还需编写对应的 setter。 - 使用计算属性：在模板中直接引用你的计算属性，就如同任何正常的数据项一样。
- 监听器的添加：如果需要，你可以在 Vue 实例的
watch选项中对特定的数据项添加监听器，然后在监听器中定义当数据变化时如何响应。
请根据你的具体应用逻辑和需要，决定是采用计算属性还是侦听器，并按照以上流程进行配置和实现。
(mybatisplus selectpage) MybatisPlus中selectPage的使用方法 「MybatisPlus分页查询」 全网首发(图文详解1)
(dnf机械师95版本装备选择) DNF95版本女机械史诗套怎么选 95ss套女机械选择推荐 95级女机械师史诗套选择 全网首发(图文详解1)
