Vue计算属性

---

前言

Vue实战.js笔记

一、计算属性简介与用法

1.什么是计算属性

解释：当{{}}中的表达式过长时，会导致代码臃肿难以维护。此时可以用计算属性。即所有的计算属性都以函数的形式写在vue的computed选项内，最终返回计算后的结果，通俗的将就是用来插值的正规方法。

<div id="app">
	{{reversedText}}
</div>
------------------------------------
el:'#app',
data:{
	text:'123,456'
},
computed:{
	reversedText:function(){
		return this.text.split(',').reverse().join(',')
	}
}

2.计算属性的默认用法

<div id="app">总价：{{prices}}</div>
---------------------------------------
data: {
      package1: [{ name: 'iPhone', price: 100, count: 2 }, { name: 'iPad', price: 50, count: 2 }],
      package2: [{ name: 'apple', price: 10, count: 2 }, { name: 'banana', price: 5, count: 2 }]
    },
    computed: {
      prices: function () {
        let prices = 0;
        for (let goods of this.package1) {
          prices += goods.price * goods.count;
        }
        for (let goods of this.package2) {
          prices += goods.price * goods.count;
        }
        return prices;
      }

3.计算属性的getter和setter用法

<div id="app">{{fullName}}</div>
-----------------------------------------
  let app = new Vue({
    el: '#app',
    data: {
      firstName: 'Jack',
      lastName: 'Green',
    },
    computed: {
      fullName: {
        get: function () {
          return this.firstName + ' ' + this.lastName;
        },
        set: function (newValue) {
          let name = newValue.split('-');
          this.firstName = name[0];
          this.lastName = name[1];
        }
      }
    }
  });

基于以上代码进行解释

1. 每当funllName改变时，即设置app.fullName=name时，set方法会自动调用，get方法默认调用
2. 尴尬的是大多数情况下用不着set，而get又是默认调用的。所以一般都是使用标题2里的计算属性默认用法

4.小结

1. 最最最要注意的是计算属性默认用法与计算属性的getter和setter用法的区别，容易混淆。
2. 与过滤器一样，计算属性的函数返回值同样也会作用到与之绑定的数据上

5.计算属性的特点

1. 计算属性可以依赖其他的计算属性。

 <div id="app1">{{m}} </div>//Chain
 -----------------------------
 computed: {
      m1: function () {
        return 'Chain'
      },
      m: function () {
        return this.m1;
        //这里有个问题，函数的调用执行不是应该加()吗？为什么不加括号能得到返回值，加了括号反而报错。
        //根据Js的语法，加了括号才是执行函数，不加括号代表的是函数本身，也就是函数的代码，为什么？？？
		/*
		解答：这段代码的computed写法是简化写法，m1和m的函数对应的都是计算属性的get方法，而get方
		是默认调用的，意思就是说调用了m或者m1就自动调用它的函数（也即就是是get方法）
		*/
		
      }
    }

2. 计算属性不仅可以依赖当前Vue实例，也可以依赖其他Vue实例的数据

假设：app1依赖app2的数据，当app2的数据改变时app1的数据也会改变

二、计算属性缓存

1. 用计算属性computed和用methods都能实现上面的效果
2. 计算属性依赖的数据发生变化时，才会重新取值，函数才重新调用
3. methods只要页面重新渲染就调用
4. methods绑定的数据不会有缓存，只要使用一次，对应的函数就会执行一次。
5. 而computed绑定的数据有缓存，只会执行一次然后缓存起来，不会每使用一次就执行一次，只有当它依赖的数据发生改变时才会重新执行，并且重新缓存

<div id="app">{{fullName}}</div>
<div id="app">{{fullName}}</div>
data:{
	firstName:'marry'
}
computed: {
     fullName: function () {
       console.log('test');
       return this.firstName
     }
   }
//当firstName不改变时，不论这个方法使用多少次，fullName只会执行一次。效果是'test'输出一次
//当firstName改变时，才会重新执行并缓存
--------------------------------------------------
<div id="app">{{fullName()}}</div>
<div id="app">{{fullName()}}</div>
 methods: {
      fullName: function () {
        console.log('test');
        return this.firstName 
      }
    }
//而这里的'test'会输出两次，因为没有缓存，使用多少次就执行多少次