计算属性的setter和getter

最新推荐文章于 2024-04-15 20:26:27 发布

sleep_early_

最新推荐文章于 2024-04-15 20:26:27 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/sleep_early_/article/details/124933220

版权

本文探讨了Vue中计算属性的setter和getter用法，通常计算属性为只读，但示例展示了如何使用setter。计算属性具备缓存机制，仅在相关依赖变化时重新计算。相比之下，methods每次调用都会执行，即便数据未变。在实际应用中，选择计算属性还是methods取决于性能需求和场景。

摘要由CSDN通过智能技术生成

在计算属性中其实是由这样两个方法setter和getter。

      computed: {
        fullName:{
          //计算属性一般没有set方法，只读属性
          set:function(value){
            const names = value.split("-")
            this.firstName = names[0]
            this.lastName = names[1]
          },
          get:function(){
            return this.firstName + "-" + this.lastName
          }
        }
      }

但是计算属性一般没有set方法，只读属性，只有get方法，但是上述中value就是新的值，也可以使用set方法设置值，但是一般不用。

计算属性和methods的对比

代码如下，html布局：

    <div id="app">
        <!-- 使用方法methods -->
        <p>{{fullName()}}</p>
        <p>{{fullName()}}</p>
        <p>{{fullName()}}</p>
        <!-- 使用计算属性computed -->
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
    </div>

===分别调用===

        new Vue({
            el: "#app",
            data: {
                firstName: 'zhang',
                lastName: 'san'
            },
            methods: {
                fullName() {
                    console.log('调用了fullName方法');
                    return this.firstName + this.lastName
                }
            },
            computed: {
                fullName1() {
                    console.log('调用了计算属性');
                    return this.firstName + this.lastName
                }
            }
        })

得到结果：方法调用了三次，只计算了一次

1.methods，即使firstName和lastName没有改变，也需要再次执行

2.计算属性有缓存，只有关联属性改变才会再次计算