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来定义和添加监听器的不同方式。