Vue计算属性

本是古典何须时尚 2022-05-20 08:34 270阅读 0赞

计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多个vue实例的数据，只要其中一个发生变化，计算属性就会重新调用，相应的视图也会随之进行更新。

下面我们看个实例：

<template> <div id="computed"> <li v-for="book in books"> { { book.name}} <p>书籍价格：{ { book.price}}</p> <p>书籍数量:{ { book.count}}</p> <button v-on:click="addBook(book)">加购</button> <button v-on:click="delBook(book)">减购</button> <p></p> </li> <p><b>当前书籍总价是：</b>{ { totalPrice }}人民币哦！</p> </div> </template> <script> export default ({ name: 'ComputedProperty', data() { return { books: [ { id: 0, name: 'Vue.js实战', price: 45, count: 2 }, { id: 1, name: 'Vue权威指南', price: 75, count: 10 } ] } }, methods: { addBook: function (book) { this.books[book.id].count += 1; }, delBook: function (book) { if(this.books[book.id].count <= 0) return; this.books[book.id].count -= 1; } }, computed: { totalPrice: function () { var price = 0; for (var i = 0; i < this.books.length; i++) { price += this.books[i].price * this.books[i].count; } return price; } } }) </script> <style scoped> </style>

这里我们模拟一个购物车的情况，里面是购买的书籍和数量，通过计算属性计算我们购买的书籍的总价，运行程序：  
![这里写图片描述][70]

当我们点击按钮的时候，可以增加和减少当前书籍的数量，大家也可以看到，通过计算属性显示的书籍总价也会随之改变。

![这里写图片描述][70 1]

在我们实际使用中，计算属性还有两个比较有用的小技巧。  
1.计算属性可以依赖其他计算属性  
2.计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他vue实例的数据

还是一样我们通过一个例子来看：

<template> <div> 您的姓名是：{ { fullName}} </div> </template> <script> import Vue from 'vue'; var app1 = new Vue({ data: { firstName: 'Liu' }, computed: { formatName: function () { var format_name = this.firstName + '-'; return format_name; } } }); var app2 = new Vue({ data: { lastName: 'Sir' } }); export default { name: "MultDependentProperty", computed: { fullName: function () { return app1.formatName + app2.lastName; } } } </script> <style scoped> </style>

这里我们定义了两个Vue实例，我们在当前实例的计算属性中拼接实例1中的姓和实例2中的名字来组成我们完整的姓名，并且在实例1中的计算属性中在姓的后面加上‘-’。这里为了在一块演示，所以代码这么写了，主要是 为了让大家可以一次性对上面提到的两点有个直观的认识。

运行结果：  
![这里写图片描述][70 2]

大家在很多教程中也会看到关于计算属性的gettter和setter的介绍，在绝大多数情况下我们只会用到计算属性的getter方法来读取计算属性，很少在业务中使用setter，所以在这里只是给大家看下两者的写法；

computed: {
          formatName: {
            get:function () { 
              var format_name  = this.firstName + '-';
              return format_name;
            },
            set: function (newValue) { 
              this.firstName = newValue;
            }
          }
        }

在使用setter的时候也很简单正常赋值就好了，有过其他语言编程基础的很容易就理解了，比如c\#中的get和set方法。

fullName: function () {
            app1.formatName = "Wang";
            console.log(app1.firstName);
            return app1.formatName + app2.lastName;
          }

这里我们还用上面的例子来演示，所以修改了一下代码，大家可以自己试试。

关于计算属性缓存的问题，这里我们只提一点，我们可以通过cache开关来控制我们的程序是否开启缓存，语法如下：

computed: {
          cache: false,
          welcome: function () { 
            return Date.now() + " Welcome to Vue!";
          }

默认情况下，是开启缓存的。

[70]: /images/20220520/ce20ab18628d4113b95af6b66b418eff.png
[70 1]: /images/20220520/4dcd2093ddd54a6fbca153d93b805e58.png
[70 2]: /images/20220520/fe2dbc5a4eef41318207f69eb0ae8e79.png