vue中的计算属性

是什么:

在原有数据的基础上进行计算(一些数据需要data里面的数据,逻辑比较复杂,此时就需要计算属性)

优点:

• 有缓存,如果有同样的逻辑需要执行,则会只走一次,不会重复走,提高渲染性能
• 和函数相比,函数需要调用执行,计算属性而是只要数据发生变化,就会立即执行
• 计算属性的使用方式与data中的数据项一致

语法:

- 语法1:

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

举例代码:

<template>
  <div>
    <p>计算属性</p>
    <h1>{{getData}}</h1>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      arr: [20, 30, 40, 60],
    };
  },
    computed: {
      getData() {
        return this.arr.reverse();
      },
    },
 
};
</script>
​
<style>
</style>

- 语法2(完整写法):

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

• get里面执行的代码逻辑是获取
• set里面的逻辑是进行修改