Vue的计算属性

最新推荐文章于 2024-05-10 23:42:04 发布

EsuMmEr.

最新推荐文章于 2024-05-10 23:42:04 发布

阅读量372

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53139732/article/details/128888504

版权

一、计算属性的基本使用

computed:{
      FullName:function () {
        return this.firstName+' '+ this.lastName
      }
    }

二、计算属性的复杂操作

1、提取data中books中的值的方法

data: {
      books:[
        {id:110,name:'unix编程艺术',price:119},
        {id:111,name:'现代操作系统',price:105},
        {id:112,name:'深入理解计算机原理',price:98},
        {id:113,name:'代码大全',price:112}
      ]
    },

方法一：

let total = 0;
for(let i = 0;i<this.books.length;i++){
	total +=this.books[i].price
}

方法二：

let total = 0;
for(let i in books){
	total +=this.books[i].price
}

方法三：

let total = 0;
for(let i of books){
	total += this.books.price
}

方法四 reduce：

this.books.reduce(function(preValue,n){
	return preValue+n},0)

三、计算属性和methods的对比

1、通过定义methods会执行多次

2、通过定义计算属性只执行一次，性能更好

3、例子

<body>
<div id="app">
  <!--<h1>{{firstName+lastName}}</h1>-->
  <!--computed-->
  <h1>{{fullName}}</h1>
  <h1>{{fullName}}</h1>
  <h1>{{fullName}}</h1>
  <h1>{{fullName}}</h1>
  <!--methods-->
  <h1>{{fullName1()}}</h1>
  <h1>{{fullName1()}}</h1>
  <h1>{{fullName1()}}</h1>
  <h1>{{fullName1()}}</h1>

</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      firstName:'Xiong',
      lastName:'Er'
    },
    methods:{
      fullName1(){
        console.log("执行methods")
        return this.firstName+' '+this.lastName

      }
    },
    computed:{
      fullName:function () {
        console.log("执行computed")
        return this.firstName+' '+this.lastName
      }
    }

  })
</script>
</body>

运行结果

在这里插入图片描述
可见methods执行了四次，而computed执行一次，性能好

EsuMmEr.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的计算属性

console . log("执行methods") return this . firstName + ' ' + this . lastName } } , computed : {console . log("执行computed") return this . firstName + ' ' + this . lastName } } }) < / script > < / body >运行结果可见methods执行了四次，而computed执行一次，性能好。
复制链接

扫一扫