【大前端】说说vue的计算属性

说说vue的计算属性

为什么出现计算属性功能

便于维护

这里我们举vue官网的例子

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

对于属性的附加运算完全可以这样写在模板里，不用多写什么方法。
但是模板设计的初衷是用于简单运算
如果模板中放入太多的逻辑会让模板过重以致难以维护

所以 任何复杂逻辑，你可以使用方法，计算属性或者watch
区别下边来讲

执行效率

计算属性是基于它们的响应式依赖进行缓存的。
只有他们依赖的值发生变化时才会重新求值。
相比之下：
每当触发重新渲染，调用方法将总会执行函数
这就可以看出计算属性的效率高效

开发效率

同样这里我们用vue官网的例子：

<div id="demo">{{ fullName }}</div>

同样是求根据firsttName 和lastName求fullName

用watch（侦听属性）来做

export default {
  name: 'App',
 	data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}

可以看出必须对两个属性都做监听，才能实现修改任意一个Name都可使fullName改变的需求

下面是用computed属性来做：

export default {
 name: 'App',
 data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
}

可以看到一个方法，一行代码就可以实现了。

可能有人会说：这里用模板语法不更好吗

确实，这里用模板语法更好，因为所需计算量少，而且用模板语法能够更加高效。但是这只是个例子。

好了，下边总结一下模板语法的应用场景

计算属性应用场景

• 所需计算量较大，速度要求快
• 业务逻辑较复杂，便于维护
• 牵扯data属性较多，可以减少代码量同时效率较高

计算属性的语法😀

上面说了那么多概念，是时候说说语法了

computed(计算属性)和data平级

第一种：

computed:{
	dataName(){
		return data
	}
}

第二种：

computed:{
	dataName:{
		get(){
			return val
		},
		set(newValue){
			//属性变化时要对属性执行的操作
		}
	}
}

---

watch属性后面再详讲

---

看到这了，不点个赞再去敲bug