VUE面试题-计算属性和方法

1：为什么要有计算属性?

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

-在这个模板里面就不是简单的声明式逻辑了,必须需要看一段时间才能看懂,所以对于任何复杂的逻辑你都应该用计算属性

-这里我们声明了一个计算属性reversedMessage. 我们提供的函数将用作property Vm.reversedMessage的getter 函数: -你可以打开浏览器的控制台，自行修改例子中的vm. message -触发set见写好的html

<div class="app">
        <p>{{message}}</p>
        <p>reverse{{reverseMessage}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello'
            },
            computed: {
                // 反转
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

2.计算属性vs方法

-可以通过在表达式中调用方法来达到同样的效果

-两种方式的最终结果确实是完全相同的。 -然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要nessage 还没有发生改变，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。（只要message没变过，我就永远不会动第二下，动了算我输）

 <div class="app">
        <p>{{message}}</p>
        <p>reverse{{reverseMessage}}</p>
        <p>reverse{{getMessage}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello'
            },
            // 计算属性
            computed: {
                // 反转
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            },
            // 方法
            methods:{
                getMessage(){
                     return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

计算属性的set

<div class="app">
        <p>{{message}}</p>
        <p>reverse{{reverseMessage}}</p>
        <p>reverse{{getMessage}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello'
            },
            // 计算属性
            computed: {
                //   简写
                // reverseMessage: function () {
                // 反转
                //     return this.message.split('').reverse().join('')
                // }
                // 全写
                reverseMessage: {
                    get: function () {
                        return this.message.split('').reverse().join('')
                    },
                    // 当用计算属性设置值的时候，可用set取获取这个值
                    set:function(val){
                        console.log(val);
                    }
            
                }

            },
            // 方法
            methods: {
                getMessage() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>