Vue计算属性

在Vue中，计算属性（Computed Properties）是一种方便的属性类型，用于根据其他变量或属性计算出一个新值。计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生改变时才会重新计算。

计算属性在Vue实例中定义，使用computed选项来声明。下面是一个简单的示例：

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'John',  
    lastName: 'Doe'  
  },  
  computed: {  
    fullName: function() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
});

 

在这个示例中，我们定义了一个名为fullName的计算属性。它依赖于firstName和lastName两个数据属性。当这两个属性发生改变时，fullName将重新计算并返回新的值。

你可以像访问普通属性一样使用计算属性，而不需要担心何时以及如何重新计算它们。Vue会自动处理这些事情。例如，在模板中使用计算属性：

<div id="app">  
  <p>Full Name: {{ fullName }}</p>  
</div>

 计算属性也支持设置器（setter），允许你在属性被修改时执行特定的操作。例如：

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'John',  
    lastName: 'Doe'  
  },  
  computed: {  
    fullName: {  
      get: function() {  
        return this.firstName + ' ' + this.lastName;  
      },  
      set: function(value) {  
        var names = value.split(' ');  
        this.firstName = names[0];  
        this.lastName = names[1];  
      }  
    }  
  }  
});

 在这个示例中，我们定义了一个fullName计算属性，它有一个getter函数来返回属性的值，以及一个setter函数来更新firstName和lastName的值。现在，如果你修改fullName，它将自动更新firstName和lastName的值。

计算属性vsmethods方法区别？

  1.计算属性具有缓存性，data数据不发生改变多次调用会返回第一次缓存得结果
  2.methods方法没有缓存性，调用一次方法执行一次
  3.计算属性一般不用于异步操作，methods可以处理异步操作

 计算属性和watch区别？

 1.计算属性具有缓存性，响应式依赖不发生改变计算属性不会重新计算，会返回之前得计算结果
  2.watch不具有缓存性，只要数据发生改变watch就会立即执行
  3.watch一般用于异步操作(监听分页)或者开销较大操作
  4.计算属性一般不用于异步操作，只提供getter需要修改需要设置setter函数