vue-计算属性-computed

1.背景

在实际开发中,有的属性很复杂,需要计算得到.....

2.简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>
<div id="app">
    <h2>---------计算属性---------------</h2>
    <h4>传入圆的直径计算圆的面积</h4>

    不使用计算属性写法:
    <div>圆的面积为:{{d}}/2*3.14</div>

    使用计算属性写法:
    <div>圆的面积为:{{s}}</div>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: 'ldp',
            d: 10
        },
        computed: {
            s: function () {
                return this.d / 2 * 3.14;
            }
        }

    });
</script>
</body>
</html>

View Code

3.计算属性统计订单总金额

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>
<div id="app">
    <h2>---------计算属性统计订单金额---------------</h2>
    <h3>订单列表如下</h3>
    <ul>
        <li v-for="item in orderList">
            {{item.orderName}}---- {{item.price}}---- {{item.num}}
        </li>
    </ul>
    <h4>合计:{{allPrice}}</h4>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: 'ldp',
            orderList: [
                {orderName: '方便面', price: 3, num: 6},
                {orderName: '鸡腿', price: 8, num: 1},
                {orderName: '手机', price: 39, num: 4},
                {orderName: '鱼', price: 12, num: 9}
            ]
        },
        computed: {
            allPrice: function () {
                // 高阶函数 all表示每次的结果,item表示循环出来的每个对称 , reduce 函数的第二个参数表示 all=0开始累加
                return this.orderList.reduce((all, item) => {
                    return all + item.price * item.num
                }, 0)
            }
        }

    });
</script>
</body>
</html>

View Code

4.计算属性computed的getter与setter方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>
<div id="app">
    <h2>---------{{title}}---------------</h2>
    每个计算属性都包含一个getter和一个setter
    在上面的例子中，我们只是使用getter来读取。
    在某些情况下，你也可以提供一个setter方法（不常用）
    <h3>订单列表如下</h3>
    <ul>
        <li v-for="item in orderList">
            {{item.orderName}}---- {{item.price}}---- {{item.num}}
        </li>
    </ul>
    <h4>合计:{{allPrice}}</h4>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: 'ldp',
            title: '计算属性computed的getter与setter方法',
            orderList: [
                {orderName: '方便面', price: 3, num: 6},
                {orderName: '鸡腿', price: 8, num: 1},
                {orderName: '手机', price: 39, num: 4},
                {orderName: '鱼', price: 12, num: 9}
            ]
        },
        computed: {
            allPrice: {
                get() {
                    console.log("--computed-调用了get方法")
                    return this.orderList.reduce((all, item) => {
                        return all + item.price * item.num
                    }, 0)
                },
                // 当有属性值变动的时候 vue会自动调用 set方法
                set(newValue) {
                    console.log("--computed-调用了set方法---newValue=" + newValue)

                }
            }
        }


    });
</script>
</body>
</html>

View Code

5.计算属性computed的缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>
<div id="app">
    <h2>---------{{title}}---------------</h2>
    methods和computed看起来都可以实现我们的功能，
    那么为什么还要多一个计算属性这个东西呢？
    原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
    <h3>订单列表如下</h3>
    <ul>
        <li v-for="item in orderList">
            {{item.orderName}}---- {{item.price}}---- {{item.num}}
        </li>
    </ul>
    计算属性只会调用一次
    <h4>合计:{{allPrice}}</h4>
    <h4>合计:{{allPrice}}</h4>
    <h4>合计:{{allPrice}}</h4>

    普通方法每次都会调用
    <h4>方法合计:{{ getAllPrice()}}</h4>
    <h4>方法合计:{{ getAllPrice()}}</h4>
    <h4>方法合计:{{ getAllPrice()}}</h4>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: 'ldp',
            title: '计算属性computed的缓存',
            orderList: [
                {orderName: '方便面', price: 3, num: 6},
                {orderName: '鸡腿', price: 8, num: 1},
                {orderName: '手机', price: 39, num: 4},
                {orderName: '鱼', price: 12, num: 9}
            ]
        },
        methods: {
            getAllPrice() {
                console.log("--methods-调用了getAllPrice方法")
                return this.orderList.reduce((all, item) => {
                    return all + item.price * item.num
                }, 0)
            }

        },
        computed: {
            allPrice: {
                get() {
                    console.log("--computed-调用了get方法")
                    return this.orderList.reduce((all, item) => {
                        return all + item.price * item.num
                    }, 0)
                },
                // 当有属性值变动的时候 vue会自动调用 set方法
                set(newValue) {
                    console.log("--computed-调用了set方法---newValue=" + newValue)

                }
            }
        }


    });
</script>
</body>
</html>

View Code

完美!