您的当前位置：首页正文

【Vue学习笔记】- 计算属性

来源：吉趣旅游网

总结

1、定义：要用的属性不存在，需要通过计算获取；

2、原理：底层借助Pbject.defineproperty方法提供的getter和setter；

3、get函数什么时候会执行？

初次读取计算属性时会被调用
当依赖的数据发生变化时会再次被调用

4、优势：与methods实现相比，内部有缓存机制（复用），效率高

5、备注：

计算属性最终会出现在vm身上，直接读取即可；
如果计算属性要被修改，那必须写set函数去相应修改且所依赖的数据也要修改。

6、简写：当只有只有读取（get），没有修改（set）计算属性情况时

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type"content="text/html; charset=utf-8">
        <title>姓名案例-计算属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>
    <body>

        <div id="event03">
            姓：<input type="text" v-model="firstName"><br/><br/>
            名：<input type="text" v-model="lastName"><br/><br/>
            全名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">

            // 阻止vue启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el: '#event03',
                data: {
                    firstName: '熊',
                    lastName: '大'
                },
                computed:{
                    // fullName:{
                    //
                    //     // 当有人读取fullName时,get就会被调用，当多读取时仅调用一次（缓存了）
                    //     // get什么时候调用：1、初次读取fullName时,2、所依赖的数据发生变化时
                    //     get(){
                    //         return this.firstName + this.lastName
                    //     },
                    //
                    //     // set不是必须写,不长写
                    //     set(value){
                    //
                    //     }
                    // }

                    // 计算属性简写-只有读取（get），没有修改（set）情况
                    fullName(){
                        return this.firstName + this.lastName
                    }

                },
                methods: {
                }
            })

        </script>
    </body>
</html>
</DOCTYPE>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文