无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(vue computed set) Vue Computed中get和set的用法及Computed与watch的区别 Vue.js 中的计算属性 全网首发(图文详解1)

前沿技术 Micheal 4周前 (06-22) 17次浏览 已收录 扫描二维码

(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 会被调用,进而更新 firstNamelastName

计算属性(Computed)与侦听属性(Watch)的区别:

  • 计算属性 是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新计算。适用于复杂逻辑的场景。
  • 侦听属性(Watcher) 更适合于响应数据的变化去执行异步操作或较大开销的操作,当需要在数据变化时执行副作用时使用。

解决、使用、或实现的流程:

  • 确定使用场景:如果你需要根据状态生成新的值并且这个值需要缓存,你应该使用计算属性。如果你需要在某个数据变化时执行操作(如发送请求、长时间运算等),则可能需要使用 watch。
  • 编写计算属性的代码:在你的 Vue 实例的 computed 选项中添加一个新的计算属性。如果这个属性需要被设置,还需编写对应的 setter。
  • 使用计算属性:在模板中直接引用你的计算属性,就如同任何正常的数据项一样。
  • 监听器的添加:如果需要,你可以在 Vue 实例的 watch 选项中对特定的数据项添加监听器,然后在监听器中定义当数据变化时如何响应。

请根据你的具体应用逻辑和需要,决定是采用计算属性还是侦听器,并按照以上流程进行配置和实现。
(mybatisplus selectpage) MybatisPlus中selectPage的使用方法 「MybatisPlus分页查询」 全网首发(图文详解1)
(dnf机械师95版本装备选择) DNF95版本女机械史诗套怎么选 95ss套女机械选择推荐 95级女机械师史诗套选择 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝