计算属性和监听器-Toy模板网

这篇具有很好参考价值的文章主要介绍了计算属性和监听器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 计算属性的定义

计算属性是Vue中非常常用的一个概念，它能够根据现有的数据直接生成一个新的数据进行展示和操作。在Vue的实例中，可以使用computed来定义计算属性。

例如，我们有一个Vue实例vm，其中有一个数据message，我们可以通过计算属性reversedMessage来生成消息的反转字符串：

var vm = new Vue({
  data: {
    message: 'Hello Vue.js'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});

在上述代码中，我们定义了一个计算属性reversedMessage，它会根据message数据进行计算生成新的数据。在模板中，我们可以通过使用reversedMessage来展示反转后的消息：

<div>{{ reversedMessage }}</div>

2. 计算属性的缓存

我们在定义计算属性时，可以通过设置computed的cached属性来开启计算属性的缓存机制。默认情况下，计算属性的缓存是开启的，这意味着无论调用多少次计算属性，只要依赖的数据没有发生变化，计算属性的值就会被缓存起来，不会重复计算。

例如，我们有一个Vue实例vm，其中有一个数据firstName和lastName，我们可以通过计算属性fullName来生成完整的名字：

var vm = new Vue({
  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[names.length - 1];
      }
    }
  }
});

在上述代码中，我们定义了一个计算属性fullName，它会根据firstName和lastName数据进行计算生成新的完整名字。在模板中，我们可以通过使用fullName来展示完整的名字：

<div>{{ fullName }}</div>

如果我们在模板中修改了fullName的值，Vue会自动调用计算属性的set方法来更新firstName和lastName的值。

3. v-for和v-if一起使用的替代方案

在Vue中，当需要在模板中使用v-for和v-if一起时，官方并不推荐这样的写法。因为这样会导致每次渲染都会重新计算v-if的结果，影响性能。

替代的方案是使用计算属性来生成一个过滤后的数组，然后再使用v-for来进行循环渲染。

例如，我们有一个Vue实例vm，其中有一个数据items和isShow，我们希望只在isShow为true的情况下进行v-for的循环渲染：

var vm = new Vue({
  data: {
    items: [1, 2, 3, 4, 5],
    isShow: true
  },
  computed: {
    filteredItems: function () {
      if (this.isShow) {
        return this.items;
      } else {
        return [];
      }
    }
  }
});

在上述代码中，我们定义了一个计算属性filteredItems，它会根据isShow的值来过滤items数组。然后在模板中，我们可以通过循环渲染filteredItems来展示过滤后的数组：

<ul>
  <li v-for="item in filteredItems">{{ item }}</li>
</ul>

4. 实例:购物车的实现

在Vue中，我们可以使用计算属性来实现购物车的功能。

例如，我们有一个Vue实例vm，其中有一个数据cart，它是一个数组，存储商品的信息。每个商品包括name、price和quantity：

var vm = new Vue({
  data: {
    cart: [
      { name: 'Item 1', price: 10, quantity: 1 },
      { name: 'Item 2', price: 20, quantity: 2 },
      { name: 'Item 3', price: 30, quantity: 3 }
    ]
  },
  computed: {
    total: function () {
      var sum = 0;
      for (var i = 0; i < this.cart.length; i++) {
        sum += this.cart[i].price * this.cart[i].quantity;
      }
      return sum;
    }
  }
});

在上述代码中，我们定义了一个计算属性total，它会根据购物车中每个商品的价格和数量计算出总价。在模板中，我们可以直接使用total来展示购物车的总价：

<div>Total: {{ total }}</div>

这样，每次购物车的商品发生变化时，总价都会动态地重新计算和更新。

5. 小结

计算属性的使用可以简化在模板中进行复杂逻辑运算的过程，同时也有性能上的优化。在需要对循环和条件进行处理的情况下，计算属性提供了一种替代方案。通过计算属性可以提高代码的可读性，并减少模板中的JavaScript代码的使用。
Vue学习笔记

1. 使用监听器

在Vue中，我们可以使用监听器来监测数据的变化，并在数据发生变化时执行相应的操作。通过watch选项或watch方法，我们可以定义一个或多个监听器。

例如，我们有一个Vue实例vm，其中有一个数据message，我们可以通过监听器watch来监测message的变化，并在变化时输出新的消息：

var vm = new Vue({
  data: {
    message: 'Hello Vue.js'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('消息发生变化，新消息为', newVal);
    }
  }
});

在上述代码中，我们通过watch选项定义了一个监听器，它会监测message的变化，当message发生变化时，会执行相应的回调函数，并将新的值和旧的值作为参数传入。

2 监听器的更多形式

除了使用watch选项来定义监听器外，我们还可以使用$watch方法来动态地添加监听器。

例如，我们有一个Vue实例vm，其中有一个数据price，我们可以使用$watch方法来监测price的变化，并在变化时输出新的价格：

var vm = new Vue({
  data: {
    price: 100
  },
  methods: {
    updatePrice: function () {
      this.price += 10;
    }
  }
});

vm.$watch('price', function (newVal, oldVal) {
  console.log('价格发生变化，新价格为', newVal);
});

在上述代码中，我们使用$watch方法动态地添加一个监听器，它会监测price的变化，当price发生变化时，会执行相应的回调函数，并将新的值和旧的值作为参数传入。

3 实例方法 Swatch

在Vue中，除了使用watch选项或$watch方法来定义监听器以外，还可以使用实例方法$watch来添加监听器。

例如，我们有一个Vue实例vm，其中有一个数据color，我们可以使用$watch方法来监测color的变化，并在变化时输出新的颜色：

var vm = new Vue({
  data: {
    color: 'red'
  },
  methods: {
    changeColor: function () {
      this.color = 'blue';
    }
  }
});

vm.$watch('color', function (newVal, oldVal) {
  console.log('颜色发生变化，新颜色为', newVal);
});