vue计算属性

计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果

计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

        计算属性
        形式：方法
        仅在创建vue对象或修改关联属性时调用1次，后续调用都是直接从内存中取值
    -->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{msgAttr}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               msg:"足球,篮球"
            },
            computed:{
                msgAttr:function(){
                    return this.msg.replace(",","、");
                }
            },
            methods:{
                msgMd:function(){
                    return this.msg.replace(",","、");
                }
            }
        })
    </script>

计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性;  二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据，

计算属性缓存 其实细心的话就会发现，调用methods里的方法也能实现和计算属性一样的效果，甚至有的方法还能接收参数，使用起来更加的灵活，既然使用methods就可以实现，那为什么还需要计算属性呢？原因就是计算属性是基于他的依赖缓存的。一个计算属性所依赖的数据发生变化时，他才会重新取值， 所以依赖的text只要不改变，计算属性也就不更新。

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性

计算属性禁用箭头函数

　　注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

　　当然有很多this需要指向vue实例的时候，都需要慎用箭头函数。