计算属性和监听器

简介: 计算属性和监听器

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);
});

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


4 小结

在本节中,我们学习了如何使用监听器来监测数据的变化,并在变化时执行相应的操作。我们介绍了使用watch选项、watch方法和实例方法$watch来定义和添加监听器的不同方式。


相关文章
|
6月前
|
缓存
|
20天前
监听计算属性的变化
【10月更文挑战第23天】通过使用`watch`函数和`watchEffect`函数,我们可以有效地监听计算属性的变化,并根据变化进行相应的处理。
|
1月前
|
缓存 JavaScript
|
JavaScript 前端开发
计算属性和监视属性的区别
计算属性和监视属性的区别
|
6月前
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
40 2
|
11月前
|
C# 数据安全/隐私保护
C# 窗体之间参数互相传递的两种方法与使用
C# 窗体之间参数互相传递的两种方法与使用
|
JavaScript 前端开发 Java
Vue2(生命周期,列表排序,计算属性和监听器)(一)
Vue2(生命周期,列表排序,计算属性和监听器)
|
JavaScript 索引
Vue2(生命周期,列表排序,计算属性和监听器)(三)
Vue2(生命周期,列表排序,计算属性和监听器)
|
缓存 JavaScript
Vue2(生命周期,列表排序,计算属性和监听器)(四)
Vue2(生命周期,列表排序,计算属性和监听器)