Vue的计算属性

本文基于B站尚硅谷的Vue学习教程，推荐大家去观看。

三种方法层层递进——实现姓名案例

效果图：

image-20211017204703181

首先要明确，当data中数据有变化时，Vue的模板页面会重新解析一遍。

一. 使用插值语法实现

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用插值语法实现姓名案例</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        姓<input type="text" v-model:value="firstName"><br><br>
        名<input type="text" v-model="lastName"><br><br>
        全名:<span>{{firstName}}-{{lastName}}</span>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip=false;
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:"张",
                lastName:'三'
            }
        })
    </script>
</html>

缺点：插值方法不够灵活，不好随意取firstName和lastName文本框中的值来组成fullName。

二. 使用methods实现

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用methods实现姓名案例</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        姓<input type="text" v-model:value="firstName"><br><br>
        名<input type="text" v-model="lastName"><br><br>
        全名:<span>{{fullName()}}</span>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip=false;
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:"张",
                lastName:'三'
            },
            methods:{
                fullName(){
                    return this.firstName + '-' + this.lastName;
                }
            }
        })
    </script>
</html>

缺点：fullName始终是个函数，每次都要重新计算，不够高效。

三. 使用计算属性实现

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用计算属性实现姓名案例</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--
    计算属性:
    1.定义:要用的属性不存在，要通过已有属性计算得来。
    2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
    3. get函数什么时候执行?
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
    4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
    5.备注:
    1.计算属性最终会出现在vm上，直接读取使用即可。
    2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
-->
    <div id="root">
        姓<input type="text" v-model:value="firstName"><br><br>
        名<input type="text" v-model="lastName"><br><br>
        全名:<span>{{fullName}}</span>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip=false;
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:"张",
                lastName:'三'
            },
            computed:{
                fullName:{
                    //读取fullName时，get会被调用，返回值就作为fullName的值
                    // get什么时候调用? 1. 初次读取fu11Name时。2. 所依赖的数据发生变化时。
                    get(){
                        console.log("get被调用了");
                        return this.firstName+'-'+this.lastName;//此处this指向是vm
                    },
                    //当fullName被修改时，set就会被调用
                    set(value){
                        console.log('set',value);
                        const arr=value.split('-');
                        this.firstName=arr[0];
                        this.lastName=arr[1];
                    }
                },
                //当不考虑修改，只读取时可以简写如下，直接当做getter函数来用,但fullName本质上还是个属性
                /*
                fullName(){
                    console.log('get被调用来了');
                    return this.firstName+'-'+this.lastName;
                }
                */
            }
        })
    </script>
</html>

计算属性大部分只读取，不修改，确实只读取不修改时就可以简写。

posted @ 2021-10-17 21:05  阿璃阿狸  阅读(79)  评论(0)    收藏  举报