Vue基础语法之计算属性

语法之计算属性"/>

Vue基础语法之计算属性

计算属性

设计的初衷在千减轻模板上的业务负担， 当数据链上出现复杂衍生数据时，我们更期望以一种易维护的方式去使用它。

• 基本使用

<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 app = new Vue({el: '#app',data: {firstName: '夏吕',lastName: '千千',},/*   computed:计算属性*/computed: {fullName: function () {return this.firstName + this.lastName}},methods: {getFullName() {return this.firstName + this.lastName}}})
</script>

• 复杂操作

<div id="app"><h2>总价格：{{totalPrice}}</h2></div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {/*数组里的 是对象*/book: [{id: 101, name: '代码大全', price: 102},{id: 102, name: '编程艺术', price: 89},{id: 103, name: '深入理解计算机原理', price: 82},{id: 104, name: '现代操作系统', price: 88},]},computed: {totalPrice: function () {let result = 0for(leti = 0;i < this.book.length;i++){result += this.book[i].price}return result}}})
</script>

• 计算属性setter和getter(计算属性的本质)

<div id="app">{{fullName}}
</div>
<script src="../Js/vue.js"></script>
<script>var  app=new Vue({el:'#app',data:{firstName:'任',lastName:'阳峰'},computed: {fullName:{set:function(newValue){const names=newValue.split(' ');this.firstName=names[0];this.lastName=name[1];},get:function () {return this.firstName+' '+this.lastName}}}})
</script>

• 计算属性性能比methods高

计算属性会进行缓存，如果多次使用时，只会调用一次。

<div id="app"><!--函数调用四次--><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><!--只调用一次--><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {firstName: '任',lastName: '阳峰'},computed: {fullName: function () {console.log("hahahaha");return this.firstName + this.lastName}},methods:{getFullName:function () {console.log("hahahaha");return this.firstName+this.lastName;}}})
</script>