vue 第四天（计算属性的使用）

川长思鸟来 2022-11-04 12:25 185阅读 0赞

# vue 第四天 （计算属性的使用） #

**因为\{ \{div1+div2+div3+div4+…+n\}\}这种写法比较复杂所以加上 computed 计算属性**

## 1、computed 计算属性 ##

**cmputed 可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以**

**computed 具有缓存功能,只有依赖数据发生改变，才会重新进行计算，否则直接返回之前的计算结果**

**每个计算属性都包含一个 get 和 set**

### 利用 computed 计算属性进行计算 ###

<div id="apps">
        <div>{ { div1}}</div>
        <div>{ { div2}}</div>
        <div>{ { div3}}</div>
    </div>
    
    <script>
        const vue = new Vue({ 
            el: "#apps",
            data: { 
                div1: 123,
                div2: 456
            },
            computed: { 
                div3: function () { 
        
                    return this.div1 + this.div2;
                }
            }
        })
    </script>

## 2、get 大多数情况下可以省略 ##

**下面是 简化 和一个 get 写法**

**get相当于输出值**

computed: { 
                div3: { 
                    get:function() { 
                        return this.div1 + this.div2;
                    }
                },
                div3: function () { 
                    return this.div1 + this.div2;
                }
            }

## 3、set 不常用（计算属性一般是没有set方法，只读属性） ##

**在 浏览器敲f12 上输入 vue.div3 = “hello 你好”**

**set相当于赋值**

<div id="apps">
        <div>{ { div1}}</div>
        <div>{ { div2}}</div>
        <div>{ { div3}}</div>
    </div>
    <script>
        var vue = new Vue({ 
            el: "#apps",
            data: { 
                div1: "123",
                div2: "456"
            },
            computed: { 
                div3: { 
                    set: function (input) { 
                        
                        const split = input.split(" ");
                        this.div1 = split[0];
                        this.div2 = split[1];
                        },
                    get: function () { 
                        return this.div1 + "-------" + this.div2;
                    }
                }
            }
        })
    </script>

## 4、计算属性 computed和methods的对比 ##

**计算属性 computed 如果执行多次不做 修改 添加 的话就执行一次**

**methods 如果 执行多次不做 修改 添加的话，调用多少次执行多少次**

**为什么计算属性就执行一次呢，因为计算属性有缓存**

`花开一千年,花落一千年,花叶永不见`