Vue.js 计算属性是什么

一、总结

一句话总结：

模板 表达式 维护

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

1、为什么会有计算属性？

模板 表达式 维护

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

2、计算属性的特点？

依赖 改变

依赖的值改变，计算属性也改变

比如：下列代码中，b的值依赖于a的值，a的值由1变成2时，b的值由2变成了3

14   <script>

15     var vm = new Vue({

16       el: '#example',

17       data: {

18         a: 1

19       },

20       computed: {

21         // 一个计算属性的 getter

22         b: function () {

23           // `this` 指向 vm 实例

24           return this.a + 1

25         }

26       }

27     })

28

29     setTimeout(function(){

30       vm.a=2;

31     },3000);

32

33   </script>

当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。

3、vue对象如何调用？

对象 变量 调用

将对象赋值给一个变量，然后调用这个变量即可

14   <script>

15     var vm = new Vue({

16       el: '#example',

17       data: {

18         a: 1

19       },

20       computed: {

21         // 一个计算属性的 getter

22         b: function () {

23           // `this` 指向 vm 实例

24           return this.a + 1

25         }

26       }

27     })

28

29     setTimeout(function(){

30       vm.a=2;

31     },3000);

32

33   </script>

4、vue对象中的数据如何调用？

直接 点

vue对象直接.(点)的方式

14   <script>

15     var vm = new Vue({

16       el: '#example',

17       data: {

18         a: 1

19       },

20       computed: {

21         // 一个计算属性的 getter

22         b: function () {

23           // `this` 指向 vm 实例

24           return this.a + 1

25         }

26       }

27     })

28

29     setTimeout(function(){

30       vm.a=2;

31     },3000);

32

33   </script>

5、vue和其它js代码的关系是怎样的？

对象 互不干扰

vue只是js的一个对象，和其它js代码完全是互不干扰的

14   <script>

15     var vm = new Vue({

16       el: '#example',

17       data: {

18         a: 1

19       },

20       computed: {

21         // 一个计算属性的 getter

22         b: function () {

23           // `this` 指向 vm 实例

24           return this.a + 1

25         }

26       }

27     })

28

29     setTimeout(function(){

30       vm.a=2;

31     },3000);

32

33   </script>

6、什么时候适合用计算属性，什么时候适合用$watch？

计算属性 对象中 多属性

$watch 对象外 单属性

场景描述：

一个人的全名（fullname）由firstName和lastName组成，比如现在有一个需求，firstName和lastName改变的时候，全名也跟着改变，如何实现？

解决方法：

$watch解决：

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

var vm = new Vue({

  data: {

    firstName: 'Foo',

    lastName: 'Bar',

    fullName: 'Foo Bar'

  }

})

vm.$watch('firstName', function (val) {

  this.fullName = val + ' ' + this.lastName

})

vm.$watch('lastName', function (val) {

  this.fullName = this.firstName + ' ' + val

})

计算属性解决：

var vm = new Vue({

  data: {

    firstName: 'Foo',

    lastName: 'Bar'

  },

  computed: {

    fullName: function () {

      return this.firstName + ' ' + this.lastName

    }

  }

})

显然这里计算属性解决更优，不过计算属性是在Vue对象里面解决的，$watch是在对象外面解决的，计算属性更加简洁，但是$watch感觉灵活一点

7、vue中的$watch函数的运行机制是怎样的？

监控 属性

看下面的代码可以知道，$watch是监控属性的，$watch监控的属性改变，$watch也跟着改变，代码中的示例是$watch一次监控一个属性

场景描述：

一个人的全名（fullname）由firstName和lastName组成，比如现在有一个需求，firstName和lastName改变的时候，全名也跟着改变，如何实现？

解决方法：

$watch解决：

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

var vm = new Vue({

  data: {

    firstName: 'Foo',

    lastName: 'Bar',

    fullName: 'Foo Bar'

  }

})

vm.$watch('firstName', function (val) {

  this.fullName = val + ' ' + this.lastName

})

vm.$watch('lastName', function (val) {

  this.fullName = this.firstName + ' ' + val

})

8、一个人的全名（fullname）由firstName和lastName组成，比如现在有一个需求，firstName和lastName改变的时候，全名也跟着改变，并且，全名变了的话，firstName和lastName也自动跟着改变，如何实现？

计算属性 get set

用计算属性的getter和setter实现

get方法用于firstName和lastName改变的时候，全名也跟着改变

set方法用于全名变了的话，firstName和lastName也自动跟着改变

具体调用的话可以用vue对象调用fullname、firstName、lastName进行验证

 // ...

 computed: {

   fullName: {

     // getter

     get: function () {

       return this.firstName + ' ' + this.lastName

     },

     // setter

     set: function (newValue) {

       var names = newValue.split(' ')

       this.firstName = names[0]

       this.lastName = names[names.length - 1]

     }

   }

 }

 // ...

现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。

二、Vue.js 计算属性

1、效果动图

2、代码

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>wue01</title>

     <script src="vue.min.js"></script>

   </head>

   <body>

     <div id="example">

       a={{ a }}, b={{ b }}

     </div>

   </body>

   <script>

     var vm = new Vue({

       el: '#example',

       data: {

         a: 1

       },

       computed: {

         // 一个计算属性的 getter

         b: function () {

           // `this` 指向 vm 实例

           return this.a + 1

         }

       }

     })

     setTimeout(function(){

       vm.a=2;

     },3000);

   </script>

 </html>

计算属性

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。

基础例子

<div id="example">

  a={{ a }}, b={{ b }}

</div>

var vm = new Vue({

  el: '#example',

  data: {

    a: 1

  },

  computed: {

    // 一个计算属性的 getter

    b: function () {

      // `this` 指向 vm 实例

      return this.a + 1

    }

  }

})

结果：

{% raw %}

<div id="example" class="demo">

  a={{ a }}, b={{ b }}

</div>

<script>

var vm = new Vue({

  el: '#example',

  data: {

    a: 1

  },

  computed: {

    b: function () {

      return this.a + 1

    }

  }

})

</script>

{% endraw %}

这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。

console.log(vm.b) // -> 2

vm.a = 2

console.log(vm.b) // -> 3

你可以打开浏览器的控制台，修改例子的 vm。vm.b 的值始终取决于 vm.a 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a，因此当 vm.a 发生改变时，依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。

计算属性 vs. $watch

Vue.js 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子：

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

var vm = new Vue({

  data: {

    firstName: 'Foo',

    lastName: 'Bar',

    fullName: 'Foo Bar'

  }

})

vm.$watch('firstName', function (val) {

  this.fullName = val + ' ' + this.lastName

})

vm.$watch('lastName', function (val) {

  this.fullName = this.firstName + ' ' + val

})

上面代码是命令式的重复的。跟计算属性对比：

var vm = new Vue({

  data: {

    firstName: 'Foo',

    lastName: 'Bar'

  },

  computed: {

    fullName: function () {

      return this.firstName + ' ' + this.lastName

    }

  }

})

更好，不是吗？

计算 setter

计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：

// ...

computed: {

  fullName: {

    // getter

    get: function () {

      return this.firstName + ' ' + this.lastName

    },

    // setter

    set: function (newValue) {

      var names = newValue.split(' ')

      this.firstName = names[0]

      this.lastName = names[names.length - 1]

    }

  }

}

// ...

现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。

参考：Vue.js 计算属性_w3cschool
https://www.w3cschool.cn/vuejs/srfd1js2.html