记录个人Vue.js从会用到精通之路 5

计算属性的奥妙

让咱们来看一小行代码

<div class="juejin">
    {{ number1 + number2}}
</div>
复制代码

咱们立马就能够表达式的目的是求两数和 但若是是这样呢？

<div class="juejin> {{ message.split('').reverse().join('') }} </div> 复制代码

此次是否是就得琢磨一下了，最后咱们知道是要翻转字符串。

可是这是咱们的View层呀，过多的逻辑不该该出如今这里，应该使用计算属性。

计算属性computed是如何实现的呢？

computed:{
    myMessage (){
        return this.message.split('').reverse().join('');
    }
}
复制代码

咱们在这里声明了一个计算属性：myMessage。而咱们提供的函数，将做为vm.myMessage的getter函数。巧妙的是，随着vm.message的更改，vm.myMessage的值也会变，咱们用声明的方式建立了这种依赖关系。

计算属性的setter

经过上面咱们知道了计算属性computed的实现其实是重写了属性对应的getter方法，那咱们不由想问setter也能够重写吗？ 能够

const vm = new Vue({
    // ...
    computed : {
        myMessage : {
            get(){
                return this.message + 'juejin';
            },
            set(){
                // ...
            }
        }
    }
})
复制代码

值得注意的是，若是咱们没有给计算属性声明一个set方法，那么vm.myMessage会直接报错：

[Vue warn]: Computed property "myMessage" was assigned to but it has no setter.

计算属性与方法该如何取舍?

或许有的同志要问了：我用方法也能够达到一样的效果，他俩有什么不一样吗？

不一样点就在于： 计算属性是基于他们的响应式依赖进行缓存的，只有在相关的响应式依赖发生改变的时候，他们才会从新求值，以上述为例，若是vm.message的值没有发生改变，那么屡次访问vm.myMessage的话，返回的是以前的计算结果，由于它的依赖vm.message没有发生改变。

举个栗子

computed:{
    nowTime : function(){
        return Date.now();
    }
}
复制代码

屡次访问vm.nowTime可是获得的都是一个值，不会实时返回，这是由于Date.now()不是响应式依赖。可是因为缓存的存在，咱们能够避免重复的进行屡次大量数据的计算。

若是咱们不用computed而用methods，那么每次触发从新渲染，都会再次执行函数。若是你不但愿有缓存这个玩意儿，用methods代替computed。

你们都知道watch这个API，他也能够实现computed的功能，那他俩有什么区别呢？下一篇文章再论