computed属性

作者: 椰果粒 | 来源:发表于2018-08-03 10:35 被阅读0次

computed、watch和methods区别
computed缓存 VS methods方法
vue中computed和watch的区别，以及适用场景
计算属性
3.vue计算属性和过滤器
03.vue3-组合API(下篇)
Vue
Vue之计算属性computed（一）
Vue复习
vue笔记-21（computed计算属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        // 生命周期函数就是 Vue实例在某一个时间点自动执行的函数
        var vm = new Vue({
            el : "#app",
            data : {
                firstName : 'jingwen',
                lastName : "fu"            },
            computed : {
                // 这里的计算结果fullName，不需要写在data中，直接渲染在页面上即可。
                // 计算属性 有缓存
                // 缓存机制：当依赖的数据没有发生变化时，就会缓存下来，不会重新计算，只有依赖的数据变化以后才会重新计算
                // 优点：提高性能
                // 计算属性直接写属性名字即可
                // 如果是methods的话，就会每一次都重新计算
                fullName : function(){
                    console.log("计算了一次");
                    return this.lastName + " " + this.firstName
                }
            }
            
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                firstName : 'jingwen',
                lastName : "fu"            },
            computed : {
                fullName : {
                    // 获取值
                    get : function(){
                        return this.firstName + ' ' + this.lastName
                    },
                    // 当数据变化时，value是你自己改变的那个值
                    set : function(value){
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
            
        })
    </script>
</body>
</html>

image.png