Vue2基础 05：计算属性

Fxcrisp

已于 2024-07-22 11:41:20 修改

阅读量2.3k

点赞数 44

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2024-05-20 23:22:02 首次发布

本文链接：https://blog.csdn.net/fxcrisp/article/details/139077318

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

计算属性

1 总体介绍
2 插值语法、methods、计算属性横向对比
3 计算属性的简写

前面学了插值语法，模板中的表达式虽然方便，但也只能用来做简单的操作。
如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。
因此Vue推荐使用 计算属性 来描述复杂逻辑。

1 总体介绍

Vue认为 data 配置项内的就是属性，格式为属性名：属性值。

定义：对已经写好的data属性，经过加工计算，生成一个新的属性
原理：底层借助了Object.defineproperty方法提供的getter和setter
优势：与methods相比，被调用后会在网页上缓存，相同的计算属性只调用一次get ( )，效率更高，调试方便
get( ){ }被调用的条件：
（1）初次读取会执行一次
（2）当依赖的数据发生改变时会再次被调用
备注：
（1）计算属性最终会出现在Vue实例上，直接读取即可
（2）get( ){ }里的this默认指向该vue实例
（3）如果计算属性要被修改，必须写set函数去相应修改，且set{}中要写对应的改变计算依赖的数据的语句

2 插值语法、methods、计算属性横向对比

下面通过拼姓和名成全名的案例，来横向对比一下三种实现方法的差异。

2.1 插值语法实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname" > <br/><br/>
        名：<input type="text" v-model="lastname" ><br/><br/>
        全名：<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
        //或者{{firstname + '-' + lastname}}
        //slice(a,b)表示截取从a开始的长度为b的字符串
    </div>
</body>

<script type="text/javascript" src="../vue.js">
    new Vue({
        el:'#root',  
        data:{ 
            firstname:'张',
            lastname:'三'
        }
    })
</script>

模板要尽可能简单，所以{{ }}里的不能太长，这种情况也就不推荐这种方法。

2.2 methods实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname" > <br/><br/>
        名：<input type="text" v-model="lastname" ><br/><br/>
        全名：<span>{{fulName()}}</span>
        //此处不是事件绑定，所以需要加括号
    </div>
</body>

<script type="text/javascript" src="../vue.js">
    new Vue({
        el:'#root',  
        data:{ 
            firstname:'张',
            lastname:'三'
        },
        methods:{
            fulName(){
                return this.firstname + '-' + this.lastname
            }
        }
    })
</script>

此时的联动效果：

2.3 计算属性实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname" > <br/><br/>
        名：<input type="text" v-model="lastname" ><br/><br/>
        全名：<span>{{fulName}}</span>
        //计算属性fulname同样属于vue的属性，可以写成插值语法
    </div>
</body>

<script type="text/javascript" src="../vue.js">
    new Vue({
        el:'#root',  
        data:{ 
            firstname:'张',
            lastname:'三'
        },
        computed:{
            fulname:{
                get(){
                    return this.firstname + '-' + this.lasname
                },
                set(){
                    const arr = value.split('-')
                    //按照'-'切分字符串为数组
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }//专门放计算属性，属性写成对象的格式
    })
</script>

3 计算属性的简写

前提：只读取，不修改（只用get( )，不用get( ) ）
用法：函数直接当getter()用

fulname(){
	//return ...
	//逻辑代码
}

对上面的案例进行改写：

computed:{
   //精简的
   fulname(){
        return this.firstname + '-' + this.lasname
   }//函数直接当getter()用
            
   //原来的
   fulname:{
        get(){
              return this.firstname + '-' + this.lasname
        }
   }