【VUE实战】学习笔记（二）

最新推荐文章于 2025-06-12 00:18:01 发布

原创最新推荐文章于 2025-06-12 00:18:01 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

vue技术栈专栏收录该内容

4 篇文章

订阅专栏

博客介绍了计算属性相关知识。计算属性不能输入参数，是对复杂表达式到数据的聚合，基于依赖缓存，输入变化才重新取值。它可设置getter和setter属性，默认逻辑放在getter中。相比method，计算属性有缓存功能，依赖参数不变时不重新计算，可减小页面损耗。

1.计算属性：

计算属性不能输入参数。
计算属性是对【复杂表达式=>数据】的聚合，并不一定是个纯函数，但是最好能用一个纯函数作为计算属性。

ps：注意计算属性与method的最大区别就是计算属性是基于他的依赖缓存的，当输入发生变化时它才会重新取值！！！！

<template>
  <div class="lesson2">{{personNames}}</div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data: () => {
    return {
      persons: [
        {
          name: "John",
          age: 11
        },
        {
          name: "mary",
          age: 12
        },
        {
          name: "huangchuanjian",
          age: 12
        }
      ]
    };
  },
  methods: {},
  computed: {
    personNames: function() {
      return this.persons.reduce((preValue, currentItem, index, array) => {
        return preValue + "、" + currentItem.name;
      },"");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

从上面例子可以看出来，computed中的值可以被视为直接使用变量，就和data中定义的一样，不同的是计算值是一系列变量参数和表达式组合输出的结果，之所以设计出这个概念就是为了抽象出呈现结果依赖于多个变量的逻辑，让整个页面的逻辑层次更分明。

2. 计算属性的setter

计算属性是可以设置getter和setter属性的，以方便编写者在读/写属性的时候做一些其他的事情。其实可以认为默认情况下我们编写的计算属性逻辑就是放到getter方法中的。

    dogName:{
      set:function(value){
          this.dogCurrentName = this.persons[0].name +"的"+ value;
      },
      get:function(){
        return this.dogCurrentName;
      }
    }

注意get的触发是由“dogCurrentName”参数被修改后导致的。

3. 计算属性缓存

为什么我们不直接使用method来实现计算属性的功能能？因为计算属性有缓存这个大杀器！

    //计算属性缓存测试
    now:function(){
      return Date.now();
    }

如果计算属性依赖的参数没有变化它将不会重新计算。页面损耗将减小。