使用场景

如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到想要的数据,此时就可以使用计算属性。

定义格式

在vue实例中，补充computed配置项

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

computed是vue的配置选项，它的值是一个对象，其中可以定义多个计算属性，每个计算属性就是一个函数。

属性名称:计算属性的名称

属性的值:计算属性的素材函数

- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值

使用格式

在两个地方使用:

模板

- 用插值表达式 {{计算属性名}}
- 用其它指令

在实例内

- this.计算属性名

computed和methods的区别

当我们想要在模板中显示一份计算过后的数据时,我们有两种方法:

1.计算属性

2.函数

它们两者区别在于:

计算属性(computed):如果在模板中需要使用多次计算过后的数据,当数据不发生变化,计算属性对应的函数只会执行一次,如果数据发生变化才重新执行函数。

methods定义函数:如果在模板中需要使用多次计算过后的数据,每使用一次,函数会重新执行一次，多次调用多次执行。

所以：computed计算属性有缓存，可以一次执行，多次调用，有助提高渲染性能，如果在页面上需要使用对现有数据进行计算得到新数据时，要使用计算属性。

计算属性-完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

使用案例:

<template>
  <div>
    <span>全选:</span>
    <input
      type="checkbox"
      v-model="isAll"
    />
    <button @click="fan">反选</button>
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
      >
        <input
          type="checkbox"
          v-model="item['checked']"
        />
        <span>{{ item["name"] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    }
  },
  methods: {
    // 方法实现
    fan () {
      this.arr.forEach((obj) => {
        obj.checked = !obj["checked"]
      })
    },
  },
  computed: {
    // 计算属性实现
    isAll: {
      set (val) {
        // 设置isAll的值的时候触发此方法, 传入要设置的值
        // val是全选框的true/false的值
        this.arr.forEach((obj) => {
          obj["checked"] = val
        })
      },
      get () {
        return this.arr.every((obj) => obj["checked"] === true)
      },
    },
  },
};
</script>

vue计算属性

使用场景

定义格式

使用格式

computed和methods的区别

计算属性-完整写法