参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-13计算属性

计算属性介于data对象的属性和方法两者之间：可以像访问data对象的属性那样访问它，但需要以函数的方式定义它。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
</head>

<body>
    <div id="app">
        <p>所有数的和：{{numberTotal}}</p>
        <p>所有数的和：{{numberTotal}}</p>
        <p>当前书籍：{{booksComputed}}</p>
        <p>添加书籍：{{booksComputed = "笑傲江湖"}}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                numbers: [3, 5, 9],
                books:"射雕英雄传"
            },
            computed: {
                // 计算属性会被缓存：如果在模板中多次调用一个方法，
                // 方法中的代码在每一次调用时都会执行一遍；
                // 但如果计算属性被多次调用，其中的代码只会执行一次，之后的每次调用都会使用被缓存的值。
                // 只有当计算属性的依赖发生变化时，代码才会被再次执行
                numberTotal() {
                    console.log("numberTotal");
                    return this.numbers.reduce((sum, val) => sum + val);
                },

                // 还可以设置计算属性的值，并且在设置过程中做一些操作。
                // 实现这一点需要将计算属性由函数改为带有get和set属性的对象。
                booksComputed: {
                    get(){
                        return this.books;
                    },
                    set(newVal){
                        console.log("set");
                        this.books = "《" + newVal + "》";
                    }
                }
            }
        })
    </script>
</body>

</html>

 

posted @ 2021-06-18 11:10  {颜逸}  阅读(37)  评论(0)  编辑  收藏  举报