从“心”认识Vue（二）: 计算属性和methods方法的区别

最新推荐文章于 2024-07-22 13:43:47 发布

maya1024

最新推荐文章于 2024-07-22 13:43:47 发布

阅读量163

点赞数

分类专栏： vue 文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/high32/article/details/112858414

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

从“心”认识Vue（二）: 计算属性和methods方法的区别

前言
一、methods方法
二、computed计算属性
三、计算属性补充
总结

前言

开始学习vue了，但是编程的思想还是不容易转变过来，一两周过去了，只知道个大概，知其然而不知其所以然，打算开一个系列帖，重新认识下vue。

上篇文章：从“心”认识vue（一）：我的第一个vue

一、methods方法

vue中调用函数方法通常在methods中添加：

先看下面小例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{fullName()}}</h2>
    <h2>{{fullName()}}</h2>
    <h2>{{fullName()}}</h2>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      firstName: "Kobe",
      lastName: "Bryant"
    },
    methods:{
      fullName: function () {
      	console.log("fullName") 
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>
</body>
</html>

上面结果大家都知道，h2里会显示Kobe Bryant 全名。

二、computed计算属性

我们再看下面小例子，与methods进行对比：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  计算属性-->
<h2>{{getFullName}}</h2>
<h2>{{getFullName}}</h2>
<h2>{{getFullName}}</h2>

</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: "Kobe",
      lastName: "Bryant"
    },
    computed: {
      getFullName: function () {
      	console.log("getFullName") 
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>
</body>
</html>

好像结果是一样的，并没有什么不同。
但是我们打开控制台发现，使用methods方法fullName被调用了三次，而计算属性中getFullName只被调用了一次！
在这里插入图片描述

原因就在于计算属性多次调用时会调用缓存，只有当数值发生变化时才会重新调用，而methods方法只要触发时就会被调用
Vue官网中说道，对于任何复杂逻辑，你都应当使用计算属性。

数据属性变化时：

在这里插入图片描述

三、计算属性补充

其实上面我们只是用到了计算属性的getter方法，而计算属性还有setter方法，即为它赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--    计算属性使用时函数不用加括号-->
      {{getFullName}}
    </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          firstName:"Loebron",
          lastName:"James"
        },
        computed:{
 
          //完整的计算属性写法
          getFullName:{
          //函数名：匿名函数
          // getFullName:function(){
          //   return this.firstName + " " + this.lastName
          // }
             set:function(newValue){
               const names = newValue.split(" ");
               this.firstName = names[0]
               this.lastName = names[1]
             },
            get:function(){
              return this.firstName + " " + this.lastName
            }
          }
        }
      })
    </script>
</body>
</html>

而一般我们在使用过程中，很少用setter方法去赋值，不设setter属性，故删除setter方法，然后再进行进一步简写，就变成我们通常的写法，即上面第一次使用时的方法进行书写.

总结

1.methods 与 computed 使用结果完全相同；
2.computed使用时会调用缓存，多次调用时只进行执行第一次，只有在数据变化时才会重新调用。
3.计算属性还有setter方法，而我们一般情况不使用它

maya1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
从“心”认识Vue（二）: 计算属性和methods方法的区别

从“心”认识Vue（二）: 计算属性和methods方法的区别前言一、methods方法二、computed计算属性三、计算属性补充总结前言开始学习vue了，但是编程的思想还是不容易转变过来，一两周过去了，只知道个大概，知其然而不知其所以然，打算开一个系列帖，重新认识下vue。上篇文章：从“心”认识vue（一）：我的第一个vue一、methods方法vue中调用函数方法通常在methods中添加：先看下面小例子：<!DOCTYPE html><html lang="
复制链接

扫一扫

专栏目录