Vue学习笔记——conputed和methods对比_vue中写方法的两种方式method和const-优快云博客

计算属性的缓存

methods和computed看起来都可以实现我们的功能
那么为什么还要多一个计算属性这个东西呢？
因为计算属性会进行缓存，如果多次使用,计算属性只会调用一次，极大提高了性能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<!--  1.直接拼接:语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
<!--  2.通过定义methods-->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
<!--  3.通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'kebe',
      lastName:'bryant'
    },
    methods:{
      getFullName() {
        console.log('getFullName');
        return this.firstName+' '+this.lastName;
      }
    },
    computed:{
      fullName(){
        console.log('fullName');
        return this.firstName+' '+this.lastName;
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43402353/article/details/109701575
————————————————
版权声明：本文为优快云博主「Blockchain_Key」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_43402353/article/details/109701575