丁鹿学堂前端培训：五分钟学会vue计算属性

vue中有一个概念是计算属性。

他在模板中的使用，和你在data中定义的属性的使用方式是一样的。

却别在于定义不同。

计算属性的定义

1. 写在computed对象中。
2. 每个属性其实是一个函数，在模板中使用，用的是他们的返回值。

    data(){
        return {
            name:'zhangsan',
            num1:10,
            num2:20
        }
    },
    template:`
        <div>你好我是vue组件 -- {{sum}}</div>
    `,
    computed:{
        sum(){
            return this.num1 + this.num2
        }
    }

计算属性的优点

计算属性是基于响应式依赖进行缓存的,只在相关响应式依赖发生改变（相关的属性变化）时它们才会重新求值。提升了性能。

计算属性的复杂写法

计算属性会默认使用 getter 函数,如果你要使用 setter 函数，那么你必须要手动写出 setter 函数。但是绝大部分我们都是使用简写的get函数，所以初学者不用纠结。

下面的内容想了解的可以看，想刷抖音的可以去了。其实就三句话：

1. 复杂的计算属性在定义的时候是一个对象，里面有get方法和set方法
2. 通过复杂一点的set，我们可以给计算属性去赋值，赋值的操作就是调用计算属性的set方法。
3. 使用计算属性的值的时候，就是调用计算属性的get方法，

    data(){
        return {
            name:'zhangsan',
            num1:10,
            num2:20,
            content:''
        }
    },
    template:`
        <div>使用计算属性的值 -- {{sum}}</div>
        <div @click="setSum">给计算属性赋值<div>
    `,
    computed:{
        sum:{
            get(){
                return this.content + (this.num1 + this.num2)
            },
            set(value){
                this.content =  value
            }
        }
    },
    methods:{
        setSum(){
            this.sum = '点击设置的内容：'
        }
    }