Vue2入门之超详细教程八-计算属性

标签：教程 Vue firstName 之超 lastName Vue2 全名 fullName 属性

1、简介

　　计算属性：

　　　　1.定义：要用的属性不存在，要通过已有的属性计算得来

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

　　　　3.Get函数什么时候执行？

　　　　　　(1) 初次读取时会执行一次

　　　　　　(2) 当依赖的数据发生改变时会被再次调用

　　　　4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便。

　　　　5.备注：

　　　　　　(1) 计算属性最终会出现在vm上，直接读取使用即可

　　　　　　(2) 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

　　学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识传送门，CSS基础知识传送门。

2、姓名案例

　　让用户输入姓、名，自动显示全名，使用三种不同的方式实现。

1. 插值语法实现

　　在vscode中创一个新目录，叫“07_计算属性”，在下面创建一个“1姓名案例_插值语法实现.html”文件，在里面输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=`, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        <input type="text" v-model:value="firstName"><br>

        <input type="text" v-bind:value="lastName"><br>

        全名: <span>{{firstName}} - {{lastName}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        var vm = new Vue({

            el:'#root',

            data:{

                firstName:"张",

                lastName:"三"

            }

        })

    </script>

</body>

</html>

　　以上案例使用插值语法简单实现一个用户分别输入姓和名，然后联动展示的一个效果

　　根据运行结果可以看出第一个姓的输入框在全名中有联动变化，但第二个输入框的输入并没有变化，这是因为v-bind和v-model的特性，这两个的区别在前面章节有提到过，这边在帮大家加强一下印象

　　如果用户给出了特殊定制的需求，姓取值用户输入的前2位，名取值用户输入的前3位，我们该如何作用？很简单，只需要做以下改动即可：

　　firstName.slice(0,2)

　　lastName.slice(0,3)

　　全部代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=`, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        <input type="text" v-model:value="firstName"><br>

        <input type="text" v-model:value="lastName"><br>

        全名: <span>{{firstName.slice(0,2)}} - {{lastName.slice(0,3)}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        var vm = new Vue({

            el:'#root',

            data:{

                firstName:"张",

                lastName:"三"

            }

        })

    </script>

</body>

</html>

2. Methods语法实现

　　在“07_计算属性”文件夹下下面创建一个“2姓名案例_methods语法实现.html”文件，在里面输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName()}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            methods:{

                fullName(){

                    return this.firstName + '-' + this.lastName

                }

            }

        })

    </script>

</body>

</html>

3. 计算属性语法实现

　　在“07_计算属性”文件夹下下面创建一个“3姓名案例_计算属性实现.html”文件，在里面输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            computed:{

                fullName:{

                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的返回值

                    //1.初次读取fullName时，2.所依赖的数据发生变化时

                    get(){

                        return this.firstName + '-' + this.lastName

                    }

                }

            }

        })

    </script>

</body>

</html>

　　计算属性除了get方法还有set方法，set方法当数据被改变时被调用，全量代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        const vm = new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            computed:{

                fullName:{

                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的返回值

                    //1.初次读取fullName时，2.所依赖的数据发生变化时

                    get(){

                        console.log('计算属性方法被调用了')

                        return this.firstName + '-' + this.lastName

                    },

                    //当fullName被修改时被调用

                    set(value){

                        var arr = value.split('-')

                        this.firstName = arr[0]

                        this.lastName = arr[1]

                    }

                }

            }

        })

    </script>

</body>

</html>

4. 计算属性简写方式

　　简写方式必须在确定只读取属性，不会改变属性的情况下使用。

　　在“07_计算属性”文件夹下下面创建一个“4姓名案例_计算属性简写方式.html”文件，在里面输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        const vm = new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            computed:{

                fullName(){

                    console.log('计算属性方法被调用了')

                    return this.firstName + '-' + this.lastName

                }

            }

        })

    </script>

</body>

</html>

3、测试

　　以上案例使用插值语法、methods语法和计算属性方法都可以实现，我们使用什么属性呢，建议使用计算属性语法，因为计算属性语法有缓存，当多次调用相同方法时，只会执行一次。

　　我们做一下测试，分别使用methods方法和计算属性方法，在页面中多次调用相同方法并输出调用次数

1. Methods方法调用次数

　　修改methods方法实现案例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName()}}</span>

        全名：<span>{{fullName()}}</span>

        全名：<span>{{fullName()}}</span>

        全名：<span>{{fullName()}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            methods:{

                fullName(){

                    console.log('methods方法被调用了')

                    return this.firstName + '-' + this.lastName

                }

            }

        })

    </script>

</body>

</html>

2. 计算属性方法调用次数

　　修改计算属性方法实现案例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

     <div id="root">

        姓：<input type="text" v-model:value="firstName"><br>

        名：<input type="text" v-model:value="lastName"><br>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span>

     </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:'#root',

            data:{

                firstName:'张',

                lastName:'三'

            },

            computed:{

                fullName:{

                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的返回值

                    //1.初次读取fullName时，2.所依赖的数据发生变化时

                    get(){

                        console.log('计算属性方法被调用了')

                        return this.firstName + '-' + this.lastName

                    }

                }

            }

        })

    </script>

</body>

</html>

4、小结

　　计算属性比methods方法更有效率

　　计算属性的调用方式不需要写()，语法与插值语法相同

　　计算属性的简写方式必须在确定不会修改参数的情况下使用

标签：教程,Vue,firstName,之超,lastName,Vue2,全名,fullName,属性
From： https://www.cnblogs.com/lirongyang/p/17369466.html