二十七、【vue面试题】计算属性的应用（2021/5/1）

#计算属性
1.为什么要有计算属性?初衷是什么?
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

在这个模板里面就不是简单的声明式逻辑了,必须需要看一段时间才能看懂,所以对于任何复杂的逻辑你都应该用计算属性
这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作property vm.reversedMessage的getter函数:
你可以打开浏览器的控制台，自行修改例子中的vm.message

一触发set见写好的html

2.计算属性vs方法
-可以通过在表达式中调用方法来达到同样的效果:
-两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

<div id="app">
        <p>{{message}}</p>
        <p>reverse {{reverseMessage}}</p>
        <p>reverse {{getMessage()}}</p>
</div>

<script>
        var vm =  new Vue({
                el:'#app',
                data:{
                        name1:'aaa',
                        name2:'bbb',
                        message:'hello'
                },
                computed:{
                        reverseMessage:function(){
                                return this.message.split('').reverse().join('')
                        },

                        // 上面的计算属性其实内部是这样的

                        reverseMessage:{
                                get:function(){
                                        return this.message.split('').reverse().join('')
                                },
                                set:function(val){
                                        console.log(val)
                                }

                        },

                        name3:{
                                get(){
                                        return this.name1 + '' + this.name2
                                },
                                set(val){
                                        var red =  val.split('')
                                        this.name1 = red[0]
                                        this.name2 = red[1]
                                }
                        }
                }
        })
</script>