vue.js的computed,filter,get,set的用法及区别详解

下面我将为您详细讲解“vue.js的computed,filter,get,set的用法及区别详解”的完整攻略。

一、computed

computed是Vue.js中的一个关键字，用于定义属性计算。computed属性主要用于处理一些复杂的计算，当计算属性发生变化时，Vue.js会自动监听该属性及其依赖的属性的变化，并重新计算最终的计算属性的值，从而保证计算属性的值是最新的。使用computed的方式可以有效避免一些计算属性的重复计算。

1.1 定义方式

在Vue.js中，可以使用computed属性来定义计算属性。computed属性是一个对象，对象的属性名即为计算属性的名称，属性值为一个函数，返回值即为计算属性的值。下面是一个示例：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

上述代码定义了一个计算属性fullName，它计算了firstName和lastName两个属性的值，并将它们连接起来返回最终的fullName。

1.2 示例说明

下面是一个具体的示例，通过computed属性计算商品的总价。假设我们有如下的商品列表：

data: {
  products: [
    {name: '商品1', price: 10, count: 2},
    {name: '商品2', price: 20, count: 3},
    {name: '商品3', price: 30, count: 4}
  ]
}

我们可以定义一个计算属性，计算商品的总价：

computed: {
  totalPrice: function() {
    var total = 0;
    for (var i = 0; i < this.products.length; i++) {
      total += this.products[i].price * this.products[i].count;
    }
    return total;
  }
}

上述代码定义了一个计算属性totalPrice，它计算了所有商品的总价，并返回最终的总价。

二、filter

filter是Vue.js中的一个过滤器，用于过滤数据，并可以对数据进行格式化。使用filter可以将复杂的数据格式转换为简单易读的格式，便于展示和使用。

2.1 定义方式

在Vue.js中，可以使用filter来定义一个过滤器。filter的定义方式如下：

Vue.filter('filterName', function(value) {
  //TODO: filter logic
  return filteredValue
})

其中filterName是过滤器的名称，value是需要过滤的数据，filteredValue是过滤后的数据。

2.2 示例说明

下面是一个示例，使用filter将秒数转换为分秒格式。假设我们有一个计时器，其计时单位为秒。我们希望将计时器的值显示为分秒格式。

data: {
  timer: 122
}

我们可以定义一个过滤器，将秒数转换为分秒格式：

Vue.filter('formatTime', function(value) {
  var minutes = parseInt(value / 60);
  var seconds = value % 60;
  seconds = seconds < 10 ? ('0' + seconds) : seconds;
  return minutes + ':' + seconds;
})

上述代码定义了一个过滤器formatTime，将秒数转换为分秒格式。

在模板中使用过滤器格式化数据：

{{ timer | formatTime }}

三、get

get是Vue.js中的一个属性拦截器，用于拦截属性的读取操作，可以对读取操作进行一些处理和计算。使用get可以做一些对用户友好的数据处理和计算。

3.1 定义方式

在Vue.js中，可以使用get来定义属性的getter方法。属性的getter方法可以在属性被读取时自动调用，在getter方法中可以进行属性的处理和计算。getter方法的定义方式如下：

var vm = new Vue({
  data: {
    name: 'Tom'
  },
  computed: {
    fullName: function() {
      return this.name + ' Lee';
    }
  },
  get: {
    fullName: function() {
      console.log('getting fullName...');
      return this.fullName;
    }
  }
})

上述代码定义了一个属性fullName，它的值是通过计算得到的。在该属性的getter方法中，增加了一个日志打印的操作，输出fullName被读取的日志信息。

3.2 示例说明

下面是一个示例，使用get拦截数据读取并进行一些额外的处理。假设我们有一个数据，需要根据用户的地理位置信息来进行一些定位和计算。

var vm = new Vue({
  data: {
    location: {
      latitude: 23.122,
      longitude: 113.334
    },
    nearbyStores: []
  },
  get: {
    nearbyStores: function() {
      //TODO: locate nearby stores
      return nearbyStores;
    }
  }
})

上述代码定义了一个属性nearbyStores，它的值需要通过用户位置的定位来计算得到。在该属性的getter方法中，使用用户的地理位置信息来定位附件的商店，并返回最终的数据。

四、set

set是Vue.js中的一个属性拦截器，用于拦截属性的赋值操作，可以对赋值操作进行一些处理和校验。使用set可以做一些对用户友好的数据校验和处理。

4.1 定义方式

在Vue.js中，可以使用set来定义属性的setter方法。属性的setter方法可以在属性被赋值时自动调用，在setter方法中可以进行属性的处理和校验。setter方法的定义方式如下：

var vm = new Vue({
  data: {
    name: 'Tom'
  },
  computed: {
    fullName: {
      get: function() {
        return this.name + ' Lee';
      },
      set: function(value) {
        console.log('setting fullName...');
        this.name = value;
      }
    }
  }
})

上述代码定义了一个属性fullName，它的值通过计算得到。在该属性的setter方法中，增加了一个日志打印的操作，输出fullName被赋值的日志信息。

4.2 示例说明

下面是一个示例，使用set拦截数据赋值并进行一些额外的处理。假设我们有一个数据，需要进行一些校验和格式化处理。

var vm = new Vue({
  data: {
    phone: ''
  },
  computed: {
    formattedPhone: {
      get: function() {
        //TODO: format phone number
        return formattedPhone;
      },
      set: function(value) {
        if (!/^1\d{10}$/.test(value)) {
          console.log('wrong phone number');
          return;
        }
        console.log('setting formattedPhone...');
        this.phone = value;
      }
    }
  }
})

上述代码定义了一个属性formattedPhone，它的值用于显示一个格式化的电话号码，并对用户输入的电话号码进行校验和格式化。在该属性的setter方法中，增加了一个校验逻辑，对用户输入的电话号码进行格式校验。当用户输入的电话号码非法时，会输出错误信息。当用户输入的电话号码合法时，会输出设置formattedPhone的日志信息，并更新phone的值。