1.6、VUE计算属性

最新推荐文章于 2022-12-08 16:23:22 发布

笨小孩丶

最新推荐文章于 2022-12-08 16:23:22 发布

阅读量1.7k

点赞数 1

分类专栏： ---VUE 文章标签： vue 计算属性

本文链接：https://blog.csdn.net/qq_21386275/article/details/89359130

版权

---VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是计算属性

如下，对于任何复杂逻辑，应当使用计算属性。

<div id="example"> 
  {{ message.split('').reverse().join('') }} 
</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>计算属性-01</title>
</head>
<body>
    <div id="app">
      <p>
        firstName: <input type="text" v-model="firstName">
      </p>
      <p>
        lastName: <input type="text" v-model="lastName">
      </p>
      <p>
        fullNameByComputed: {{fullNameByComputed}}
      </p>
      <p>
        fullNameByMethod: {{fullNameByMethod()}}
      </p>
	  <p>
        now: {{now}}
      </p>
	  <p>
        now1: {{now1()}}
      </p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
    (function() {
      var app = new Vue({
        el: '#app',
        data: {
          firstName: 'pxy',
          lastName: 'amos'
        },
        methods: {
          fullNameByMethod: function() {
            return this.firstName + '.' + this.lastName;
          },
		  now1: function () {
			return Date.now();
		  }
        },
        <!-- 计算属性 -->
        computed: {
          fullNameByComputed: function () {
            return this.firstName + '.' + this.lastName;
          },
		  now: function () {
			return Date.now();
		  }
        }
      });
    })();
    </script>
</body>
</html>

为什么不用methods代替Computed

在上示例中，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName 或者 lastName 还没有发生改变，多次访问 fullNameByComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用methods将总会再次执行函数。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
上示例中，在输入框中输入内容时，页面上now的值不会改变，但是now1的值会跟着变动。如下↓↓↓：
在这里插入图片描述

计算属性的getter和setter

绝大多数情况下，我们只会用默认的 getter 方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>计算属性-02</title>
</head>
<body>
    <div id="app">
      <p>
        firstName: <input type="text" v-model="firstName">
      </p>
      <p>
        lastName: <input type="text" v-model="lastName">
      </p>
      <p>
        fullName: <input type="text" v-model="fullName">
      </p>
	  <p>
        fullName1: <input type="text" v-model="fullName1">
      </p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
    (function() {
      var app = new Vue({
        el: '#app',
        data: {
          firstName: 'pxy',
          lastName: 'amos'
        },
        computed: {
          fullName: {
            get: function () {
              return this.firstName + '-' + this.lastName;
            },
            <!-- 当fullName变化时，firstName和lastName也会变化 -->
            set: function(newVal) {
              var names = newVal.split('-');
              this.firstName = names[0];
              this.lastName = names[1];
            }
          },
		  <!-- 默认就是上边fullName中get-->
		  fullName1:function(){
			return this.firstName + '-' + this.lastName;
		  }
        }
      });
    })();
    </script>
</body>
</html>