Vue-学习笔记-04 计算属性详解

文章目录一、什么是计算属性(computed)？用来干什么?二、实例计算属性2.1 拼接姓名2.2 计算属性的复杂操作求和三、计算属性的setter和getter四、计算属性的缓存机制一、什么是计算属性(computed)？用来干什么?当我们需要对我们的数据进行某种变化之后再来显示的话，可以在计算属性里边重新定义一个属性，再来返回定义之后的属性。我们知道，在模板中可以直接通过插值语法显示一些da

优雅哥cc

8361人浏览 · 2020-07-24 21:21:21

优雅哥cc · 2020-07-24 21:21:21 发布

文章目录

一、什么是计算属性(computed)？用来干什么?
二、实例计算属性
- 2.1 拼接姓名
- 2.2 计算属性的复杂操作求和
三、计算属性的setter和getter
四、计算属性的缓存机制

一、什么是计算属性(computed)？用来干什么?

当我们需要对我们的数据进行某种变化之后再来显示的话，可以在计算属性里边重新定义一个属性，再来返回定义之后的属性。

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
那么，我们可以将上面的代码换成计算属性：

原始写法：
在这里插入图片描述
将上述方法改写成计算属性的形式：
注意：计算属性不需要加小括号，函数才加

OK，效果完全一样。
提示：计算属性是写在实例的computed选项中的

二、实例计算属性

2.1 拼接姓名

<body>
    <div id='app'>
        <h2>{{FirstName}} {{LastName}}</h2>
        <h2>{{FirstName+" "+LastName}}</h2>

        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                FirstName:'Lebron',
                LastName:'James'
            },
            methods: {
                getFullName:function(){
                    return this.FirstName+' '+this.LastName
                }
            },
            // 计算属性
            computed: {
                fullName:function(){
                    return this.FirstName+' '+this.LastName
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

2.2 计算属性的复杂操作求和

<body>
    <div id='app'>
        <h2>总价格:{{books[0].price + books[1].price + books[2].price + books[3].price}}</h2>
        <h2>总价格:{{totalPrice}}</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                books:[
                    {id:110,name:"Vue进阶教程",price:95},
                    {id:111,name:"JS从入门到放弃",price:35},
                    {id:112,name:"JS什么操作",price:65},
                    {id:113,name:"深入理解计算机原理",price:125}
                ]
            },
            computed: {
                totalPrice:function(){
                    // 题外话 ES6知识点
                    // 不用判断length
                    for(let i in this.books){
                        console.log("in:"+this.books[i].price);
                    }
                    // 不用i,直接拿到book
                    for(let book of this.books){
                        console.log("of:"+book.price);
                    }

                    let result = 0
                    for(let i=0;i<this.books.length;i++){
                        result += this.books[i].price
                    }
                    return result


                }
            },
        })
    </script>
</body>

效果:
在这里插入图片描述

三、计算属性的setter和getter

每个计算属性都包含一个get和一个set
在上面的例子中，我们只是使用get来读取。
在某些情况下，你也可以提供一个set方法（不常用）。
在需要写set的时候，代码如下：

<body>
    <div id='app'>
        <h2>{{fullName}}</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                firstName:'peng',
                LastName:'sir'
            },
            computed: {
                // fullName:function(){
                //     return this.firstName+this.LastName
                // },

                // 我们常用的计算属性不写set方法,只读属性
                fullName:{
                    set:function(newValue){
                        console.log("旧的名字："+this.firstName+this.LastName,"新的值:"+newValue);
                        let names = newValue.split(" ")
                        this.firstName = names[0]
                        this.LastName = names[1]
                    },
                    get:function(){
                        return this.firstName+this.LastName
                    }
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述
接下来我们直接改变fullname的值：

四、计算属性的缓存机制

我们先来看一个例子：
同时打印一条数据方法和计算属性的差别

<body>
    <div id='app'>
        <!-- 方法一：直接拼接 -->
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 方法二：调用方法 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!-- 方法三：计算属性 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                firstName:'peng',
                lastName:'sir'
            },
            methods: {
                getFullName:function(){
                    console.log("getFullName");
                    return this.firstName+this.lastName
                }
            },
            computed: {
                fullName:function(){
                    console.log("fullName");
                    return this.firstName+this.lastName
                }
            },

        })
    </script>
</body>

效果：
在这里插入图片描述
我们可以发现方法打印了四次，而计算属性只打印了一次。
这说明计算属性它只执行了一次，所以它的效率更高！

这是因为Vue的内部对计算属性做了一层缓存，它会观察你的这些东西有没有发生变化，如果发现每次调用都和以前一样没有发生变化，那么它会直接返回原来的结果，否则会重新计算。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^