vue中computed

 

computed是Vue.js中一个非常重要的属性，它用来定义一些与数据有关的计算属性。下面为你详细讲解computed在Vue.js中的使用。

 

一、computed的基本使用：

在Vue.js中，我们经常需要处理一些对数据进行过滤、排序、计算等操作，如果每次在模板中都直接对数据进行处理，会非常繁琐。而通过computed，我们可以在Vue实例中定义一些计算属性，然后通过在模板中使用这些计算属性，来展示数据的计算结果。

 

在Vue.js中，我们可以通过在Vue实例中使用computed属性来定义计算属性，computed属性是一个对象，通过其中的键值对来定义计算属性。例如：

 

```javascript

computed: {

fullName: function() {

return this.firstName + ' ' + this.lastName;

}

}

```

 

在上述代码中，我们定义了一个计算属性fullName，它返回firstName和lastName拼接起来的结果。

 

在模板中，我们可以通过使用{{}}语法来使用计算属性，例如：

 

```html

```

 

这样，在模板中，就会直接展示计算属性fullName的结果。

 

二、computed属性的特点：

1. computed属性会自动缓存计算结果。当依赖的数据没有发生变化时，computed属性会直接返回之前的结果，而不会重新计算。这样可以提高性能。

2. computed属性的值是一个函数，这个函数会在每次访问计算属性时执行。在该函数中，我们可以通过this来获取Vue实例中的数据。这样，我们就可以根据数据的变化来动态计算属性的值。

3. computed属性默认是只读的，不可更改。也就是说，我们不能直接修改计算属性的值。如果需要修改计算属性的值，我们需要通过设置setter函数来实现。

 

三、computed属性的getter和setter：

computed属性默认情况下只有getter函数，它负责计算属性的值。如果我们还需要修改计算属性的值，我们可以通过设置setter函数来实现。

 

例如：

 

```javascript

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函数。getter函数负责计算属性的值，setter函数负责修改计算属性的值。在setter函数中，我们可以通过参数value来接收新的值，然后根据需要进行处理。

 

四、computed属性的依赖：

computed属性的值可以依赖于其他数据，也就是说，当依赖的数据发生变化时，computed属性的值也会重新计算。

 

在computed属性中，我们可以通过Vue实例中的data属性来定义依赖的数据。例如：

 

```javascript

data: {

firstName: ''

 

lastName: ''

}

 

computed: {

fullName: function() {

return this.firstName + ' ' + this.lastName;

}

}

```

 

在上述代码中，我们定义了两个数据属性firstName和lastName。在计算属性fullName中，我们依赖了这两个数据属性。当firstName或lastName发生变化时，计算属性fullName的值也会重新计算。

 

五、computed属性的缓存：

computed属性会自动对计算结果进行缓存，当依赖的数据没有发生变化时，computed属性会直接返回之前的结果，而不会重新计算。这样可以提高性能。

 

例如：

 

```javascript

computed: {

fullName: {

get: function() {

console.log('计算属性fullName被调用');

return this.firstName + ' ' + this.lastName;

}

}

}

```

 

在上述代码中，当我们访问计算属性fullName时，会打印出"计算属性fullName被调用"。但是，当我们多次访问计算属性fullName时，只有*次会打印这个信息。因为后续的访问会直接返回之前的计算结果，而不会重新计算。

 

六、computed属性的使用场景：

computed属性在Vue.js中有着广泛的应用场景，以下是一些常见的使用场景：

 

1. 数据过滤：通过computed属性，我们可以根据一些条件对数据进行过滤，然后在模板中展示过滤后的数据。

 

2. 数据排序：通过computed属性，我们可以根据一些条件对数据进行排序，然后在模板中展示排序后的数据。

 

3. 数据计算：通过computed属性，我们可以对数据进行一些计算操作，例如求和、求平均值、求*值、求最小值等。

 

4. 数据格式化：通过computed属性，我们可以格式化数据的展示方式，例如对日期进行格式化、对数字进行千分位分隔等。

 

5. 数据监听：通过computed属性，我们可以监听一些数据的变化，然后根据需要执行一些逻辑。

 

总结：在Vue.js中，computed属性是非常实用的一个功能，它可以帮助我们对数据进行过滤、排序、计算等操作，提高开发效率。通过对computed属性的了解和应用，我们可以更好地利用Vue.js的功能，构建出更加灵活、高效的应用程序。