Vue-计算属性

菜逼の世界

于 2025-05-18 17:32:25 发布

阅读量447

点赞数 10

分类专栏： Vue 文章标签： vue computed 计算属性

本文链接：https://blog.csdn.net/u012516524/article/details/148046209

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

计算属性

案例

输入姓、名，全名称=姓+名

在这里插入图片描述

实现

插值语法

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性与监视</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>计算属性与监视</h1>
      <div>
        姓：<input type="text" v-model="firstName" /><br />
        名：<input type="text" v-model="lastName" /><br />
        <!-- 插值语法 -->
        全名称：<span>{{firstName}}{{lastName}}</span><br> 
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
      el: "#root",
      data: {
        firstName: "刘",
        lastName: "德华",
      }
    });
  </script>
</html>

效果

在这里插入图片描述

方法

代码

{{ fullName() }}: 方法必须携带括号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性与监视</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>计算属性与监视</h1>
      <div>
        姓：<input type="text" v-model="firstName" /><br />
        名：<input type="text" v-model="lastName" /><br />
        <!-- 插值语法 -->
        <!-- 全名称：<span>{{firstName}}{{lastName}}</span><br> -->
        <!-- 方法 : 必须携带括号 -->
        全名称：<span>{{ fullName() }}</span><br />
        全名称：<span>{{ fullName() }}</span><br />
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
      el: "#root",
      data: {
        firstName: "刘",
        lastName: "德华",
      },
      methods: {
        fullName() {
          console.log("调用fullname方法了")
          return this.firstName + this.lastName;
        },
      },
    });
  </script>
</html>

效果

在这里插入图片描述

发现多次调用，fullName 方法也被调用了多次

计算属性

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性与监视</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>计算属性与监视</h1>
      <div>
        姓：<input type="text" v-model="firstName" /><br />
        名：<input type="text" v-model="lastName" /><br />
        <!-- 插值语法 -->
        <!-- 全名称：<span>{{firstName}}{{lastName}}</span><br> -->
        <!-- 方法 : 必须携带括号 -->
        <!-- 全名称：<span>{{ fullName() }}</span><br /> -->
        <!-- 全名称：<span>{{ fullName() }}</span><br /> -->
        <!-- 计算属性  -->
        全名称：<span>{{ computedFullName }}</span><br />
        全名称：<span>{{ computedFullName }}</span><br />
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
      el: "#root",
      data: {
        firstName: "刘",
        lastName: "德华",
      },
      computed: {
        computedFullName: {
          get() {
            console.log("调用computedFullName get 了");
            return this.firstName + "-" + this.lastName;
          },
          set(value) {
            console.log("调用computedFullName set 了");
            const names = value.split("-")
            this.firstName = names[0]
            this.lastName = names[1]
          },
        },
        // 简写 ： 适用于只进行计算 不做修改的场景 
        // computedFullName() {
        //   console.log("调用computedFullName了");
        //   return this.firstName + this.lastName;
        // },
      },
      methods: {
        fullName() {
          console.log("调用fullname方法了");
          return this.firstName + this.lastName;
        },
      },
    });
  </script>
</html>

效果

在这里插入图片描述

发现多次调用，computedFullName 只调用了一次

总结

属性计算有多种方式实现 插值、方法、计算属性。

插值：适用于简单的拼接之类的。
方法：适用于复杂的运算封装称方法供使用
- 花括号中调用方法必须携带括号。如：{{fullName()}}
- 多次调用，均会触发方法进行对应的逻辑执行
计算属性：vue提供专用于属性计算的配置块
- 本质是对象的get、set实现的，最终绑定到vm
- 因此调用时只需要计算属性名称，不能携带括号
- 多次调用，只会触发一次计算逻辑，缓存机制
- 首次调用、依赖项变更 会触发计算逻辑即缓存更新