Vue--computed（计算属性）

是吃货不是贝爷

已于 2022-05-18 12:27:56 修改

阅读量377

点赞数

分类专栏： vue笔记文章标签： vue.js javascript 前端 vue

于 2022-05-18 12:23:37 首次发布

本文链接：https://blog.csdn.net/q4451728/article/details/124837768

版权

vue笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文通过示例介绍了Vue.js中计算属性与方法的使用，包括姓名案例、计算属性的缓存特性以及计算总价格的小案例。强调了计算属性在数据变化时的自动更新和缓存优势，以及与方法的区别。同时展示了在Vue DevTools中如何查看计算属性。

摘要由CSDN通过智能技术生成

姓名案例

在这里插入图片描述
这个可以用插值语法做，代码如下

<div id="btnDemo">
    <label for="lastName">姓：</label>
    <input id="lastName" type="text" v-model="lastName"><br>
    <label for="firstName">名：</label>
    <input id="firstName" type="text" v-model="firstName"><br>
    全名：{{lastName}}-{{firstName}}
</div>

<script type="text/javascript">
    const vm = new Vue({
      el:'#btnDemo',
      data: {
        lastName: 'last',
        firstName: 'first'
      },
    })
</script>

但是涉及到的问题就是如果在插值语法表达式里面的内容过于复杂，比如切分，大写以及其他表达式，如{{lastName.splice(0,2).toUpperCase()…}}，那么就违背了Vue的极简原则（虽然不报错）。

加上methods

<div id="btnDemo">
    <label for="lastName">姓：</label>
    <input id="lastName" type="text" v-model="lastName"><br>
    <label for="firstName">名：</label>
    <input id="firstName" type="text" v-model="firstName"><br>
    全名：{{InLast()}}
</div>

<script type="text/javascript">
    const vm = new Vue({
      el:'#btnDemo',
      data: {
        lastName: 'last',
        firstName: 'first'
      },
      methods: {
        InLast() {
          return this.lastName + '-' + this.firstName;
        }
      }
    })
</script>

这里为什么插值语法内的是函数，但是还是动态改变了呢？
因为value一改变，_data也就相应改变了，data值一改变，Vue的模板就会重新解析与data值相关的部分，这里的函数Vue不知道里面有没有用到data，因此直接重新调一遍方法。

改值前
请添加图片描述

改值后（改了8个，调用了8次）
请添加图片描述

计算属性

计算属性就是对属性进行加工计算，比如切片，加法，加某些标识符，最后形成加工成品，如lastName和firstName经过一系列变换变为fullName，而这个fullName是怎么样的格式，是使用者自己定义的。（事实上，data里的变量也是属性property）property用:，method用(){ }

计算属性在被调用的时候会自动调get方法（所以不需要xxx.get，直接xxx就可以），参照之前的Object.defineProperty
，其实底层就是用这个实现的。这个get方法把this调成了vm实例，因此get内的可以直接用this.xxx访问到vm的_data

get的调用时机？
1.初次调用函数（如fullName的时候）（涉及到缓存，即第一次调用后缓存，之后只要用到的data不改变，就一直用缓存的数据）；2.所使用data数据发生改变的时候（如lastName和firstName）（当然需要在vm实例中）

用计算属性与methods的区别？
1.计算属性有缓存，第一次调用会缓存；如果是methods，多少次就调多少次方法
2.调试方便
请添加图片描述

请添加图片描述
可以看到在vue-devtools里面，computed属性可以显示出来，而用methods的话，没有相应的显示。

例子

<div id="btnDemo">
    <label for="lastName">姓：</label>
    <input id="lastName" type="text" v-model="lastName"><br>
    <label for="firstName">名：</label>
    <input id="firstName" type="text" v-model="firstName"><br>
    全名：{{fullName}}
</div>

<script type="text/javascript">
    const vm = new Vue({
      el:'#btnDemo',
      data: {
        lastName: 'last',
        firstName: 'first'
      },
      computed: {
        fullName: {
          //这里的get还是不能写成箭头函数，不然this就是window了
          get() {
            return this.lastName + '-' + this.firstName;
          },
          //set如果需要被人修改的时候加
          set(value) {
            console.log("set调用");
            const arr = value.split("-");
            this.lastName = arr[0];
            this.firstName = arr[1];
          }
        }
      }
    })
</script>

请添加图片描述

简写形式

当没有set的时候，就可以用简写形式，也就是确定只get不set（只读不改的时候）

computed: {
  fullName(){
    //没set了
    return this.lastName + '-' + this.firstName;
  }
  //或者
  /*fullName: function() {
    return this.lastName + '-' + this.firstName;
  }*/
}

注意：
这里不能用{{fullName()}}，因为只是简写，实际上还是属性，只是看起来像函数

小案例

计算总价格（以前写的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>总价格：{{totalPrice}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					booksPrice: [
						{id: 110, name: '第一本书' ,price: 100},
						{id: 111, name: '第二本书' ,price: 90},
						{id: 112, name: '第三本书' ,price: 80},
					]
				},
				computed: {
					totalPrice: function() {
						let allPrice = 0
						for (let i = 0; i < this.booksPrice.length; i++) {
							allPrice += this.booksPrice[i].price
						}
						return allPrice
					}
				}
			})
		</script>
	</body>
</html>