09-计算属性-JZTXT

Computed 计算属性是 Vue 中常用的一个功能，那为什么要使用计算属性

我们假定一个前提情况，如果我们需要用到一个属性，但这个属性不存在，却可以通过其他属性计算得来，我们则可以通过以下几个方法进行实现：

1) 插值语法实现

2) methods实现

3) 计算属性实现

例：我们已知姓、名属性 firstName 和 lastName，想要得到姓名全名。就比如姓："马"，名："铃薯"，姓名全程："马-铃薯"

1) 插值语法实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值语法实现</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
            名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/>

            <!--使用插值语法实现-->
            <!--姓名全称：<span>{{firstname + "-" + lastname}}</span>-->
            姓名全称：<span>{{firstname}}-{{lastname}}</span><br/>

        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false;

            new Vue({
                el:"#root",
                data(){
                    return{
                        firstname:"任",
                        lastname:"先生"
                    }
                }
            })
        </script>

    </body>
</html>

2) methods实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>methods实现</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
            名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>

            <!--使用methods实现-->
            <!--{{fullName()}}代表调用fullName()函数，获取返回值-->
            姓名全称：<span>{{fullName()}}</span><br/>
            姓名全称：<span>{{fullName()}}</span><br/>
            姓名全称：<span>{{fullName()}}</span><br/>
            姓名全称：<span>{{fullName()}}</span><br/>

        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false;

            new Vue({
                el:"#root",
                data(){
                    return{
                        firstname:"任",
                        lastname:"先生"
                    }
                },
                // 通过fullName()函数，返回所需要的内容
                methods:{
                    fullName(){
                        console.log("@---正在调用fullName()函数...")
                        return this.firstname + "-" + this.lastname
                    }
                }
            })
        </script>

    </body>
</html>

3) 计算属性实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性实现</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
            名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>

            <!--使用计算属性实现-->
            姓名全称：<span>{{fullName}}</span><br/>
            姓名全称：<span>{{fullName}}</span><br/>
            姓名全称：<span>{{fullName}}</span><br/>
            姓名全称：<span>{{fullName}}</span><br/>

        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false;

             const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        firstname:"任",
                        lastname:"先生"
                    }
                },
                // 计算属性：要用的属性不存在，需要通过已有属性计算得来
                // 计算属性一般用来描述依赖响应式状态的复杂逻辑
                computed:{
                    // 1.计算属性的完整写法
                    fullName:{
                        // get什么时候调用（返回值作为fullName的值）
                        // 1.初次读取fullName时，get就会被调用
                        // 2.所依赖的数据发生改变时，get也会被调用
                        get(){
                            console.log("@---正在调用get()方法...")
                            return this.firstname + "-" + this.lastname
                        },
                        // get什么时候调用
                        // 只有当fullName发生修改时，set才会被调用
                        set(value){
                            console.log("@---正在调用set()方法...")
                            const arr = value.split("-")
                            this.firstname = arr[0]
                            this.lastname = arr[1]
                        }
                    }

                    // // 2.计算属性的简写写法(默认没有set方法)
                    // fullName(){
                    //     console.log("@---正在调用get()方法...")
                    //     return this.firstname + "-" + this.lastname;
                    // }
                }
            })
        </script>

    </body>
</html>

计算属性的定义

要用的属性不存在，需要通过已有属性计算而来的

计算属性的原理

底层借助了Object.defineproperty方法提供的getter和setter

// 已有属性
data(){
    return{
        firstname:"任",
        lastname:"先生"
    }
},
// 计算属性：要用的属性不存在，需要通过已有属性计算得来
computed:{
    fullName:{
        // get什么时候调用（返回值作为fullName的值）
        // 1.初次读取fullName时，get就会被调用
        // 2.所依赖的数据发生改变时，get也会被调用
        get(){
            console.log("@---正在调用get()方法...")
            return this.firstname + "-" + this.lastname
        },
        // get什么时候调用
        // 只有当fullName发生修改时，set才会被调用
        set(value){
            console.log("@---正在调用set()方法...")
            const arr = value.split("-")
            this.firstname = arr[0]
            this.lastname = arr[1]
        }
    }
}

计算属性的原理

底层借助了