vue-计算属性

计算属性：

数据一般都是存储在data对象中，但是如果我们想要对这个data数据进行处理，然后显示处理后的数据，但是又由于其他地方可能还在引用数据原来的样子，如果我们直接在data里处理，就会导致所有使用该数据的节点全部发生变化。另外，吐过在插值表示式中，写处理则会导致大量重复的代码，而且差值表达式之中是不可以写复杂运算，这时就需要用到计算属性。

计算属性为啥不用括号阔起来？

因为使用计算属性里的属性，实际上是默认调用该属性的get方法，因此无需使用括号，计算属性提供各种属性的getter方法和setter方法。

计算属性和函数的区别？

计算属性：计算属性会对计算的结果进行缓存，在计算的条件没有发生变化的情况下，每一次调用计算属性的属性都直接访问缓存结果，而不需要重新计算。这样做，对复杂计算和大量的运算起到了很好的优化作用。

函数：函数无论调用多少次，都会重新计算，影响性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        {{reverMessage}}
        {{reverMessage}}
    </div>
</body>
</html>
<scirpt>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello clover!",
            temp:""
        },
        computed:{
            reverMessage(){
                return this.message.split("").reverse().join("")
            }
        }
    })
</script>

猜你喜欢