新玩家Vue笔记06

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

---

一、基础例子

<div id="root">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：全名：<span>{{fullName}}</span>
</div>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            firstName: "张",
            lastName: "三",
        },
        computed: {
            // 当fullName被读取时，get就会被调用，且返回值做为fullName的值
            get() {
                return this.firstName + '-' + this.lastName
            },
            // 当fullName被修改时，调用set
            set(value) {
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    })
</script>

二、计算属性简写

<div id="root">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br><br>
    全名：全名：<span>{{fullName}}</span>
</div>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            firstName: "张",
            lastName: "三",
        },
        computed: {
            // 不设置set，只设置get，将返回值传递给fullName
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

---

总结

1.  计算属性：要调用的属性不存在，通过已有的属性计算得来。
2. 原理借助底层的底层借助Object.defineProperty方法提供的getter和setter实现。
3. getter初次读取时执行一次，当依赖的属性变化时再次被调用。
4. 与methods相比，内部有缓存机制(复用)，效率更高，调试方便。