Vue.js计算属性

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18

效果：

不用计算属性

一，插值语法实现

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <div id="root">
    <div>str1：<input type="text" v-model="str1"></div>
    <div>str2：<input type="text" v-model="str2"></div>
    <div>str1+str2：{{str1}} - {{str2}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        str1: "str1",
        str2: "str2",
      },
    });
  </script>
</body>
</html>

二，methods实现

只要data改变，vue一定会重新解析模板，{{}}中的方法一定会重新调用。（v-if等类似）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <div id="root">
    <div>str1：<input type="text" v-model="str1"></div>
    <div>str2：<input type="text" v-model="str2"></div>
    <div>str1+str2：{{getResult()}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        str1: "str1",
        str2: "str2",
      },
      methods: {
        getResult() {
          return this.str1 + ' - ' + this.str2;
        },
      },
    });
  </script>
</body>
</html>

计算属性

计算属性和methods的区别是，计算属性有缓存，methods没有。

如下，①改变str2依然会重新调用{{}}中的getResult()，且②有多个getResult()时反复调用。

    new Vue({
      el: "#root",
      data: {
        str1: "str1",
        str2: "str2",
      },
      methods: {
        getResult() {
          console.log("调用getResult")
          return this.str1;
        },
      },
    });

采用计算属性可以克服上述缺点，仅当依赖数据改变时才重新调用：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <div id="root">
    <div>str1：<input type="text" v-model="str1"></div>
    <div>str2：<input type="text" v-model="str2"></div>
    <div>str1+str2：{{result}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        str1: "str1",
        str2: "str2",
      },
      computed: {
        result: {
          get() {
            console.log("我被调用");
            return this.str1;
          }
        }
      }
    });
  </script>
</body>
</html>

缩写形式（只有get没有set的时候可以用）：

    new Vue({
      el: "#root",
      data: {
        str1: "str1",
        str2: "str2",
      },
      computed: {
        result() {
          console.log("我被调用");
          return this.str1;
        }
      }
    });

 

posted @ 2022-01-19 16:04  xkfx  阅读(33)  评论(0)    收藏  举报