五、VUE基础学习篇（计算属性的操作computed）- computed和methods的差异

最新推荐文章于 2024-08-24 19:20:15 发布

IT_CREATE

最新推荐文章于 2024-08-24 19:20:15 发布

阅读量364

点赞数

分类专栏： Vue学习文章标签： vue compuyed的用法 vue计算属性和方法的差异

本文链接：https://blog.csdn.net/it_create/article/details/106588646

版权

Vue学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（计算属性操作）

1、computed的基本用法

计算属性操作是我们遇到一些稍显复杂的计算或者拼接等场景下使用的，理解起来就是平时我们我们做计算或者拼接可以是用Mustache语法，也就是大括号的方式，比如：{{a * b}},{{firstStr + lastStr}} 等简单计算拼接，但是如果我们遇到复杂情况，这种写法就满足不了我们的要求，同时这么写也显得代码冗余，不容易维护
使用：vue实例对象中的computed属性，在该属性对应的对象中定义属性，标签中调用属性即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的基本操作和复杂操作</title>
</head>
<body>

<div id="app">
  <!--  ■这两种方式的计算拼接方式，是之前已经介绍了的，不好的地方就是不灵活，如果属性过多，就会显得杂乱，同时如果有复杂的计算这种就无能为力了-->
  <h2>{{firstName+" "+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>

  <!--  ■用调用computed中计算的属性的方式，记得不要加双括号，因为识别时这是个属性而不是方法，它和methods异曲同工，
  区别就是computed的属性具有缓存的作用，同时调用方式methods是方法的调用方式，computed是属性的调用方式，
  遇到这种计算的场景时，尽量使用computed计算属性的方式-->
  <h2>{{fullName}}</h2>

  <h2>总价格： {{totalPrice}}</h2>
  <h2></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: '开始了',
      lastName: "结束了",
      books: [{id: 110, name: "unix编程大全", price: 119},
        {id: 111, name: "代码大全", price: 105},
        {id: 112, name: "深入理解虚拟机", price: 98},
        {id: 113, name: "网络编程", price: 87}]
    },
    computed: {
      //计算属性，属性名尽量取名为名词，不要起名为动词，因为这是属性，不是方法
      fullName: function () {
        return this.firstName + " " + this.lastName
      },
      totalPrice: function () {
        let totalPrice = 0;
        this.books.forEach(function (value, index) {
          totalPrice += value.price;
        })
        return totalPrice;
      }
    }
  });

</script>
</body>
</html>

效果
在这里插入图片描述

2、computed和methods的区别

我们有个疑问：computed和methods看似都能够实现我们的功能，那么为什么会出现计算属性呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次,提升了性能

调用属性和方法注意的点和区别？
1）用调用computed中计算的属性的方式，记得不要加双括号，因为识别时这是个属性而不是方法，它和methods异曲同工，区别就computed的属性具有缓存的作用，也就是说计算属性在调用一次之后，就不在执行计算属性中的方法体内容，而是直接启用缓存的值，只有当计算属性方法体返回的值发生变化，才继续执行计算属性中的方法体
2）同时调用方式methods是方法的调用方式(要加括号，否则无法识别)，computed是属性的调用方式（也就是调用时不要加括号，否则报错），遇到这种计算的场景时，尽量使用computed计算属性的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的基本操作和复杂操作</title>
</head>
<body>

<div id="app">
  <!--  ■这两种方式的计算拼接方式，是之前已经介绍了的，不好的地方就是不灵活，如果属性过多，就会显得杂乱，同时如果有复杂的计算这种就无能为力了-->
  <span style="color: red">mustache语法:</span>
  <h2>{{firstName+" "+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <hr>

  <!--  ■用调用methods属性中方法的方式进行计算，明显比上面简洁多了,用methods中的方法记得加上双括号，因为是调用方法的方式-->
  <span style="color: red">调用方法的方式</span>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <hr>

  <!--  ■用调用computed中计算的属性的方式，记得不要加双括号，因为识别时这是个属性而不是方法，它和methods异曲同工，
  区别就是computed的属性具有缓存的作用，同时调用方式methods是方法的调用方式，computed是属性的调用方式，也就是调用时不要加括号，否则报错，
  遇到这种计算的场景时，尽量使用computed计算属性的方式-->
  <span style="color: red">调用计算属性的方式</span>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>

  <h2>总价格： {{totalPrice}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: '开始了',
      lastName: "结束了",
      books: [{id: 110, name: "unix编程大全", price: 119},
        {id: 111, name: "代码大全", price: 105},
        {id: 112, name: "深入理解虚拟机", price: 98},
        {id: 113, name: "网络编程", price: 87}]
    },
    /*
      ■我们有个疑问：computed和methods看似都能够实现我们的功能，那么为什么会出现计算属性呢？
         原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次,提升了性能
     */
    computed: {//计算属性，属性名尽量取名为名词，不要起名为动词
      fullName: function () {
        console.log("调用计算属性fullName")
        return this.firstName + " " + this.lastName
      },
      totalPrice: function () {
        let totalPrice = 0;
        this.books.forEach(function (value, index) {
          totalPrice += value.price;
        })
        return totalPrice;
      }
    },
    methods: {
      getFullName: function () {
        console.log("调用方法getFullName")
        return this.firstName + " " + this.lastName
      }
    }
  });

</script>
</body>
</html>

效果
在这里插入图片描述

3、computed计算属性的getter和setter

口通常计算属性都包含有一个getter和一个setter，上面的方式我们只是用了getter来读取
口在某些情况下，你也可以提供一个setter方法（不常用）
口默认情况下只有get方法，上面两种只有get方法，是一种简写方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的基本操作和复杂操作</title>
</head>
<body>

<div id="app">

  <!--  ■用调用computed中计算的属性的方式，记得不要加双括号，因为识别时这是个属性而不是方法，它和methods异曲同工，
  区别就是computed的属性具有缓存的作用，同时调用方式methods是方法的调用方式，computed是属性的调用方式，也就是调用时不要加括号，否则报错，
  遇到这种计算的场景时，尽量使用computed计算属性的方式-->
  <h2>{{fullName}}</h2>

  <h2>{{hasGetAndSetFullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: '开始了',
      lastName: "结束了",
    },
    /*
      ■我们有个疑问：computed和methods看似都能够实现我们的功能，那么为什么会出现计算属性呢？
         原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次,提升了性能
     */
    computed: {//计算属性，属性名尽量取名为名词，不要起名为动词
      fullName: function () {
        return this.firstName + " " + this.lastName
      },
      //■通常计算属性都包含有一个getter和一个setter，上面两个方法我们只是用了getter来读取
      //■在某些情况下，你也可以提供一个setter方法（不常用）
      //■默认情况下只有get方法，上面两种只有get方法，是一种简写方式
      hasGetAndSetFullName: {
        get: function () {
          return this.firstName + " " + this.lastName
        },
        /* ■赋值的时候怎么赋值呢？
             答：比如这里，就是 app.hasGetAndSetTotalPrice = "hello word" 这种赋值方式，因为hasGetAndSetTotalPrice是一个属性，我们直接对
                hasGetAndSetTotalPrice这个属性进行赋值，vue会解析调用set方法，并且将值传入，这样newValue就能接收到
        */
        set: function (newValue) {
          console.log(newValue);
          let split = newValue.split(" ");
          this.firstName = split[0];
          this.lastName = split[1];
        }
      }
    }
  });

</script>
</body>
</html>