vue-computed计算属性

Posted 2020-10-12

计算属性：用来封装你想对一个属性进行的操作

computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改变时就算触发重新渲染也不会执行该函数，我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

computed VS $watch（侦听属性） 侦听属性用于观察和响应 所依赖的实例上的改变，它的原理和computed相同，都是依赖改变时做出响应，但是区别在于有时候用computed代码量会很简洁很清晰但是用侦听属性可能需要写重复的代码如：

watch: {

　　firstName: function (val) {

　　this.fullName = val + ‘ ‘ + this.lastName

　　},

　　lastName: function (val) {

　　this.fullName = this.firstName + ‘ ‘ + val

　　}

}侦听属性

 

computed: {

　　fullName: function () {

　　return this.firstName + ‘ ‘ + this.lastName

　　}

}计算属性

计算属性实际上默认内部是一个get函数，但是有时候我们需要改变它而引起别的值的改变，这时候我们需要实现一个setter 如：

var myVue = new Vue({
　　el:‘#app‘,
　　data:{
　　　　firstname:‘pian‘,
　　　　lastname:‘ruijie‘
　　},
computed: {
　　fullname:{　　
　　　　get: function(){
　　　　return this.firstname +‘ ‘+ this.lastname
　　   },
　　　　set: function(newvalue){
　　　　var name = newvalue.split(‘ ‘)
　　　　this.firstname = name[0]
　　　　this.lastname = name[name.length-1]
　　　}
　　}
}

这样当改变fullname的值的时候，firstname和lastname也会做出改变。