Vue2 与 Vue3 中 Computed 计算属性详解

阿贾克斯的黎明

于 2024-10-04 21:43:36 发布

阅读量375

点赞数 14

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

本文链接：https://blog.csdn.net/m0_57836225/article/details/142707828

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

Vue2 与 Vue3 中 Computed 计算属性详解

一、Vue2 中的 Computed 计算属性

1. 简单写法

2. get 和 set 写法

二、Vue3 中的 Computed 计算属性

1. 简单写法

2. get 和 set 写法

三、总结

在 Vue 开发中，计算属性（computed）是一个非常重要的特性，它可以对数据进行二次计算，为我们的开发带来了很大的便利。本文将结合 Vue2 和 Vue3 的特点，深入探讨 computed 计算属性，并附上相关代码示例。

一、Vue2 中的 Computed 计算属性

在 Vue2 中，computed 计算属性有两种常见的写法。

1. 简单写法

以下是一个 Vue2 中计算属性的简单示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>AABC 数据：{{AABC}}</p>
    <p>计算属性结果：{{changeSTR}}</p>
    <button @click="changeValue">点击改变</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          AABC: 'AABC',
          ITR: 'initialValue'
        };
      },
      computed: {
        changeSTR() {
          return this.ITR.slice(-1);
        }
      },
      methods: {
        changeValue() {
          // 在 Vue2 中，直接修改计算属性会报错
          // this.changeSTR = 'newValue';
        }
      }
    });
  </script>
</body>

</html>

在上述代码中，我们定义了一个 Vue 实例，其中包含一个数据属性AABC和ITR，以及一个计算属性changeSTR，它通过对ITR进行切片操作，返回最后一位字符。当我们点击按钮时，尝试直接修改计算属性会报错，因为在 Vue2 中计算属性是只读的。

2. get 和 set 写法

如果我们想要修改计算属性的值，可以使用get和set的写法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>AABC 数据：{{AABC}}</p>
    <p>计算属性结果：{{changeSTR}}</p>
    <button @click="changeValue">点击改变</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          AABC: 'AABC',
          ITR: 'initialValue'
        };
      },
      computed: {
        changeSTR: {
          get() {
            return this.ITR.slice(-1);
          },
          set(value) {
            this.ITR = value;
          }
        }
      },
      methods: {
        changeValue() {
          this.changeSTR = 'newValue';
        }
      }
    });
  </script>
</body>

</html>

在这种写法中，我们可以通过get方法获取计算属性的值，通过set方法设置计算属性的值。当我们点击按钮时，调用changeValue方法，修改计算属性changeSTR的值，实际上会通过set方法修改ITR的值，从而触发计算属性的重新计算。

二、Vue3 中的 Computed 计算属性

在 Vue3 中，计算属性的用法与 Vue2 类似，但也有一些细微的变化。

1. 简单写法

以下是一个 Vue3 中计算属性的简单示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <p>AABC 数据：{{AABC}}</p>
    <p>计算属性结果：{{changeSTR}}</p>
    <button @click="changeValue">点击改变</button>
  </div>
  <script>
    const App = {
      data() {
        return {
          AABC: 'AABC',
          ITR: 'initialValue'
        };
      },
      computed: {
        changeSTR() {
          return this.ITR.slice(-1);
        }
      },
      methods: {
        changeValue() {
          // 在 Vue3 中，直接修改计算属性同样会报错
          // this.changeSTR = 'newValue';
        }
      }
    };
    const app = Vue.createApp(App);
    app.mount('#app');
  </script>
</body>

</html>

2. get 和 set 写法

Vue3 中也可以使用get和set的写法来修改计算属性的值：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <p>AABC 数据：{{AABC}}</p>
    <p>计算属性结果：{{changeSTR}}</p>
    <button @click="changeValue">点击改变</button>
  </div>
  <script>
    const App = {
      data() {
        return {
          AABC: 'AABC',
          ITR: 'initialValue'
        };
      },
      computed: {
        changeSTR: {
          get() {
            return this.ITR.slice(-1);
          },
          set(value) {
            this.ITR = value;
          }
        }
      },
      methods: {
        changeValue() {
          this.changeSTR = 'newValue';
        }
      }
    };
    const app = Vue.createApp(App);
    app.mount('#app');
  </script>
</body>

</html>

在 Vue3 中，使用get和set写法修改计算属性的值与 Vue2 类似，通过set方法修改数据属性的值，从而触发计算属性的重新计算。