阿菜的Vue学习之旅（五）

问题：如何拼接data对象中的多个key/value 对

当我们在Vue中实例化data对象，定义了多个 key/value 对时，如果想要拼接其中的几个 key，那需要怎么做呢？

下面列举了3个解决方法。

1.使用mustache语法进行data各属性的拼接

html部分：

 <div class="name">
		<!--为了更好的区分不同的拼接方法，所以采用了字体的不同颜色-->
       <h2 style="color:lightskyblue;">{{firstName}}{{lastName}}</h2>
       <h2 style="color:lightskyblue;">{{firstName + lastName}}</h2>
    </div>

js部分：

const name = new Vue({
    el: '.name',
    data: {
        firstName: '谷',
        lastName: '爱凌'
    }
})

运行效果：

2.在methods中定义一个具有计算机属性的函数

html部分：

 <div class="name">
        <h2 style="color:red;">{{getFullName()}}</h2>
    </div>

js部分：

const name = new Vue({
    el: '.name',
    data: {
        firstName: '谷',
        lastName: '爱凌'
    },
    methods:{
        getFullName: function () {
            return this.firstName + this.lastName;
        }
    }
})

运行效果：

3.在computed中定义一个计算属性

html部分：

 <div class="name">
 		<!--因为computed是计算属性，因此直接写fullName即可，不必写成fullName（）-->
        <h2 style="color:orange;">{{fullName}}</h2>
    </div>

js部分：

const name = new Vue({
    el: '.name',
    data: {
        firstName: '谷',
        lastName: '爱凌'
    },
   computed:{
       //法一：
        fullName: function () {
            console.log("此处调用了fullName");
            return this.firstName + this.lastName;
        }

        //法二：此处是法一的完整版
        // fullName: {
        //     //一般计算属性是不用set方法的，即计算属性仅有已读功能
        //     set: function () {
        //
        //     },
        //     get: function () {
        //         //因为计算属性只使用get方法，因此可以简写成法一的形式
        //         return this.firstName + this.lastName;
        //     }
        // }
    }
})

运行效果：

4.methods方法与computed计算属性的区别

首先，从类型上看，methods是一个函数，而computed是一个计算属性，而且其内部包含了setter和getter方法。

methods:
类型：{ [key: string]: Function } //key是一个string类型的变量，而内部是一个函数体

computed:
类型：{ [key: string]: Function | { get: Function, set: Function } } //key是一个string类型的变量，而内部的函数体包括了set方法和get方法

再者，从调用的次数上看，

html部分：

<div class="name">
		//假设我们需要用getFullName()函数和fullName计算属性分别各3次
        <h2 style="color:red;">{{getFullName()}}</h2>
        <h2 style="color:red;">{{getFullName()}}</h2>
        <h2 style="color:red;">{{getFullName()}}</h2>
        
        <h2 style="color:orange;">{{fullName}}</h2>
        <h2 style="color:orange;">{{fullName}}</h2>
        <h2 style="color:orange;">{{fullName}}</h2>
    </div>

const name = new Vue({
    el: '.name',
    data: {
        firstName: '谷',
        lastName: '爱凌'
    },
    methods:{
        getFullName: function () {
       		console.log("此处调用了getFullName()");
            return this.firstName + this.lastName;
        }
    },
    computed:{
        fullName: function () {
        	console.log("此处调用了fullName");
            return this.firstName + this.lastName;
        }
    }
})

运行效果的 console台显示，一共调用了getFullName()函数3次，调用了fullName计算属性1次。由此可见，computed计算属性更有效率上的优势。

—————————————————————————— —

上一篇
阿菜的Vue学习之旅（四）
下一篇
阿菜的Vue学习之旅（六）