Vue中的computed属性详解

更新时间：2022年01月05日 08:49:15 作者：QM.bear!

这篇文章主要为大家介绍了Vue中的computed属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

今天来说说vue中的计算属性computed，为了更好的理解计算属性的好处，我们先通过一个案例来慢慢了解计算属性，有如下案例：定义两个输入框以及一个span标签，span标签中的内容为两个输入框中的值，span标签中的内容随着输入框中的内容变化而变化

插值表达式

我们先用插值表达式的方法来实现这一效果

<body>
    <div id="app">
        姓: <input type="text" v-model=firstName> </br>
        </br>
        名: <input type="text" v-model=lastName></br>
        </br>
        姓名： <span>{{firstName}}{{lastName}}</span>

    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
        }
    })

</script>

我们可以发现能简单实现我们所需要的效果，但是如果现在我想要添加另外的要求，当我输入的是英文的时候就将首字母大写，这个时候我们只能使用以下方法

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{firstName.replace(firstName[0],firstName[0].toUpperCase())}}   {{lastName.replace(lastName[0],lastName[0].toUpperCase())}}</span>

    </div>
</body>
<script type="text/javascript">
    var str = ''

    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
        }
    })
</script>

从插值表达式所展现的情况来看虽然能实现想要的效果但是代码显得特别冗长不利于阅读，这个时候想到可以向methods中添加方法来实现这一效果。

methods

向methods添加fullName方法

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName()}}</span>

    </div>
</body>
<script type="text/javascript">
    var str = ''

    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
            fullName() {
                let a = '';
                let b = '';
                if (this.firstName.length != 0)
                    a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase())
                if (this.lastName.length != 0)
                    b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase())
                return a + ' ' + b
            }
        }
    })

</script>

我们可以看到通过方法就能很好的解决代码过于冗长的问题。但是又面临了另一个问题，我们在学习vue中的data属性时了解到，只要data中的数据发生变化，页面中用到data数据的地方就会进行更新，所以当data数据firstName与lastName一改变就会重新调用方法fullName,在一定情况下会导致代码效率低，另外，methods中的方法在插值表达式中使用了多少次就会运行多少次。根据以上两种方法的弊端出现了另一种方法，就是使用computed属性。

computed

在computed中可以定义一些属性：计算属性。计算属性的本质其实就是一个方法，只不过在使用的时候可以直接当做属性来使用。具体有以下特点

计算属性在使用时不需要加(),直接写名称即可
如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值
计算属性在第一次使用时的结果会被缓存起来，直到属性中所依赖的data数据发生改变计算属性的结果才会重新求值

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
        fullName： <span>{{fullName}}</span>

    </div>
</body>
<script type="text/javascript">
    var str = ''

    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用？当读取fullName时，get就会被调用，且返回值就是fullName的值
            //get什么时候被调用？1.当第一次读取fullName时。2.当所依赖的data数据发生变化时
            fullName: {
                get() {
                    console.log('hi,我调用了computed')
                  let a = '';
                let b = '';
                if (this.firstName.length != 0)
                    a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase())
                if (this.lastName.length != 0)
                    b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase())
                return a + ' ' + b
                }
            }
        }
    })
</script>
</html>

在前面我们说过methods中的方法在页面中使用n次便会调用n次，而computed中的属性却不会出现上面的情况。上面代码中我们在页面中使用了同一计算属性3次却只输出了1次结果，同样使用methods中的full方法却输出了3次结果，意味着方法调用了3次。为什么会有这样的结果？这都是因为computed中有缓存机制而methods中并没有。在代码解析到第一个fullName时就会对fullName的结果进行缓存，而到第二个、第三个时会发现缓存中已经有了，那么就不会在对其进行调用。

对computed的使用有了大致的了解后，我们再来对computed补充一下。

在computed我们可以通过给计算属性添加set方法达到赋值效果

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
    </div>
</body>
<script type="text/javascript">
    var str = ''

    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用？当读取fullName时，get就会被调用，且返回值就是fullName的值
            //get什么时候被调用？1.当第一次读取fullName时。2.当所依赖的data数据发生变化时
            fullName: {
                get() {
                    console.log(this)
                    return this.firstName + this.lastName
                },
                set(val) {
                    this.firstName = val[0]
                    this.lastName = val[1]
                }
            }
        }
    })

</script>

我们可以看到当在控制台对fullName赋值时firstName以及lastName都会改变

如果计算属性中只有get没有set的话可以直接像下面代码这样写

computed: {
            fullName(){
                console.log(this)
                return this.firstName + this.lastName
                }
            }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

vue项目使用electron-builder库打包成桌面程序的过程
这篇文章主要介绍了vue项目使用electron-builder库打包成桌面程序的过程,本文给大家介绍如何使用electron-builder这个库结合实例代码给大家讲解的非常详细,感兴趣的朋友一起看看吧
2024-02-02
关于vue路由监听事件跳转的问题
这篇文章主要介绍了关于vue路由监听事件跳转的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue组件数据传递、父子组件数据获取，slot,router路由功能示例
这篇文章主要介绍了vue组件数据传递、父子组件数据获取，slot,router路由功能,结合实例形式分析了vue.js组件数据传递、路由相关概念、原理及相关操作技巧,需要的朋友可以参考下
2019-03-03
一文总结Vue和React的异同
这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-05-05
Vue操作数组的几种常用方法小结
本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
2023-09-09
vuex实现数据状态持久化
今天小编就为大家分享一篇vuex实现数据状态持久化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue使用zTree插件封装树组件操作示例
这篇文章主要介绍了Vue使用zTree插件封装树组件操作,结合实例形式分析了vue.js整合zTree插件实现树组件与使用相关操作技巧,需要的朋友可以参考下
2019-04-04
vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-02-02
基于Vue的侧边目录组件的实现
这篇文章主要介绍了基于Vue的侧边目录组件的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，感兴趣的朋友一起看看
2018-05-05