计算属性
1.介绍
计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点：
数据可以进行逻辑处理，减少模板中计算逻辑。
对计算属性中的数据进行监视
依赖固定的数据类型（响应式数据）
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。
computed: { fullName: { // getter get:function() {returnthis.firstName +' '+ this.lastName }, // setterset:function(newValue) { //this.fullName = newValue 这种写法会报错 var names = newValue.split(' ') this.firstName = names[0]//对它的依赖进行赋值 this.lastName = names[names.length - 1] } }}复制代码
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
2.计算属性 vs 普通属性
可以像绑定普通属性一样在模板中绑定计算属性，在定义上有区别：计算属性的属性值必须是一个函数。
data:{ //普通属性 msg:'浪里行舟',},computed:{ //计算属性 msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数return'浪里行舟'; }, reverseMsg:function(){ //可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化returnthis.msg.split(' ').reverse().join(' '); }}复制代码
3.计算属性 vs 方法
两者最主要的区别：computed 是可以缓存的，methods 不能缓存；**只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。**网上有种说法就是方法可以传参，而计算属性不能，其实并不准确，计算属性可以通过闭包来实现传参：
:data="closure(item, itemName, blablaParams)"computed: {closure() {returnfunction(a, b, c) { /**dosomething */returndata } }}
作者：浪里行舟
链接：https://juejin.im/post/5d01a81d51882559ef78e498
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
