vue2：computed计算属性

1. 计算属性可作为data变量，直接在template中使用。
2. 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖（依赖的data选项中的变量）发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

一、JS用法

<script>
  computed: {
    filterList() {
      return this.options.filter((item) => item[this.props.label].includes(this.keywords))
    },
    checkAll: {
      get() {
        if (this.filterList.length <= 0) {
          return false
        } else {
          const isAllChecked = this.filterList.every((item) => item.checked)
          return isAllChecked
        }
      },
      set(val) {
        this.filterList.forEach((item) => {
          item.checked = val
        })
      }
    }
  },
</script>

二、TS用法

get name(): string{
   return this.firstName + "·" + this.lastName
}

set name(val) {
   ... // 其他操作code
}

 

参考网址：

Vue计算属性computed的get和set方法_和世界不一样，那就不一样！的博客-CSDN博客_computed get