计算属性
程序员文章站
2022-06-01 08:50:35
计算属性 1.1 什么是计算属性: 插值表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,这时应该使用计算属性。 插值表达式里的值是JS表达式 所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算后的结果。 1.2 计算属性的用法 在一个计算属性里可以完成各种复 ......
计算属性
1.1 什么是计算属性:
插值表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,这时应该使用计算属性。
插值表达式里的值是js表达式
所有的计算属性都以函数的形式写在vue实例内的computed选项内,最终返回计算后的结果。
<!-- 将123,456 值反转 456,123 --> <div id="app"> <!-- 插值表达式用法 --> {{ text.split(',').reverse().join(',') }} <!-- 插值表达式用法 --> <!-- 计算属性用法 --> {{ reversedtext }} <!-- 计算属性用法 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new vue({ el:'#app', data:{ text:'123,456' }, computed: { reversedtext:function(){ return this.text.split(',').reverse().join(','); } }, }); </script>
1.2 计算属性的用法
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数等,只要最终返回一个结果就可以。
计算属性可以以来多个vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
<div id="app"> 总价:{{ prices }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new vue({ el:'#app', data:{ package1:[ { name:'iphone 7', price:7199, count:2 }, { name:'ipad', price:2888, count:1 }, { name:'iphone 7 plus', price:8239, count:5 } ], package2:[ { name:'apple', price:3, count:5 }, { name:'banana', price:2, count:10 } ] }, computed: { prices:function(){ let prices = 0; for(let i = 0;i<this.package1.length;i++){ prices += this.package1[i].price * this.package1[i].count; } for(let i = 0;i<this.package2.length;i++){ prices += this.package2[i].price * this.package2[i].count; } return prices; } }, }); </script>
我们在控制台 vm.package1[0].count = 3; 总价的值就会相应的改变
每一个计算属性都包含一个getter和一个setter,上面都是计算属性的默认用法,只是利用了getter来读取。
<div id="app"> 姓名:{{ fullname }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new vue({ el:'#app', data:{ firstname:'jack', lastname:'green' }, computed: { fullname:{ get:function(){ return this.firstname+' '+this.lastname; }, set:function(newvalue){ let names = newvalue.split(' '); this.firstname = names[0]; this.lastname =names[names.length - 1]; } } }, }); </script>
在你需要时,也可以提供一个setter函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter函数,执行一些自定义的操作。
app.fullname = 'ross joe';
<div id="app"> 姓名:{{ fullname }} 复姓:{{ fxname }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new vue({ el:'#app', data:{ firstname:'jack', lastname:'green' }, computed: { fullname:{ get:function(){ return this.firstname+' '+this.lastname; }, set:function(newvalue){ let names = newvalue.split(' '); this.firstname = names[0]; this.lastname =names[names.length - 1]; } }, fxname:function(){ return 'zhuge '+this.fullname; } }, }); </script>
计算属性可以依赖其他计算属性
<div id="app1"> </div> <div id="app2"> {{ reversedtext }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app1 =new vue({ el:'#app1', data:{ text:'123,456' } }); var app2 =new vue({ el:'#app2', computed: { reversedtext:function(){ return app1.text.split(',').reverse().join(','); } }, }); </script>
计算属性可以依赖当前vue实例的数据,还可以依赖其他实例的数据
这样的用法在组件和组件话里会用到
1.3 计算属性缓存
<div id="app"> <!-- 插值表达式用法 --> {{ text.split(',').reverse().join(',') }} <!-- 插值表达式用法 --> <!-- 计算属性用法 --> {{ reversedtext }} <!-- 计算属性用法 --> <!-- 方法用法 --> {{ reversedmtext() }} <!-- 方法用法 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new vue({ el:'#app', data:{ text:'123,456' }, methods:{ reversedmtext(){ return this.text.split(',').reverse().join(','); } }, computed: { reversedtext:function(){ return this.text.split(',').reverse().join(','); } } }); </script>
methods里的方法与计算属性起到同样的作用,但是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。methods则不同,只要重新渲染,它就会被调用,因此函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存
参考:vue.js实战
上一篇: MySQL的外键约束