Vue计算属性详解

Vue计算属性详解

1. 计算属性是用来存储数据的，但具有以下几个特点：

• 数据可以进行逻辑处理操作
• 对计算属性中的数据进行监视

2. 计算属性和普通属性的区别：

• 计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
• 计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的结果，不会每次获取数据都执行

<h2>{{message}}</h2>
	<!--这里可以把两个变量写在同一个Mustache语法中-->
	<h2>{{firstName +' '+lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<h2>{{getFullName()}}</h2> //methods展示复杂数据
	<h2>{{fullName}}</h2>  //计算属性展示复杂数据
      computed: {
        fullName: function () {
          return this.firstName + " " + this.lastName
        }
      },
      methods: {
        getFullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
      注释:message firstName lastName均为Vue实例中data里的数据 均为字符串

这里我们要展示多个数据并且进行一些简单操作时，我们如果使用Mustache语法时，会显得非常臃肿，所以遇到复杂逻辑的时候可以使用Vue中自带的computed或者通过一个method来实现。

3. get和set

• 计算属性由两部分组成，get和set，分别用来获取计算属性和设置计算属性.

默认计算属性只有get，如果需要set，要自己手动添加.。

<div id="app">{{fullName}}</div>
data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed: {
        fullName: {
          //默认是不写setter的,在控制台端修改计算属性的值会调用set方法
          set (newValue) {//参数newValue为你在控制台端修改后的值 会渲染到dom中
            console.log("-------" + newValue);
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get () {  //get必须有返回值
            return this.firstName + " " + this.lastName
          }
        }

4. 计算属性和methods的区别

这里就是如上面所说，计算属性是有缓存的，在数据不发生变化的情况下，会自动从缓存中取出数据，而methods每一次都会进行重新计算执行。

<div id="app">
    <!--methods展示-->
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    
    <!--计算属性展示-->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
  </div>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed:{
        fullName:function () {
          console.log("fullName");
          return this.firstName+ ' ' +this.lastName
        }
      },
      methods:{
        getFullName:function () {
          console.log("getFullName");
          return this.firstName+" "+this.lastName
        }
      }
    })

最后在控制端可以很清楚的看到，getFullName输出了三次，也就是执行了三次，而fullName只输出了一次，由此可以看出计算属性的缓存机制。