今天主要讲一下 vue 的 computed 这个计算属性的用法
computed 属性是实时响应的, 当项目开发中依赖某个或者某些值的变化而变化时, 我们就要用到 computed. 下面举例来说明:
- <div id="root">
- <input type=""name="" v-model="firstName">
- <input type=""name="" v-model="lastName">
- <div id="fullname"> 全名是:{{ firstName + lastName }} </div>
- </div>
JS:
- data() {
- return {
- firstName: '',
- lastName: ''
- }
- }
当我们在 input 里输入不同的名字时,#fullname 里显示的全名显然是 {{ firstName + lastName }}. 这样做完全没有问题, 惟一的问题是, 在 vue 里, 各部分内容要各司其值, 不要越位哈. 我们需要净化 html 里的代码, 不要被太多的逻辑运算而污染, 逻辑的内容要统统收纳到 JS 里. 这样我们看着舒服, 也容易理解, 不会杂乱无章. 而我们这个全名是完全依赖 firstName 和 lastName, 如果他们中的一个或者全部变化了, 全名也会随之而变化. 这个前提条件符合我们对 computed 属性的定义. 所以接下来我们应用 computed 来编写代码:
- <div id="root">
- <input type=""name="" v-model="firstName">
- <input type=""name="" v-model="lastName">
- <div id="fullname"> 全名是:{{ fullName }} </div>
- </div>
JS:
- data() {
- return {
- firstName: '',
- lastName: ''
- }
- },
- computed: {
- fullName () {
- return this.firstName + this.lastName
- }
- }
在这里我们需要注意的一点是, computed() 里的 fullName 与 data 里的数据不要重名, 否则得不到结果.
有小伙伴会说, 这跟写在 methods 里面没啥区别嘛, methods 里也可以达到这样的目的啊! 没错, 是完全可以的. 但是有点需要劳记: computed 属性只有在相关依赖变化时, fullName 才会重新求值, 如果相关依赖没有变化时, computed 只会从缓存中提取数据进行显示; 而 methods 呢, 不管 firstName 或者 lastName 变不变化, 只要被触发, 就会重新渲染. 可见 computed 是可以大大提高性能的.
当我们在计算一个大型数据, 而此数据又不经常变化时, 无疑使用 computed 属性是能够大大提高性能的一种方式.
来源: http://www.jianshu.com/p/160f279a3eb7