2023-01-02_计算属性

前言

• 大多数情况下，我们都可以将Vue组件中定义的属性数据直接渲染到HTML元素上
• 但是有些场景下，属性中的数据并不适合直接渲染，需要处理后再进行渲染。在Vue中，我们通常使用计算属性或侦听器来实现这种逻辑

1.计算属性的定义和使用

• vue组件的属性分为两种，一种是普通属性，在data(){}中定义。另一种就是计算属性，在computed(){}中定义。
• 两种属性的使用方法都差不多，都可以用this.prop或{{propName}}来在模板中使用。
• 计算属性强大的地方在于，并不是仅仅计算一遍。。当普通属性有变化的情况下，计算属性会跟着变化。
• 为了实现计算属性跟着变化这一个功能，可以使用上一章的插值函数，计算属性和插值函数不同点在于，计算属性是普通属性变化的情况下才会重新计算。而插值函数每一次调用都会执行函数。当使用属性直观的时候，就需要使用计算属性，而不是函数。

html示例如下：

<div style="text-align: center;" id="App">
    <h1>{{ count }}</h1>
    <h1>{{ type }}</h1>
    <button @click="clickButton">点击</button>
</div>

vue代码示例如下：

<script>
    const App = {
        data(){
            return {
                count : 0,
            }
        },
        methods: {
            clickButton(){
                ++this.count;
            }
        },
        computed: {
            type(){
                return this.count > 10 ? "大" : "小"
            }
        }
    }
    Vue.createApp(App).mount("#App");
</script>

2.计算属性的赋值

• 用第一段的方法定义的计算属性是没办法进行set操作的。如果用this.prop = ""进行赋值，会报错：[Vue warn]: Write operation failed: computed property "type" is readonly.
• 此时就需要用第二种定义方法。
• 注意get()方法，这个方法才是计算属性反馈给外界的值，也就是不管你如何set()这个计算属性，计算属性的值都是get()方法的返回值。用第一种方法定义的计算属性也是一样的道理。因为计算属性的目的是根据普通属性的变化而变化，所以计算属性的set更多是对普通属性的一种反向操作。

computed:{
    type:{
        get(){
            return this.count > 10 ? "大" : "小";
        },
        set(){
            this.count = 20;
        }
    }
}