4Vue计算属性

Computed

1. 我们可用使用计算属性去处理模板内的复杂逻辑。如下代码：使{{fullName}}代替{{fristName+" "+lastName}}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{fullName}}
        {{age}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            fristName:"miao",
            lastName:"xiao",
            age:28
        },
        //计算属性,减少冗余，不用重新定义fullName 
        computed:{
            fullName:function(){
                //缓存机制，依赖的变量没有发生改变，fullName就不会重新计算。
                console.log("计算了一次")
                return this.fristName+" "+this.lastName;
            }
        }
    })
</script>
</html>

并且computed具有缓存机制，就是fullName的函数依赖于fristName和lastName，其中只要有一个变量发生变化，fullName就会重新计算，如果没有变化，就会使用缓存。

 

 2. 当然，使{{fullName}}代替{{fristName+" "+lastName}}也可以使用方法的形式来实现，如下

<div id="app">
        {{fullName()}}
        {{age}}
    </div>


  var vm=new Vue({
        el:"#app",
        data:{
            fristName:"miao",
            lastName:"xiao",
            age:28
        },
        methods:{
            fullName:function(){
                console.log("计算了一次")
                return this.fristName+" "+this.lastName
            }
        }
    })

但是这种方式是没有缓存机制的，页面每次渲染都会执行一次fullName方法，开销会变大

 

我们也可以使用watch实现缓存机制，但是需要初始化fullName，就造成了变量的冗余了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{fullName}}
        {{age}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            fristName:"miao",
            lastName:"xiao",
            fullName:"miao xiao",
            age:28
        },
        watch:{
            //监听fristName，lastName的改变
            fristName:function(){
                console.log("计算了一次");
                this.fullName=this.fristName+" "+this.lastName;
            },
            lastName:function(){
                console.log("计算了一次");
                this.fullName=this.fristName+" "+this.lastName;
            },
        }
    })
</script>
</html>

 

 

watch和computed都具备缓存的机制，但是watch要复杂些。

 

 

 

总结：在computed、methods和watch都能实现同一种结果的时候，computed效果更好。

 get和set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{fullName}}
        {{age}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            fristName:"miao",
            lastName:"xiao",
            age:28
        },
        computed:{
            fullName:{
                //获取fullName的时候使用get
                get:function(){
                return this.fristName+" "+this.lastName;
                },
                //设置fullName的时候，可以传参，还可以修改依赖的值，使fullName重新计算
                set:function(value){
                    var arr=value.split(" ");
                    this.fristName=arr[0];//改变依赖的相关的值
                    this.lastName=arr[1];
                }
            }
        }
        
    })
</script>
</html>

 

 

posted @ 2020-11-29 11:03  ellenxx  阅读(94)  评论(0)  编辑  收藏  举报