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) {
                    <!--在控制台输入 vue.div3 = "hello 你好" -->
                    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 如果 执行多次不做 修改 添加的话，调用多少次执行多少次

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

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