computed属性计算

babywenever

已于 2023-12-02 13:37:47 修改

阅读量48

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-29 19:38:32 首次发布

本文链接：https://blog.csdn.net/babywenever/article/details/134697484

版权

本文讨论了Vue中methods和computed的使用，强调了methods是主动调用且性能较低，而computed是被动的、缓存的，执行效率更高。还介绍了computed可以是函数或对象模式，并区分了两者在get和set上的行为。

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

1. computed:属性计算还可以是对象模式，但它不光有get还有set

computed的内容不管是函数还是对象都会代理到vue实例上，返回的是什么值就是什么

2. 属性计算可以是函数形式，但它只是get操作

3. Vue当中methods与computed之间的差异与区别

3-1. methods是主动调用的，执行次数是根据调用次数来决定的，显然性能比较弱，执行的时候需要加上()

3-2. computed是被动的，在调用以后会缓存处理，执行的时候不需要加()，不管执行几次computed计算函数都只被调用一次

3-3. 不管是methods还是computed，它们的来源都是es6当中的class，methods其实就是class当中的普通方法，而computed其实就是class中的get/set方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>计算属性和监视</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model="firstName" /> <br />
            名：<input type="text" v-model="lastName" />
            <br>
            <!-- TODO:复杂的插值语法 -->
            {{ firstName+"-"+lastName }}
            <br>
            <!-- TODO:函数调用也是expression表达式 -->
            <!-- methods方法调用是主动调用的，主动触发时每一次都会触发这个函数 -->
            {{ getFullName() }}
            <br>
            {{ getFullName() }}
            <br>
            <!-- TODO:computed计算属性的调用 -->
            <!--
            ! 1.不需要加()的调用；
            ! 2.计算属性其实被缓存了，而且计算N次方法都只会执行一次，极大的提升了程序的性能
            -->
            {{ fullName }}
            <br>
            <button @click="changeFullName">changeFullName</button>

            <!-- 
                问题：Vue当中methods与computed之间的差异与区别

                1.methods是主动调用的，执行次数是根据调用次数来决定的，显然性能比较弱，执行的时候需要加上()；

                2.computed是被动的，在调用以后会缓存处理，执行的时候不需要加()，不管执行几次computed计算函数都只被调用一次；

                3.不管是methods还是computed，它们的来源都是es6当中的class，methods其实就是class当中的普通方法，而computed其实就是class中的get/set方法。
             -->
        </div>
        <script>
            Vue.config.productionTip = false;
            let vm = new Vue({
                el: '#root',
                data: {
                    firstName: 'china',
                    lastName: 'vane',
                },
                // methods方法终将被代理到Vue实例上
                methods:{
                    getFullName(){
                        console.log("getFullName的执行调用")
                        // methods中的函数里的this指向vue实例
                        // console.log(this)    // Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
                        return(this.firstName+"-"+this.lastName)
                    },
                    changeFullName(){
                        this.fullName="li-si"
                    }
                },
                computed:{
                    // 属性计算还可以是对象模式，但它不光有get还有set
                    // fullname最终也会代理到vue实例上，返回的是什么值就是什么，不管是函数还是对象
                    fullName:{
                        get(){
                            console.log("get执行")
                            return this.firstName+"-"+this.lastName
                        },
                        set(val){
                            console.log("set执行",val)
                            let arr=val.split("-")
                            this.firstName=arr[0]
                            this.lastName=arr[1]
                        }
                    }

                    // 属性计算可以是函数形式，但它只是get操作
                    // fullName(){
                    //     console.log("computed计算属性的调用")
                    //     return(this.firstName+"-"+this.lastName)
                    // }
                }
            });
            console.log(vm)
            // vm.getFullName()
        </script>
    </body>
</html>

babywenever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed属性计算

3-3. 不管是methods还是computed，它们的来源都是es6当中的class，methods其实就是class当中的普通方法，而computed其实就是class中的get/set方法。3-2. computed是被动的，在调用以后会缓存处理，执行的时候不需要加()，不管执行几次computed计算函数都只被调用一次。3-1. methods是主动调用的，执行次数是根据调用次数来决定的，显然性能比较弱，执行的时候需要加上()2. 属性计算可以是函数形式，但它只是get操作。
复制链接

扫一扫